基于DIV+CSS的企業(yè)網(wǎng)站設(shè)計(jì)與實(shí)現(xiàn)

李冬芬 司明偉 王秀英

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

引言

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

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

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

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

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

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è)計(jì)

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

CSS代碼：

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

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

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

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

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

#album img {border:0px;}

#album dd {/*翻頁(yè)欄*/

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

#album a {

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

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è)計(jì)

一般底部信息模塊主要是聯(lián)系方式的設(shè)計(jì)，所以在每個(gè)網(wǎng)頁(yè)中都會(huì)顯示相同的內(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)用。對(duì)網(wǎng)站主體展示模塊進(jìn)行細(xì)節(jié)化設(shè)計(jì)與研究，例如對(duì)DIV水平排列時(shí)需要我們對(duì)層進(jìn)行浮動(dòng)或定位設(shè)置，還有就是文字內(nèi)容包圍圖片的效果等都需要我們不斷地開發(fā)與研究。為豐富網(wǎng)站的展示效果，有時(shí)我們也會(huì)用CSS設(shè)置出圖片輪換的效果等特殊效果。總之，DIV+CSS的發(fā)展將會(huì)快速主導(dǎo)整個(gè)這個(gè)網(wǎng)站的前臺(tái)開發(fā)。

參考文獻(xiàn)

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

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

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

作者簡(jiǎn)介：

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