网页版面布局与设计|DreamweaverCS5中文版教程

网站建设的目的是为用户服务，因此应根据网站建设的目的确定网站的布局和功能。例如，建立—个电子商务网站，就要根据消费者的需求、购买力、购买习惯等要素设计网页的功能。

其次，网站上的内容并不是大量的信息简单地堆积，这些信息必须通过一定的形式来体现，这就是网站结构、页面外观、页面布局等。同时，网页的设计要考虑到网页的加载速度，不能因为网页的加载时间过慢而使网站的眼球数大大降低。因此，网页在设计上切忌使用过多、过大的图片和过多的表格嵌套。

常见的网页布局形式大致有“厂”字形、“口”字形、“海报”形、“同”字形、“三”字形和“框架”形布局。

1.“厂”字形

这种布局最上方是标题和广告条，页面下方左面是菜单，右面显示页面内容，整体上类似汉字“厂”，所以称之为“厂”字形布局。这种布局条理清晰、主次分明，非常适合初学者学习，但略微有点呆板。

2.“口”字形

这种布局类似一个方框，上方是标题或广告条，下方是版权信息，左面是菜单，右面是友情链接，中间是网页效果与主要内容，页面布局紧凑、信息丰富，但四面封闭，给人一种压抑的感觉。

3.“同”字形

这是一些大形网站首页常用的类形，在网页最上面是网站的标题以及BANNER广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。

4.海报形(www.xing528.com)

这种布局就像平时见到的海报一样，中间是一幅很醒目、设计非常精美的图片，周围点缀着一些图片和文字链接。这种设计常用于一些时尚类和公司的首页，非常吸引人。但大量的运用图片导致网页下载速度很慢，而且提供的信息量较少，如图1-6所示。

图1-6 海报形布局

5.“三”字形

上面是标题或广告条一类的内容，下面是正文，一些文章页面或注册页面通常采用这种页面布局方式。

6.“框架”形

这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文，大部分的大形论坛都是这种结构的，有一些企业网站也喜欢采用。这种类形结构非常清晰，一目了然。但是这种结构在使用框架时有个问题，即不容易被搜索引擎找到。如果考虑到这一点，尽量少用带框架的页面。

总之，网页布局设计要按照网站的实际情况，根据网站受众的喜好来设计。这样才能使网站受到更多人的欢迎。设计版面布局之前可以先画出版面的布局草图，接着对版面布局进行细化和调整，反复细化和调整后确定最终的布局方案。