1.3 网页的布局策划

网页布局策划就是合理地设计页面中的栏目和板块，并将其合理地分布在页面中。

1.3.1 网页的基本内容

一般网页的基本内容包括：网页标题、网站标志、页眉、导航栏、主内容区、页脚。网站主页面的结构布局与子页面也不尽相同，如图1-2所示为一个网站首页的结构布局示意图。

1.网页标题

网页标题多用来提示该页的主要内容，会出现在浏览器的标题栏中，这样可以引起访问者浏览网站的兴趣。

2.网站标志

一个成功的网站都有自己独特的标志，如同一个商品的商标，网站的标志应集中体现该网站的特色、内容以及其内在寓意，是对自身形象一个重要的宣传。标志一般放在页面的显要位置，如页眉中，如图1-3所示为一些门户网站的标志。

3.页眉

页眉指的是页面的上端，此位置的吸引注意力特别高，常用来放置网站的宗旨、宣传口号、广告等，如图1-4所示为网页的页眉。

4.导航栏

导航栏是网页设计中的重要部分，导航栏的位置对网站页面布局起着决定性的作用，导航栏的位置通常在页面的上部或左部，如果页面较长，也可在底部。在各个页面中，导航栏的位置应该是比较固定的，导航栏是主页到达子页的链接，子页通常也要有到达主页的导航链接，这样浏览起来比较方便，如图1-5所示为一些网站的导航栏。

5.主内容区

主内容区一般是二级链接内容的标题或内容提要，布局是按网站内容的分类进行板块的划分，根据浏览者通常从左到右、从上向下的注意力顺序，通常将较重要的内容安排在页面的左上位置，次要的内容放在右下方，如图1-6所示。

6.页脚

页脚是页面的底部，通常用来标注网站的名称、地址、联系方式、版权声明等，也有将网站的导航栏放在此，以增强网站浏览的方便性。如图1-7所示为一些网页的页脚。

1.3.2 页面的布局类型

网页布局大致可分为“同”字型、“匡”字型、“回”字型、“川”字型、左右对称型、上下型、封页型以及自由型，有些网页还使用几种类型的组合形成新的布局格式。

1.“同”字型

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

2.“匡”字型

这种结构也称骨拐角型，与上一种只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，很常见的是最上面是标题及广告，左侧是导航链接，如图1-9所示。

3.“回”字型

这种结构是以“同”或“匡”字型布局为基础，在其页面的底部或右部添加了一个内容区块，如广告或链接等，使之成为一个较封闭的区间，如图1-10所示。这样设计的目的是能更充分利用有限的页面空间，方便客户的访问。

4.“川”字型

这种结构是将页面大致分为三列，主要内容分布在三列中，可以极大地增加网站内容在首页面的显示，特点是信息量大，给人畅快的感觉，如图1-11所示。

5.左右对称型

这是一种左右分割页面的结构，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文。单击左面的链接，便会在右边显示相应的内容，有一些企业网站也喜欢采用此类型，这种类型结构非常清晰，一目了然，如图1-12所示。

6.上下型

与上面类似，区别仅仅在于是一种上下分割的框架。

7.封面型

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

8.自由型

这是一种自由格式型的网页布局结构，它的布局风格较为随意，完成后的页面就如同一张精美的图片或一张极具创意的广告，这种结构多用于一些较为时尚的网站，如时装、动漫等，一般大型商务网站不适合此类型。首先要插入一个表格，然后将插入光标定位在此表格的其中一个单元格内，再重新插入一个表格即可以实现了嵌套表格，如图1-14所示。