DIV+CSS布局在精品課網站建設中的應用

楊運強

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

關 鍵 詞：職業教育；精品課程網站；DIV+CSS布局

一、網站需求分析

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

二、logo部分樣式表設計代碼

1.結構部分

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

三、導航部分設計

1.結構部分

2.樣式設計

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

四、鏈接樣式設計

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

五、頁面底部設計

1.結構設計

2.樣式設計

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

六、結束語

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

參考文獻

[1] 許曉安.國家精品課程建設對網絡教育發展的啟示[J].電化教育研究，2007，（8）： 26-27.

[2] 周紅春，熊玉珍.精品網絡課程的教學策略設計[J].高等理科教育，2005，（3）： 89-91.

[3] 桂早芳，劉波.網站設計與制作[J].黃岡職業技術學院學報，2002，（4）： 18-20.