2.3　版面布局设计

网站分为很多不同的网页，如主页、栏目首页、内容网页等，不同的网页需要不同的版面布局。与报纸、杂志不同的是，网站的所有网页组成是一个层次型结构，每一层网页里都需要建立访问下一层网页的超链接索引，所以网页所处的层次越高，网页中的内容就越丰富，网页的布局也就越复杂。

2.3.1　版面布局原则

网页设计与其他类设计有许多共同之处，如报纸等，也要遵循设计的基本原则。熟悉一些设计原则，再对网页的特殊性作一些考虑，便不难设计出美观大方的页面。网页设计有以下基本原则，熟悉这些原则将对页面的设计有所帮助。

1．主次分明，中心突出

在一个页面上，必须考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图像一般可以安排在这个部位，在视觉中心以外的地方，就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。图2-13所示网页上的内容主次分明，重点突出了酒店的会议设施、餐饮设施、康体娱乐设施和客房设施的图片。

2．大小搭配，相互呼应

较长的文章或标题，不要编辑在一起，要有一定的距离；同样，较短的文章，也不能编排在一起。对待图像的安排也是这样的，要互相错开，使大小图像之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。图2-14所示的图文搭配、大小呼应。

3．图文并茂，相得益彰

文字和图像具有相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气；页面上图像太多，缺少文字，必然会减少页面的信息容量。因此，最理想的效果是文字与图像的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。

4．简洁一致性

保持简洁的常用做法是使用醒目的标题，这个标题常常采用图形表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。一般每页使用的字体不超过3种，一个页面中使用的颜色少于256种。

要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距、文本，图形之间保持相同的间距。主要图形、标题或符号旁边留下相同的空白。

5．网页颜色选用

考虑到大多数人使用256色显示模式，因此一个页面显示的颜色不宜过多，应当控制在256色以内。主题颜色通常只需要2～3种，并采用一种标准色。图2-15所示网页主题颜色采用了两种。

6．网页布局时的一些元素

网页布局需考虑以下这些元素：格式美观的正文、和谐的色彩搭配、较好的对比度、使得文字具有较强的可读性、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间有足够的空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。

2.3.2　纸上布局

熟悉网页制作的人在拿到网页的相关内容后，也许很快就可以在脑子里形成大概的布局，并且可以直接用网页制作工具开始制作。但是对不熟悉网页布局的人来说，这么做有相当大的困难，所以这时，就需要借助于其他的方法来进行网页布局。

设计版面布局前先画出版面的布局草图，接着对版面布局进行细化和调整，反复细化和调整后确定最终的布局方案。

新建的页面就像一张白纸，没有任何表格、框架和约定俗成的东西，尽可能地发挥想象力，将所想到的内容画上去。这属于创造阶段，不必讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张草图，最后选定一个满意的来创作，如图2-16所示。

2.3.3　软件布局

如果不喜欢用纸来画出布局示意图，还可以用专业制图软件来进行布局（如Fireworks和Photoshop等），用它们可以像设计一幅图片、一幅招贴画、一幅广告一样，去设计一个网页的界面，再考虑如何用网页制作工具去实现这个网页。不像用纸来设计布局，利用软件可以方便地使用颜色、使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。图2-17所示是使用软件布局的网页草图。