浅析网页布局中DIV+CSS技术的应用

来源:用户上传      作者: 胡滨

　　摘要：传统的网页布局设计方法多采用表格嵌套内容的方式来实现，而采用DIV+CSS与 TABLE相比有很多的优势，实现了样式与内容的分离，更有益于网站的优化，也更符合W3C的标准，当然其也有自身的不足，我们在网页设计中要适当地加以分析和运用，有利于对网站的管理和维护。
　　关键词：DIV+CSS；TABLE；网页设计
　　DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（TABLE）定位方式的区别。目前主流的网页设计架构大多为DIV+CSS结构，DIV+CSS区别于传统的表格定位的形式，采用以“块”为结构的定位形式，DIV本身就是容器性质的，不但可以内嵌TABLE还可以内嵌文本和其它的HTML代码。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。CSS是（Cascading Style Sheets）的简称，中文译作“层叠样式表单”，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页面的外观和格式。
　　DIV+CSS与TABLE方式在设计时差别很大，网页开始设计前需要仔细规划，比如对组成网页的各部分元素命名，方便在CSS中进行样式定义，公共属性部分最好用类名定义。整个网站通用的样式可以放到单独的一个CSS文件中，常有的公共属性有：网页宽度、背景颜色、背景图片、字体默认大小、颜色、链接样式等。
　　具体来说DIV+CSS布局主要有以下几种优势：
　　一、网页代码标准化
　　网页设计采用DIV+CSS，最大的优势是实现网页代码的标准化，摒弃过时的表格布局方式，实现了样式与内容的分离，HTML代码结构性更好，更易阅读和维护。当需要进行网页外观修改时，只需要修改CSS文件即可，完全不用修改网页的结构部分代码，也不会破坏页面其他部分的布局样式。
　　二、提高页面加载速度
　　使用表格布局的网页必须将整个表格加载完成后才能显示出网页的内容，而DIV+CSS布局的网页则因DIV是一个松散的盒子而使其可以边加载边显示出网页内容，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小，相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
　　三、灵活控制页面布局
　　页面的下载通常是按照代码的排列顺序，比如表格布局代码的排列是从上向下，从左到右，无法改变。而通过CSS控制，可以任意改变代码的排列顺序，比如将重要的内容先加载出来。
　　四、利于搜索引擎的搜索
　　使用DIV+CSS布局，结构清晰，用只包含结构化内容的HTML代替嵌套的标签，主次分明，对搜索引擎更加友好，更容易被搜索引擎收录，易于检索。
　　五、简化页面，保持站点一致性
　　使用DIV+CSS对外观进行控制时，由于CSS可以一处定义多处使用，因此除了减少工作量外，也起到了统一站点视觉效果的功能并大大缩减了页面代码。将所有页面或所有区域统一用CSS文件控制，就避免了不同页面或不同区域所体现出的效果偏差。
　　六、良好的兼容多种设备
　　使用DIV+CSS布局时，可使站点更容易被多种浏览器和用户访问，同时能够兼容多种设备，如手机、平板电脑等。
　　虽然DIV+CSS在网站建设中有很多的优势，但是在实际使用中也难免存在不足：
　　（1）DIV+CSS在网站建设中比传统的TABLE定位要复杂的多，这就要求设计者一定要事先对网站的整体结构有一个清晰的规划和设计，合理应用块结构，否则极易出现混乱。
　　（2）DIV+CSS网站建设的样式元素通常会放在一个或多个外部文件中，有可能相当的复杂，甚至比较庞大，如果在网站建设中CSS文件调用出现异常，那么整个网站的外观就会面目全非。
　　（3）虽然说DIV+CSS解决了大部分浏览器兼容的问题，但是也有在部分浏览器中使用出现异常的情况，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中就可能会有异常，这样的情况经常发生，DIV+CSS还没有实现所有浏览器的统一兼容，因此在页面设计的同时，一定要注意调试浏览器的兼容性。
　　基于DIV+CSS的以上特点，我们在实际的网页设计中，要注意以下几个方面的应用：
　　（1）FLOAT属性：DIV（层）默认是占据一整行，对于常见的两列或多列布局的设计，需要能够正确设置FLOAT及WIDTH属性来实现效果。许多浏览器在显示未指定WIDTH的FLOAT元素时会有BUG，所以不管FLOAT元素的内容如何，一定要为其指定WIDTH属性。
　　（2）盒模式：层具有宽度WIDTH、高度HEIGHT、边框BORDER、内间距PADDING和外间距MARGIN等属性，而层实际占据的空间是上述属性值相加的大小，合理运用这些属性能实现紧凑而又美观的网页布局。
　　（3）层嵌套：在进行页面设计时层不宜嵌套过多，嵌套过多会导致代码复杂冗余、维护困难及运行变慢的问题，在多列布局时完全可以用层浮动来实现。
　　（4）兼容性： DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对WEB标准默认值不同。在兼容性测试方面，由于国内使用IE浏览器的用户居多，特别要保证在IE多版本下的兼容问题，针对具体情况可以采用不同的解决办法，也可以使用HACK方法为IE浏览器指定特别的参数。
　　基于以上的分析，我们在进行网站建设的时候，要不断地加以学习，总结经验，根据实际情况有的放矢，才能更有效、更合理地运用好DIV+CSS技术。
　　参考文献：
　　[1]赵清华、林学华 《基于DIV+CSS的网页布局技术应用研究》现代计算机（专业版）2010年05期
　　[2]张丽姿 《DIV+CSS技术在网页中的应用》电脑开发与应用 2010年05期
转载注明来源:https://www.xzbu.com/1/view-5353965.htm