简介
本教程写的大概可以归为国内美工职位的工作内容,
亦或是 "设计师"+"页面重构工程师"的工作内容.
适合阅读对象:初学者
文章介绍了如何建立一个简单的网页的步骤，
包括三大个部分:
设计(设计师做),
页面重构(页面重构工程师),
校验w3c(页面重构工程师);
详细的有,
1.如何在photoshop中设计你的页面
2.如何在photoshop中切图你的设计稿
3.如何建立html页面，定义页面的架构
4.添加页面类容
5.添加 CSS
6. html验证，CSS验证
非常简单详细，但却是非常规范的。
--------------------------------------------------------------------
第1步-我们要做什么
我们将设计和编写一个非常简单的网站。壮观的设计？它不是，但是它对于教你如何掌握基础的编码技术却是非常有效果。
第2步-准备工作
你需要什么？
本教程，假设你是从来没有编写建立过网站的，或者只有少数的几次经验。然而，为了完成本教程，您还需要准备以下的内容：
- Photoshop或类似的图像编辑器
- 一个编辑器（更晚些时候） 比如说:DW,
- 了解基本的HTML，它是如何工作的，基本语法和标签。
- 要跟上速度的话，请查看官方资源在W3Schools ，在那里你可以了解到这个教程需要的所有的基本知识。
- .同样的对CSS ，你要知道选择器如何工作并且熟悉基本的属性知识。最好的资源是仍然在W3Schools
- 浏览器，很明显。我使用的是Firefox ，如果你想让你的网站，和我的截图每一步都一样话，那么你也应该用firefox
- 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,我们仍然需要挑选颜色，字体，尺寸等*(写在一张纸上,方便我们查看)
