HeadFirst Web设计之重点祥记1（同样是自己手动把书上的重点搬过来的~）

布局与导航
不论是把旧的网页翻新还是做一个新的网页，在制作时首先首先要想到网站的受众，这里就是角色登场的地方。角色就是代表一类受众的一个虚拟的用户，具有目标市场最显著的特征。角色根据真实资料而拟定。角色为两个最好(最普遍的两类用户)，若多于三种则会增加困扰转移你对手头项目的关注。接下来，我们就要根据角色考虑一些事情。
分辨率
不同人使用了不同的分辨率，如何让网页在所有情况下都有很好的效果呢？有三种方式：网页中使用javascript自动检测用户的分辨率并将他们导向最适合的网站版本；使用javascript载入分别适合各种分辨率的css的样式表；只设计一种网站，但它可在各种设备与分辨率上运作良好。

黄金法则
布局时，遵循黄金法则会让页面看起来更加平衡舒服，即把某个块的总长度*0.62就可以得到该块中主要内容区的长度，剩余的则为侧栏、导航、博客...由于直接计算不是很方便，而2/3非常接近0.62，故我们可以把某个长度三等份，其中两份放主要内容即可。仅此并不是吸引大家把注意力放在主要内容上的唯一方式，编排你的网页时，还要考虑两种平衡：对称平衡(出现在两侧的元素重量相同)&非对称平衡(两侧的元素没有依据中线均分，你会得到一个非常大的只有部分内容出现的元素，并由其他较小内容衬托);相较而言，水平黄金比例会好分一点(加载上grid.css和screen.css，然后在相应div里加上class="column span-x"即可),垂直方向上若想达到黄金比例，通常需要图片和css定位！布局什么的考虑好了，基本内容，图片，logo也都完成后，我们需要考虑页面的色彩！介绍一种工具：色轮。它是可以显示出各种色彩并呈现这些色彩之间的关系的环形图。

色彩与设计
某种色彩在色轮里的占一块，它对面的色彩称之为互补色或对比色；仅仅知道这个是不够的，我们还需要了解配色方案； 配色方案是一组互动良好的特定色彩。
配色方案的使用
首先选择你的基色(最能表现视觉隐喻及其他所有色彩所基于的色彩)，然后以配色方案创建实用调色板，配色方案有各种各样花哨的变化形式，如单色方案、类比方案、互补方案、三色方案、四色方案等，其中最常用的是三色方案。此时有一个很好的工具：https://kuler.adobe.com调色板！白圈圈住的颜色表示基色，(深色可能会让人觉得沉重，因此把基色的圆圈拖向中间或外圈，或者调整较深色彩的饱和度和不透明度，直到调出理想的浅色。)；另外，若觉得三色方案找出来的色彩显得单调，可以用四色方案(亦称为双互补方案)，它是最丰富的配色方案。(但要注意，处理四种不同色彩要花不少心思，且它们使用的份量不能均等，否则会让网站看起来眼花缭乱。)

智慧导航
导航系统非常重要！在导航nav的代码编写中，需注意兼顾视觉(visual)与语义(semantic)；语义可以让你编写出更专用功能更强的css规则！如在nav的无序列表的第一行(通常是主页)加上class="active"即可添加帮助用户知道目前所在网页的样式，而且有利于网站的可访问性(残障人士亦可很方便的访问)。导航要有一致性，即1.导航应该在用户希望导航出现的地方出现；2.链接给人以可以点击的样子；3.链接之间能很好的区分和识别。