楊運(yùn)強(qiáng)

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

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

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

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

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

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

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

2.樣式設(shè)計(jì)

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

#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；}

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

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

2.樣式設(shè)計(jì)

#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é)束語(yǔ)

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

參考文獻(xiàn)

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

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

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