DIV+CSS技術在資源平臺網站建設的應用

肖宇++季敏霞

摘 要：本文介紹了DIV+CSS技術的概念以及應用DIV+CSS技術制作網頁的優(yōu)勢，并以資源平臺網站建設為例介紹了DIV+CSS技術在網頁制作過程中結構設計、二級菜單設計上的具體應用。

關鍵詞：DIV CSS 資源平臺 網頁制作

中圖分類號：TP393 文獻標識碼：A 文章編號：1672-3791（2014）09（b）-0037-03

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

1 “DIV+CSS”技術介紹

“DIV+CSS”準確地說應該是“XHTML+ CSS”，但由于大家在使用XHTML對網站進行標準化重構時，DIV是使用頻率最高的一個元素，因此人們習慣稱之為“DIV+CSS”。DIV可以為HTML文檔內大塊（block-level）的內容提供結構和背景，在起始標記“

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

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

2 在資源平臺建設上應用DIV+CSS技術的優(yōu)勢

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

2.1 精簡代碼，訪問速度提高、用戶體驗性好

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

2.2 網站輕松改版，更容易編輯和維護

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

3 資源平臺網站的頁面設計

3.1 網站的首頁面設計

根據(jù)需求分析，資源平臺網站的首頁面設計風格要簡潔大方，顏色以藍色為主，主要內容包括網站logo、導航條、網站新聞、版權信息等，應用Photoshop設計網站首頁面如圖1所示。

將設計圖轉化為網頁，分析界面結構，網頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導航）、主內容區(qū)（左側和右側）、頁面版權信息區(qū)。對頁面各個區(qū)塊進行劃分，網站首頁面框架圖如圖2所示。

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

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

3.2 導航條下拉菜單的實現(xiàn)

應用DIV+CSS技術完成網頁首頁面的頁面制作，但由于資源庫網站的內容通常較多，僅是一級導航對于網站來說是不夠的，需要多級菜單來有條理的顯示課程的各項資源，使用CSS制作的菜單可以很方便地為網站帶來清晰的導航支持。本資源庫平臺在HTML無序列表的結構基礎上基于CSS技術制作了一個兩級下拉菜單，如圖3所示。

二級菜單的制作過程是先定義菜單的HTML結構，然后利用CSS設置樣式，實現(xiàn)當鼠標經過主菜單項時相應的二級菜單顯示，鼠標離開時二級菜單隱藏的效果。網頁中通過DIV定義網頁的導航條內容，具體代碼如下：

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

4 結語

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

參考文獻

[1] 蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用[J].連云港職業(yè)技術學院學報，2013，6：24-26.

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

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

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

摘 要：本文介紹了DIV+CSS技術的概念以及應用DIV+CSS技術制作網頁的優(yōu)勢，并以資源平臺網站建設為例介紹了DIV+CSS技術在網頁制作過程中結構設計、二級菜單設計上的具體應用。

關鍵詞：DIV CSS 資源平臺 網頁制作

中圖分類號：TP393 文獻標識碼：A 文章編號：1672-3791（2014）09（b）-0037-03

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

1 “DIV+CSS”技術介紹

“DIV+CSS”準確地說應該是“XHTML+ CSS”，但由于大家在使用XHTML對網站進行標準化重構時，DIV是使用頻率最高的一個元素，因此人們習慣稱之為“DIV+CSS”。DIV可以為HTML文檔內大塊（block-level）的內容提供結構和背景，在起始標記“

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

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

2 在資源平臺建設上應用DIV+CSS技術的優(yōu)勢

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

2.1 精簡代碼，訪問速度提高、用戶體驗性好

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

2.2 網站輕松改版，更容易編輯和維護

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

3 資源平臺網站的頁面設計

3.1 網站的首頁面設計

根據(jù)需求分析，資源平臺網站的首頁面設計風格要簡潔大方，顏色以藍色為主，主要內容包括網站logo、導航條、網站新聞、版權信息等，應用Photoshop設計網站首頁面如圖1所示。

將設計圖轉化為網頁，分析界面結構，網頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導航）、主內容區(qū)（左側和右側）、頁面版權信息區(qū)。對頁面各個區(qū)塊進行劃分，網站首頁面框架圖如圖2所示。

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

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

3.2 導航條下拉菜單的實現(xiàn)

應用DIV+CSS技術完成網頁首頁面的頁面制作，但由于資源庫網站的內容通常較多，僅是一級導航對于網站來說是不夠的，需要多級菜單來有條理的顯示課程的各項資源，使用CSS制作的菜單可以很方便地為網站帶來清晰的導航支持。本資源庫平臺在HTML無序列表的結構基礎上基于CSS技術制作了一個兩級下拉菜單，如圖3所示。

二級菜單的制作過程是先定義菜單的HTML結構，然后利用CSS設置樣式，實現(xiàn)當鼠標經過主菜單項時相應的二級菜單顯示，鼠標離開時二級菜單隱藏的效果。網頁中通過DIV定義網頁的導航條內容，具體代碼如下：

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

4 結語

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

參考文獻

[1] 蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用[J].連云港職業(yè)技術學院學報，2013，6：24-26.

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

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

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

摘 要：本文介紹了DIV+CSS技術的概念以及應用DIV+CSS技術制作網頁的優(yōu)勢，并以資源平臺網站建設為例介紹了DIV+CSS技術在網頁制作過程中結構設計、二級菜單設計上的具體應用。

關鍵詞：DIV CSS 資源平臺 網頁制作

中圖分類號：TP393 文獻標識碼：A 文章編號：1672-3791（2014）09（b）-0037-03

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

1 “DIV+CSS”技術介紹

“DIV+CSS”準確地說應該是“XHTML+ CSS”，但由于大家在使用XHTML對網站進行標準化重構時，DIV是使用頻率最高的一個元素，因此人們習慣稱之為“DIV+CSS”。DIV可以為HTML文檔內大塊（block-level）的內容提供結構和背景，在起始標記“

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

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

2 在資源平臺建設上應用DIV+CSS技術的優(yōu)勢

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

2.1 精簡代碼，訪問速度提高、用戶體驗性好

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

2.2 網站輕松改版，更容易編輯和維護

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

3 資源平臺網站的頁面設計

3.1 網站的首頁面設計

根據(jù)需求分析，資源平臺網站的首頁面設計風格要簡潔大方，顏色以藍色為主，主要內容包括網站logo、導航條、網站新聞、版權信息等，應用Photoshop設計網站首頁面如圖1所示。

將設計圖轉化為網頁，分析界面結構，網頁布局采用上下框架型，框架包括頁面頭部區(qū)（logo和主導航）、主內容區(qū)（左側和右側）、頁面版權信息區(qū)。對頁面各個區(qū)塊進行劃分，網站首頁面框架圖如圖2所示。

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

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

3.2 導航條下拉菜單的實現(xiàn)

應用DIV+CSS技術完成網頁首頁面的頁面制作，但由于資源庫網站的內容通常較多，僅是一級導航對于網站來說是不夠的，需要多級菜單來有條理的顯示課程的各項資源，使用CSS制作的菜單可以很方便地為網站帶來清晰的導航支持。本資源庫平臺在HTML無序列表的結構基礎上基于CSS技術制作了一個兩級下拉菜單，如圖3所示。

二級菜單的制作過程是先定義菜單的HTML結構，然后利用CSS設置樣式，實現(xiàn)當鼠標經過主菜單項時相應的二級菜單顯示，鼠標離開時二級菜單隱藏的效果。網頁中通過DIV定義網頁的導航條內容，具體代碼如下：

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

4 結語

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

參考文獻

[1] 蘇文.DIV+CSS技術在高校教務網站頁面設計中的應用[J].連云港職業(yè)技術學院學報，2013，6：24-26.

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

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

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