5.3 网页布局规划

5.3.1 网页的构成

构成网页的基本元素包括标题、网站徽标、页眉、页脚、主体内容、功能区、导航区、广告区等。这些元素在网页的位置安排，就是网页的整体布局。图5-13所示为中国人寿保险公司网站的主页。

1.标题

每个网页的顶端都有一条信息，这条信息往往出现在浏览器的标题栏而非网页中，但是这条信息也是网页布局中的一部分。这条信息是对这个网页中主要内容的提示，即标题。

2.网站徽标

徽标是网站所有者对外宣传自身形象的工具。徽标集中体现了这个网站的文化内涵和内容定位。可以说，徽标是一个网站的最为吸引人、最容易被人记住的标志。徽标在网站中的位置都比较醒目，目的是要使其突出，容易被人识别与记忆。在二级网页中，页眉位置一般都留给徽标。另外，徽标往往被设计成为一种可以回到首页的超链接。

3.页眉

网页的上端是这个页面的页眉。页眉并不是在所有的网页中都有，一些特殊的网页就没有明确划分出页眉。页眉往往位于一个页面中相当重要的位置，容易引起浏览者的注意，所以很多网站都会在页眉中设置宣传本网站的内容，如网站宗旨、网站徽标等，也有一些网站将这个“黄金地段”作为广告位出租。

4.主体内容

主体内容是网页中最重要的元素。主体内容并不完整，往往由下一级内容的标题、内容提要、内容摘编的超链接构成。主体内容借助超链接，可以利用一个页面，高度概括几个页面所表达的内容，而首页的主体内容甚至能在一个页面中高度概括整个网站的内容。

主体内容一般均由图片和文档构成，现在的一些网站的主体内容中还加入了视频、音频等多媒体文件。由于人们的阅读习惯是由上至下、由左至右，所以主体内容的分布也是按照这个规律，依照重要到不重要的顺序安排内容，所以在主体内容中，左上方的内容最重要。

5.页脚

网页的最底端部分被称为页脚，页脚部分通常被用来介绍网站所有者的具体信息和联络方式，如名称、地址、联系方式、版权信息等。其中一些内容被做成标题式的超链接，引导浏览者进一步了解详细的内容。例如，Yahoo！网站的页脚除上述内容外，还增加了导航内容。这种方式在首页内容过多的情况很适用，好处是浏览者不必滑动滚动条，可直接选择栏目，易用性强。

6.功能区

功能区是网站主要功能的集中表现，一般位于网页的右上方或右侧边栏。功能区包括：电子邮件、信息发布、用户注册、登录网站等内容。有些网站使用了 IP 定位功能，定位浏览者所在地，然后可在功能区显示当地的天气、新闻等个性化信息。

7.导航区

如果说主体内容部分重要的话，那么导航区的重要性与其不相上下，甚至导航区的设计可以成为一种独立的设计，与网页布局设计分庭抗礼。之所以说导航区重要，是因为其所在位置左右着整个网页布局的设计。导航区一般分为四种位置，分别是左侧、右侧、顶部和底部。一般网站使用的导航区都是单一的，但是也有一些网站为了使网页更便于浏览者操作，增加可访问性，往往采用多导航技术，如Yahoo！网站采用了左侧导航与底部导航相结合的方式。但是无论采用几个导航区，网站中每个页面的导航区位置均是固定的。

8.广告区

广告区是网站实现赢利或自我展示的区域，一般位于网页的页眉、右侧和底部。广告区内容以文字、图像、Flash动画为主。通过吸引浏览者点击链接的方式达到广告效果。广告区设置要明显、合理、引人注目，这对整个网站的布局很重要。

5.3.2 网站页面的布局

网页布局大致可分为“同”字型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，下面分别论述。

1.“同”字型结构

“同”字型结构是一些大型网站所喜欢的类型。采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登录面板、栏目条等内容置于页面两侧，中间为主体内容。这种结构是因特网上最多的一种结构类型，它不但有条理，而且直观，有视觉上的平衡感，但是也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字型结构的缺陷。这种布局类型网站的例子如图5-14所示。

“同”字型结构还有两种变形：“回”字型结构和“匡”字型结构。

“回”字型结构即在“同”字型结构的下面增加了一个横向通栏，放置网站的一些基本信息、联系方式、版权声明等，这种变形将“同”字型结构不是很重视的页脚利用起来，增大了主体内容，合理地使用了页面有限的面积，如图5-15所示。

“匡”字型结构可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，它承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构，如图5-16所示。

2.框架型

框架型又可以分为左右框架型、上下框架型和综合框架型。

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

上下框架型与左右框架型类似，区别仅仅在于是一种将上下分为两页的框架。综合框架型是上面两种结构的结合，它是一种相对复杂的框架结构。

以上三种框架型结构的页面布局简图如图5-17所示。图5-18所示为左右框架型结构布局的网页，图5-19所示为上下框架型结构布局的网页，图5-20所示为综合框架型结构布局的网页。

3. 封面型

这种类型基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至是直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理得好，会给人带来赏心悦目的感觉，如图5-21所示。

4.Flash型

Flash型结构与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash。与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不逊于传统的多媒体，如图5-22所示。

5.标题正文型

这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。图5-23所示为标题正文型网页。

5.3.3 经典网站主页布局赏析

什么样的布局是最好的？这是初学者可能会问的问题。其实这要具体情况具体分析，比如如果内容非常多，就要考虑用“同”字型或拐角型。如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型。上面几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活。如果是一个企业网站想展示企业形象，或个人主页想展示个人风采，封面型是首选。Flash 型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。

下面举几个网页布局设计的例子，供大家欣赏和学习。

1.iomega网站（go.iomega.com）。该网站主页如图5-24所示。

iomega 网站主页采用左右框架型形式，布局简单。阅读这类页面只需要从上看到下即可，不必在页面上拼命寻找想要的东西，在浏览过程中整个页面提供的是平和、稳定的浏览体验。网页使用了合适大小的留白，页面上的元素之间有足够的空隙。同时为了屏幕阅读也设定了额外的行间距。使人感觉非常舒服。

2.飞鸵鞋业网站（www.feituo.com/cn）。该网站首页如图5-25所示。

飞鸵鞋业网站的首页设计比较独特，网页顶部将公司徽标与导航条完美地结合在一起，并与整体网站形成一幅完美的图画，网站主体部分全部采用类倾斜效果，极富美感。

3.伯特利阀门网站（www.boteli.com）。该网站首页如图5-26所示。

这个网站设计很有创意、制作精良，采用红灰两色搭配并配以同色调的图片，浑然天成，融为一体。最具特色的是网站的导航，虽然竖式导航条并不少见，但该网站的竖式导航给人一种与众不同的感觉，再加上鼠标经过翻转特效处理，更是让网站变得完美、个性。

4.凤凰古城旅游网（www.fhvip.com）。该网站首页如图5-27所示。

该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。主页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。导航栏的文字颇具特色。首页中间的主体内容分为左右两大模块，内容划分清晰。

5. 新东方教育网（www.neworiental.org）。该网站首页如图5-28所示。

该首页主要列出了导航菜单和网站地图，简捷明了、排列整齐。颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块。每个内容板块都采用不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。

6.学习型中国网（www.vyes365.com）。该网站首页如图5-29所示。

该首页的布局采用的是正文标题型，即最上面是标题，下面是正文，让人感觉严肃而正统。色的背景简单、明快、大方。由于网站的性质，所以这个首页的主色调是红色。无论是导航条还是分栏，因为形式各异，所以并不觉得单调。