1.7 网站的制作流程

在开始建设网站之前应该有一个整体的规划和目标，规划好网页的大概结构后即可着手设计，下面介绍网站建设的基本流程。

1.7.1 前期策划

网站的前期策划对于网站的运作至关重要，规划一个网站时，可以先用树状结构把每个页面的内容大纲列出来，网站规划结构如图1-21所示。尤其是当要制作一个很大的网站时，更需要规划好，还要考虑到以后的扩展性，以免制作好后再更改整个网站的结构。

1．确立目标和需求

制作网站必须有明确的目标。要明确网页使用的语言与网站的主题，运用各种手段充分表现出网站的特点和个性，这样才能给访问者留下深刻的印象。

2．收集素材

明确了网站的主题之后，就要围绕主题收集素材。如果想要网站内容生动，能够吸引更多的访问者，就要收集精美的素材，包括图片、文字、音频、视频及动画等。

3．规划站点

一个网站设计得成功与否，在很大程度上取决于设计者的规划水平。网站的规划包括的内容很多，如网站的结构、颜色的搭配、版面的布局、文字及图片的运用等。只有在制作网页之前把这些方面都考虑到了，制作出的网页才能够具有特点和吸引力。

4．网页设计总体方案主题鲜明

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色做出定位，规划网站的组织结构。

5．导向清晰

网页设计中的导航使用超文本链接或图片链接，使浏览者能够在网站中自由前进或后退，而不用使用浏览器上的前进或后退按钮。在所有的图片上使用“ALT”标识符注明图片名称或解释，以便那些不愿意自动加载图片的观众能够了解图片的含义。

6．较短的加载时间

进入网站时等待的时间过长，会使浏览者对网站失去兴趣，在互联网上等待30s与我们在日常生活中等待10min的感觉相同。因此，建议在网页设计中尽量避免使用过多的图片及过大的图片，将主要页面的容量控制在50KB以内，确保普通浏览者的页面等待时间不超过10s。

7．网站测试和改进

网站测试实际上是模拟用户访问网站的过程，用以发现问题并改进网站设计。

8．内容更新

网站建立完成后，需要不断更新网页内容。站点信息的不断更新，可以让浏览者了解到即时的信息，同时可以保持网站的更新速度。

1.7.2 原型设计

通过前期策划确认了网站的大致方向之后，原型设计师就可以利用前期策划的内容，设计出一款符合用户客观需求的原型设计页面。

原型必须在先启阶段的初期或在精化阶段开始时建立。整个系统（包括它的“实际”用户界面）的分析、设计和实施必须在原型建立后进行。

创建用户界面原型的主要目的是在实际设计与开始开发之前揭示和测试系统的功能与可用性。这样，就可以在将太多时间与资源投入开发活动之前，确保所构建的系统是正确的。

为了成功进行初期测试，开发原型的开支必须远远低于开发实际系统的开支，同时这个原型应具备足够的功能，可以进行有意义的使用测试。

原型是交互设计师与PD（产品负责人）、产品经理、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验保证该产品的可用性。

可建立3种基本原型：①图纸，即在图纸上绘制产品原型图，如图1-22所示。②位图，即在绘图工具中绘制产品原型图，如图1-23所示。软件Axure RP、Sketch和PPT都可以绘制产品原型图。③可执行文件（Executable File），即交互式产品原型图。在很多项目中，需要按上述顺序使用3种原型。

说明：

可执行文件指的是可以由操作系统进行加载执行的文件。在不同的操作系统环境下，可执行程序的呈现方式不一样。在Windows操作系统下，可执行程序可以是“ .exe”“ .sys”“ .com”等类型的文件。

任何一款成功的网页都需要以坚实的产品概念为基础，因为概念决定了产品最终完成的潜力。

在一般情况下，交到网页设计师手里的都是网页的产品原型图。当然这是产品经理反复斟酌并且与参与研发的人员开会讨论之后定下来的一个交互式产品原型图。

1.7.3 页面美化

网页设计制作是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂的顺序来进行。先大后小是指，在制作网页时，先把大的结构设计好，再把小的部分逐渐设计出来并进行完善。先简单后复杂是指，先设计出简单的内容，再将复杂的内容设计出来并进行完善，这样在出现问题时方便进行修改。如果有一个好的网站策划与分工，后台程序制作可以和美工设计同时开始。

1．网页美工设计

美工设计人员应该在网站策划阶段就与用户充分接触，了解用户的需求，以便在设计过程中有一个基调，从而提高设计稿的被认可率。

美工设计人员首先要对网站有一个整体的定位，然后根据此定位分别设计出首页、二级栏目及内容页的设计稿。

一般要设计1～3套不同风格的设计稿交由用户评论，再按用户的需求设计出页面的设计图。

2．静态页面的制作

美工设计人员在设计好各个页面的效果图后，就需要制作成HTML页面，以供后台人员将程序整合。静态页面的制作可分为以下两步。

1）观察

首先要对设计图页面的布局、配色有一个整体的认识，在对设计图进行了初步的了解之后，就对如何在HTML页面里布局有了规划。然后根据规划对设计图进行拆分、输出，以免匆匆拆分后又发现在HTML里面无法实现效果或效果不好而不得不返工。

2）拆分

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

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

（2）提取尺寸。按照设计图的尺寸来搭建网页。

（3）分离背景图片及特殊边框。背景图可能是大面积重复的图案，也可能是一张图片，一般和内容没有关系的装饰性图片都可以考虑制作成背景图。边框的使用方法和背景图片类似，不过根据情况往往需要单独输出。

（4）分离图片。分离出与内容相关的图片。

3．组装

组装就是把分离出来的元素，按照一定的方法组合成与设计图效果类似的页面。使用CSS布局方式制作网页一般分为以下几步。

· 构建层结构

· 插入内容

· 样式表美化

· 细节处理

· 优化样式表

提示

很多时候设计图的实际情况会和之前的规划有较小的差别，应多注意尺寸的设定。

1.7.4 页面开发

程序开发人员可以先开发功能模块，然后再将其整合到HTML页面内，也可以用制作好的页面进行程序开发，但是为了使程序有很好的一致性和亲和力，推荐采用第一种方法。

1.7.5 后期维护

每一个网站都应该由专业人员定期进行更新和维护。网络的最大优势就是信息的实时性，只有快速的反映、准确的报道，才能吸引更多的浏览者。

后期维护的内容主要有以下几点。

（1）服务器及相关软件、硬件的维护，对可能出现的问题进行评估，制定相应的措施。

（2）数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。

（3）内容的更新、调整等。

（4）制定网站维护的相关规定，将网站维护制度化、规范化。

很多网站的人气很高，肯定和网站内容的定期更新是分不开的。也有很多网站由于种种原因，数月才更新一次，这样就违背了网站最基本的商业目的。网站不同于购买的一件商品，会随着时间的推移而贬值、陈旧，只有不断地融入新的内容、推陈出新，才会具有创造力，才能发挥网站的商业潜能。