第四节 网页页面布局

一、网页的页面布局分析

仔细观察现在网上的各种网页，可以看出很多网页都是如图2-34所示的结构。

网页头部（header）一般含有网站的标志、导航菜单等内容。

banner区一般是网站广告宣传的位置，这里放的图片最好有很强的视觉冲击力，网页的活力往往来自这个地方。图片往往做成轮播图的形式，以增加动感。

aside区是网站正文内容的边栏部分。

main区是网站主要内容放置的区域。

footer区是网页脚部，记录着网站版权所属、联系方式等内容。

这个布局看上去就像一张表格，所以早期做网页经常用表格来实现页面布局。把表格的border设置为0，让人们看不到表格，只看到网站各区域的内容。

但用表格布局有很多缺陷，表格间的内容相互干扰，排这个单元格的内容的时候，另一个单元格的内容会跟着变，工作效率很低，这就需要另一种更好的办法来取代表格布局。

再仔细研究这个页面布局，发现这几部分就是一个个矩形的组合，如果使用矩形的元素，用堆积木的方式来排版，就可以很好地解决方块间互相干扰的问题。当然在这些方框的外面，最好有一个更大的块作为容器（container），把它们套在里面，以便整体来调整版面布局。标签DIV实现的就是一个矩形的样式，使用DIV能够很好地实现网页布局的功能，这就是DIV+CSS布局的方法。