摘要：随着利用旧的页面布局的弊端逐渐暴露，新Web标准的重要性越来越被人们所重视。本文主要讨论了在新Web标准下的DIV CSS网页布局方法，这种方法使网页外观与结构分离，使站点的访问及维护更加容易，最后通过一个实例介绍了其基本操作流程。
　　关键词：网页布局；DIV；CSS样式
　　中图分类号：TP309文献标识码：A文章编号：1009-3044(2008)11-20343-04
　　
　　1 早期常用的网页布局方法
　　
　　早期的网页布局，通常采用以下四种方法，如表1所示：
　　
　　这些布局的方法在很长时间以来，都是较为流行的网页布局方式，或是其中的一种，或是这四种布局方式的混合使用。随着网络技术的不断发展和许多新的上网设备的出现，使得这些网页布局方式越来越不能适应新的要求。
　　新的Web标准在国内逐渐普及，一种基于DIV CSS的新型网页布局方式开始流行，一些大型门户网站都已经完成了网站重构，一些中小型网站也在逐步改善之中。
　　
　　2 新的Web标准
　　
　　Web标准是一系列标准的集合，在Web标准中，把网页分成4部分：内容（Content）、结构（Structure）、表现（Presentation）和行为（Behavior）。
　　“内容”就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一些辅助的信息，像导航菜单、装饰性图片等。
　　“结构”就是把混乱的内容进行结构化，比如加上标题、作者、章、节、段落和列表，这些就称为结构。结构使内容更加具有逻辑性，易用性。
　　虽然定义了结构，但是内容还是原来的样式没有改变，例如字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现”。
　　“行为”就是对内容的交互及操作，例如，使用JavaScript判断一些表单提交，或者实现菜单的显示和隐藏等。
　　HTML和XHTML页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对它们加上“行为”。针对“结构、表现和行为”这三个部分，W3C组织制定了大部分的标准：
　　(1)结构化标准语言XHTML和XML；
　　(2)表现标准语言CSS；
　　(3)行为标准主要包括对象模型（如W3C的DOM）、ECMAScript等。
　　这些标准大部分由W3C（World Wide Web Consortium）起草和发布，也有其他的一些组织，比如上面的ECMA（European Computer Manufacturers Association）的ECMAScript标准。
　　新的Web标准是W3C在2000年底发布的XHTML1.0和XML1.0，CSS2.0等。
　　采用新标准的优点有很多：使得网页下载速度更快；内容可以被更广泛的设备所访问，比如屏幕阅读器、手持设备或其它支持上网的新型设备；更少的代码和组件，网站易于维护；带宽要求低，成本降低等等。
　　
　　3 DIV CSS网页布局方案
　　
　　根据新的Web标准，采用DIV CSS的网页布局方案，可以把“内容”放在DIV（Division，区块）中，结构由DIV产生，最后使用CSS（Cascading Style Sheet，层叠样式表）来进行“表现”重构网站布局，丢弃繁冗复杂的表格。DIV CSS的布局方式使得内容和表现分离，如果采用外部样式表，可以大大简化网站代码的字节数，降低了服务器的负担，使得下载速度更快。
　　DIV CSS的布局方法是基于盒模型的概念，可以把每个DIV块看成是一个盒子，盒子里面的东西和盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
　　
　　用DIV CSS设计思路是这样的：
　　（1）用DIV来定义语义结构；
　　（2）为这个CSS定义的盒子内加上内容，如文字、图片等；
　　（3）最后用CSS来美化网页，如加入背景、线条边框、对齐属性等；
　　下面通过一个实例来具体说明，用表格布局的页面如图2所示，接下来我们用DIV CSS的布局方式来重构这个页面。
　　
　　首先用div来定义结构：
　　这个页面的布局是一个典型的上中下版面分栏结构，如图3所示。
　　
　　其结构代码如下：