遵循

Web 标准的网页设计工作流程(一)

经常有读者来信询问在实际开发一个网站的时候，具体是按照什么工作流程进
行工作的，一个网站到底是如何从零开始一点点做出来的呢

?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页
面的过程，我们可以把一个页面的完整设计过程分为

7 个步骤，如下图所示。

在图中，这个过程分为了

7 个步骤，并且说明了这 7 个步骤相应使用的工具。这

7 个步骤依次为：

1. 内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分
清层次，以及重要程度。

2. 结构设计：根据内容分析的成果，搭建出合理的 HTML 结构，保证在没有任
何

CSS 样式的情况下，在浏览器保持高可读性。

3. 原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的
布局，原型线框图是设计负责人与客户交流的最佳媒介。

4. 方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视
觉效果的页面设计方法。

5. 布局设计：使用 HTML 和 CSS 对页面进行布局。

6. 视觉设计：使用 CSS 并配合美工设计元素，完成由设计方法到网页的转化。

7. 交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。

下面具体解说一下，例如要设计出一个如下图所示的页面。这是为一个假想的名

“

为

Baby Housing”的儿童用品网上商店制作的一个网站首页。