作者：元云 | 来自：每日鲜果精选 作者：元云 | 来自：每日鲜果精选 收起全文 原作者：Tessa Thornton原文链接：Design and Code Your First Website in Easy to Understand Steps译者：元云译文：建立一个网站的介绍(为新手准备) 建立一个网站的流程介绍 Aug 3rd in HTML & CSS by Tessa Thornton 翻译：元云 在本指南中，我会以简单易的步骤来介绍如何和建立我们的第一个网站。教程是为初学者而准备的，能够让初学者学到一些技能，了解一些工具来完成自己的第一个符合的网站。 这是一个崭新的一周;也许是时间学习一门新的技能了！ 我是多伦多大学的学生，主修哲学。最近，我把网页设计作为一种爱好，在很短的时间里从中学到了很多东西，非常感谢在线大量资源。我想分享我的经验和知识给新学员们。 第1步-我们要做什么 我们将设计和编写一个非常简单的网站。壮观的设计？它不是，但是它对于教你如何掌握基础的编码技术却是非常有效果。 第2步-准备工作 你需要什么？ 本教程，假设你是从来没有编写建立过网站的，或者只有少数的几次经验。然而，为了完成本教程，您还需要准备以下的内容： ​ Photoshop或类似的图像编辑器 ​ 一个编辑器（更晚些时候） ​ 了解基本的HTML，它是如何工作的，基本语法和标签。 ​ 要跟上速度的话，请查看官方资源在W3Schools ，在那里你可以了解到这个教程需要的所有的基本知识。 ​ .同样的对CSS ，你要知道选择器如何工作并且熟悉基本的属性知识。最好的资源是仍然在W3Schools ​ 浏览器，很明显。我使用的是Firefox ，如果你想让你的网站，和我的截图每一步都一样话，那么你也应该用FF Layout布局 我们做一个非常简单的网站，有4个基本要素：标，内容，侧栏和页脚，布局会是这个样子： 这在动手之前，先在纸面上或在Photoshop上固定你的布局设计，然后再开始，这步骤是一个非常好的简化您的工作流程和组织您的构思的做法。 第3步-使用入门 新建一个Photoshop文件， 1000px*1200px 。 我们也可以稍后更改设置。因为我用笔记本所以我设置的高宽比较小一些，如果你喜欢的话可以随意设置更宽的值。 现在，我还不打算在这里讨论屏幕分辨率和最佳网站宽度。所有现在你需要知道的只是，我们的网页的内容将是800px宽，这没关系是可以的。因此，在我们宽为1000px的文件里，我们拖动了100和900px的标尺设置宽度。在我们的设计里有了一个侧边栏，我已经决定将其设置为三分之一的宽度页。三分之二的800是530 ，所以让我们建立一个更宽的宽度630px 。我们也会建立一个不错的背景颜色＃ ebe8e8 。 Step 4 - Header第4步-头部 用矩形工具，画一个大的，蓝色方块在文件的上方， 170px高，颜色是＃ 23b6eb 。下一步画一个小的，深灰色块在网页的最上方，我用＃ 5d5a5a Step 5 - Highlight第5步-高亮 现在我们要添加高亮效果在蓝色标题区。创建一个剪报遮罩层以上的蓝色，然后使用，软刷（ x 400像素宽） ，并挑选颜色有点轻的蓝色背景。 现在用笔刷刷在中间部位，尽量不要碰到顶部边缘。图层为混合模式 第6步-导航栏 现在我们要添加另外一个导航栏，我们可以使用渐变，从＃ e2e3e4到＃ bebdbd Step 7 - Footer第7步-页脚 接下来，让我们画一个灰色方块的在底部，我选择了一个颜色比顶部栏更暗灰些颜色 Step 8 - Logo第8步-标志 Background背景 LOGO，我们要画一个矩形，并添加另外一个锚点另一端，然后将其拖放到一边。 其次，添加图层混合选项：渐变叠加＃ aec457从＃ cdf399 ，1px内部描边 Text文字 现在到了文字：大和粗体 Font: Myriad Pro Style: Bold Size: 60px Color: #36809a 添加一个向内的投影 第9步-副标题 下一步添加很短的副标： ​ Font: Arial ​ Style: Bold ​ Size: 30pt ​ Color: #e4dfdf 第10步-导航 在导航栏中的文字要漂亮而且够大，平均布局在导航中。 ​ Font: Arial ​ Style: Bold ​ Size: 30pt ​ Color: #676666 步骤11 -主要内容 到了填写内容到页面中的时间了，用h2和h3组成标题，让文本内容宽度占页面的2/3 文字样式： h2 Header: ​ Font: Arial ​ Style: Bold ​ Size: 36pt ​ Color: #0e5d7a h3 Header: ​ Font: Arial ​ Style: Bold ​ Size: 24pt ​ Color: #444444 Paragraph: ​ Font: Arial ​ Style: Normal ​ Size: 14pt ​ Color: #595858 在"latest updates"标题下的日期，需要使用一个小标签来区分。字体颜色和段落一致，不过是12px大小。由于我很懒，就复制这段内容两边填充内容。 步骤12 -侧栏 Links友情链接 侧栏用背景色#d4d6d3，描边1 px #bebdbd侧栏填写一些内容，您可以使用我在这里提供的的图标我 字体： h3 Headers: Font: Arial ​ Style: Normal ​ Size: 24pt ​ Color: #044055 ​  ​ List items: ​ Font: Arial ​ Style: Normal ​ Size: 18/14pt ​ Color:#37373 Button按钮 下一步我们将增加一个“加入我们的团队”的按钮在Contributors下。按钮是一个长方形，渐变色质和logo相同，描边 1px#c7c7c7 。 The text is:案文是： ​ Font: Arial字体：字体 ​ Style: Normal风格：正常 ​ Size: 24pt大小： 24pt ​ Color: #434343颜色： ＃ 434343 第13步-页脚 接下来一步就是在页脚处添加你想要添加的任何信息，版权或其他。 The font is: ​ Font: Arial ​ Style: Normal ​ Size: 14pt ​ Color: #e0e2e2 页脚部分的设计没有什么特别之处，做的比较简单，能够让你更容易完成接下去的步骤。 第二部分-切片PSD 步骤14 -切片工具 现在，您可能没有使用过切片工具，但它确实非常简单。 Header标题 切取1px宽度的头部背景 发光效果 宽度800px Footer页脚 切取底部1px宽度 其他的东西 按钮背景,1px宽度 Step 15 - 存储所有切片 看到自己保存的图片 先不要关闭ps,我们仍然需要挑选颜色，字体，等 Part 3 - HTML Step 16 - 准备开始 选择一个编辑器开始编写 Step 17 - 建立文件夹 建立一个文件夹,包含一个images文件夹 和一个 index.html页面 使用编辑器编辑 Step 18 - 编辑我们的index.html 页面 ; NOTE: 这是一个很好的习惯,在标签结束后留些注释 可以在草稿上,标注自己的架构思维,能够让你很清晰的继续后面的html工作