网页设计中的DIV+CSS技术应用研究.docVIP

网页设计中的DIV+CSS技术应用研究 　　摘 要：以目前非常流行的网页设计技术CSS+DIV为研究对象，阐述了该技术产生的背景，分析了该技术在实际应用中的优缺点，并在此基础上提出了能使该技术在应用上实现最优化的一系列方法。 　　关键词：DIV；CSS；网页布局；XMHTL 　　中图分类号：TP393 文献标识码：A 文章编号2013）003013702 　　0 引言 　　“内容”与“形式”分离式的网页设计已成为时下静态网页设计的主流方向，整个网络刮起了一股“网站重构”的浪潮。以“DIV控制网站的模块布局，CSS控制页面内容表现形式”的DIV+CSS技术为许多网页设计者带来了福音，但是在实际应用时也存在一些问题。本文分析了CSS+DIV的产生背景，并对该技术的优缺点进行了探讨，然后在此基础上提出了一系列可行方法使该技术在网页设计中能做到扬长避短，将其功能发挥到最大化。 　　1 DIV+CSS产生的背景 　　1.1 从HTML到XHML 　　HTML（Hypertext Markup Language）――超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分，是传统基于TABLE布局的一种基本网页设计语言。 　　XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML是一个基于XML的标记语言， XHTML是一种增强了的HTML，是基于“DIV+CSS”技术的一种网页设计语言。建立XHTML的目的就是实现HTML向XML的过渡。 　　1.2 从TABLE到DIV+CSS 　　最早期的TABLE布局网页是由表格的嵌套和合并拆分所实现，而所有的样式都直接在HTML代码中体现，样式与内容完全混合在一起。 　　后来，许多网页设计者会将整个网页设计分成两步：先直接在图像编辑软件生成一张网页的平面图，通过切片导出生成TABLE布局的网页；然后，利用网页编辑软件生成一些动态链接的效果。但是这种两步走并不是真正意义上的“内容”与“样式”的分离，这样的网页代码中还是存在很多样式信息，也存在大量重复和冗余，同样不利于后期修改维护。 　　如今的网页设计都是在设计之初就将“内容”与“样式”分开了，先在HTML中利用DIV块把网页的“内容”和“结构”写好，然后再用CSS来建立“样式”，这种分离式设计既简化了网页代码的复杂度又使得网页样式易修改、可重复利用。 　　2 DIV+CSS的优势 　　2.1 结构标准化，布局更灵活 　　在利用DIV+CSS技术进行页面布局时，网页中的一个模块可以用一个DIV块来定义，块的大小、边框边距及间距等属性可以任意设置，块与块之间的关联也可以灵活设置，每个对象可以单独放置到相应的DIV块中，而不需要像TABLE布局那样嵌套多层表格之后再进行合并和拆分单元格来实现，也不会因为某一对象所在单元格大小的调整影响了另一个对象的显示效果。 　　2.2 样式与内容分离，便于修改和统一风格 　　使用DIV+CSS制作的网页由于将样式与内容进行了分离，修改网页的显示效果时只需要修改CSS代码即可。此外，若多页面共用一个CSS文件，既可减化代码又实现了网站的风格统一，维护的时候只需修改一个文件即可改变所有页面的布局或样式。 　　2.3 有利于搜索引擎优化 　　许多网页的样式设计代码几乎与页面内容持平甚至是超过页面内容，而采用DIV+CSS设计的网页，在被搜索时探索引擎只需要从HTM代码中搜索关键字即可，减少了探索内容，提高了搜索效率。 　　3 DIV+CSS的不足 　　3.1 浏览器兼容问题 　　笔者在设计网页时经常碰到这样的情况：在自己电脑上看到的效果和在其它机器上看到的效果不一样，其原因是因为浏览器的问题，比如IE6、IE7、Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样。这个时候就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到预期的页面效果。但是笔者相信，随着技术的成熟，浏览器对DIV+CSS的兼容性总有一天会得到解决。 　　3.2 技术复杂度高 　　相比TABLE而言，DIV+CSS比较难以上手，尤其是那些对网页设计代码一无所知的设计者，他们已经习惯于那种所见即所得的设计方式，对于这种先定义后使用的CSS样式难以理解，这种情况下利用DIV+CSS技术反而会适得其反。 　　4 扬长避短地使用DIV+CSS 　　4.1 慎用DIV块 　　在布局时并不是所有的对象都需要用一个DIV块，一个列表本身就是一个非常完整的对象，它可以直接使用样式，如下面两段代码中，左右两种的最终显示效果完全