2.3　网页布局的常见类型

在设计网页时，设计师需要从整体上把握好各种要素的布局，只有充分地利用、有效地分割有限的页面空间，创造出新的空间，并使其布局合理，才能设计出美观的网页。在设计网页时，设计师需要根据不同的网站性质和页面内容选择合适的布局类型，本节将介绍一些常见的网页布局类型。

2.3.1　国字型

国字型是网页上使用最多的一种布局类型，是综合性网站常用的版式。图2-9所示为国字型网页的线框图和实际的网页展示。

在通常情况下，上边是网站的标题和banner，左边是主菜单，右边是链接等次要内容，中间是主体，与左右一起罗列到底，下边是网站的一些基本信息、版权声明、联系方式等。这种版式的优点是页面充实、内容丰富、信息量大，缺点是页面拥挤、不够灵活等。

2.3.2　拐角型

拐角型又被称为T字型，和国字型相比，只是在布局上有略微的区别，基本类似。

拐角型就是网页上边和左右两边相结合的布局方式，通常右边是主体，比例较大。在实际运用中，设计师还可以改变拐角型布局的形式。例如，改为左右两栏式布局，一半是正文，另一半是形象的图像或导航。图2-10所示为拐角型网页的线框图和实际的网页展示。

2.3.3　标题正文型

标题正文型的网页布局类型相对简单，一些纯文字网页、搜索引擎类网页和网站的注册页面都比较适合使用标题正文型的网页布局类型。图2-11所示为标题正文型网页的线框图和实际的网页展示。

标题正文型的布局方式类似杂志的排版方式，页面上边是标题或一些与标注、引导标识类似的元素，中间是正文部分，下边是一些版底信息。

2.3.4　左右框架型

左右框架型是一种左右分割的网页布局类型，一般左边为导航，有时最上边会有一个小的标题或标志，右边为网页正文内容。这种类型的网页布局结构非常清晰且一目了然。图2-12所示为左右框架型网页的线框图和实际的网页展示。

大部分大型论坛都采用左右框架型结构，有一些企业网站也喜欢采用左右框架型结构。这种网页布局的特点就是结构清晰、布局明了。

2.3.5　上下框架型

上下框架型与左右框架型的布局结构类似，区别仅仅在于它是一种上下分割的网页布局结构，采用这种布局结构的网页，通常上边放置网页的标志和导航，下边放置网页的正文内容。图2-13所示为上下框架型网页的线框图和实际的网页展示。

2.3.6　封面型

封面型的布局结构基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，再放上几个简单的链接或者仅有一个进入网页按钮，甚至直接在首页的图片上设置链接而没有任何注释。图2-14所示为封面型网页的线框图。

封面型网页布局的最大特点就是简单。这里所说的简单是指浏览者的阅读负担非常小。因为封面型的网页布局在设计上十分注重设计感和美观性，所以这种布局方式选用的网页背景图片或者动画，一般都是相当漂亮的，而且，在页面中除精心展示的图片或者动画以外，导航和其余一些元素并不占据页面的大幅空间，也会相对减少浏览者的阅读负担。

采用封面型布局的页面往往会直接使用一些极具设计感的图像或动画作为网页背景，再加上一个简单的进入网页按钮和网页导航，一般情况下这就是全部内容了。这种布局方式十分开放和自由，如果运用得恰到好处，会给用户带来极致的感官体验。图2-15所示为封面型网页展示。

2.3.7　变化型

变化型是将左右框架型与上下框架型相结合的网页布局方式，它是相对复杂的一种布局方式。图2-16所示为变化型网页的线框图和实际的网页展示。