DIV+CSS技术在网页设计的应用


DIV+CSS技术在网页设计的应用


【DIV+CSS技术在网页设计的应用】DIV+CSS是Web设计标准,随着Web2.0标准化设计理念的普及,国内很多大型门户网站采用DIV+CSS网页布局制作方法 。从实际应用情况证明,该技术具有代码简洁、表现和内容相分离等优势 。DIV就是一个区块容器,用来封闭数据区域,属于行级区域,相当于一个可以容纳表格、段落、标题、图片等各种元素的容器 。在进行网页布局排版时,需要将页面整体上进行DIV分块 。层叠样式表CSS示国际W3C标准化组织制定的一套完整的扩展样式标准,主要是为了在HTML的样式编排上对其功能进行补充,更好地完成网页设计的需要而制定的设计标准 。

使用DIV+CSS

采用CSS+DIV技术对网页进行设计具有以下几方面的优点:

内容和形式分离

在独立样式表示的文件中把外观设计从中独立出来进行存放,HTML文件中的内容只能对文本信息进行存放,这样网页前台只需要显示内容就行,形式上的美工交给CSS来处理 。内容和形式相分离,生成的HTML文件代码更加精简、更小,网页打开速度更快 。

提高搜索引擎对网页的索引效率

采用DIV+CSS架构的网站更符合W3C标准,网站设计要以W3C为指定的标准,这是搜索引擎中关于网页名次排列的一个重要决定标准 。网页设计的源代码使用简洁的源代码,采用结构化内容的HTML来取代嵌套的标签文件,网页的内容信息在蜘蛛搜索引擎上处于裸露状态,这样搜索引擎可以更好地对网页内容进行有效的搜索,关键性的内容很容易被得到,对关键性页面的内容在网页中的比重增加了,这样网页的搜索排名比重也增加了,网页的公众评价也可以得到很大的提高 。

网站页面浏览速度的提高

网站页面的视觉效果如果是同样的,那么DIV+CSS建立的网页页面的大小与TABLE编码设计的网页的页面的大小相比要小,一般是1/2大小 。采用CSS进行设计后,用户在使用网站页面的时候最大的效果就是对网页进行浏览的时候启用页面的速度明显变快 。

易于维护和改版

网站设计采用DIV+CSS技术进行设计,在以后的日常维护工作方面会变得很方便 。在维护的时候只需要对CSS文件进行修改和设计就可以完成对网页的维护了 。在传统的网页布局的表格布局中,对布局的修改是非常麻烦的,是要对整个网也来进行重新设计的 。在网页设计的时候如果可以有效地对网页的层结构进行设计,在对网页的外观进行修改的时候只需要使用CSS技术进行对网页结构和内同进行修改就可以了 。网页结构的修改和重新设计可以提高蜘蛛搜索引擎的关注度 。

3CSS的使用

外部样式表

外部样式表是一种文件,在网页中外部样式表的存在可以以独立的形式,外部样式表文件可以在多个网页页面中进行使用,外部样式表示一种样式文件通过样式来对文件进行保存的,在网页页面中通过link标记与其他的样式表文件进行连接,文件扩展名是.CSS 。link标记在页面设计的时候是在head区域进行存放的 。浏览器通过文档形式从CSS文件中把定义的样式表读取出来,对网页设计中使用的外部表的样式和文件类都进行了定义 。

内部样式表

内部样式表的设计是在页面的<head>和</head>的标签之间加入样式表,这样在网页页面中就把定义好的样式应用进来了,样式表的插入是以style标签的形式插入的,例:这种样式的使用相对来说还是比较简单,而且在应用上还是比较实用的,在网页页面的头部可以输入同样的样式,这样所有的网页页面的样式就都统一化了 。

推荐阅读