浅谈网页设计中DIV+CSS技术应用的优势及缺陷
来源:用户上传
作者: 李君芳 吴雪毅
摘 要：作为一种重要的网页布局方法技术，DIV+CSS技术对于改善网页的传输速率及网页表现效果具有重要的作用。本文首先对DIV+CSS技术进行概述，然后具体分析了网页设计中DIV+CSS技术应用的优势与缺陷，以期为相关技术与研究人员提供参考。
关键词：网页设计；DIV+CSS技术；应用；优势；缺陷
中图分类号：TP393.092
原有的网页布局设计通常采用表格嵌套内容的方式来完成，此种方式虽在一定程度具有较高的可理解性且通过代码完成，但其也同时存在较多的弊端。而DIV+CSS网页布局技术，能够依据网页设计标准对不同对象进行定位，对采用的CSS创建网站样式与DIV定义网站结构对于促进网页的维护与更新、提高网页传输速率具有重要的推动作用。因此，加强有关网页设计中DIV+CSS技术应用的有关研究，对于改善网页设计的质量具有重要的现实意义。
1 DIV+CSS技术概述
1.1 DIV与CSS简介
（1）DIV技术。DIV元素主要是为HTML文档内容提供背景结构的因素，其能够把文档拆分为具有不同意义的多个模块或区域，模块内容则由DIV的结束标签与开始标签构成，而其所包含元素的性质则由DIV标签的属性来决定；（2）CSS技术。CSS技术是一种网页制作的新技术，其又称为层叠样式表，主要用于调整网页形式且能分离网页内容与样式信息的一类标记性语言。采用CSS技术能够有效分离结构与格式，并提高页面布局的效果，进而生成下载速度快、体积小巧的网页。[1]
1.2 CSS技术的特点
传统的网页缺乏动态效果，且在网页排版布局中存在较多局限，即使是充分利用HTML语言也要经过重复测试采用完善信息排版的过程。而采用CSS技术具有以下特点：（1）有效改善页面布局，采用CSS技术能够从整体上把握HTML语言，且能通过屏幕对图像位置进行有效定位；（2）能够提高图片、文字等内容结构控制的灵活性，促进网页元素的精确定位；（3）CSS样本表无需执行程序、图像、流格式、插件等过程和内容，其只是简单地文本，同HTML指令具有一致的速度性；（4）用户主要感兴趣的是网页的内容结构，若使用户能够更有效的获取这些信息，就必须使用格式控制来进行，采用CSS技术便能够更充分控制页面布局，利用其独立的CSS代码就能控制全面控制页面外观。
2 网页设计中DIV+CSS技术应用的优势与缺陷
2.1 网页设计中DIV+CSS技术应用的优势
（1）与搜索引擎更友好。搜索引擎主要利用Spider程序对内容站点进行查找。Spider程序先从单个或多个简单的页面开始，待这些页面完成扫描后在引入到其他页面，然后再访问Web页面，重复进行扫描直至无新页面索引出现后才停止。采用原有的Table制作网页时其代码数量较多，而搜索引擎工作时需要将多余代码清除，浏览文字相当复杂；而采用DIV+CSS技术，其整体样式都会储存在CSS里，其正文中只存在与ID相关的布恩，这大幅度简化了正文代码与HTML代码，使得正文更加明显，搜索程序在较短的时间内就能完成对页面的扫描，其程序执行效率得到有效改善，这对于提高收录质量具有重要作用。代码简化的网页由于与搜索引擎的友好程度更好，其在搜索引擎中的评比也就会更靠前；[2]（2）更方便网页的维护改版。当采用Table对网页进行改版设计时，需要同时整合全部页面的结构代码，所以其改版效率非常低。而采用CSS技术便能够分离网页中的样式与展示内容，即将网页外观信息从内容中隔离进行集中控制。当需要对网页外观进行改善时则指改变样式中的设定部分，其他部分则无需进行改变；其还能利用早期嵌套在网页中的CSS设置独立储存在文本文件中，技术人员只需利用标记区域内容，从CSS内查找对应的ID便能对页面进行灵活修改，且不会对其他页面布局样式造成破坏；当修改完CSS文件后，剩余的HTML文件可直接进行套用，使技术人员无需对各个HTML文件进行重复设定，这对于减少技术人员工作量、提高页面维护改版的效率具有重要作用；（3）使页面传输速率更快。部分网页设计时为提高网页整体外观效果会使用较多的图片，从而降低网页的传输速率。采用CSS技术能够灵活设定文字样式，同时利用IE内部的滤镜插件，便很容易取代原有图片具有的视觉效果。此种设计方式还能减小页面占用体积，提高下载速率。相比较传统的表格嵌套方式，DIV+CSS技术能够将页面划分成多个区域，在页面开启时能够逐层进行加载，无需像表格嵌套间页面储存在一个较大的表格里，所以页面的传输速率也就更快；（4）具有较高的视觉一致性。在采用Table进行网页制作时，对于不同区域及页面之间的显示效果保真程度不高，且通常网站建设由多人共同给完成，不同的技术人员会按照自身喜好进行网页设计，所以整体网页设计出来的风格杜洋，很难集中到同一个网站中。而采用DIV+CSS技术，能够将网页风格进行统一，并集中采用CSS文件对不同区域及页面进行控制，能够有效避免各类页面与区域之间的效果偏差；对于采用表格技术设计的网页，当改变操作系统及其分辨率时，页面也会发生不同程度变形问题，而采用DIV+CSS技术，其对于不同的浏览器具有更强的适用性，CSS中包含的大量丰富样式对于页面处理更加灵活，且其能够依据浏览器的不同采用同种程度的显示效果并保证不出现变形。
2.2 网页设计中DIV+CSS技术应用缺陷
（1）DIV+CSS技术对于搜索引擎的优化效用有限。当前网页制作的主要方式仍是Table技术与DIV+CSS技术，而搜索引擎并不依据网页是采用CSS还是彪哥来进行排序与收录的，这在一定程度上解释了原有表格布局制作网站的搜索结果相对靠前、而采用DIV+CSS技术制作的网站相对靠后的原因。从搜索引擎优化的角度分析，网站优化水平的高低主要依赖于不同网站间的连接、网站内容和网站结构等因素；[3]（2）DIV+CSS技术仍未全面兼容所有浏览器。采用CSS技术制作网站时，通常会使用单个或多个外部文件进行支持，文件内部会包含网页中所需的图片、字体大小与字体颜色等信息。虽然DIV+CSS技术在很大程度上具有了较高的普适性，但在一些浏览器中仍会出现反常问题，如在搜狗浏览器中能够正常显示的页面，转换到IE浏览器时由于解码的不同会造成不同的页面效果，情况严重时页面则无法显示。虽然异常问题中包含浏览器的缺陷，但仍存在DIV+CSS技术未能全面兼容所有浏览器的问题。如由于CSS样式文件信息相对复杂，部分网站进行饮引用时需要调动大量的CSS文件，当CSS样式文件引用过程中出现失误时，则整个网站的信息都会发生乱码，相应也就出现了页面显示问题；（3）DIV+CSS技术应用较为复杂。相比较Table制作技术，DIV+CSS技术在应用时定位仍相对复杂；且在样式表文件编制时通常采用文本编辑其进行编写，而采用表格布局则通常在可视化环境中进行，代码编写的过程则相对繁琐。
3 结束语
DIV+CSS技术的应用质量将直接关系着网页运行的整体质量与水平，因此，相关技术与设计人员应当加强有关DIV+CSS技术应用的研究，总结DIV+CSS技术应用优势、缺陷及处理要点，以逐步改善DIV+CSS技术应用质量。
参考文献：
[1]李雁南.基于XHTML标准的DIV+CSS网页布局技术浅析[J].科技风，2011（14）：74-75.
[2]漆昊晟，欧阳群.DIV+CSS网页布局技术初探[J].科技广场，2011（10）：61-62.
[3]高英.DIV+CSS网页设计布局技巧分析[J].电子商务，2011（35）：57-58.
作者简介：李君芳（1978.01-），女，河南汝州人，讲师，研究方向：计算机应用技术；吴雪毅（1979-），男，河南邓州人，讲师，研究方向：计算机应用技术。
作者单位：漯河职业技术学院，河南漯河 462000
转载注明来源:https://www.xzbu.com/8/view-6411894.htm
