李冬芬 司明偉 王秀英

摘要：隨著Web標(biāo)準(zhǔn)在國內(nèi)的逐漸普及以及很多業(yè)內(nèi)人士的大力推廣，很多網(wǎng)站已經(jīng)開始重構(gòu)。Web標(biāo)準(zhǔn)的提出將網(wǎng)頁的內(nèi)容與表現(xiàn)分離。本文給出了一種基于DIV+CSS技術(shù)企業(yè)網(wǎng)站的建設(shè)方案，提高了網(wǎng)站的制作效率，減輕了客戶端下載負擔(dān)，使網(wǎng)站得以可靠正常的運行。

引言

在以前傳統(tǒng)的網(wǎng)站建設(shè)中，基本上使用表格進行制作，制作出的網(wǎng)站不完美，修改非常麻煩，不能很好的適應(yīng)瀏覽器，下載速度慢。CSS的出現(xiàn)基本解決了這些問題。CSS[1]技術(shù)不但可以控制網(wǎng)頁中的字體大小、頁面寬度、頁面內(nèi)容靠左靠右、字體樣式、超鏈接鼠標(biāo)事件樣式、網(wǎng)頁中內(nèi)容板塊間隔等樣式，而且CSS幾乎在所有的瀏覽器上都可以使用，還可以輕松實現(xiàn)圖片下載到頁面，對字體的設(shè)計可使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目，靈活的控制頁面的布局，同時很好的解決了許多網(wǎng)頁的風(fēng)格格式同時更新。

本文通過在網(wǎng)站制作中應(yīng)用基于DIV+CSS技術(shù)，提高了網(wǎng)站的制作效率，減輕了客戶端下載負擔(dān)，使網(wǎng)站得以可靠正常的運行[2]。

1 企業(yè)網(wǎng)站總體設(shè)計

該文在研究過程中開發(fā)了一個基于DIV+CSS的中小型商業(yè)網(wǎng)站，系統(tǒng)功能框圖如圖1所示。網(wǎng)站建設(shè)大體分為：基于LOGO和導(dǎo)航條模塊、網(wǎng)站主體展示模塊和底部信息模塊。使用DIV匡架代替?zhèn)鹘y(tǒng)的Table表格可以輕松的設(shè)計出來，而且便于維護時對結(jié)構(gòu)的修改與美化。CSS樣式的使用可以更加智能的對網(wǎng)站進行細節(jié)化設(shè)計，而且會大量減少代碼重復(fù)問題，方便對公共部分功能的調(diào)用，也使網(wǎng)站的下載速度加快。

2 網(wǎng)站模塊詳細設(shè)計

2.1 導(dǎo)航條的制作

結(jié)構(gòu)代碼：

CSS代碼：

#nav { width:1000px;height:40px;background-image:url(../images/nav_03.jpg);}

#nav ul li{display: inline;}

#nav ul li a{float: left;color: #FFF;padding: 2px 48px;line-height:36px;text-decoration: none;

background: transparent url(../images/nav_05.jpg) center right no-repeat;}

#nav ul li a:visited

{color: #fff;}

2.2 圖片輪換模塊設(shè)計

結(jié)構(gòu)代碼：

CSS代碼：

#album{/*相冊*/position:relative; width:307px; height:197px;overflow:hidden;/*隱藏tip*/}

#album dt {/*相冊的內(nèi)容顯示區(qū)，包含相片與下面的翻頁欄*/

margin:0;/*去除瀏覽器的默認設(shè)置*/

padding:0;/*去除瀏覽器的默認設(shè)置*/

width:334px;height:252px; overflow:hidden;/*重點，讓每次只顯示一張圖片*/}

#album img {border:0px;}

#album dd {/*翻頁欄*/

position:absolute; right:0px; bottom:0px;}

#album a {

display:block;/*讓其擁有盒子模型*/float:left;margin-right:1px;/*錯開格子*/

width:18px;/*呈正方形*/height:18px;line-height:15px;

text- align:center;/*居中顯示*/text-decoration:none;/*消除下劃線*/

color:#808080;background-color:#2b453c;}

#album a:hover ,#album a.hover{

color:#F8F8F8;background-color:#dd291b;background-position:0 0; }

2.3 底部信息模塊設(shè)計

一般底部信息模塊主要是聯(lián)系方式的設(shè)計，所以在每個網(wǎng)頁中都會顯示相同的內(nèi)容。

結(jié)構(gòu)代碼：

CSS代碼：

#footer {width:1000px;height:80px;clear:both;margin-top:15px;

margin-bottom:10px;background-image: url(../images/dibian.jpg); }

#footer_details { width:800px;height:50px;margin-top:20px;}

#footer_details p { font-size:12px;color:#000;text- align:center;line-height:20px;}

3 結(jié)論

本文給出了DIV+CSS技術(shù)[3]在網(wǎng)站中的應(yīng)用。對網(wǎng)站主體展示模塊進行細節(jié)化設(shè)計與研究，例如對DIV水平排列時需要我們對層進行浮動或定位設(shè)置，還有就是文字內(nèi)容包圍圖片的效果等都需要我們不斷地開發(fā)與研究。為豐富網(wǎng)站的展示效果，有時我們也會用CSS設(shè)置出圖片輪換的效果等特殊效果?？傊?，DIV+CSS的發(fā)展將會快速主導(dǎo)整個這個網(wǎng)站的前臺開發(fā)。

參考文獻

[1] 唐四新基于Web標(biāo)準(zhǔn)的網(wǎng)頁設(shè)計與制作—北京：清華大學(xué)出版社，2009.12

[2] 李燁別具光芒 DIV+CSS 頁面布局與美化 人民郵電出版社2006.8

[3] 黃軍寶網(wǎng)站設(shè)計指南 通過Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 北京科海電子出版社 2008.2

作者簡介：

李冬芬（1969-），女，遼寧省朝陽市人，遼寧工程技術(shù)大學(xué)，講師，碩士，研究方向：網(wǎng)絡(luò)編程及數(shù)據(jù)庫技術(shù)。