DIV_CSS布局技术在网页设计中的应用.docx

DIV+CSS布局技术在网页设计中的应用梁静琳(武汉工程职业技术学院湖北武汉:430080)摘要DIV+CSS是目前比较流行的一种网页布局方式,本文介绍了DIV+CSS的特点,并通过一个实例说明了DIV+CSS布局的基本用法及核心技术,同时阐述了引入DIV+CSS对今后网页设计教学的影响。关键词DIV;CSS;布局;网页设计中图分类号:TP393文献标识码:A文章编号:167123524(2009)0120042204一直以来,网页布局都是采用表格(TABLE)布局,因为用TABLE进行布局简单、制作速度快。设计者可以直接通过图像编辑器画图、切图,最后再由图像编辑器自动生成表格布局的页面。但用TA2BLE布局的页面,其源代码存在大量的冗余代码,页面结构与表现混杂在一起,非常不利于查找信息和管理,更不利于修改。DIV+CSS的出现弥补了TABLE布局的不足,具有以下三个方面的显著优势:(1)表现和内容相分离DIV+CSS将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息,这样的页面对搜索引擎更加友好;(2)提高页面浏览速度对于同一个页面视觉效果,采用DIV+CSS重构的页面大小要比TABLE编码的页面文件小得多,前者一般只有后者的1/2大小,这样浏览器就不用去解析大量冗长的标签;(3)易于维护和改版由于多个页面可以共享一个CSS文件,这样只需简单的修改CSS文件就可以重新布局整个网站的页面。因此,现在一些比较知名的网站均采用DIV+CSS进行网页的排版布局,DIV+CSS已成为一种网页设计标准。相应的,在网页设计教学中引用DIV+CSS也已是趋势,并将对传统的网页设计教学产生较大的影响。方式,在XHTML网站设计标准中,不再使用TA2BLE定位技术,而是采用DIV+CSS的方式实现各种定位。1.1DIV简介DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块,DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制。1.2CSS简介CSS(CascadingStyleSheet)译作层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。使用CSS可以将格式和结构分离,能更好地控制页面布局,从而制作体积更小、下载更快的网页。1.2.1CSS语法CSS样式基本语法:Selector{Property:val2ue;},其中Selector是选择符,Property为属性,val2ue为值。属性和属性值之间用冒号(:)隔开,多个定义之间用分号(;)隔开。例如:p{COLOR:#FF0000;BACKGROUND:#FFFFFF}此例效果是将段落中的文字颜色设为#FF0000,段落的背景颜色设为#FFFFFF。1.2.2CSS选择符CSS样式的强大、灵活首先体现在选择符上。1DIV+CSS简介DIV+CSS是应用在XHTML中的一种布局收稿日期:2009202216作者简介:梁静琳(1981～),女,助教.E2mail:ljl@43梁静琳:DIV+CSS布局技术在网页设计中的应用灵活选用选择符是布局的基础,这里介绍几种基础的选择符。(1)id选择符用CSS来布局网页主要通过div标签来实现,而div的样式通常是通过id选择符定义的。例如,定义一个div:divid=main/div然后在样式表中定义id的属性:#main{height:380px;width:778px;}要注意的是网页文档中的每个元素的id值不能重复,只能是唯一的。(2)类型选择符类型选择符就是网页元素本身,定义时直接使用元素名称。如在样式表中给body元素定义样式:body{/3定义页面属性3/}(3)通用选择符通用选择符是一种特殊的选择符,用3符号表示,用来定义所有元素对象的样式。例如:3{text-align:center;font-size:12px}上面的样式将文档中的所有文字居中,大小设为12px。(4)分组选择符分组选择符并不是一种选择符类型,而是一种选择符使用方法,用于同时对多个对象定义相同的样式。例如:td,div,a{font-size:14px;}将单元格,块内以及超链接中的文字大小设为14px。(5)包含选择符包含选择符用于给一个元素的子元素定义样式。如:#siderbara{text-decoration:none;back2ground-color:#FFFF99;text-decoration:none;display:block;}就是给#siderbar下面的子元素a(超链接)定义样式。编排网页。因为用这种方式排版的网页代码简洁,更新方便,能兼容更多的浏览器。盒子模