基于DIV+CSS的网页设计技术

基于DIV+CSS的网页设计技术摘要：DIV+CSS是目前比较流行的一种网页布局方式，本文介绍了DIV和CSS技术的特点，通过实例讲解了DIV+CSS网页布局技术的方法和技巧应用。该技术具有代码简洁、表现和内容相分离等优势。关键词：DIV；CSS；网页设计李津晖（中国石油辽河油田分公司钻采工艺研究院）作者简介：李津晖（1971-），女，汉族，1993年毕业于辽宁工业大学计算机及其应用专业，工学学士。高级工程师，现从事信息门户系统建设与管理工作。􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍􀤍·特邀论文·0引言传统Table布局方式只是利用了HTML的table元素所具有的零边框特性。Table布局设计复杂，改版时工作量巨大。其源代码存在大量的冗余代码,页面结构与表现内容混合，可读性差。非常不利于查找和管理信息,更不利于数据调用分析。而且网页文件量大，浏览器解析速度慢。DIV+CSS技术的出现弥补了Table布局的不足，具有以下的显著优势：（1）表现和内容相分离：DIV+CSS将设计部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。Html文件中只存放文本信息，用只包含结构化内容的HTML代替嵌套的标签，这样的页面对搜索引擎更加友好，搜索引擎将更有效地搜索到你的内容。（2）提高页面浏览速度：对于同一个页面视觉效果，采用DIV+CSS重构的页面大小要比Table编码的页面文件小得多，前者一般只有后者的1/2大小，大大缩减页面代码，缩减带宽成本。（3）易于维护，缩短改版时间：由于多个页面可以共享一个CSS文件，只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。1DIV与CSS简介DIV+CSS是应用在Xhtml中的一种布局方式，在Xhtml网站设计标准中，不再使用Table定位技术，而是采用DIV+CSS的方式实现各种定位。1.1DIV简介DIV元素是用来为html文档内大块的内容提供布局的结构和背景。它是html中的一个标签，此标签的作用就是定位网页内容中的图片、文字、视频等相关信息。一般我们也称为DIV层定位。1.2CSS简介CSS(cascadingstylesheet),层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS是1996年由w3c审核通过，并且推荐使用的。CSS的引入就是为了使html语言更好的适应页面的美工设计。它以html语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和pda等）来设置不同的样式风格。使用CSS可以将格式和结构分离,能更好地控制页面布局,从而制作体积更小、下载更快的网页。2CSS的特点过去的网页通常缺少动感，而且在网页内容的排版布局上也有很多困难，如果不是专业人员，很难让网页按自己的构思和创意来显示信息。即便是掌握了Html语言精髓的人也要通过多次地测试，才能石油工业计算机应用COMPUTERAPPLICATIONSOFPETROLEUMVol.25No.4Dec.2017第25卷第4期2017年12月22第25卷第4期驾驭好这些信息的排版。样式表就是在这种需求下诞生的。为网页上的元素精确定位：可以让设计者像导演一样，轻易地控制文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。把网页上的内容结构与格式控制相分离：浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。把两者分开方便了网页的设计者，能够对页面的布局施加更多的控制，也就是把CSS代码独立出来从另一个角度控制页面外观。控制页面的布局：CSS可以从总体上有效控制Html，并在屏幕上精确定位图像的位置。制作出体积更小、下载更快的网页：CSS样式表只是简单的文本，它不需要图像，不需要执行程序，不需要插件，不需要流格式，就像Html指令一样快。3层叠样式表的添加方法为网页添加样式表的方法有四种：（1）使用STYLE属性：将STYLE属性直接加在个别的元件标签里。元件(标签)STYLE=性质(属性)1:设定值1;性质(属性)2:设定值2;...}例如：TDSTYLE=COLOR:BLUE;font-size:9pt;font-family:标楷体;line-height:150%这种用法的优点是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。（2）使用STYLE标签：将样式规则写在STYLE.../STYLE标签之中。通常是将整个的STYLE.../STYLE结构写在网页的HEAD/HEAD部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。STYLETYPE=text/css!--样式规则表--/STYLE例如：STYLETYPE=text/css!--BODY{color:BLUE;background:#FFFFCC;font-size:9pt}TD,P{COLOR:GREEN;font-size:9pt}--/STYLE（3）使用LINK标签：将样式规则写在.css的样式档案中，再以LINK标签引入。假设我们把样式规则存成一个example.css的档案，我们只要在网页中加入LINKREL=STYLESHEETTYPE=text/cssHREF=example.css即可套用该样式档案中所制定好的样式了。这种用法的优点就是在於可以把要套用相同样式规则的数篇文件都指定到同一个样式档案即可。缺点也是在个别文件或元件的灵活度不足。（4）使用@import引入：跟LINK用法很像，但必放在STYLE.../STYLE中。代码如下:STYLETYPE=text/css!--@importurl(引入的样式表的位址、路径与档名);--/STYLE例如：STYLETYPE=text/css!--@importurl();--/STYLE要注意的是，行末的分号是绝对不可少的！这种方式也可以把@importurl();加到其它样式内调用。4CSS样式技巧应用下面以新闻标签切换实例来说明div+css布局技术的应用技巧。（１）在样式文件page.css中调用tab.css文件：@importurl(tab.css)Tab.css代码如下：……/*tab标签默认设置只显示第一个Tab标签*/#tabGroup1#tab1{display:block;}#tabGroup1#tab2{display:none;}……/*tab标题头设置*/#tabGroup1#tab1.tabHead{width:530px;height:65px;background:url(../Images/zcxwtokjdt.jpg)no-repeat;margin-top:4px;}#tabGroup1#tab2.tabHead{width:530px;height:65px;background:url(../Images/kjdttozcxw.jpg)no-repeat;margin-top:4px;}……/*tab标签标题切换区域设置*/#tabGroup1#tab1.titleArea1,#tabGroup1#tab2.titleArea1{cursor:pointer;display:block;width:106px;height:32px;float:left;margin-top:31px;margin-left:李津晖：基于DIV+CSS的网页设计技术23石油工业计算机应用2017年12月48px;}#tabGroup1#tab1.titleArea2,#tabGroup1#tab2.titleArea2{cursor:pointer;display:block;width:95px;height:32px;float:left;margin-top:32px;margin-left:8px;}……（２）在页头文件channelhead.html中调用的文件tab.js：SCRIPType=text/javascriptsrc=/sites/zcy/PageAssets/Scripts/tab.js/SCRIPTTab.js代码如下：functionsearchItem(checknum){if(checknum==1){document.getElementById(tab1).style.display=block;document.getElementById(tab2).style.display=none;}if(checknum==2){document.getElementById(tab1).style.display=none;document.getElementById(tab2).style.display=block;}}（３）在主页面中添加web部件，调用zcxw.htm文件。Zcxw.htm代码如下：divid=tabGroup1class=newBox_tabGroup1divclass=tab_contentdivid=tab1class=contentdivclass=tabHeaddivclass=zcxw_moreahref=/zcy/zcymh/DeptDynamictarget=_blank更多/a/divahref=/zcy/zcymh/DeptDynamictarget=_blankclass=titleArea1onmouseover=searchItem(1)/aahref=/zcy/zcymh/kjdt/_Layouts/SharePointCMSSummaryPage/Summary.aspxtarget=_blankclass=titleArea2onmouseover=searchItem(2)/a/divdivclass=tabBodyiframeSCROLLING=noframeborder=0name='I4'src='/zcy/zcymh/DeptDynamic/_Layouts/SharePointSummaryPage/Summary2010.aspx?hiddenedit=1&NewImgUrl=%20&MaxRecords=6&MaxWords=30&showDate=true&noshowmore=1&DateFormat=[MM-dd]&DateTD=true&HeadImgUrl=\sites\zcy\PageAssets\Images\ICON.GIF&cssfile=\sites\zcy\PageAssets\Styles\TPXW_2013.CSS'width='100%'height=100%allowtransparency=true