DIV+CSS布局在精品課網(wǎng)站建設(shè)中的應(yīng)用

楊運強

摘 要：當(dāng)前，我國職業(yè)教育發(fā)展日新月異，正在推動各項內(nèi)涵建設(shè)。精品課程建設(shè)是內(nèi)涵建設(shè)的重要內(nèi)容，精品課程的網(wǎng)站建設(shè)要求也越來越高，我們采用先進的DIV+CSS網(wǎng)站布局技術(shù)制作了多門精品課程網(wǎng)站，本文簡要介紹在計算機應(yīng)用基礎(chǔ)省級精品課程中DIV+CSS布局公共部分的應(yīng)用。

關(guān) 鍵 詞：職業(yè)教育；精品課程網(wǎng)站；DIV+CSS布局

一、網(wǎng)站需求分析

網(wǎng)站制作要求頁面簡潔、美觀，符合web標(biāo)準(zhǔn)，實現(xiàn)文字、表格、鏈接等各種樣式。樣式表文件通過外部引入到各個頁面中，實現(xiàn)LOGO、導(dǎo)航、各欄目的樣式自動更新和批量修改[1]。

二、logo部分樣式表設(shè)計代碼

1.結(jié)構(gòu)部分

#top{ width：1004px； height：92px； background-image：url（images/qie_01.gif）； margin：0 auto；}

2.樣式部分

#top{ width：1004px； height：92px； background-image：url（images/qie_01.gif）； margin：0 auto；}

三、導(dǎo)航部分設(shè)計

1.結(jié)構(gòu)部分

2.樣式設(shè)計

#nav{ width：1004px； height：23px； margin：0 auto；}

#left{ width：53px； height：23px；background-image：url（images/qie_02.gif）； float：left；}

#center{ width：847px； height：23px； background-color：#326a39； float：left；}

#center ul{ margin-left：0px；}

#center ul li{ width：70px； float：left； list-style：none； height：18px；}

height：17px； padding-top：6px；padding-left：13px；}

#right{ width：104px； height：23px； background-image：url（images/qie_04.gif）； float：right；}

四、鏈接樣式設(shè)計

#center ul li a{ color：#FFFFFF； text-decoration：none； font-size：12px； display：block； width：70px；

#c32 ul li a{ font-size：12px； color：#000000； text-decoration：none；}

#c42 ul li a{ font-size：12px； color：#000000； text-decoration：none；border-bottom： dotted 1px； }

#c45 a{ display：block； height：10px； margin-top：0px；font-size：12px； text-decoration：none； padding-left：90px；}

五、頁面底部設(shè)計

1.結(jié)構(gòu)設(shè)計

2.樣式設(shè)計

#bottom1{height：148px；width：1004px； margin：0 auto； background-image：url（images/qie_23.gif）；}

#ms{ width：70px；margin-left：450px； font-size：14px； margin-top：5px；}

#bottom2{ height：50px； width：1004px； margin：0 auto； background-color：#d9ffc4； text-align：center； padding-top：20px； font-size：12px；}

六、結(jié)束語

DIV+CSS不僅使用起來方便[2]，在網(wǎng)站的布局方面也更加規(guī)范。像表格建網(wǎng)站的傳統(tǒng)做法已經(jīng)不受歡迎，有越來越多的人正在使用CSS，它應(yīng)該是目前在網(wǎng)頁設(shè)計使用上相當(dāng)受矚目的一個區(qū)塊。在制作與管理上提高了不少網(wǎng)頁設(shè)計的效率。在制作上還可以使用多個頁面去定義同一個CSS檔案，修正起來也比較方便[3]。

參考文獻

[1] 許曉安.國家精品課程建設(shè)對網(wǎng)絡(luò)教育發(fā)展的啟示[J].電化教育研究，2007，（8）： 26-27.

[2] 周紅春，熊玉珍.精品網(wǎng)絡(luò)課程的教學(xué)策略設(shè)計[J].高等理科教育，2005，（3）： 89-91.

[3] 桂早芳，劉波.網(wǎng)站設(shè)計與制作[J].黃岡職業(yè)技術(shù)學(xué)院學(xué)報，2002，（4）： 18-20.