基于新Web标准下的DIV+CSS网页布局方法探讨

开篇：润墨网以专业的文秘视角，为您筛选了一篇基于新Web标准下的DIV+CSS网页布局方法探讨范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘要：随着利用旧的页面布局的弊端逐渐暴露，新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所示。

其结构代码如下：

/*这是常用的定义导航栏的方法*/

公司结构

企业文化

新闻资讯

产品展示

客户案例

留言反馈

联系我们