Web从设计到代码

该篇内容主要来自《写给程序员的Web设计书》一书，有兴趣的朋友可以看一看。

第一部分：设计

需求

1. 服务于目标用户，收集用户需求，与用户保持交流，明白用户到底需要怎样的页面效果；
2. 设计草图，可以采用一些约定成俗的布局风格，可以多去设计网站上看一看，或者把平常自己遇到的心仪的网站拿出来，看能不能取其精华、去其糟粕，设计自己的网站；
3. 挑选草图，与上司或者客户一起。

配色

1. 色彩基础
   -色调（物体的颜色）、饱和度（颜色在图像中的分量，高饱和度色彩绚丽，低饱和度色彩发灰，有种水洗的效果）、亮度（让颜色变暗或者变亮）；
   -加法混色（屏幕中的混合方式，三原色：红绿蓝，RGB）、减法混色（印刷中的混合方式三原色：红黄蓝，CMYK）
2. 色彩感知环境
   -Fluting指的是眼睛会把相近的颜色进行混合
3. 用颜色唤起感情
   -暖色（红、黄、橙）
   -冷色（蓝、绿、紫）
   -中性色（黑、白、棕、米、灰）
4. 配色方案
   混色色轮：
   Color Scheme Designer， RYB混色色轮
   Adobe Kuler， RGB混色色轮
   -单色方案：只用到一种色调
   -相似色方案：一种颜色两边的颜色就是这种颜色的相似色
   -互补色方案：色轮上相对的两种颜色为基准色
   -分离互补色方案：选择与主色的互补色相邻的两个颜色
   -网络安全色：
5. 创建配色方案
   -使用理论选择：通过混色色轮，改变饱和度和亮度，选择一波颜色
   -根据自然选择：找一个看得很爽的照片，提取其中部分颜色，用ColorSchemer Studio抓取颜色，
6. 小结
   通过理论和自然结合方法，选择一部分颜色，然后将他们记录下来，如：
   Header #FFEE00
   Main #FFF8E4
   ……

字体和排版

1. 深入字体：所有字母都是基于一条基准线的，而小写字母x的高度被用来定位等分线，等分线和基准线之间的高度被称作字体的x高度
2. 字体类别：
   -衬线字体：字母通常会带有一条小尾巴，比如Times New Roman（为印刷设计的，本人不太喜欢，不过大多正式的文档都会用到这个字体），在做标题、LOGO的时候，衬线字体给人一种优雅、权威的感觉
   -无衬线字体：字母的笔画从头到尾都是均匀的，比如Arial和Helvetica、Verdana，适合在网页上阅读，是网站主要内容的首选字体
   -等宽字体：每个字母所占的横向空间都是相同的，适合显示源代码，比如Courier
3. 字体的限制：别人电脑上压根没有安装这种字体，就显示不出你要的效果，所以一般要使用网页安全字体，或者用图片替换某些文字，还可以用字体栈来定义备用字体。
4. 使用基线网格
   -使用浏览器默认设置来安排字体流（text flow），不过不太好看哟，所以还是有必要弄懂这个字体流哟
   -基线网格：一种纵向排列的网格，这些横线支撑着文本中的文字，横线之间的距离可以作为基本计量单位，横线本身是所选字体的基准线（就像写作业的本本一样，这样才能把一行文字写直咯，而不是写着写着就往上跑咯）
   -行距：指的是两条基准线之间的距离，在CSS中是line-height
5. 中文字体：对中文网站而言，宋体适应性最强，其次是黑体，再者是微软雅黑
6. 小结：首先选择一个基准字体大小（12px），然后建立网格（18px），基准字体的大小乘以1.25或1.5得到的值作为行高，图片裁剪时也做成行高的倍数比较好
   

第二部分：图像设计

（这部分偏向设计，都是用Illustrator和Photoshop完成的，我就大致看了看）

LOGO

推荐使用Illustrator

设计样式页：页面结构

1. 关于图层：非常强大，推荐使用PhotoShop
2. 基本结构：用长方形的思维来思考页面结构
   -确定屏幕大小：比常用的屏幕小一个level，如目前市面上1024*768比较多，那我们制作时网页大小就定为900*756，分辨率72dpi
   -设置网格：用辅助线来划定区域

页面内容

根据网页的需要，设计搜索框、按钮、文本框，各种七七八八的东西

第三部分：代码

（程序猿终于上线了）

用HTML做出主页

1. 网页标准化，虽然不标准也不会有很多问题，但是有时候好多稀奇古怪的问题，所以还是按照标准来比较好。
2. 设计页面的结构，页头、页中、页尾都分别包含什么内容，页面做成一栏的结构还是两栏……不要用table标签来布局，已经落伍了。
3. 主页的框架
   -DOCTYPE（曾被面试官问到这个问题，后悔当时没看到这一部分T-T）
   
   
   
   -链接
   
   • 绝对超链接：包含了链接源的完整地址
   • 相对链接：定位到本目录下的子文件夹中的一个文件
   • 锚点：链接到本页面上的某个位置，但是先要在页面上定义一个有名字的锚点，对于内容丰富的长页面极为有用，感觉就像这个页面的目录一样

<a name="ingredients"></a><h1>Ingredients</h1>...]]><!--然后创建一个能够跳转到这个部分的链接--><a href="#ingredients">Ingredients</a>  ]]>

推荐Firefox，Web Developer工具栏，Firebug
4. 小结：这是一个漫长的过程，慢慢来吧，刚刚瞄了一眼HTML5，感觉很不一样，等过一段时间要去好好学学

使用CSS布局

1. 招人嫌的浏览器：确实很讨厌！
2. 处理不同格式的图像：