浅谈基于DIV+CSS的网页布局技术应用研究.docVIP

PAGE PAGE 1 浅谈基于DIV+CSS的网页布局技术应用研究 　　摘要：传统网页布局设计策略多使用表格嵌套内容的方法来实现，针对传统Table页面布局方法的缺点较多，本文详细阐述了DIV+CSS的网页布局技术，提出了基于DIV+CSS的网布局具体网页设计步骤，并列举了相应的实例和相关的注意事项，对网页设计有重要的作用。 　　关键词：Table；DIV+CSS；网页设计 　　中图分类号：TP393.092文献标识码：A文章编号：1007-9599（2013）01-0231-02 　　1DIV+CSS技术 　　DIV+CSS是将网页页面先在整体 标记，并分成较多部分，接着再对每个部分进行CSS定位，增加格式，然后分别在每个分部分中增加相应的内容。与传统布局相比，DIV+CSS布局是一种新颖的排版布局策略。DIV+CSS是网站标准中常用术语之一，div+css是一种网页的布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。Div+CSS网页布局的主要作用主要体现在以下几方面[2-3]。 　　第一、DIV+CSS布局网页可以使网页载入更加快捷，可以更方便地被搜索引擎引用。但是因为很多的网页代码在CSS里面，这就让页面的容量缩得更多，这就可以让网页里面的正文部分更加突出，更加便于被搜索引擎采集引用。与表格嵌套方法不同的是，DIV+CSS技术把页面单独分成很多部分，而且需要在打开页面的时，不断在每个层次增加。与表格嵌套布局不同的是，表格嵌套布局将全部页面放在一个大表格里面，这就导致网页加载速度变得很缓慢。 　　第二、DIV+CSS布局网页可以减少流量费用。网页页面体积降低，浏览也会减少，采用DIV+CSS布局网页可让较多的控制主机流量的网页来说是很好控制的。 　　第三、采用DIV+CSS布局网页策略可使程序修改设计时效率增加。因为采用了DIV+CSS技术策略，在修改页面的时更加可以减少时间。依据区域的相应内容标示，然后再到CSS里面寻找相一致的ID，这可以让修改页面的时更容易，而且更不可能影响页面其它部分的网页布局格式。 　　第四、可以保持视觉的相同性，这对于浏览者与浏览器更有美感性。和传统的表格嵌套的设计策略，这会让页面和页面，区域与区域间的显示效果会有较大的差异。但是，如果采用DIV+CSS的布局网页的办法，可以把全部网页页面和全部的区域完全用CSS文件统一编制，就可以不需要用不同的区域和不一样的页面表现出的效果差异。但是因为CSS具有较多的格式，这样可以使页面更具有可变性，采用DIV+CSS的布局网页的办法可以依据不相同的浏览器，从而达到显示结果完全一样，进而可对浏览者与浏览器更具有可读性和美观性。 　　2DIV+CSS网页设计 　　CSS是层叠样式表（CascadingStyleSheets）的简化写法，主要作用是定义HTML元素的显示格式，这是W3C的模板化的网页布局的标准格式。主要包括以下步骤： 　　（1）在HTML的内容中载入CSS；样式格式主要分为，嵌入式样式表、外部样式表与内联样式表三种格式。在相同的文档内可以同时使用两种方法：第一种，发展；样式定义放在一个单独的文件中。例如新建一个后辍名为CSS的样式定义格式。第二种，首先元素的表示{属性color，值red}；其次head字段中需要用标示； 　　（2）引用语法格式：； 　　（3）嵌入式样式格式， 　　（4）内联格式表示法：需要在开始标记里； 　　（5）格式的规则。样式规则主要包括两部分：选择器和声明部分，声明部分是一个大容器，主要包括由大括号的中间部分，声明部分中间的空间将被忽略，声明部分由多个的声明组成，声明包括属性与值组成，属性与值用冒号分开，并且用分号表示语句的结束，且每个声明内只需要有单个属性，但是若属性值中仅只有用空格和双引号括起来例如在由一个声明部分内可有较多声明表示，而且需要将每个声明用分号分开。选择器声明部分，需要选择一个元素，声明属性；分号表示声明的语句结束。 　　（6）注释部分：相关的详细信息需要有详细的解释部分； 　　（7）选择器分组部分，如果有多个选择器一同有单个声明的时，需要分别放在一起，每个选择器需要用逗号分开例如D1，D2，D3，D4{colorred}选择器在分别分块的时候需要将每个选择器路径全部写出来，而且分组结尾部分不可以有逗号等要求； 　　（8）选择器的选择。元素选择器的选择，语法表示法为，比如元素{color：blue；}，伪类选择器：伪类选择器可以以不同方式格式化超级链接元素的四种不同状态； 　　（9）伪元素选择器，标准的选择器不能格式化一个元素内容