2.3 常见的版面布局形式

网页的版面布局主要指网站主页的版面布局，其他网页应该与主页风格基本一致。为了达到最佳的视觉效果，应考虑布局的合理性，使浏览者有一个流畅的视觉体验。

设计版面布局前需要先画出版面的布局草图，接着对版面布局进行细化和调整，反复调整后确定最终的布局方案。常见的网页布局形式有“国”字型、“厂”字型、“框架”型、“封面”型和“Flash”型等。

2.3.1 “国”字型布局

“国”字型也可以称为“同”字型，是一些大型网站经常使用的类型，如图2-8所示。这种布局最上面是网站的标题及横幅广告条，接下来就是网站的主要内容，左右分列一些小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种布局是网上最常见的一种布局类型。

2.3.2 “厂”字型布局

“厂”字型结构布局是指页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息，整体效果类似“厂”字，所以称之为“厂”字型布局，如图2-9所示。这是网页设计中使用较广泛的一种布局方式，一般应用于企业网站中的二级页面。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果色彩搭配不当，很容易让人厌烦。

2.3.3 “框架”型布局

框架型布局分为以下三种。

1．左右框架布局

采用左右框架型布局的网页分为左、右两部分，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。大部分大型论坛和网页教程都使用这种布局，有一些个人网站和企业网站也喜欢采用这种布局。这种布局结构非常清晰，一目了然。

2．上下框架型布局

上下框架型布局与左右框架型布局类似，区别仅仅在于这种布局分为上、下两部分，如图2-10所示。

3．综合框架型布局

综合框架型布局是左右框架型布局与上下框架型布局的结合，相对较复杂，类似于拐角型布局，只是采用了框架结构。

2.3.4 “封面”型布局

“封面”型布局一般出现在一些网站的首页，由一些精美的平面设计结合一些小的动画组成，在网页中放上几个简单的链接或者仅仅是一个“进入”的链接，甚至直接在图片中加上链接而没有任何提示。这种布局需要精心设计，能给人带来赏心悦目的感觉，如图2-11所示。

2.3.5 “Flash”型布局

“Flash”型布局其实与“封面”型布局类似，只是这种布局用了目前非常流行的Flash技术。由于Flash功能强大，页面所表达的信息更丰富，因此其视觉效果和听觉效果更能吸引浏览者的访问，其布局如图2-12所示。