网页版式布局的方法 网页版式布局的方法有两种,一种为手绘布局,另一种为软件绘图布局。 1.手绘布局 网页设计和写文章一样,如果能够事先打好一个草稿的话,就能够设计出优秀、高质量的网页。所以在实际的设计之前,要在纸上绘制出页面版式草图,以供设计时参考。这个草稿虽然不会给客户看,但是尽量绘制的简单、明了。具体步骤如下: $$ 准备工具。准备白纸若干,几只铅笔和一块橡皮,以免在设计时由于工具打断设计思路。 $$ 确定尺寸。根据实际需要的网页尺寸确定网页的屏幕尺寸。 $$ 绘制浏览器窗口。如图3.1所示,先在白纸上绘制出一个矩形,代表浏览器的窗口,整个页面的版式布局都在这个窗口中完成。 图3.1首先绘制一个矩形的范围 $$ 设计版式造型。选择一个适合主题的造型。例如:椭圆代表着柔和,适合作为流行、时尚的主题造型;矩形给人中规中矩、稳重的感觉,在网页中很多地方都使用矩形来划分页面的不同范围。如图3.2所示。 图3.2设计版式造型 $$ 绘制页眉。在草稿中绘制出页眉的位置。如图3.3所示。 图3.3绘制页眉 $$ 绘制文本和图片。在页面的空白区域加入文本和图片。如图3.4所示。 图3.4绘制文本 $$ 页面调整。通过上面几个步骤,一个页面的版式结构也就大致出来了,但是这只是一个初步的构想,最后还需要根据实际的情况来做相应的调整。如图3.5所示。 图3.5最后调整的草图 2.软件绘图布局 上述的方法同样也可以使用绘图软件来完成,可以使用Fireworks的图像编辑功能来设计网页版式布局,也可以使用WORD作为设计版式布局的工具。如图3.6所示,就是使用WORD设计的一个关于茶叶网站的版式布局。 图3.6使用软件设计的版式布局