网站创建教程

做一个网站可能很有挑战性。可能很难知道从哪里开始。很多导游太小众或太死板。你需要的是对网站外观的完全控制，并对决定网站在目标市场上的外观和感觉的要素有一个扎实的了解。

为了与Medium优雅的极简主义设计保持一致，我将向您展示如何创建一个独特的、个性化的、功能强大的网站，而不必依赖有限且昂贵的第三方内容管理系统，如wordpress、wix或drupal。一个公平的警告-对于如此高水平的自由和缺乏成本的权衡是，你将需要投入努力。我写这本指南的目的是向你展示制作一个出色的网站所需要知道的一切，但不是通过将其降低到一个有限的水平来妥协。一个好的网站应该易于使用、鼓舞人心、易于定制，但又不能简单到无法改进当前或现有的功能。

在开发网站时，不可避免地会有一些代码组件让您感到困惑。重点不是什么都知道，而是在哪里尽可能有效地找到你需要的一切。了解基础知识肯定会有所帮助，因此我建议您至少学习一次HTML、CSS和JavaScript入门课程。Codecademy上提供的这些网站是一个很好的跳入网站的地方，但不是你必须要遵循这个网站建设教程的地方。然而，他们将在未来稍微澄清一些事情。

教科书和课程对提高常识很有帮助，但就我们的目的而言，最好的参考来源要么是快速的谷歌搜索(如果你知道要找什么)，要么就是你不知道的Mozilla和w3文档。链接嵌入在正文中，也列在本指南的末尾。大多数情况下，在返回代码之前，您只需要简单地提醒自己正确的语法或适当的方法。

开始任何项目最好的部分之一就是组装你的军火库。事先选择和编译适当的工具将节省您在路上的时间，并帮助您进入完成这一可怕挑战所需的流程状态！

首先，下载Sublime Text 3，这是一个针对编码进行了增强的自由文本编辑器。然后，导航到Github并创建一个免费帐户。我们需要这个来托管我们完成的网站。完成这个简单的设置过程后，打开Sublime Text并将您的第一个文档保存为“index.html”。现在您已经准备好开始编写代码了！

我们希望以一种有组织的方式建立一个简单的基础，以便我们可以在后面的步骤中轻松添加更多内容。下面的代码是我们开始使用的一些样板。

将此代码添加到文件并保存后，单击该文件即可在Web浏览器中打开它。您应该还看不到任何东西，但我们很快就会改变这一点。

通过保存文件并刷新浏览器，您现在应该看到您的更改生效了。

接下来，让我们在<；h2>；标记下添加一些<；div>；标记来分隔站点的不同部分。

这些标签将作为我们网站的部分。每个div的id属性将允许我们稍后出于样式目的选择它们。

我们希望网站能在所有大小的设备上运行，因此在前进的过程中，我们希望避免只对一两个观众设置进行看起来不错的更改。这就是所谓的响应性设计。测试页面响应性的一个好方法是更改浏览器窗口的大小，然后重新加载内容。如果内容在更大和更小的屏幕设置上看起来仍然很好，那么我们就成功了！

我们将创建的网站将是一个名为阿马迪乌斯的虚构英雄的登陆页-一个万事通，一个令人向往的人。我们追求的主题是精致、实用、简单和精致。但是，此设计的底层结构和原则将适用于更广泛的情况，您绝不会受到单一设计选择的约束。关键是要能够根据口味定制这些东西。

让我们把这个网站再分成几个部分。在我们的“主”目录中，我们将添加关于、服务、成就和联系信息的部分。

到目前为止，我们最近的所有更改在浏览器中都不可见，但稍后将提供所需的结构。

随着我们的子主题在“Main”中可用，我们现在将从顶部导航栏链接到它们。在“topNav”div中添加以下代码，以使我们的每个子部分都可以从顶部访问。

这将在顶部导航中创建链接，将用户导航到正确的部分。

现在一切都应该显示在一个屏幕上，但是阿马迪乌斯是一个很受欢迎的家伙，他有很多话要说。有了所有要说的东西，我们很快就会欣赏到从一个部分跳到另一个部分的能力。

到目前为止，我们已经避免了任何实际内容。现在，让我们花点时间将一些简单的文本添加到我们刚刚创建的部分中。我决定为Amadeus写一本虚构的传记，但是，如果您还没有准备好填写文本，另一个好的选择是访问Lorem Ipsum生成器来获取一些虚拟文本。如果您选择此路线，请确保在上线之前将所有Lorem Ipsum文本替换为您的实际内容。

<；div id="；>；<；h3>；关于<；/h3>；<；p>；Amadeus是一名医生、博学者、发明家、奥林匹亚运动员、冒险家、设计师、音乐家、魔术师和父亲。他曾在国防协会任职，是一名国际象棋冠军。有如此令人印象深刻的记录，难怪他还是一位世界知名的雕塑家和爵士乐爱好者！<；/p>；&p>；在业余时间，阿马迪斯喜欢和家人在一起，消费了相当惊人的正宗印度茶。<；/p>；<；p>；目前，阿马迪斯住在旧金山，对各种阿拉卡克的生命周期进行前沿研究。要了解更多信息，请查看下面他的<；a href="；#accomplishments"；>；accomplishments<；/a>；的长长列表。<；/p&>；/div>；

请注意，每个段落都包装在自己的<；p>；标记中。同样，在最后一段的末尾，我们可以使用<；a>；标记放置一个链接，这将把我们的观众带到正确的部分。如果您已经学习过我前面推荐的HTML入门课程，那么语法应该很熟悉。

现在我们有了一个关于部分，让我们填写其他部分。以下是更新后的服务部分：

<；div id="；>；<；h3>；服务<；/h3>；<；p>；Amadeus为行业专业人员提供高端合同服务。他的工作性质千差万别，但始终是任何专业的黄金标准。<；/p>；<；p>；虽然Amadeus很忙，但他喜欢协作，是任何工作空间的绝佳补充。当您的团队需要专家球员时，强烈考虑联系他。<；/p>；<；/p>；有关Amadeus服务的最新描述，请向他的秘书索要。他的秘书的联系信息显示为<；a href="；#contact"；>；here<；/a>；.<；/p>；<；/div>；

请注意，在最后一段中，我们添加了另一个指向Contact部分的链接。

现在是成绩部分。我们将使用一个无序列表(<；ul>；标记)来放置列表项目(<；li>；标记)来表示Amadeus取得的每一项成就。

<；div id="；>；<；h3>；成绩<；/h3>；<；p>；Amadeus在地球上的22年里完成了很多事情。以下是对他成就的简要总结，而不是完整的一览表。<；/p>；<；ul&>；<；创建了第一台空间安全咖啡机<；/li>；<；li&>；彻底改变了磁铁行业<；/li&>；<；永久消灭了17种病毒和80株细菌<；/li&>；<；发明了Zortex对撞机，提供农业创新和基础设施，养活了21个国家和整个羚羊品种<；/li&>；创建了第一个零排放燃煤披萨炉<；/li&>；；创造了唯一成功的人驾驶航天飞机降落在木星<；/li&>；；发展了一个失业率为零的庞大的城市大都市<；/li>；；

联系部分将遵循相同的一般原则。我虚构了信息，所以我不知道电子邮件和电话是否处于活动状态。

<；div id="；>；<；h3>；联系<；/h3>；<；p>；联系Amadeus的最佳方式是联系他的秘书Jean。她的电话在正常办公时间有人接听，也可以通过电子邮件联系到她。在所有主要的社交网络上也可以找到Amadeus。这些链接位于本页底部。<；/p>；&p>；电话：111-111-HERO<；/p>；<；p>；电子邮件：[email protected]<；/p>；<；/div>；

创建框架的最后一步是在页脚添加社交媒体链接和文案。我们可以通过查找社交媒体图标并使它们都链接到它们所代表的网站来做到这一点。

首先，我找到并下载了其中一些社交媒体图标。下载所需的文件时，请确保将其移动到与HTML文档相同的目录(文件夹)中。这将确保在我们构建和测试网站时，浏览器知道在哪里可以找到它们。

我选择了黑白的图标，但如果你追求不同的审美，彩色的图标可能是更好的选择。以下是我的选择：

将图标移动到工作目录中时，为它们指定比下载时提供的默认标题更短的名称会很有帮助。这样做将使我们的代码稍后更加清晰。

下载、重命名所有图像并将其移动到与HTML文档相同的文件夹中后，现在可以将它们添加到页脚。

<；div id="；footer&34；>；<；a HREF="；https://facebook.com"；>；<；img src="；facebookIcon.png"；alt="；facebook图标&34；>；<；/a>；<；a HREF="；https://instagram.com"；>；<；img src="；instagramIcon.png"；alt=。>；/a<；<；a HREF="；https://twitter.com"；>；<；img src="；twitterIcon.png"；alt="；>；<；/a&>t；<；a HREF="；https://youtube.com"；>；<；img src="；youtubeIcon.png"；alt="；youtube图标&a>；a HREF="；youtubeIcon.png"；alt="；>；<；/a>；<；a HREF="；youtubeIcon.png"；alt="；youtube图标&。/a>；<；a HREF="；https://www.medium.com"；>；<；img src="；mediumIcon.png&34；alt="；；>；<；/a&>；<；a HREF="；https://linkedin.com"；>；<；img src="；linkedInIcon.png"；alt="；LinkedIn图标&34；>。<；/div>；

每个<；img>；标签都包装在<；a>；标签中，并且需要两个属性-源(Src)和图像无法加载时要显示的替代文本(Alt)。备选文本对于搜索引擎优化(SEO)非常重要。<；a>；标记的超文本引用(Href)属性应设置为等于相应社交媒体页面的特定地址。这会将常规图像转换为链接。

现在，当您重新加载页面时，您应该会在底部看到您的六个社交媒体图标。

好的，太好了！我们现在有一堆内容。但是，如果您刷新浏览器，您会发现它看起来很可怕。文本横跨整个页面，看起来像是一次重建维基百科的古老尝试。更糟糕的是，页脚占用了大部分空间，并且不符合任何组织规则。现在是时候添加一些CSS，让我们的网站看起来更时尚、更光鲜了。在那之后，我们就可以现场直播了！

设计页面样式是事情变得有趣的地方。一个好的布局可以使页面充满活力，一个糟糕的布局可以扼杀它，所以在这个阶段重要的是坚持一个连贯的主题，并在我们所有的设计决策中牢记这个主题。正如我前面提到的，我打算采用流线型和简单化的设计，所以我会使用衬线字体，高对比度的灰度颜色，以及清晰、干净的照片。这将向我们的观众传达一定程度的专业精神和品位。此外，元素应该有足够的间距，并且足够大，以便被视为粗体和清晰。这种清晰度在任何设计中都是必不可少的，因为我们不想让观众被我们的目的搞糊涂。

此阶段的第一步是创建一个名为“style.css”的新文档。然后，我们需要将其链接到HTML文档的顶部，以便浏览器知道它的存在，并将其应用于我们的页面。与社交媒体图标一样，请确保CSS文件与HTML位于同一目录中。

接下来，让我们最终应用我们想要的样式。首先，我们可以通过将此代码添加到CSS文档来使所有内容居中。我们还可以添加一些设置来删除任何不需要的空格。

此时，文本全部居中，但您将看到我们在成就部分中的列表项看起来很奇怪，并且与它们的项目符号分开。我们可以通过向ul元素添加新样式来解决此问题。

太棒了！它看起来应该会好很多，但还有很多事情要做。

我们将通过交替背景颜色和文本对齐来使每个部分突出。为此，请添加以下CSS。对于颜色，我查找了冷灰色，并使用了我最喜欢的两个的十六进制代码。

这会奏效的，但请注意，情况开始变得相当糟糕。我们需要做一些严肃的造型。我们需要将社交媒体图标缩减相当多。我们可以在CSS中通过将页脚中所有图像的宽度更改为某个较小的像素数(小于100)来实现这一点。我还更改了页脚的背景以符合我们的风格。此外，现在是给图像一些填充的好时机，这样它们就不会被挤到容器里了。

在这一点上，一些事情正在形成，但另一些事情正在变得更加失控。在接近尾声之前，我们所做的大多数风格改变看起来都不会太大。这就像改建一座房子，在所有的建筑和粉刷完成之前，它看起来不会很好。

让我们在这些部分添加一些填充和页边距。只更改了每一行的最后两行。请注意，需要负边距来删除部分之间的任何垂直空格。

#关于，#成绩{背景颜色：#424246；文本对齐：左；页边距：-30px；填充：100px；}#服务，#联系人{背景颜色：#d4d9dd；文本对齐：右；页边距：-30px；填充：100px；}。

现在是处理文本颜色的好时机，让标题更令人印象深刻，然后编辑我们的链接，使它们看起来更现代和一致。

要更改文本颜色，请将其设置为我们为部分背景选择的颜色的反转版本。将下面一行添加到“关于”和“成就”部分。

太棒了！事情进展顺利！现在，让我们通过增加字体大小来使文本变得流行起来。

我们可以从Google字体中找到并添加完美的字体。我喜欢DM Serif文本，所以我通过将此行添加到HTML文档顶部的<；head>；标记中将其导入。

然后，我们可以通过将以下行添加到CSS文档中的Body来在页面上使用它。

好的!。这个网站开始看起来更专业了。现在是使用CSS更改<；h3>；标记大小的好时机，因为它们现在比正文副本小。

太棒了！这不是很多的额外工作，但却有很大的不同。接下来，让我们设置链接的样式。

我们可以从把它们全部改成黑色开始。这比之前试图破坏我们网页的艳丽的紫色更合适。只需将此代码添加到我们的CSS文件中即可。

接下来，我们可以改进顶部导航栏中的链接。我们将为它们添加颜色，然后让用户在将鼠标悬停在链接上时更加明显。为此，我们将向CSS文档添加以下属性。

#topNav{背景颜色：#232323；边距-底部：30px；填充顶部：2em；填充底部：2em；}#topNav a{COLOR：#d4d9dd；pADING-LEFT：3EM；PADDING-RIGHT：3EM；PADDING-TOP：2EM；PADING-BOOT：2EM；}#topNav a：HOVER{COLOR：黑色；BACKGROUND-COLOR：#616161；}。

好的!。我原本计划让标题背景变成灰色，但让它保持白色会很好地抵消内容的重置，并建立专业性。

在添加图像并上线之前，我们还有一个问题要解决。您可能已经注意到，当浏览器窗口很小时，导航栏看起来不再是最佳状态。要解决这个问题，我们需要结合响应式设计。它将为观众提供一个专为他们正在观看的屏幕大小而设计的页面。首先，在HTML的<；head>；标记内添加以下行。

接下来，介绍下面的CSS，它将为宽度小于900像素的屏幕显示不同的菜单。我还减少了内容的填充，这样文本将占据更多移动设备或平板电脑的屏幕。

@media screen and(max-width：900px){#topNav a{paddingtop：.5em；paddingBottom：.5em；display：block；}#topNav{paddingtop：0px；paddingBottom：0px；}#About，#services，#Contact，#Acquirements{paging：40px；}。

太棒了！现在我们的网站针对移动设备和桌面浏览器进行了优化。最后一段代码是一个媒体查询，它根据观众的屏幕大小改变显示。

最后一步是找到一张引人注目的图片来吸引眼球，然后将其插入我们页面的顶部。我在Unspash上发现了@Overide拍摄的一张城市风景画，看起来很棒。要包括它，只需在关于部分上方添加一个新的<；img>；即可。

在部署我们的网站之前的最后一步是在社交媒体链接下面的页脚添加一条文案行，告诉人们是谁创建和拥有这个网站。

将此行添加到HTML的最后一个链接下，用我的名字代替您的名字或公司。

非常出色!。我们刚刚从零开始建立了一个简单、反应迅速、专业的网站！可定制性是无穷无尽的，而且它是免费的！现在，让我们通过在GitHub页面上免费托管来向世界展示。

在庆祝了几分钟或几天之后，是时候把我们的工作发布到网上了。第一步是在GitHub上创建一个新的存储库。为此，请登录GitHub并单击屏幕右上角的“+”图标。然后从下拉菜单中选择“新建存储库”。给您的存储库起个好名字，如果默认选择了“Initialize this pository with a readme”选项，请取消选择该选项。单击“创建存储库”，然后通过在“快速设置”部分选择“上传现有文件”来上传您的文件。确保上传每个单独的文件，包括您使用的图像以及CSS和HTML文档。如果没有每个文件，您的网站将无法按预期运行。

上传文件后，导航到设置选项卡，该选项卡应该在窗口右侧存储库信息附近可见。向下滚动您的设置，直到您看到GitHub Pages选项。将“source”选项从“None”更改为“master Branch”。这将刷新页面，当您返回到Pages设置时，您现在应该会看到一个URL。点击它，你就会看到你的新网站在开放的互联网上实况转播！

祝贺你!。你做到了，而且没有花一分钱！如果你跟随教程，给我发一个评论或电子邮件，让我知道你做得怎么样，以及你希望我在未来改进的任何事情。

下面是一些有用资源的链接，用于查找字体、图像和语法信息。你也可以在My GitHub上查看所有代码，以防你的网站看起来不像计划的那样。

本教程向您展示了如何制作静态登录页面。对于动态用户体验，我们需要使用JavaScript或后端编程语言。我。

..