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

网页制作的资料

本栏目责任编辑：贾薇薇计算机工程应用技术

基于新Ｗｅｂ标准下的ＤＩＶ＋ＣＳＳ网页布局方法探讨

陈道贺，王芳

（郑州大学升达经贸管理学院资讯系，河南郑州４５１１９１）

摘要：随着利用旧的页面布局的弊端逐渐暴露，新Ｗｅｂ标准的重要性越来越被人们所重视。本文主要讨论了在新Ｗｅｂ标准下的ＤＩＶ＋ＣＳＳ网页布局方法，这种方法使网页外观与结构分离，使站点的访问及维护更加容易，最后通过一个实例介绍了其基本操作流程。关键词：网页布局；ＤＩＶ；ＣＳＳ样式

中图分类号：ＴＰ３０９文献标识码：Ａ文章编号：１００９－３０４４（２００８）１１－２０３４３－０４

ＴｈｅＤｉｓｃｕｓｓｉｏｎａｂｏｕｔＬａｙｏｕｔＳｔｒｕｃｔｕｒｅｏｆＤＩＶ＋ＣＳＳＢａｓｅｄｏｎｔｈｅＮｅｗＷｅｂＳｔａｎｄａｒｄ

ＣＨＥＮＤａｏ－ｈｅ，ＷＡＮＧＦａｎｇ

（ＣｏｍｐｕｔｅｒＳｃｉｅｎｃｅ，ＳｈｅｎｇｄａＥｃｏｎｏｍｉｃｓ，Ｔｒａｄｅ＆ＭａｎａｇｅｍｅｎｔＣｏｌｌｅｇｅｏｆＺＺＵｎｉｖｅｒｓｉｔｙ，Ｚｈｅｎｇｚｈｏｕ４５００００，Ｃｈｉｎａ）

Ａｂｓｔｒａｃｔ：Ｗｉｔｈｔｈｅｎａｓｔｙｐｌａｙｏｆｔｈｅｏｌｄｗｅｂｐａｇｅｌａｙｏｕｔｓｔｒｕｃｔｕｒｅ，ｔｈｅｎｅｗＷｅｂＳｔａｎｄａｒｄｈａｓｒｅｃｅｉｖｅｄｉｍｐｏｒｔａｎｃｅｍｏｒｅａｎｄｍｏｒｅ．ＴｈｅｐａｐｅｒｉｓｃｏｎｃｅｒｎｅｄｔｈｅｌａｙｏｕｔｓｔｒｕｃｔｕｒｅｏｆＤＩＶ＋ＣＳＳｂａｓｅｄｏｎｔｈｅｎｅｗＷｅｂＳｔａｎｄａｒｄ．Ｔｈｅｍｅｔｈｏｄｓｅｐａｒａｔｅｓｗｅｂｐａｇｅａｐｐｅａｒａｎｃｅｆｒｏｍｓｔｒｕｃｔｕｒｅ，ｗｈｉｃｈｍａｋｅｓｉｔｅａｓｙｔｏｖｉｓｉｔａｎｄｍａｉｎｔａｉｎｗｅｂｓｉｔｅ．Ａｎｉｎｓｔａｎｃｅｉｓｍａｄｅｔｏｉｎｔｒｏｄｕｃｅｔｈｅｏｐｅｒａｔｉｏｎｆｌｏｗ．

Ｋｅｙｗｏｒｄｓ：ｌａｙｏｕｔｓｔｒｕｃｔｕｒｅ；ＤＩＶ；ＣＳＳ

１早期常用的网页布局方法

早期的网页布局，通常采用以下四种方法

，如表１所示：

这些布局的方法在很长时间以来，都是较为流行的网页布局方式，或是其中的一种，或是这四种布局方式的混合使用。随着网络技术的不断发展和许多新的上网设备的出现，使得这些网页布局方式越来越不能适应新的要求。

新的Ｗｅｂ标准在国内逐渐普及，一种基于ＤＩＶ＋ＣＳＳ的新型网页布局方式开始流行，一些大型门户网站都已经完成了网站重构，一些中小型网站也在逐步改善之中。

２新的Ｗｅｂ标准

结构（Ｓｔｒｕｃｔｕｒｅ）、表现（Ｐｒｅｓｅｎｔａｔｉｏｎ）和行为Ｗｅｂ标准是一系列标准的集合，在Ｗｅｂ标准中，把网页分成４部分：内容（Ｃｏｎｔｅｎｔ）、

（Ｂｅｈａｖｉｏｒ）。

文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如“内容”就是页面实际要传达的真正信息，包含数据、

一些辅助的信息，像导航菜单、装饰性图片等。

作者、章、节、段落和列表，这些就称为结构。结构使内容更加具有逻辑“结构”就是把混乱的内容进行结构化，比如加上标题、

性，易用性。

虽然定义了结构，但是内容还是原来的样式没有改变，例如字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现”。

“行为”就是对内容的交互及操作，例如，使用ＪａｖａＳｃｒｉｐｔ判断一些表单提交，或者实现菜单的显示和隐藏等。

内容、结构、表现和行为”这４个方面组成的。“内容”是基础，然后是附加上去的“结构”和“表ＨＴＭＬ和ＸＨＴＭＬ页面都是由“

现”，最后再对它们加上“行为”。针对“结构、表现和行为”这三个部分，Ｗ３Ｃ组织制定了大部分的标准：

（１）结构化标准语言ＸＨＴＭＬ和ＸＭＬ；

收稿日期：２００８－０２－２７

作者简介：陈道贺（１９７８－），女，河南郑州人，讲师，硕士，主要研究方向为计算机网络；王芳（１９７３－），女，河南郑州人，讲师，硕士，主

要研究方向为多媒体技术及应用。３４３

网页制作的资料

计算机工程应用技术本栏目责任编辑：贾薇薇（２）表现标准语言ＣＳＳ；

（３）行为标准主要包括对象模型（如Ｗ３Ｃ的ＤＯＭ）、ＥＣＭＡＳｃｒｉｐｔ等。

这些标准大部分由Ｗ３Ｃ（ＷｏｒｌｄＷｉｄｅＷｅｂＣｏｎｓｏｒｔｉｕｍ）起草和发布，也有其他的一些组织，比如上面的ＥＣＭＡ（ＥｕｒｏｐｅａｎＣｏｍ－ｐｕｔｅｒＭａｎｕｆａｃｔｕｒｅｒｓＡｓｓｏｃｉａｔｉｏｎ）的ＥＣＭＡＳｃｒｉｐｔ标准。

新的Ｗｅｂ标准是Ｗ３Ｃ在２０００年底发布的ＸＨＴＭＬ１．０和ＸＭＬ１．０，ＣＳＳ２．０等。

手持设备或其它支持采用新标准的优点有很多：使得网页下载速度更快；内容可以被更广泛的设备所访问，比如屏幕阅读器、

上网的新型设备；更少的代码和组件，网站易于维护；带宽要求低，成本降低等等。

３ＤＩＶ＋ＣＳＳ网页布局方案

根据新的Ｗｅｂ标准，采用ＤＩＶ＋ＣＳＳ的网页布局方案，可以把“内容”放在ＤＩＶ（Ｄｉｖｉｓｉｏｎ，区块）中，结构由ＤＩＶ产生，最后使用

表现”重构网站布局，丢弃繁冗复杂的表格。ＤＩＶ＋ＣＳＳ的布局方式使得内容和表现ＣＳＳ（ＣａｓｃａｄｉｎｇＳｔｙｌｅＳｈｅｅｔ，层叠样式表）来进行“

分离，如果采用外部样式表，可以大大简化网站代码的字节数，降低了服务器的负担，使得下载速度更快。

ＤＩＶ＋ＣＳＳ的布局方法是基于盒模型的概念，可以把每个ＤＩＶ块看成是一个盒子，盒子里面的东西和盒子的边框之间的距离即填充（ｐａｄｄｉｎｇ），盒子本身有边框（ｂｏｒｄｅｒ），而盒子边框外和其他盒子之间，还有边界（ｍａｒｇｉｎ），如图１

所示。

图１盒子模型

用ＤＩＶ＋ＣＳＳ设计思路是这样的：

（１）用ＤＩＶ来定义语义结构；

（２）为这个ＣＳＳ定义的盒子内加上内容，如文字、图片等；

线条边框、对齐属性等；（３）最后用ＣＳＳ来美化网页，如加入背景、

下面通过一个实例来具体说明，用表格布局的页面如图２所示，接下来我们用ＤＩＶ＋ＣＳＳ

的布局方式来重构这个页面。

图２用表格布局的页面

首先用ｄｉｖ来定义结构：

这个页面的布局是一个典型的上中下版面分栏结构，如图３

所示。

图３

其结构代码如下：用ｄｉｖ来定义结构

＜ｂｏｄｙ＞

＜ｄｉｖｉｄ＝＂ｈｅａｄｅｒ＂＞＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｍａｉｎ＂＞／＊ｍａｉｎ块里面嵌套了两个子块＊／

＜ｄｉｖｉｄ＝＂ｍｅｎｕ＂＞＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｃｏｎｔｅｎｔ＂＞＜／ｄｉｖ＞３４４电脑知识与技术

网页制作的资料

本栏目责任编辑：贾薇薇

＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｆｏｏｔｅｒ＂＞＜／ｄｉｖ＞

＜／ｂｏｄｙ＞计算机工程应用技术

上面我们定义了四个大盒子，分别是ｂｏｄｙ、ｈｅａｄｅｒ、ｍａｉｎ、ｆｏｏｔｅｒ，在ｍａｉｎ这个盒子中又分了左右两个小盒子：ｍｅｎｕ（菜单栏）和ｃｏｎｔｅｎｔ（内容）。把ｈｅａｄｅｒ、ｍａｉｎ和ｆｏｏｔｅｒ这三个盒子放进ｂｏｄｙ这个大盒子，是为了让这些盒子等宽，并从上到下整齐排列，然后在整个页面中居中对齐，方便控制。

定义ｂｏｄｙ的样式是：

ｂｏｄｙ｛

ｆｏｎｔ－ｆａｍｉｌｙ：＂宋体＂，Ａｒｉａｌ，ｓａｎｓ－ｓｅｒｉｆ；／＊定义网页默认字体样式＊／

ｆｏｎｔ－ｓｉｚｅ：１２ｐｘ；

ｍａｒｇｉｎ：１０ｐｘａｕｔｏ；／＊定义上下边界为１０ｐｘ，左右自动，使得左右居中＊／

ｈｅｉｇｈｔ：ａｕｔｏ；ｗｉｄｔｈ：８００ｐｘ；／＊定义宽和高＊／

ｂｏｒｄｅｒ：１ｐｘｓｏｌｉｄ＃００６６３３；／＊定义边界为１ｐｘ宽，实线，颜色为＃００６６３３＊／

｝

在页头的整个区块里，应用一幅背景图ｈｅａｄｅｒ．ｇｉｆ即可。其样式代码为：

＃ｈｅａｄｅｒ｛

ｈｅｉｇｈｔ：１４５ｐｘ；ｗｉｄｔｈ：８００ｐｘ；／＊定义宽和高＊／

ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（ｈｅａｄｅｒ．ｇｉｆ）；／＊定义背景图片＊／

ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｎｏ－ｒｅｐｅａｔ；／＊定义背景图片不平铺＊／

ｍａｒｇｉｎ：０ｐｘ；／＊定义上下左右边界为０ｐｘ＊／

｝

为了统一定位ｍｅｎｕ和ｃｏｎｔｅｎｔ这两个子区块，ｍａｉｎ区块里放置两个区块，的样式代码为：

＃ｍａｉｎ｛

ｈｅｉｇｈｔ：３３０ｐｘ；

ｗｉｄｔｈ：８００ｐｘ；

ｍａｒｇｉｎ：０ｐｘ；

｝

菜单栏ｍｅｎｕ区块了放置了一个背景图片ｍｅｎｕ．ｇｉｆ，靠左浮动，代码如下：

＃ｍｅｎｕ｛

ｆｌｏａｔ：ｌｅｆｔ；／＊定义ｍｅｎｕ区块的位置为左浮动，一般定义两个并排放置的区块时常用ｆｌｏａｔ属性＊／

ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（ｍｅｎｕ．ｇｉｆ）；／＊定义背景图片＊／

ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｎｏ－ｒｅｐｅａｔ；／＊定义背景图片不平铺＊／

ｍａｒｇｉｎ：０ｐｘ３ｐｘ０ｐｘ０ｐｘ；／＊依次分别为上下左右边界＊／

ｗｉｄｔｈ：２００ｐｘ；ｈｅｉｇｈｔ：３３０ｐｘ；

｝

超链接的文字用无项目列表充当内容，在ｍｅｎｕ区块里加入链接的内容项：

＜ｄｉｖｉｄ＝＂ｍｅｎｕ＂＞／＊这是常用的定义导航栏的方法＊／

＜ｕｌ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞公司结构＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞企业文化＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞新闻资讯＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞产品展示＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞客户案例＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞留言反馈＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞联系我们＜／ａ＞＜／ｌｉ＞

＜／ｕｌ＞

＜／ｄｉｖ＞

把ｕｌ和ｌｉ也可以理解成小的区块，下面定义样式如下：

＃ｍｅｎｕｕｌ｛

ｍａｒｇｉｎ：６０ｐｘ６０ｐｘ６０ｐｘ５５ｐｘ；

ｆｏｎｔ－ｓｉｚｅ：１４ｐｘ；

ｌｉｓｔ－ｓｔｙｌｅ－ｔｙｐｅ：ｎｏｎｅ；

｝

＃ｍｅｎｕｌｉａ｛／＊定义导航栏超链接的样式＊／

ｃｏｌｏｒ：＃００００００；

ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；／＊文字无下划线＊／

ｐａｄｄｉｎｇ－ｔｏｐ：４ｐｘ；

ｄｉｓｐｌａｙ：ｂｌｏｃｋ；

ｗｉｄｔｈ：９０ｐｘ；

ｈｅｉｇｈｔ：２２ｐｘ；

ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ；

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃９７ｃ０ｆｆ；

ｍａｒｇｉｎ－ｌｅｆｔ：２ｐｘ；

｝

＃ｍｅｎｕｌｉａ：ｈｏｖｅｒ｛／＊定义鼠标移到超链接文字的样式＊／

ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ；／＊文字有下划线＊／

ｃｏｌｏｒ：＃ｆｆｆｆｆｆ；３４５

网页制作的资料

计算机工程应用技术

｝

内容部分主要放入公司的一些说明，在ｃｏｎｔｅｎｔ中先填入内容：

＜ｄｉｖｉｄ＝＂ｃｏｎｔｅｎｔ＂＞＜ｐ＞本公司实行全程服务……＜／ｄｉｖ＞

然后定义ｃｏｎｔｅｎｔ块的样式，代码如下：

＃ｃｏｎｔｅｎｔ｛

ｆｌｏａｔ：ｌｅｆｔ；

ｐａｄｄｉｎｇ：３０ｐｘ３０ｐｘ；

｝

对于版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，样式代码如下：

＃ｆｏｏｔｅｒ｛

ｈｅｉｇｈｔ：２０ｐｘ；ｗｉｄｔｈ：８００ｐｘ；

ｍａｒｇｉｎ：０ｐｘ；

ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ；

ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒ：＃６０９ＦＦＦ；

｝

最终可以把所有的样式存到另一个样式文件ｓｔｙｌｅ．ｃｓｓ中，其全部样式代码结构如下：

＜ｓｔｙｌｅ＞

ｂｏｄｙ｛

……

｝

＃ｈｅａｄｅｒ｛

……

｝

＃ｍａｉｎ｛

……｝

＃ｍｅｎｕ｛

……｝

＃ｍｅｎｕｕｌ｛

……｝

＃ｍｅｎｕｌｉａ｛

……

｝

＃ｍｅｎｕｌｉａ：ｈｏｖｅｒ｛

……｝

＃ｃｏｎｔｅｎｔ｛

……｝

＃ｆｏｏｔｅｒ｛

……｝

＜／ｓｔｙｌｅ＞

ｉｎｄｅｘ．ｈｔｍ中的结构代码是这样的：

＜！ＤＯＣＴＹＰＥｈｔｍｌＰＵＢＬＩＣ＂－／／Ｗ３Ｃ／／ＤＴＤＸＨＴＭＬ１．０Ｔｒａｎｓｉｔｉｏｎａｌ／／ＥＮ＂

＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／ＴＲ／ｘｈｔｍｌ１／ＤＴＤ／ｘｈｔｍｌ１－ｔｒａｎｓｉｔｉｏｎａｌ．ｄｔｄ＂＞

＜ｈｔｍｌｘｍｌｎｓ＝＂ｈｔｔｐ：／／ｗｗｗ．ｗ３．ｏｒｇ／１９９９／ｘｈｔｍｌ＂＞

＜ｈｅａｄ＞

＜ｍｅｔａｈｔｔｐ－ｅｑｕｉｖ＝＂Ｃｏｎｔｅｎｔ－Ｔｙｐｅ＂ｃｏｎｔｅｎｔ＝＂ｔｅｘｔ／ｈｔｍｌ；ｃｈａｒｓｅｔ＝ｇｂ２３１２＂／＞

＜ｔｉｔｌｅ＞飞达电脑维修公司＜／ｔｉｔｌｅ＞

＜ｌｉｎｋｈｒｅｆ＝＂ｓｔｙｌｅ．ｃｓｓ＂ｒｅｌ＝＂ｓｔｙｌｅｓｈｅｅｔ＂ｔｙｐｅ＝＂ｔｅｘｔ／ｃｓｓ＂／＞＜／ｈｅａｄ＞

＜ｂｏｄｙ＞

＜ｄｉｖｉｄ＝＂ｈｅａｄｅｒ＂＞＜ｉｍｇｓｒｃ＝＂ｈｅａｄｅｒ．ｇｉｆ＂／＞＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｍａｉｎ＂＞

＜ｄｉｖｉｄ＝＂ｍｅｎｕ＂＞

＜ｕｌ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞公司结构＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞企业文化＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞新闻资讯＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞产品展示＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞客户案例＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞留言反馈＜／ａ＞＜／ｌｉ＞

＜ｌｉ＞＜ａｈｒｅｆ＝＂＃＂＞联系我们＜／ａ＞＜／ｌｉ＞

＜／ｕｌ＞

＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｃｏｎｔｅｎｔ＂＞

＜ｐ＞本公司实行全程服务……＜／ｄｉｖ＞

＜／ｄｉｖ＞

＜ｄｉｖｉｄ＝＂ｆｏｏｔｅｒ＂＞Ｃｏｐｙｒｉｇｈｔ＆ｃｏｐｙ；２００７飞达电脑维修公司版权所有＜／ｄｉｖ＞

＜／ｂｏｄｙ＞

＜／ｈｔｍｌ＞

３４６电脑知识与技术本栏目责任编辑：贾薇薇（下转第３７６页）

网页制作的资料

计算机工程应用技术本栏目责任编辑：贾薇薇基于点到点交换方式的公共工具访问集成方式比较符合集成开发环境开发过程中的串行工作方式。

图５公共工具访问

５．２构件之间的通信机制

在该集成开发环境中，构件可动态配置且不同类型的构件可集成到系统中，构件之间通信的高效性成为一个不容忽视的问题。在ＴｏｓＩＤＥ中，各功能模块之间通过工具总线进行双向的消息传递。消息是一个用于构件与软总线之间信息交换的数据包，通常包

消息含消息头和消息体。消息头中定义了一系列的约定属性，比如同步／异步，控制／数据，校验信息等等；消息体即为欲交换的数据。

可以处理同步和异步系统调度。

图６消息传递机制示意图

整个系统消息传递机制可描述如下：

（１）构件发出消息，总线查询对应的代理，若无代理则通知组件重发或者处理异常；

（２）如果消息有效，则消息进入总线消息队列中，根据消息头信息，总线可能需要将消息拆分，并根据订阅信息将相关消息送往各个订阅的构件代理，如果没有构件订阅该种消息，向发出消息的构件代理送回异常；

（３）代理在收到系统总线的服务调用后，判断构件有效性，有效则向构件请求服务调用，否则向发出消息的构件代理送回异常；（４）构件在收到代理发来的服务调用请求后，响应并直接和发送消息的构件通信；

（５）系统中各个代理，根据需要轮询系统消息队列，如果得到新的消息则将消息取出，过滤掉不需要的消息，转换为组件能够处理的消息，并根据时序重新组织消息提供给组件；

６结束语

本文是基于无线传感器网路操作系统ＴｉｎｙＯＳ的集成开发环境的研究与设计。针对集成开发环境将各功能模块集成为一个整体的特性，采用“软总线＋软构件”的体系结构，这种体系结构具备可扩展性、可维护性、可复用性。

参考文献：

［１］ＫｕｒｔＣ．Ｗａｌｌｎａｕ．ＰｅｔｅｒＨ．Ｆｅｉｌｅｒ．ＴｏｏｌＩｎｔｅｇｒａｔｉｏｎａｎｄｅｎｖｉｒｏｎｍｅｎｔＡｒｃｈｉｔｅｃｔｕｒｅ．ＴｅｃｈｎｉｃａｌｒｅｐｏｒｔｏｆＳＥＩ，ＣａｒｎｅｇｉｅＭｅｌｔｏｎＵｎｉｖｅｒｓｉｔｙ，１９９４．［２］ＰａｕｌＦ．Ｚａｒｒｅｌｌａ．ＣＡＳＥＴｏｏｌＩｎｔｅｇｒａｔｉｏｎａｎｄＳｔａｎｄａｒｄｉｚａｔｉｏｎ．ＴｅｃｈｎｉｃａｌｒｅｐｏｒｔｏｆＳＥＩＣａｒｎｅｇｉｅＭｅｌｌｏｎＵｎｉｖｅｒｓｉｔｙ．ｌ９９４．

［３］蔡勇，桑楠，熊光泽．一种基于工具总线的ＣＡＳＥ集成模型［Ｊ］．计算机应用，２００２．

［４］杨芙清，梅宏，李克勤．软件复用与软件构件技术［Ｊ］．电子学报，１９９９，２（２７）：６８－７５．

［５］郭兵，熊光泽，沈艳，等．工具总线模型研究［Ｊ］．计算机应用，２００３，２３（５）：１－３．

［６］ＲｅｉｓｓＳ．Ｃｏｎｎｅｃｔｉｎｇｔｏｏｌｓｕｓｉｎｇｍｅｓｓａｇｅｐａｓｓｉｎｇｉｎｔｈｅｆｉｅｌｄｅｎｖｉｒｏｎｍｅｎｔ．ＩＥＥＥＳｏｆｔｗａｒｅ，１９９０，７（４）：５７－６６．

［７］ＤａｖｉｄＧａｙ，ＰｈｉｌＬｅｖｉｓ，ＤａｖｉｄＣｕｌｌｅｒ．ＳｏｆｔｗａｒｅＤｅｓｉｇｎＰａｔｔｅｒｎｓｆｏｒＴｉｎｙＯＳ．ＬＣＴＥＳ＇０５，Ｃｈｉｃａｇｏ，Ｉｌｌｉｎｏｉｓ，ＵＳＡ，Ｊｕｎｅ１５－１７，２００５．

［８］罗昔军，马征．定制软件开发平台的研究与设计［Ｊ］．计算技术与自动化，２００６，２５（２）：１０８－１１０．（上接第３４６页）

４结语

ＤＩＶ＋ＣＳＳ网页布局方法已经逐步成为主流的网页布局方法，当然在这个过渡时期，并不是所有的网站都已采用这种方法，有些仍然在使用表格及框架的混合，或者是表格及浮动框架的混合，但基于新Ｗｅｂ标准下的ＤＩＶ＋ＣＳＳ网页布局方法必定逐步取代这些旧的布局模式，成为未来发展的方向。

参考文献：

［１］曾顺，精通ＣＳＳ＋ＤＩＶ网页样式与布局，北京，人民邮电出版社，２００７．

［２］李烨，别具光芒ＤＩＶ＋ＣＳＳ网页布局与美化，北京，人民邮电出版社，２００７．

３７６电脑知识与技术

本文来源：https://www.bwwdw.com/article/jhv4.html