DIV+CSS技術(shù)在資源平臺(tái)網(wǎng)站建設(shè)的應(yīng)用

肖宇++季敏霞

摘 要：本文介紹了DIV+CSS技術(shù)的概念以及應(yīng)用DIV+CSS技術(shù)制作網(wǎng)頁的優(yōu)勢(shì)，并以資源平臺(tái)網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計(jì)、二級(jí)菜單設(shè)計(jì)上的具體應(yīng)用。

關(guān)鍵詞：DIV CSS 資源平臺(tái) 網(wǎng)頁制作

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2014）09（b）-0037-03

1在網(wǎng)頁制作技術(shù)的發(fā)展過程中，TABLE布局方式在WEB2.0盛行前是比較流行的布局方式，基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點(diǎn)，但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起，結(jié)構(gòu)不清，增加了設(shè)計(jì)和維護(hù)的成本，伴隨著互聯(lián)網(wǎng)的發(fā)展、多瀏覽器的盛行，傳統(tǒng)的TABLE布局方式遇到了前所未有的挑戰(zhàn)，越來越多的網(wǎng)站在開發(fā)過程中采用了DIV+CSS技術(shù)，將網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)分離，通過將網(wǎng)頁內(nèi)容模塊化，解決了網(wǎng)頁制作流程復(fù)雜，制作周期長及后期維護(hù)不便等問題。在《網(wǎng)站后臺(tái)開發(fā)》課程資源庫平臺(tái)網(wǎng)站建設(shè)中，我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。

1 “DIV+CSS”技術(shù)介紹

“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”，但由于大家在使用XHTML對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時(shí)，DIV是使用頻率最高的一個(gè)元素，因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景，在起始標(biāo)記“

”之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的表現(xiàn)形式由套用的CSS樣式來定義。CSS即Cascading Style Sheet（中文稱為層疊樣式表），是一種用來表現(xiàn)HTML或XML等文件樣式的腳本語言，可以對(duì)HTML中的各種元素實(shí)現(xiàn)更加精確的控制。

用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實(shí)現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離，網(wǎng)頁代碼簡潔，體積減少，在網(wǎng)站維護(hù)和更新時(shí)，也只需要修改CSS，不需要對(duì)網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計(jì)，從而降低了網(wǎng)站改版的成本。

2 在資源平臺(tái)建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢(shì)

采用DIV+CSS技術(shù)制作的資源平臺(tái)與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢(shì)。

2.1 精簡代碼，訪問速度提高、用戶體驗(yàn)性好

使用DIV+CSS技術(shù)制作的網(wǎng)頁，由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的，冗余代碼大大減少，對(duì)搜索引擎的收錄更加友好，更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對(duì)網(wǎng)站瀏覽者來說，頁面簡潔，網(wǎng)頁流量更小，也節(jié)約了上網(wǎng)成本。

2.2 網(wǎng)站輕松改版，更容易編輯和維護(hù)

由于結(jié)構(gòu)和表現(xiàn)分離，可以在不影響內(nèi)容的前提下，通過修改頁面樣式文件來改變頁面的表現(xiàn)效果，使得網(wǎng)站的改版更加輕松容易，樣式的修改也可以直接修改CSS文件，所有使用該CSS的HTML文件都支持自動(dòng)更新，非常方便。

3 資源平臺(tái)網(wǎng)站的頁面設(shè)計(jì)

3.1 網(wǎng)站的首頁面設(shè)計(jì)

根據(jù)需求分析，資源平臺(tái)網(wǎng)站的首頁面設(shè)計(jì)風(fēng)格要簡潔大方，顏色以藍(lán)色為主，主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等，應(yīng)用Photoshop設(shè)計(jì)網(wǎng)站首頁面如圖1所示。

將設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁，分析界面結(jié)構(gòu)，網(wǎng)頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導(dǎo)航）、主內(nèi)容區(qū)（左側(cè)和右側(cè)）、頁面版權(quán)信息區(qū)。對(duì)頁面各個(gè)區(qū)塊進(jìn)行劃分，網(wǎng)站首頁面框架圖如圖2所示。

根據(jù)框架圖網(wǎng)站首頁面HTML的主體…用三個(gè)

分成“header”、“main”和“footer”上中下三個(gè)部分，應(yīng)用DIV對(duì)網(wǎng)頁各區(qū)塊劃分，三個(gè)區(qū)塊的頁面樣式由CSS控制。

3.2 導(dǎo)航條下拉菜單的實(shí)現(xiàn)

應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作，但由于資源庫網(wǎng)站的內(nèi)容通常較多，僅是一級(jí)導(dǎo)航對(duì)于網(wǎng)站來說是不夠的，需要多級(jí)菜單來有條理的顯示課程的各項(xiàng)資源，使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺(tái)在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個(gè)兩級(jí)下拉菜單，如圖3所示。

二級(jí)菜單的制作過程是先定義菜單的HTML結(jié)構(gòu)，然后利用CSS設(shè)置樣式，實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項(xiàng)時(shí)相應(yīng)的二級(jí)菜單顯示，鼠標(biāo)離開時(shí)二級(jí)菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容，具體代碼如下：

基于CSS技術(shù)制作出來的下拉菜單樣式美觀，初始狀態(tài)下二級(jí)菜單項(xiàng)是隱藏的，只顯示主菜單項(xiàng)，不影響整個(gè)網(wǎng)頁的顯示效果和瀏覽速度，而當(dāng)瀏覽者需要查看某個(gè)菜單的具體內(nèi)容時(shí)就可以將鼠標(biāo)移動(dòng)到該菜單項(xiàng)區(qū)域，該菜單的二級(jí)菜單項(xiàng)就會(huì)通過列表形式展現(xiàn)，瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項(xiàng)查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實(shí)用性強(qiáng)，易于實(shí)現(xiàn)，在網(wǎng)頁設(shè)計(jì)中可以廣泛采用。

4 結(jié)語

綜上可以看出，應(yīng)用DIV+CSS技術(shù)制作的資源平臺(tái)網(wǎng)站頁面，代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便，具有明顯的優(yōu)勢(shì)，本文的制作方法也為其他的資源平臺(tái)網(wǎng)站開發(fā)提供了借鑒。

參考文獻(xiàn)

[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計(jì)中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2013，6：24-26.

[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，4：17-20.

[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計(jì)工程，2012（10）：35-37.

[4] 劉麗霞.DIV+CSS商業(yè)案例與網(wǎng)頁布局開發(fā)精講[M].中國鐵道出版社，2010，9.endprint

摘 要：本文介紹了DIV+CSS技術(shù)的概念以及應(yīng)用DIV+CSS技術(shù)制作網(wǎng)頁的優(yōu)勢(shì)，并以資源平臺(tái)網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計(jì)、二級(jí)菜單設(shè)計(jì)上的具體應(yīng)用。

關(guān)鍵詞：DIV CSS 資源平臺(tái) 網(wǎng)頁制作

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2014）09（b）-0037-03

1在網(wǎng)頁制作技術(shù)的發(fā)展過程中，TABLE布局方式在WEB2.0盛行前是比較流行的布局方式，基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點(diǎn)，但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起，結(jié)構(gòu)不清，增加了設(shè)計(jì)和維護(hù)的成本，伴隨著互聯(lián)網(wǎng)的發(fā)展、多瀏覽器的盛行，傳統(tǒng)的TABLE布局方式遇到了前所未有的挑戰(zhàn)，越來越多的網(wǎng)站在開發(fā)過程中采用了DIV+CSS技術(shù)，將網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)分離，通過將網(wǎng)頁內(nèi)容模塊化，解決了網(wǎng)頁制作流程復(fù)雜，制作周期長及后期維護(hù)不便等問題。在《網(wǎng)站后臺(tái)開發(fā)》課程資源庫平臺(tái)網(wǎng)站建設(shè)中，我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。

1 “DIV+CSS”技術(shù)介紹

“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”，但由于大家在使用XHTML對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時(shí)，DIV是使用頻率最高的一個(gè)元素，因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景，在起始標(biāo)記“

”之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的表現(xiàn)形式由套用的CSS樣式來定義。CSS即Cascading Style Sheet（中文稱為層疊樣式表），是一種用來表現(xiàn)HTML或XML等文件樣式的腳本語言，可以對(duì)HTML中的各種元素實(shí)現(xiàn)更加精確的控制。

用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實(shí)現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離，網(wǎng)頁代碼簡潔，體積減少，在網(wǎng)站維護(hù)和更新時(shí)，也只需要修改CSS，不需要對(duì)網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計(jì)，從而降低了網(wǎng)站改版的成本。

2 在資源平臺(tái)建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢(shì)

采用DIV+CSS技術(shù)制作的資源平臺(tái)與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢(shì)。

2.1 精簡代碼，訪問速度提高、用戶體驗(yàn)性好

使用DIV+CSS技術(shù)制作的網(wǎng)頁，由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的，冗余代碼大大減少，對(duì)搜索引擎的收錄更加友好，更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對(duì)網(wǎng)站瀏覽者來說，頁面簡潔，網(wǎng)頁流量更小，也節(jié)約了上網(wǎng)成本。

2.2 網(wǎng)站輕松改版，更容易編輯和維護(hù)

由于結(jié)構(gòu)和表現(xiàn)分離，可以在不影響內(nèi)容的前提下，通過修改頁面樣式文件來改變頁面的表現(xiàn)效果，使得網(wǎng)站的改版更加輕松容易，樣式的修改也可以直接修改CSS文件，所有使用該CSS的HTML文件都支持自動(dòng)更新，非常方便。

3 資源平臺(tái)網(wǎng)站的頁面設(shè)計(jì)

3.1 網(wǎng)站的首頁面設(shè)計(jì)

根據(jù)需求分析，資源平臺(tái)網(wǎng)站的首頁面設(shè)計(jì)風(fēng)格要簡潔大方，顏色以藍(lán)色為主，主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等，應(yīng)用Photoshop設(shè)計(jì)網(wǎng)站首頁面如圖1所示。

將設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁，分析界面結(jié)構(gòu)，網(wǎng)頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導(dǎo)航）、主內(nèi)容區(qū)（左側(cè)和右側(cè)）、頁面版權(quán)信息區(qū)。對(duì)頁面各個(gè)區(qū)塊進(jìn)行劃分，網(wǎng)站首頁面框架圖如圖2所示。

根據(jù)框架圖網(wǎng)站首頁面HTML的主體…用三個(gè)

分成“header”、“main”和“footer”上中下三個(gè)部分，應(yīng)用DIV對(duì)網(wǎng)頁各區(qū)塊劃分，三個(gè)區(qū)塊的頁面樣式由CSS控制。

3.2 導(dǎo)航條下拉菜單的實(shí)現(xiàn)

應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作，但由于資源庫網(wǎng)站的內(nèi)容通常較多，僅是一級(jí)導(dǎo)航對(duì)于網(wǎng)站來說是不夠的，需要多級(jí)菜單來有條理的顯示課程的各項(xiàng)資源，使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺(tái)在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個(gè)兩級(jí)下拉菜單，如圖3所示。

二級(jí)菜單的制作過程是先定義菜單的HTML結(jié)構(gòu)，然后利用CSS設(shè)置樣式，實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項(xiàng)時(shí)相應(yīng)的二級(jí)菜單顯示，鼠標(biāo)離開時(shí)二級(jí)菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容，具體代碼如下：

基于CSS技術(shù)制作出來的下拉菜單樣式美觀，初始狀態(tài)下二級(jí)菜單項(xiàng)是隱藏的，只顯示主菜單項(xiàng)，不影響整個(gè)網(wǎng)頁的顯示效果和瀏覽速度，而當(dāng)瀏覽者需要查看某個(gè)菜單的具體內(nèi)容時(shí)就可以將鼠標(biāo)移動(dòng)到該菜單項(xiàng)區(qū)域，該菜單的二級(jí)菜單項(xiàng)就會(huì)通過列表形式展現(xiàn)，瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項(xiàng)查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實(shí)用性強(qiáng)，易于實(shí)現(xiàn)，在網(wǎng)頁設(shè)計(jì)中可以廣泛采用。

4 結(jié)語

綜上可以看出，應(yīng)用DIV+CSS技術(shù)制作的資源平臺(tái)網(wǎng)站頁面，代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便，具有明顯的優(yōu)勢(shì)，本文的制作方法也為其他的資源平臺(tái)網(wǎng)站開發(fā)提供了借鑒。

參考文獻(xiàn)

[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計(jì)中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2013，6：24-26.

[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，4：17-20.

[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計(jì)工程，2012（10）：35-37.

[4] 劉麗霞.DIV+CSS商業(yè)案例與網(wǎng)頁布局開發(fā)精講[M].中國鐵道出版社，2010，9.endprint

摘 要：本文介紹了DIV+CSS技術(shù)的概念以及應(yīng)用DIV+CSS技術(shù)制作網(wǎng)頁的優(yōu)勢(shì)，并以資源平臺(tái)網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計(jì)、二級(jí)菜單設(shè)計(jì)上的具體應(yīng)用。

關(guān)鍵詞：DIV CSS 資源平臺(tái) 網(wǎng)頁制作

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2014）09（b）-0037-03

1在網(wǎng)頁制作技術(shù)的發(fā)展過程中，TABLE布局方式在WEB2.0盛行前是比較流行的布局方式，基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點(diǎn)，但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起，結(jié)構(gòu)不清，增加了設(shè)計(jì)和維護(hù)的成本，伴隨著互聯(lián)網(wǎng)的發(fā)展、多瀏覽器的盛行，傳統(tǒng)的TABLE布局方式遇到了前所未有的挑戰(zhàn)，越來越多的網(wǎng)站在開發(fā)過程中采用了DIV+CSS技術(shù)，將網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)分離，通過將網(wǎng)頁內(nèi)容模塊化，解決了網(wǎng)頁制作流程復(fù)雜，制作周期長及后期維護(hù)不便等問題。在《網(wǎng)站后臺(tái)開發(fā)》課程資源庫平臺(tái)網(wǎng)站建設(shè)中，我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。

1 “DIV+CSS”技術(shù)介紹

“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”，但由于大家在使用XHTML對(duì)網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時(shí)，DIV是使用頻率最高的一個(gè)元素，因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景，在起始標(biāo)記“

”之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的表現(xiàn)形式由套用的CSS樣式來定義。CSS即Cascading Style Sheet（中文稱為層疊樣式表），是一種用來表現(xiàn)HTML或XML等文件樣式的腳本語言，可以對(duì)HTML中的各種元素實(shí)現(xiàn)更加精確的控制。

用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容，用CSS控制內(nèi)容的表現(xiàn)，實(shí)現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離，網(wǎng)頁代碼簡潔，體積減少，在網(wǎng)站維護(hù)和更新時(shí)，也只需要修改CSS，不需要對(duì)網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計(jì)，從而降低了網(wǎng)站改版的成本。

2 在資源平臺(tái)建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢(shì)

采用DIV+CSS技術(shù)制作的資源平臺(tái)與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢(shì)。

2.1 精簡代碼，訪問速度提高、用戶體驗(yàn)性好

使用DIV+CSS技術(shù)制作的網(wǎng)頁，由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的，冗余代碼大大減少，對(duì)搜索引擎的收錄更加友好，更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對(duì)網(wǎng)站瀏覽者來說，頁面簡潔，網(wǎng)頁流量更小，也節(jié)約了上網(wǎng)成本。

2.2 網(wǎng)站輕松改版，更容易編輯和維護(hù)

由于結(jié)構(gòu)和表現(xiàn)分離，可以在不影響內(nèi)容的前提下，通過修改頁面樣式文件來改變頁面的表現(xiàn)效果，使得網(wǎng)站的改版更加輕松容易，樣式的修改也可以直接修改CSS文件，所有使用該CSS的HTML文件都支持自動(dòng)更新，非常方便。

3 資源平臺(tái)網(wǎng)站的頁面設(shè)計(jì)

3.1 網(wǎng)站的首頁面設(shè)計(jì)

根據(jù)需求分析，資源平臺(tái)網(wǎng)站的首頁面設(shè)計(jì)風(fēng)格要簡潔大方，顏色以藍(lán)色為主，主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等，應(yīng)用Photoshop設(shè)計(jì)網(wǎng)站首頁面如圖1所示。

將設(shè)計(jì)圖轉(zhuǎn)化為網(wǎng)頁，分析界面結(jié)構(gòu)，網(wǎng)頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導(dǎo)航）、主內(nèi)容區(qū)（左側(cè)和右側(cè)）、頁面版權(quán)信息區(qū)。對(duì)頁面各個(gè)區(qū)塊進(jìn)行劃分，網(wǎng)站首頁面框架圖如圖2所示。

根據(jù)框架圖網(wǎng)站首頁面HTML的主體…用三個(gè)

分成“header”、“main”和“footer”上中下三個(gè)部分，應(yīng)用DIV對(duì)網(wǎng)頁各區(qū)塊劃分，三個(gè)區(qū)塊的頁面樣式由CSS控制。

3.2 導(dǎo)航條下拉菜單的實(shí)現(xiàn)

應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作，但由于資源庫網(wǎng)站的內(nèi)容通常較多，僅是一級(jí)導(dǎo)航對(duì)于網(wǎng)站來說是不夠的，需要多級(jí)菜單來有條理的顯示課程的各項(xiàng)資源，使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺(tái)在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個(gè)兩級(jí)下拉菜單，如圖3所示。

二級(jí)菜單的制作過程是先定義菜單的HTML結(jié)構(gòu)，然后利用CSS設(shè)置樣式，實(shí)現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項(xiàng)時(shí)相應(yīng)的二級(jí)菜單顯示，鼠標(biāo)離開時(shí)二級(jí)菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容，具體代碼如下：

基于CSS技術(shù)制作出來的下拉菜單樣式美觀，初始狀態(tài)下二級(jí)菜單項(xiàng)是隱藏的，只顯示主菜單項(xiàng)，不影響整個(gè)網(wǎng)頁的顯示效果和瀏覽速度，而當(dāng)瀏覽者需要查看某個(gè)菜單的具體內(nèi)容時(shí)就可以將鼠標(biāo)移動(dòng)到該菜單項(xiàng)區(qū)域，該菜單的二級(jí)菜單項(xiàng)就會(huì)通過列表形式展現(xiàn)，瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項(xiàng)查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實(shí)用性強(qiáng)，易于實(shí)現(xiàn)，在網(wǎng)頁設(shè)計(jì)中可以廣泛采用。

4 結(jié)語

綜上可以看出，應(yīng)用DIV+CSS技術(shù)制作的資源平臺(tái)網(wǎng)站頁面，代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便，具有明顯的優(yōu)勢(shì)，本文的制作方法也為其他的資源平臺(tái)網(wǎng)站開發(fā)提供了借鑒。

參考文獻(xiàn)

[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計(jì)中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2013，6：24-26.

[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)技術(shù)與發(fā)展，2011，4：17-20.

[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計(jì)工程，2012（10）：35-37.

[4] 劉麗霞.DIV+CSS商業(yè)案例與網(wǎng)頁布局開發(fā)精講[M].中國鐵道出版社，2010，9.endprint