DIV+CSS网页布局技术初探

ａｒｔｉｃｌｅ ｗｉｌｌ
ｃａｎ
ａｎａｌｙｚｅ
ｔｈｅ ＤＩＶ＋ＣＳＳ
ａｄｖａｎｔａｇｅｓ
ｗｅｌｌ
ａｓ
ｗｅａｋ
ｐｏｉｎｔｓ，ｓｏ
ｒｅａｄｅｒｓ
ｍａｋｅ
ａ
ｋｎｏｗｌｅｄｇｅ ｏｆ
ＤＩＶ＋ＣＳＳ
ｔｅｃｈｎｉｑｕｅ．
Ｋｅｙｗｏｒｄｓ：ＤＩＶ＋ＣＳＳ；ＤＩＶ；ＣＳＳ；Ｗｅｂ Ｄｅｓｉｇｎ；Ｗｅｂ Ｌａｙｏｕｔ
０引言 伴随着互联网的迅速推广，愈来愈多的人得益于网络的
发展和壮大，每天无数的信息在网络上传播，人们在其中徜
徉搜寻，各得其乐，而形态各异、内容繁杂的网页就是这些信 息的载体。随着时间的流逝，Ｗｅｂ标准化设计思想开始逐渐 浮出水面，同时带来了业界对ＤＩＶ＋ＣＳＳ的标准化设计的关 注，目前各大网站都在逐渐受到ＤＩＶ＋ＣＳＳ设计思想的影响。
在ＤＩＶ＋ＣＳＳ设计思想中，ＤＩＶ和ＣＳＳ分别是两种不同的网页 设计技术，下面先简单的介绍一下这两种技术。ＤＩＶ＋ＣＳＳ作为一种新的网页设计技术，既然能够获得 １什么是ＤＩＶ和ＣＳＳ 业内的认可，并且快速的流行起来，说明该技术与传统的网 ＤＩＶ是指ＨＴＭＬ标记集中的标记“＜ｄｉｖ＞”，中文可以理解 为层的概念。简单来说ＤＩＶ元素是用来为ＨＴＭＬ文档内大块 （ｂｌｏｃｋ－ｌｅｖｅｌ）的内容提供布局结构和背景。ＤＩＶ的起始标 签和结束标签之间的所有内容都是用来构成这个块的，其中 所包含元素的特性由ＤＩＶ标签的属性来控制，或者是通过使 用样式表格式化这个块来进行控制。Ｉｎｔｅｒｎｅｔ、Ｅｘｐｌｏｒｅｒ和 Ｎｅｔｓｃａｐｅ的浏览器都支持ＤＩＶ标签。在可以预计的将来，表 格的地位依然十分重要，但是ＤＩＶ必然代表网络世界的发展 方向。 ＣＳＳ是Ｃａｓｃａｄｉｎｇ
殳
器
Ｄ Ｉ Ｖ＋ＣＳ Ｓ网页布局技术初探
ＤＩＶ＋ｃＳＳ Ｗｅｂ Ｌａｙｏｕｔ Ｔｅｃｈｎｉ
ｑｕｅｓ Ｒｅｓｅａｒｃｈ
要
布
曩
术 初 探
Ｑｕｎ
Ｏｕｙａｎｇ
漆昊晟欧阳群
Ｑｉ Ｈａｏｓｈｅｎｇ
（江西司法警官职业学院司法信息系，江西南昌 （Ｄｅｐａｒｔｍｅｎｔ
ｏｆ Ｊｕｄｉｃｉａｒｙ Ｉｎｆｏｒｍａｔｉｏｎ，Ｊｉａｎｇｘｉ Ｊｕｄｉｃｉａｒｙ Ｐｏｌｉｃｅ ３３００１ ３）
பைடு நூலகம்
ｉｓ
ｅａｓｉｅｒ
ｕｎｄｅｒｓｔａｎｄ ｗｉｌｌ
ａｓ
ｒｅａｌｉｚｅｄ
ａｎｄ
ｂｙ
ｃｏｄｅ．Ｈｏｗｅｖｅｒ．ａｓ
ｎｅｗｌｙ－ｄｅｖｅｌｏｐｅｄ ｂｒｉｅｆｌｙ
ｔｅｃｈｎｉｑｕｅ，
ｔｅｃｈ－
。ＤＩＶ＋ＣＳＳ”ｆｕｎｃｔｉｏｎ
ｎｉｑｕｅ’ｓ
ｂｅ
ｍｏｒｅ
ｆｌｅｘｉｂｌｅ
ｓｔｒｏｎｇｅｒ．Ｔｈｉｓ ｔｈａｔ
ｔｈｅ
改，就可以改变同一页面的不同部分，或者不同页面的网页 的外观和格式。 在ＣＳＳ标准里，不仅重新定义了ＨＴＭＬ原有的样式，如文 字的大小、颜色等，更加入了重叠文字、区块变化及任意位置 放置等多项新属性。通过ＣＳＳ可以使用更丰富、更灵活的样 式，设计出更美观的网页。同时，也让网页的设计与维护更有 效率。 ２网页中采用ＤＩＶ＋ＣＳＳ的优势
Ｓｔｙｌｅ
页布局显示设计技术比较起来优势是十分明显的。如今大部 分网站仍然采用表格嵌套内容的方式来制作网站，虽然此方 法对于我们来说比较熟悉、容易上手，但是，它却阻碍了一种 更好的、更有亲和力的、更灵活的，而且功能更强大的网站设
计方法——ＤＩＶ十Ｃｓｓ。使用ＤＩＶ＋ＣＳＳ技术可以使网页的内容
和样式进行分离，这对于所见即所得的传统表格（ｔａｂｌｅ）布 局设计方式是一个很大的冲击，尤其是设计人员很难接受设 计一个他们不能立即看到的样式，但是ＤＩＶ＋ＣＳＳ的优势实在 太明显了。 （１）网页改版维护更加方便快捷 在一个基于表格（ｔａｂｌｅ）设计的网站基础上进行改版． 几乎必须改变所有页面的结构代码，实在是太过于麻烦。使 用ＣＳＳ技术在于可将网页要展示的内容与其表现的样式分
２４９
万方数据
辩一
来，并集中管理。这样，当要改变网页外观时，只需更改样式 设定的部分，ＨＴＭＬ文件本身并不需要任何的更改。ＣＳＳ还可 以将原来内置在网页中的ＣＳＳ设置提取到网页外部，单独保 存成一个文本文件，设计者只要根据区域内容标记，到ＣＳＳ 里找到相应的ＩＤ，使得修改页面的时候更加方便，也不会破 坏页面其他部分的布局样式。对ＣＳＳ文件进行修改后，其他 ＨＴＭＬ文件中自动进行套用，让设计者不必一一在每个ＨＴＭＬ 文件中重复设置，可减少设计者许多负担，修改页面的时候 更加容易省时。 （２）保持视觉的一致性 以往使用表格嵌套制作方法设计网页时，会使得页面与 页面，或者区域与区域之间的显示效果会有偏差，并且由于 网站往往由多人完成，而每个网页设计者会按照自己的喜好 制作网页，因此不同人员开发网页风格不一致，很难放在同 一个网站中。现在运用ＤＩＶ＋ＣＳＳ技术，可以方便地为所有网 页设置一种风格，再交由不同部门、不同地方的人制作网页， 使用ＤＩＶ＋ＣＳＳ的制作方法，将所有页面，或所有区域统一由 ＣＳＳ文件控制，很好避免了不同区域或不同页面体现出的效 果偏差。同时由于网站做出来是给浏览者使用的，使用表格 技术设计出来的网页，当操作系统及分辨率发生变化时，页 面有时会出现变形现象，页面中使用ＤＩＶ＋ＣＳＳ技术在这方面 将更具优势。对浏览者和浏览器更具亲和力，ＣＳＳ中富含的 丰富样式也将使页面更加灵活，并可以根据不同的浏览器达 到显示效果的统一和不变形。 （３）使页面载人得更快 很多网页为求设计效果，在网页中使用了大量图像，以 致网页的下载速度变慢。ＣＳＳ提供了很多文字样式的设定， 且再加上ＩＥ内建的滤镜特效，因此可轻松取代原来图像才 能表现的视觉效果。这样的设计方式让页面体积变小，大大 提高了下载速度，这就使得对于某些控制主机流量的网站来 说是最大的优势。同时由于设计者将大部分页面代码写在了 ＣＳＳ当中，使得页面体积容量变得更小。相对于表格嵌套的 方式，ＤＩＶ＋ＣＳＳ将页面独立成更多的区域，在打开页面的时 候，逐层加载，而不像表格嵌套那样将整个页面圈在一个大 表格里，由此页面加载速度大大得到提高。 （４）对搜索引擎友好程度高 搜索引擎主要使用一种叫Ｓｐｉｄｅｒ的程序用来做基于内 容的站点查找。Ｓｐｉｄｅｒ程序从一个或几个简单的页面开始 执行，然后这些页面被扫描。索引到其他页面，Ｓｐｉｄｅｒ程序 再访问这些Ｗｅｂ页面，重复上面过程，直到没有新页面的索 引出现，这个程序才中止。使用ＴＡＢＬＥ进行网页布局的代码 比较多，搜索引擎要把多的代码去掉，看文字比较复杂。而使 用ＤＩＶ＋ＣＳＳ布局设计网页，所有样式都在ＣＳＳ里，正文里面 只有ＩＤ调用的部分，正文代码得到极大的精简，也减少了 ＨＴＭＬ代码，正文就突出了，搜索程序就能在更短的时间内爬 完整个页面，搜索程序执行效率也就得到提高，这样对收录 质量有较大好处，因此更加容易被收录。同时代码简化了就 会受到搜索程序喜欢，这样对收录数量有一定好处，在搜索 引擎中评分也会比较高，网站的排名就会靠前。 ３网页中采用ＤＩＶ＋ＣＳＳ的缺陷 上面已经总结了很多ＤＩＶ＋ＣＳＳ的优点，但是网页设计人 员在使用ＤＩＶ＋ＣＳＳ技术设计网页的同时也不能忽视该技术 的一些不足。 （１）ＤＩＶ＋ＣＳＳ技术使用常常出现困难 尽管ＤＩＶ＋ＣＳＳ不是高不可及，但使用起来还是比表格定 位复杂的多，甚至有些网站设计高手使用起来都常出现问 题，更不要ｉ兑初学者了。并且编写样式表文件一般都使用文 本编辑器进行编写，相比较表格进行布局时一般是在所见即 所得的可视化环境下进行，使用文本编辑器编写代码这一过 程往往比较枯燥。 （２）ＤＩＶ＋ＣＳＳ技术尚未兼容所有浏览器 使用ＣＳＳ技术进行网站设计时，经常会设计１个或几个 外部文件，网页中使用到的字体颜色、字体大小及图片等信 息都包含在内。从目前来看ＤＩＶ＋ＣＳＳ已经解决了大部分浏览 器兼容问题，但是在部分浏览器中仍然会有异常出现，比如 在火狐浏览器中显示正常的页面，到了ＩＥ中由于对部分代 码的理解不同，可能会有意想不到的效果，甚至面目全非。当 然这应该是浏览器的问题，但是可以说在目前来看，ＤＩＶ＋ＣＳＳ 还没有实现所有浏览器的统一兼容。同时由于ＣＳＳ样式文件 往往信息复杂，有些网站引用到比较庞大的ＣＳＳ文件时一旦 ＣＳＳ样式文件调用出现异常，那么整个网站的信息将出现混 乱，效果惨不忍睹。 （３）ＤＩＶ＋ＣＳＳ对搜索引擎优化与否，网页设计者的专业 水平占主导地位 利用表格技术和ＤＩＶ＋ＣＳＳ技术是甘葡主要的设计方式，何 况搜索引擎对于网页的收录和排序显然不是以是否采用表格和 ＣＳＳ定位来衡量，这就是为什么很多传统表格布局制作的网站 在搜索结果中的排序靠前，而很多使用ＣＳＳ及Ｗｅｂ标准制作的 网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构， 内容、相关网站链接等因素始终是网站优化最重要的指标。 ４结束语 通过对ＤＩＶ＋ＣＳＳ技术的优势和缺陷进行分析，我们可以 发现，虽然ＤＩＶ＋ＣＳＳ技术的优势明显，但是在没有任何 ＤＩＶ＋ＣＳＳ技术基础的前提下，要转入ＤＩＶ＋ＣＳＳ的开发，可能 会走很多弯路，设计出来的网页往往很难达到预期效果。如 何能够合理运用ＷＥＢ ２．０标准设计出好的网页，这是需要循 序渐进的学习和实践才能够达到的。同样，要想将ＤＩＶ＋ＣＳＳ 技术运用的更好，更是离不开长时间的学习和丰富的设计经 验的积累，只有这样，才能很好的掌握这门技术。 参考文献 【１】陈刚．ＣＳＳ标准网页布局开发指南［Ｍ】．北京：清华大 学出版社．２００７． ［２】曾顺．精通ＣＳＳ＋ＤＩＶ网页样式与布局［Ｍ】．北京：人民 邮电出版社，２００７． 【３郑宁宁．浅析ＤＩＶ＋ＣＳＳ网页设计技术【Ｊ】．山东省农 业管理干部学院学报，２００８． 作者简介 漆吴晟（１９８２－），男，江西南昌人，硕士，讲师，江西司法 警官职业学院司法信息系，主要研究方向：软件程序设计： 欧阳群（１９８２一），女，江西南昌人，硕士在读，助理讲师， 江两司法警官职业学院司法信息系，主要研究方向：软件程 序设计。
３３００１３）
Ｏｆｆｉｃｅｒ Ｏｃｃｕｐａｔｉｏｎ Ａｃａｄｅｍｙ。
Ｊｉａｎｇｘｉ Ｎａｎｃｈａｎｇ
摘
要：目前常用的网页布局设计主要有表格技术和ＤＩＶ＋ＣＳＳ技术两种，其中使用表格技术进行网页布局对于网页设计
人员来说比较容易理解并通过代码实现，而ＤＩＶ＋ＣＳＳ技术作为一种新的网页设计技术，实现的功能将更强。灵活性也更高。本 文简要分析ＤＩＶ＋ＣＳＳ技术的优势和缺陷，让读者对ＤＩＶ＋ＣＳＳ技术有一定的了解。 关键词：ＤＩＶ＋ＣＳＳ；ＤＩＶ；ＣＳＳ；网页设计；网页布局 中图分类号：ＴＰ３０９
Ｓｈｅｅｔｓ的简称，中文译作。层
叠样式表”，通常把它称作样式表，是一种格式化网页的标准 方式。在网页中使用ＣＳＳ技术，不光可以控制大多数传统的 文本格式，还可以有效地对页面的布局、颜色、背景和其他效
果实现更加精确的控制。只要对相应的代码做一些简单的修’开，也就是将网页的外观设定信息从网页的内容中独立出
万方数据
Ａｂｓｔｒａｃｔ：Ａｔ
ｎｉｑｕｅ ｐｒｅｓｅｎｔ ｔｏ
文献标识码：Ａ
ＴＡＢＬＥ ａｎｄ ＤＩｖ＋ＣＳＳ ａｎｄ
ａｒｅ
文章编号：１６７１—４７９２一（２００９）７—０２４９—０２
ｃｏｍｍｏｎｌｙ
ｕｓｅｄ
ｆｏｒ ｗｅｂ
ａ
ｌａｙｏｕｔ
ｄｅｓｉｇｎ．Ｃｏｍｐａｒａｂｌｙ．ＴＡＢＬＥ
ｗｅｂ ｄｅｓｉｇｎ
ｔｅｃｈ－