1.8 合理的网站栏目结构布局

网站的结构决定了一个网站的方向和前途，决定了一个网站面向的市场到底有多大，结构是战略层面上的，靠技术来表达。

合理的网站栏目结构，无非是能正确表达网站的基本内容及其内容之间的层次关系，站在用户的角度考虑，使得用户在网站中浏览时可以方便地获取信息并不难，关键在于对网站结构的重要性有充分的认识。归纳起来，合理的网站栏目结构主要表现在以下几个方面。

（1）通过首页可以到达任何一个一级栏目首页、二级栏目首页以及最终内容页面。

（2）通过任何一个网页可以返回上一级栏目页面并逐级返回首页。

（3）主栏目清晰并且全站统一。

（4）通过任何一个网页可以进入任何一个一级栏目首页。

不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页面结构会包括页面标题、网站Logo、导航栏、登录区、搜索区、热点推荐区、主内容区和页脚区，其他页面不需要设置得如此复杂，一般由页面标题、网站Logo、导航栏、主内容区和页脚区等构成。

网站设计不是把所有内容放置到网页中就可以了，还需要对网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候，要注意使文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。

1.8.1 网页布局的基本概念

作为网页设计的初学者，最好要明白网页布局的基本概念。下面进行具体讲解。

1．页面尺寸

页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于无法突破显示器的范围，而且因为浏览器会占去不少空间，留下的页面范围就更小了。一般分辨率在800×600像素的情况下，页面的显示尺寸为780×428像素；分辨率在640×480像素的情况下，页面的显示尺寸为620×311像素；分辨率在1024×768像素的情况下，页面的显示尺寸为1007×600像素。从以上数据可以看出，分辨率越高，页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。目前的浏览器的工具栏可以取消或者增加，当显示全部的工具栏和关闭全部的工具栏时，页面的尺寸是不一样的。

在网页设计过程中，向下拖动页面是唯一给网页增加更多内容（尺寸）的方法。但除非肯定站点的内容能吸引访问者拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好做页面内部链接，以方便访问者浏览。

2．整体造型

什么是造型？造型就是创造出来的物体形象。这里是指页面的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序的。虽然显示器和浏览器都是矩形的，但对于页面的造型，可以充分运用自然界中的其他形状以及它们的组合，如矩形、圆形、三角形、菱形等。

对于不同的形状，它们所代表的意义是不同的。例如，矩形代表着正式、规则，很多政府网页都是以矩形为整体造型的；圆形代表着柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形为页面整体造型；三角形代表着力量、权威、牢固、侵略等，许多大型的商业站点为显示其权威性而常以三角形为页面整体造型；菱形代表着平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是结合多个图形加以设计的，其中某种图形的构图比例可能占的大一些。

3．页头

页头又可称之为页眉，页眉的作用是定义页面的主题。例如，一个站点的名称多数显示在页眉里。这样，访问者能很快知道这个站点主要介绍什么。页头是整个页面设计的关键，它将牵涉下面的更多设计和整个页面的协调性。页头常放置站点名称的图片、公司标志以及旗帜广告。

4．文本

文本在页面中是以行或者块（段落）的形成出现的，它们的摆放位置决定着整个页面布局的可视性。过去因为页面制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到页面的任何位置。

5．页脚

页脚和页头相呼应。页头是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。许多制作信息是放置在页脚的。

6．图片

图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。

7．多媒体

除了文本和图片之外，还有声音、动画、视频等其他媒体。虽然它们不是经常能被利用到，但是随着动态网页的兴起，它们在网页布局上也将变得更重要。

1.8.2 网页布局的方法

网页布局的方法有两种：第一种为纸上布局；第二种为软件布局。下面分别加以介绍。

1．纸上布局法

许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法无法设计出优秀的网页。所以，在开始制作网页时，要先在纸上画出页面的布局草图。

准备若干张白纸和一支铅笔，这里假设要设计一个时尚站点。

1）尺寸选择

目前800×600像素的分辨率为约定俗成的浏览模式。为了照顾大多数访问者，页面的尺寸应以800×600像素的分辨率为准。

2）造型的选择

先在白纸上画出象征浏览器窗口的矩形，这个矩形就是布局的范围。选择一个形状作为整个页面的主题造型，这里选择圆形，因为它代表柔和，和时尚流行比较相称，在矩形框架里随意画出来，可以试着再增加一些圆形或者其他形状。这样画下来，会发现页面很乱。其实，如果一开始就想设计出一个完美的布局是比较困难的，要在看似很乱的图形中找出隐藏在其中的特别的造型。还要注意一点，不要担心设计的布局是否能够实现。事实上，只要设计者能想到的布局都能用现今的HTML技术实现。图1-1所示为手画的页面布局。

考虑到左边向左凹的弧线，为了取得平衡，在页面右边增加了一个矩形（也可以是一条线段），如图1-2所示。

3）增加页头

图1-2是从图1-1得到的布局造型，现在开始增加页头。一般而言，页头位于页面顶部，所以为图1-2增加了一个页头，为了与左边的弧线和右边的矩形取得平衡，这里增加了一个矩形页头并让页头相交于左边的弧线，如图1-3所示。

4）增加文本

为页面的空白部分分别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，如图1-4所示。

5）增加图片

图片是美化页面和说明内容必需的媒体。在这里把图片加入到适当的地方，如图1-5所示。

经过以上几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是以后制作时的重要参考依据。

2．软件布局法

如果不喜欢用纸来画出布局意图，那么可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用在设计网页布局上更显得得心应手。不像用纸来设计布局那样，利用Photoshop可以方便地使用颜色、使用图形，并且可以利用图层的功能设计出用纸张无法实现的布局意念。

1.8.3 网页布局的技术

1．层叠样式表的应用

在HTML 4.0标准中，CSS（层叠样式表）被提出来，它能完全精确地定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。曾经无法实现的想法利用CSS都能实现。目前，在许多站点上，层叠样式表的运用是一个站点优秀的体现。可以在网上找到许多关于CSS的介绍和使用方法。

2．表格布局

表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。此外，表格在定位图片和文本上比用CSS更加方便。表格布局唯一的缺点是，当使用了过多表格时，页面下载速度会受到影响。对于表格布局，可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它（要使用所见即所得的软件），将会看到这个页面是如何利用表格的。

3．框架布局

不知道什么原因，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性不太好。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，能把不同对象放置到不同页面中加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

这里介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，只想引导设计者在制作网页的时候，知道怎样把图片和文本放置的恰到好处，知道如何拥有跳跃的设计思维。

1.8.4 网页布局的基本类型

网页的布局不可能像平面设计那么简单，除了上文提到过的可操作性外，技术问题也是制约网页布局的一个重要因素。虽然网页制作已经摆脱了HTML时代，但是还没有完全做到挥洒自如，这就决定了网页的布局是有一定规则的，这种规则使得网页布局只能在左右对称结构布局、“同”字形结构布局、“回”字形结构布局、“匡”字形结构布局、“厂”字形结构布局、自由式结构布局、“另类”结构布局等几种布局的基本结构中选择。

1．左右对称结构布局

左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用做主体内容的区域。左右对称结构便于浏览者直观地读取主体内容，但是不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图1-6所示。

2．“同”字形结构布局

“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，广告条、友情链接、搜索引擎、注册按钮、登录面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避其缺陷，如图1-7所示。

3．“回”字形结构布局

“回”字形结构实际上是对“同”字形结构的一种变形，即在“同”字形结构的下面增加了一个横向通栏，这种变形将“同”字形结构不是很重视的页脚利用了起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往会使页面充斥着各种内容，显得拥挤不堪，如图1-8所示。

4．“匡”字形结构布局

和“回”字形结构一样，“匡”字形结构其实也是“同”字形结构的一种变形，也可以认为是将“回”字形结构的右侧栏目条去掉得出的新结构，这种结构是“同”字形结构和“回”字形结构的一种折中，这种结构承载的信息量与“同”字形结构相同，且改善了“回”字形结构的封闭性，如图1-9所示。

5．自由式结构布局

以上4种结构是传统意义上的结构布局。自由式结构布局相对而言没有那么“安分守己”，这种结构的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位置，起装饰作用。这种结构在时尚类网站中使用得非常多，尤其是在时装、化妆用品的网站中。这种结构富有美感，可以吸引大量的浏览者，但是因为文字过少，而难以让浏览者长时间驻足，且起指引作用的导航条不明显，不便于操作，如图1-10所示。

6．“另类”结构布局

如果说自由式结构布局是现代主义的结构布局，那么“另类”结构布局就可以被称为后现代的代表了。在“另类”结构布局中，传统意义上的所有网页元素全部被颠覆，被打散后融入一个模拟的场景中。在这个场景中，网页元素化身为某一种实物。采用这种结构布局的网站多为设计类网站，以显示站长的前卫的设计理念。这种结构要求设计者有非常丰富的想象力和非常强的图像处理技巧，因为这种结构稍有不慎就会因为页面内容太多而拖慢浏览速度，如图1-11所示。

7．分栏型布局结构

分栏型布局结构的网站如图1-12所示。

8．封面型布局结构

封面型布局结构的网站如图1-13所示。

1.8.5 网站首页布局设计

网站首页是网站给用户的第一印象，首页页面布局需从主题、导航、内容等方面入手。

1．首页主题

首页是网站的核心页面，首页的主题也就是网站的主要核心。首页主题需让用户很容易地了解网站是做什么的。首页主题体现在网站的标题、关键词、描述上，其中最重要的是标题，用户在搜索引擎上看到的搜索结果就是网站的标题和描述内容。

在首页页面上，首页主题还体现在Logo及网站标题上。准确概括的首页主题可以很好地帮助用户选择自己有确切需求的网站。

2．首页导航

网站导航可以看做对网站内容的分类，把网站的内容进行细分，方便用户根据个人需求选择浏览相应栏目页面。网站首页导航要做到分类清晰，导航栏目间不重复。

3．首页内容

布置好网站首页导航后就可以进行网站首页的内容布局设计了。页面的内容布局需先对网站的用户群体进行需求分析，把用户关注最多的内容放置在首页的最重要位置。按照用户的浏览方式，页面内容布局按照内容重要程度由左上到右下进行布置。也就是说，最重要的内容要放置在首页左上位置，而广告或最不重要的内容可放置在页面的右下位置。

网站首页布局除了做好主题、导航和内容之外，还需注意页面的尺寸、网站打开速度及友情链接布置等。

1.8.6 内页与首页风格保持一致

在网页设计与网页制作时，对内页往往把握不是很到位，下面就风格一致性做出总结，希望对读者有所帮助。

1．内页与首页的结构要一致

网页结构是网页风格统一的重要手段，包括页面布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等，在结构的一致性上，要强调网页标志性元素的一致性，即网页或公司名称、网页或企业标志、导航及辅助导航的形式和位置、公司联系信息等。

2．内页与首页色彩要一致

这就是说内页与首页主体色彩的一致，只改变局部色块，在色彩的一致性上，强调的是如果企业有自身的CI形象，则最好在互联网中沿袭这个形象，给观众留出网上网下一致的感觉，更有利于企业形象的树立。

3．内页与首页导航的统一性

导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象。

4．个别具有特色的元素贯穿全部网页

在网站设计中，个别具有特色的元素重复出现，也会给访问者留下深刻印象，如企业的Logo。

5．内页与首页背景要统一

从技术上而言，网页背景包括背景色和背景图像，一般来说，并不提倡使用背景图像，建议使用背景色或色块，但背景色或色块要在全网页内统一，起视觉流程统一性的作用。

1.8.7 网站内页如何布局

新的网站，在设计之初就要考虑布局的重要性，不管是首页布局、栏目页布局（列表页布局）还是内页布局，这些都要考虑到，合理的网站布局能给网站带来一定的优势，所以，只要网站布局合理了，就能在相同的条件下，比竞争对手有更大的优势。

网站的内页布局，主要看设计者是如何考虑的，因为在一个内页中，正文占去了70%以上的板块，所以剩下的板块要合理地布局好，就需要动动心思了。

关于网站内页布局合理的方法，这里给出以下建议。

1．内页的头部

网站的内页的头部应该一致，而且要独立写出来，并采取调用的方法，这样就精简了网站的代码，对网站有很大的好处。

2．网站的内页导航

网站的内页导航有两部分：一部分是栏目导航，主要通过栏目导航到其他栏目，浏览其他栏目的内容，增加网站的流量，从而提高网站的权重；另一部分是面包屑导航，其对搜索引擎的网页爬虫友好，同时对于用户的体验也非常好，能显示用户的当前位置，不会使用户在网站中迷失方向。

3．网站内页链接的布局

（1）网站内页链接的布局是整个内页布局的关键。网站内页内链有三大块，而且出现的位置要合理，要符合用户体验，否则就是“方法不对、努力白费”。

（2）链接布局，主要放在正文的右边和正文的下面，这样最利于用户体验，原因如下。

①用户如果通过链接进入文章，看见文章不合其兴趣，而在正文的右边有链接，则可能留住用户，减少了用户的流失，增加了网站的浏览量。

②如果用户对这篇文章感兴趣，在看完过后，浏览到文章的最底部时，用户可以通过这样的链接进入别的页面，节省了用户的时间，也增加了网站的浏览量，减少了跳出率。

③上一页和下一页的布局

总之，一定要注重用户体验，只有做到了用户体验的页面布局，网站才有用户，才有权重，才有排名。