1.8 静态页面的制作流程

在大部分情况下，网页设计与制作人员需要实现的是静态页面，静态页面的制作看似简单，似乎只是把设计图转变成可在浏览器中浏览的页面即可。但是如何让页面和设计图保持一致且符合网络浏览的规格，如何让页面既像图纸中那样美观又有较快的加载速度和用户友好性，都是需要重点考虑的问题，决定了网站能否留住更多的浏览者。

1.8.1 观察设计稿

拿到一张设计图，不要立即就用软件来拆分和输出图片，首先观察一下图纸，对页面的布局、配色有一个整体的认识，在对设计图有了初步的了解之后，就需要对如何在HTML页面里布局有一个大体的规划，然后根据这个规划对设计图进行拆分、输出，以免匆匆拆分之后又发现在HTML里面无法实现效果或效果不好而不得不返工。

1.8.2 拆分设计稿

当对于如何拆分设计图和组成HTML页面有了规划之后，就可以将图纸拆分成多块，以便在组装页面时使用，一般需要从图纸中拆分、提取以下几点内容。

1．分离颜色

其中一般包括3部分配色：页面主辅颜色搭配的基本配色、普通超链接的配色和导航栏超链接的配色。

2．提取尺寸

虽然说按照设计图的尺寸来搭建网页才符合图纸上的设计，但也不是说必须严格按照设计图纸来做，有些时候可以灵活掌握。

3．分离背景图

背景图可能是大面积重复的图案，也可能是一张图片，一般和内容没有关系的装饰性图片都可以考虑制作成背景图。

4．分离图标及特殊边框

小图标及花边可以给网页添加细节和亮点。从理论上讲，边框的使用方法和背景图片的类似，不过根据情况往往需要单独输出。

5．分离图片

与内容相关的图片需要单独输出。

1.8.3 网页设计实现

网页设计的实现可以通过两种方式：一种是传统的表格布局方式；另一种是CSS布局方式。但是由于表格布局比较复杂，现在大多数的设计师都是使用Div+CSS的方式来实现网页的，所以本书就不介绍表格布局方式了。

在使用Div时不需要像在表格中一样通过其内部的单元格来组织版式，通过CSS强大的样式定义功能可以更简单、更自由地控制页面版式及样式。

基于Web标准的网站设计的核心在于如何使用众多Web标准中的各项技术来达到表现与内容的分离，即网站的结构、表现、行为三者的分离，只有真正实现了三者分离的网页设计，才是真正意义上符合Web标准的网页设计。推荐使用XHTML（可扩展超文本标记语言）以更严谨的语言编写结构，并使用CSS来完成网页的布局表现，因此掌握基于CSS的网页布局方式，是实现Web标准的基础环节。

复杂的表格设计使得布局极为困难，修改更加烦琐，最后生成的网页代码除了表格本身的代码，还有许多没有意义的图像占位符及其他元素，文件量庞大，最终导致浏览器下载解析速度变慢。

而使用CSS布局则可以从根本上改变这种情况。CSS布局的重点不再是表格元素的设计，取而代之的是HTML中的另一个元素“Div”，Div可以理解为“图层”或一个“块”，Div是一种比表格简单的元素，语法上只有从<div>开始和到</div>结束，Div的功能仅是将一段信息标记出来用于后期的样式定义。

提示

这里的要标记的“一段信息”，就是网页的“结构”部分，通过Div的使用，可以将网页中的各个元素划分到各个Div中，成为网页中的结构主体，而样式表现则由CSS来完成。