DIV+CSS技术在网页设计的应用
时间：2022-05-30 01:43:26
摘要：DIV+CSS是Web设计标准，随着Web2.0标准化设计理念的普及，国内很多大型门户网站采用DIV+CSS网页布局制作方法。从实际应用情况证明，该技术具有代码简洁、表现和内容相分离等优势。
关键词：DIV+CSS技术；布局；内容；表现
1DIV+CSS概念
DIV就是一个区块容器，用来封闭数据区域，属于行级区域，相当于一个可以容纳表格、段落、标题、图片等各种元素的容器。在进行网页布局排版时，需要将页面整体上进行DIV分块。层叠样式表CSS示国际W3C标准化组织制定的一套完整的扩展样式标准，主要是为了在HTML的样式编排上对其功能进行补充，更好地完成网页设计的需要而制定的设计标准。CSS层叠样式表对HTML的标记属性的设定进行了扩充，可以使用Script程序功能来对其进行很好的控制，从而对网络的外观设计和整体的布局设计进行非常有效的控制，让网页在设计上具有更加美观的表现形式。CSS层叠样式表技术可以把网页本身需要展示的内容和网页本身具有的样式进行有效的分开，从网页设计的内容中把网页的外观在设计时候设计的信息进行独立存储，进而对网页进行集中有效的统一管理。我们在网页设计的时候把CSS样式的信息作为独立的文件进行存放，可以方便地让其他的网页对其信息进行共享，这样在网页设计的时候就不需要对网页中的文件进行重复性的操作设计了，节省了很多时间和不变要的设计工作。在网页设计中CSS类型的文件建立完之后可以被其他的HTML文件进行共享使用，并且一个单一的HTML文件也可以对其他相关的CSS类型的文件进行套用，这样在网也设计的时候可以很方便地对网页的文件和功能进行设计。
1.1CSS的定义
CSS语法定义包括3个部分，格式如下：Select（propervalue）选择（属性：值）：在属性中可以为设计的网页进行主体的设计，prop-er可以选择要设计的主体，value可以设定主体的属性，这样就可以为网页中的主体的表现效果进行设置了。
1.2选择符类型
（1）标记选择器标记选择器就是声明某个标记直接采用某个样式。如通过h1选择器声明页面中所有的<h1>标记的文字效果。（2）类别选择器类别选择器的定义通常在最前面加一个点号。类别选择符的名字可以由设计者按照自己的意愿来进行定义，对名字的定义可以使英文或者数字，也可以是英文和数据的混合，在进行命名的时候都是以功能来进行名字的设置的。（3）ID选择器在网页设计的HTML的页面中，网页页面元素的指定都是以ID参数进行表示的，ID参数的选取符可以对单个元素的样式进行单独的表示，ID选取符在应用方面比较与类选择符相类似，只要把ID代替CLASS就可以了，一般只在非常特殊的或者特定的环境下才使用ID参数，在选择符中ID参数的使用也仅仅是对单个元素的样式进行独立的表示。
2使用DIV+CSS
采用CSS+DIV技术对网页进行设计具有以下几方面的优点：
2.1内容和形式分离
在独立样式表示的文件中把外观设计从中独立出来进行存放，HTML文件中的内容只能对文本信息进行存放，这样网页前台只需要显示内容就行，形式上的美工交给CSS来处理。内容和形式相分离，生成的HTML文件代码更加精简、更小，网页打开速度更快。
2.2提高搜索引擎对网页的索引效率
采用DIV+CSS架构的网站更符合W3C标准，网站设计要以W3C为指定的标准，这是搜索引擎中关于网页名次排列的一个重要决定标准。网页设计的源代码使用简洁的源代码，采用结构化内容的HTML来取代嵌套的标签文件，网页的内容信息在蜘蛛搜索引擎上处于状态，这样搜索引擎可以更好地对网页内容进行有效的搜索，关键性的内容很容易被得到，对关键性页面的内容在网页中的比重增加了，这样网页的搜索排名比重也增加了，网页的公众评价也可以得到很大的提高。
2.3网站页面浏览速度的提高
网站页面的视觉效果如果是同样的，那么DIV+CSS建立的网页页面的大小与TABLE编码设计的网页的页面的大小相比要小，一般是1/2大小。采用CSS进行设计后，用户在使用网站页面的时候最大的效果就是对网页进行浏览的时候启用页面的速度明显变快。
2.4易于维护和改版
网站设计采用DIV+CSS技术进行设计，在以后的日常维护工作方面会变得很方便。在维护的时候只需要对CSS文件进行修改和设计就可以完成对网页的维护了。在传统的网页布局的表格布局中，对布局的修改是非常麻烦的，是要对整个网也来进行重新设计的。在网页设计的时候如果可以有效地对网页的层结构进行设计，在对网页的外观进行修改的时候只需要使用CSS技术进行对网页结构和内同进行修改就可以了。网页结构的修改和重新设计可以提高蜘蛛搜索引擎的关注度。
3CSS的使用
3.1外部样式表
外部样式表是一种文件，在网页中外部样式表的存在可以以独立的形式，外部样式表文件可以在多个网页页面中进行使用，外部样式表示一种样式文件通过样式来对文件进行保存的，在网页页面中通过link标记与其他的样式表文件进行连接，文件扩展名是.CSS。link标记在页面设计的时候是在head区域进行存放的。浏览器通过文档形式从CSS文件中把定义的样式表读取出来，对网页页面设计中使用的外部表的样式和文件类都进行了定义。在多个网页页面中可以应用统一个外部样式表的文件，在网页设计的时候如果对样式表文件进行了修改，那么网页页面的其他的样式也会发生变化。在网页设计的时候对大量的同样的样式页面进行制作还是非常方便的，网页页面设计的重复性工作减少了，在以后网站页面的维护和修改上也比较方便，在对页面浏览的时候关于重复代码的下载也减少了。
3.2内部样式表
内部样式表的设计是在页面的<head>和</head>的标签之间加入样式表，这样在网页页面中就把定义好的样式应用进来了，样式表的插入是以style标签的形式插入的，例：这种样式的使用相对来说还是比较简单，而且在应用上还是比较实用的，在网页页面的头部可以输入同样的样式，这样所有的网页页面的样式就都统一化了。
3．3内联样式表设计
在HTML标记中对内联样式的使用属于混合样式，通过这样的方式，对元素进行样式的单独定义就比较简单了，在HTML标记里直接加入style参数这是使用内联样式的基本方式，CSS属性和style参数的内容是一样的。在实际上，内联样式表的效率与以上两种情况相比来说在效率上还是比较低的，在网页的页面设计中对内联样式表的使用是不推荐的。内联样式表不能重复使用里面的样式内容，另外内联样式表的标记的内容和样式都是混合在一起使用的，对代码的维护具有很大的难度，而且在代码进行阅读的时候也是比较复杂的。
4制作流程
（1）创建文件（文件管理及命名）。（2）与HTML文档建立关系。网站常用：外链样式。（3）制作页面样式。要为每一个DIV进行边界的设置，这样可以清晰地看到里面的内容，就不需要通过屏幕卷动的方式进行浏览了。对元素进行定义编写CSS<html>等，选择符采用递归结构。在网页设计的时候设置的标记就更加清晰了。同HTML框架一致从上到下，从整体到局部，共用样式到个别样式。CSS文档的顺序：共用的代码样式放在文档最前面。CSS结构设计的顺序一般都是以HTML的顺序为标准的。CSS选择器中的相关的属性的顺序表示：属性显示->自身属性->文本属性。显示属性：display,list-style,position,float,clear。自身属性：width,height,margin,padding。文本属性：color,font,text-decoration,text-align,ver-tical-align,white-space,content。原因：以上的顺序是我们在进行项目开发的时候使用的代码的标准，这个顺序设浏览器的渲染顺序是一致的，最终的目的是为了把执行效率进一步地提高。（4）注释添加：1）文档与对应的文档注释的关系是唯一的关系，这也是为了便于今后对网页的维护，注释的说明表示主要是：创建文档人和时间等信息的说明。2）属性注释说明。3）功能注释说明。DIV+CSS技术在网页布局的设计上是主流技术，DIV+CSS技术符合国家W3C的一系列标准，并且可以使用DIV+CSS技术对网站的重构，可以大大提升网站浏览速度，易于维护和改版，提升网站用户与搜索引擎的友好度。
参考文献
[1]车元媛.CSS技术在网页设计中的应用研究.科技信息,2011.
[2]王聪.基于DIV+CSS技术网页布局应用与实践.电脑知识与技术：学术交流,2014.
[3]石元聆.DIV+CSS技术网页布局中定位技术的探讨.电脑编程技巧与维护,2014.
[4]田佳妮.DIV+CSS在网页布局中的应用研究.电脑知识与技术,2015.
作者：王微 单位：沈阳职业技术学院计算机学院