在设计完成网页的各种界面元素后,即可根据这些界面元素,使用 Photoshop或 Fireworks等图像处理软件制作网页的概念图。

网页概念图的分辨率应照顾到用户的显示器分辨率。针对国内用户的显示器设置,大多数用户使用的都是17英寸甚至更大的显示器,分辨率大多为1024×768以上。去除浏览器的垂直滚动条后,页面的宽度应为1003pX。高度则尽量不应超过屏幕高度的5~10倍(即620×5=3100pX到6200pX之间)。

概念图的作用主要包括两个方面。一方面,设计者可以为用户或网站的投资者在网页制作之前先提供一份网页的预览,然后根据用户或投资者的意见,对网页的结构进行调整和改良。另一方面,设计者可以根据概念图制作切片网页,然后再根据切片快速为网页设计目的,提高网页制作的效率。

切片的优化是十分必要的。优化后的切片可以减小用户在访问网页时消耗的时间,同时提高网页制作的效率。

对于早期以调制解调器用户为主的国内网络而言,需要尽量避免大面积的图像,防止这些图像在未下载完成时网页岀现空白。通常的做法是通过切片工具将图像切为多块,实现分块下载。然而随着网络传输速度的发展,用户用于下载各种网页图像的时间己经大为缩短,请求下载图像的时间已超过了下载图像本身的时间。下载1张10OKB的图像,消耗的时间要比下载10张10KB的图像更少。

因此,多数网站都开始着手将各种小图像合并为大的图像,以减少用户请求下载的时间,提高网页的访问速度。具体实际可以参考下面的网站：http://www.zhiyuanit.net.cn/

用 Photoshop或 Fireworks设计完成网页概念图,并制作切片网页后,最终还是需要输出为 XHTML+CSS的代码网页技术的发展,使网页的制作越来越像一个系统的软件工程。从基础的XHTML结构到CSS样式表的编写,再到 Javascript交互脚本的开发,是网页制作

的收尾工程。在设计完成网页后,还需要对网页进行优化,提高页面访问速度,以及页面的适应性。

设计者应按照web标准编写各种网页的代码,并对代码进行规范化测试。通过W3C的官方网站验证代码的准确性。优化页面的同时,还应根据当前主流的各种浏览器(IE10、360、 Safari、 Opera、 Chrome等)和各种分辨率的显示设备测试兼容性,编写 CSS Hack和 Javascript检测脚本,以保证网页在各种浏览器中都可正常显示。