肖宇++季敏霞
摘 要:本文介紹了DIV+CSS技術(shù)的概念以及應(yīng)用DIV+CSS技術(shù)制作網(wǎng)頁的優(yōu)勢,并以資源平臺網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計、二級菜單設(shè)計上的具體應(yīng)用。
關(guān)鍵詞:DIV CSS 資源平臺 網(wǎng)頁制作
中圖分類號:TP393 文獻(xiàn)標(biāo)識碼:A 文章編號:1672-3791(2014)09(b)-0037-03
1在網(wǎng)頁制作技術(shù)的發(fā)展過程中,TABLE布局方式在WEB2.0盛行前是比較流行的布局方式,基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點,但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起,結(jié)構(gòu)不清,增加了設(shè)計和維護(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)站后臺開發(fā)》課程資源庫平臺網(wǎng)站建設(shè)中,我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。
1 “DIV+CSS”技術(shù)介紹
“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”,但由于大家在使用XHTML對網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時,DIV是使用頻率最高的一個元素,因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景,在起始標(biāo)記“
用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容,用CSS控制內(nèi)容的表現(xiàn),實現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離,網(wǎng)頁代碼簡潔,體積減少,在網(wǎng)站維護(hù)和更新時,也只需要修改CSS,不需要對網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計,從而降低了網(wǎng)站改版的成本。
2 在資源平臺建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢
采用DIV+CSS技術(shù)制作的資源平臺與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢。
2.1 精簡代碼,訪問速度提高、用戶體驗性好
使用DIV+CSS技術(shù)制作的網(wǎng)頁,由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的,冗余代碼大大減少,對搜索引擎的收錄更加友好,更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對網(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文件都支持自動更新,非常方便。
3 資源平臺網(wǎng)站的頁面設(shè)計
3.1 網(wǎng)站的首頁面設(shè)計
根據(jù)需求分析,資源平臺網(wǎng)站的首頁面設(shè)計風(fēng)格要簡潔大方,顏色以藍(lán)色為主,主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等,應(yīng)用Photoshop設(shè)計網(wǎng)站首頁面如圖1所示。
將設(shè)計圖轉(zhuǎn)化為網(wǎng)頁,分析界面結(jié)構(gòu),網(wǎng)頁布局采用上下框架型,框架包括頁面頭部區(qū)(logo和主導(dǎo)航)、主內(nèi)容區(qū)(左側(cè)和右側(cè))、頁面版權(quán)信息區(qū)。對頁面各個區(qū)塊進(jìn)行劃分,網(wǎng)站首頁面框架圖如圖2所示。
根據(jù)框架圖網(wǎng)站首頁面HTML的主體…
3.2 導(dǎo)航條下拉菜單的實現(xiàn)
應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作,但由于資源庫網(wǎng)站的內(nèi)容通常較多,僅是一級導(dǎo)航對于網(wǎng)站來說是不夠的,需要多級菜單來有條理的顯示課程的各項資源,使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個兩級下拉菜單,如圖3所示。
二級菜單的制作過程是先定義菜單的HTML結(jié)構(gòu),然后利用CSS設(shè)置樣式,實現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項時相應(yīng)的二級菜單顯示,鼠標(biāo)離開時二級菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容,具體代碼如下:
基于CSS技術(shù)制作出來的下拉菜單樣式美觀,初始狀態(tài)下二級菜單項是隱藏的,只顯示主菜單項,不影響整個網(wǎng)頁的顯示效果和瀏覽速度,而當(dāng)瀏覽者需要查看某個菜單的具體內(nèi)容時就可以將鼠標(biāo)移動到該菜單項區(qū)域,該菜單的二級菜單項就會通過列表形式展現(xiàn),瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實用性強,易于實現(xiàn),在網(wǎng)頁設(shè)計中可以廣泛采用。
4 結(jié)語
綜上可以看出,應(yīng)用DIV+CSS技術(shù)制作的資源平臺網(wǎng)站頁面,代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便,具有明顯的優(yōu)勢,本文的制作方法也為其他的資源平臺網(wǎng)站開發(fā)提供了借鑒。
參考文獻(xiàn)
[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報,2013,6:24-26.
[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計與實現(xiàn)[J].計算機技術(shù)與發(fā)展,2011,4:17-20.
[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計工程,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)勢,并以資源平臺網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計、二級菜單設(shè)計上的具體應(yīng)用。
關(guān)鍵詞:DIV CSS 資源平臺 網(wǎng)頁制作
中圖分類號:TP393 文獻(xiàn)標(biāo)識碼:A 文章編號:1672-3791(2014)09(b)-0037-03
1在網(wǎng)頁制作技術(shù)的發(fā)展過程中,TABLE布局方式在WEB2.0盛行前是比較流行的布局方式,基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點,但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起,結(jié)構(gòu)不清,增加了設(shè)計和維護(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)站后臺開發(fā)》課程資源庫平臺網(wǎng)站建設(shè)中,我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。
1 “DIV+CSS”技術(shù)介紹
“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”,但由于大家在使用XHTML對網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時,DIV是使用頻率最高的一個元素,因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景,在起始標(biāo)記“
用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容,用CSS控制內(nèi)容的表現(xiàn),實現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離,網(wǎng)頁代碼簡潔,體積減少,在網(wǎng)站維護(hù)和更新時,也只需要修改CSS,不需要對網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計,從而降低了網(wǎng)站改版的成本。
2 在資源平臺建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢
采用DIV+CSS技術(shù)制作的資源平臺與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢。
2.1 精簡代碼,訪問速度提高、用戶體驗性好
使用DIV+CSS技術(shù)制作的網(wǎng)頁,由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的,冗余代碼大大減少,對搜索引擎的收錄更加友好,更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對網(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文件都支持自動更新,非常方便。
3 資源平臺網(wǎng)站的頁面設(shè)計
3.1 網(wǎng)站的首頁面設(shè)計
根據(jù)需求分析,資源平臺網(wǎng)站的首頁面設(shè)計風(fēng)格要簡潔大方,顏色以藍(lán)色為主,主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等,應(yīng)用Photoshop設(shè)計網(wǎng)站首頁面如圖1所示。
將設(shè)計圖轉(zhuǎn)化為網(wǎng)頁,分析界面結(jié)構(gòu),網(wǎng)頁布局采用上下框架型,框架包括頁面頭部區(qū)(logo和主導(dǎo)航)、主內(nèi)容區(qū)(左側(cè)和右側(cè))、頁面版權(quán)信息區(qū)。對頁面各個區(qū)塊進(jìn)行劃分,網(wǎng)站首頁面框架圖如圖2所示。
根據(jù)框架圖網(wǎng)站首頁面HTML的主體…
3.2 導(dǎo)航條下拉菜單的實現(xiàn)
應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作,但由于資源庫網(wǎng)站的內(nèi)容通常較多,僅是一級導(dǎo)航對于網(wǎng)站來說是不夠的,需要多級菜單來有條理的顯示課程的各項資源,使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個兩級下拉菜單,如圖3所示。
二級菜單的制作過程是先定義菜單的HTML結(jié)構(gòu),然后利用CSS設(shè)置樣式,實現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項時相應(yīng)的二級菜單顯示,鼠標(biāo)離開時二級菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容,具體代碼如下:
基于CSS技術(shù)制作出來的下拉菜單樣式美觀,初始狀態(tài)下二級菜單項是隱藏的,只顯示主菜單項,不影響整個網(wǎng)頁的顯示效果和瀏覽速度,而當(dāng)瀏覽者需要查看某個菜單的具體內(nèi)容時就可以將鼠標(biāo)移動到該菜單項區(qū)域,該菜單的二級菜單項就會通過列表形式展現(xiàn),瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實用性強,易于實現(xiàn),在網(wǎng)頁設(shè)計中可以廣泛采用。
4 結(jié)語
綜上可以看出,應(yīng)用DIV+CSS技術(shù)制作的資源平臺網(wǎng)站頁面,代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便,具有明顯的優(yōu)勢,本文的制作方法也為其他的資源平臺網(wǎng)站開發(fā)提供了借鑒。
參考文獻(xiàn)
[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報,2013,6:24-26.
[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計與實現(xiàn)[J].計算機技術(shù)與發(fā)展,2011,4:17-20.
[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計工程,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)勢,并以資源平臺網(wǎng)站建設(shè)為例介紹了DIV+CSS技術(shù)在網(wǎng)頁制作過程中結(jié)構(gòu)設(shè)計、二級菜單設(shè)計上的具體應(yīng)用。
關(guān)鍵詞:DIV CSS 資源平臺 網(wǎng)頁制作
中圖分類號:TP393 文獻(xiàn)標(biāo)識碼:A 文章編號:1672-3791(2014)09(b)-0037-03
1在網(wǎng)頁制作技術(shù)的發(fā)展過程中,TABLE布局方式在WEB2.0盛行前是比較流行的布局方式,基于TABLE布局的網(wǎng)頁具有搭建速度快、容易控制等特點,但這種布局方式將網(wǎng)頁內(nèi)容和表現(xiàn)混合在一起,結(jié)構(gòu)不清,增加了設(shè)計和維護(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)站后臺開發(fā)》課程資源庫平臺網(wǎng)站建設(shè)中,我們也選擇了DIV+CSS技術(shù)進(jìn)行網(wǎng)站的制作。
1 “DIV+CSS”技術(shù)介紹
“DIV+CSS”準(zhǔn)確地說應(yīng)該是“XHTML+ CSS”,但由于大家在使用XHTML對網(wǎng)站進(jìn)行標(biāo)準(zhǔn)化重構(gòu)時,DIV是使用頻率最高的一個元素,因此人們習(xí)慣稱之為“DIV+CSS”。DIV可以為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景,在起始標(biāo)記“
用DIV+CSS技術(shù)制作網(wǎng)站就是在HTML中只放網(wǎng)頁內(nèi)容,用CSS控制內(nèi)容的表現(xiàn),實現(xiàn)網(wǎng)頁表現(xiàn)和結(jié)構(gòu)的分離,網(wǎng)頁代碼簡潔,體積減少,在網(wǎng)站維護(hù)和更新時,也只需要修改CSS,不需要對網(wǎng)頁結(jié)構(gòu)進(jìn)行重新設(shè)計,從而降低了網(wǎng)站改版的成本。
2 在資源平臺建設(shè)上應(yīng)用DIV+CSS技術(shù)的優(yōu)勢
采用DIV+CSS技術(shù)制作的資源平臺與采用傳統(tǒng)的TABLE布局的網(wǎng)站相比具有十分明顯的優(yōu)勢。
2.1 精簡代碼,訪問速度提高、用戶體驗性好
使用DIV+CSS技術(shù)制作的網(wǎng)頁,由于網(wǎng)頁的結(jié)構(gòu)和表現(xiàn)是分離的,冗余代碼大大減少,對搜索引擎的收錄更加友好,更容易被搜索引擎搜索到網(wǎng)頁內(nèi)容。對網(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文件都支持自動更新,非常方便。
3 資源平臺網(wǎng)站的頁面設(shè)計
3.1 網(wǎng)站的首頁面設(shè)計
根據(jù)需求分析,資源平臺網(wǎng)站的首頁面設(shè)計風(fēng)格要簡潔大方,顏色以藍(lán)色為主,主要內(nèi)容包括網(wǎng)站logo、導(dǎo)航條、網(wǎng)站新聞、版權(quán)信息等,應(yīng)用Photoshop設(shè)計網(wǎng)站首頁面如圖1所示。
將設(shè)計圖轉(zhuǎn)化為網(wǎng)頁,分析界面結(jié)構(gòu),網(wǎng)頁布局采用上下框架型,框架包括頁面頭部區(qū)(logo和主導(dǎo)航)、主內(nèi)容區(qū)(左側(cè)和右側(cè))、頁面版權(quán)信息區(qū)。對頁面各個區(qū)塊進(jìn)行劃分,網(wǎng)站首頁面框架圖如圖2所示。
根據(jù)框架圖網(wǎng)站首頁面HTML的主體…
3.2 導(dǎo)航條下拉菜單的實現(xiàn)
應(yīng)用DIV+CSS技術(shù)完成網(wǎng)頁首頁面的頁面制作,但由于資源庫網(wǎng)站的內(nèi)容通常較多,僅是一級導(dǎo)航對于網(wǎng)站來說是不夠的,需要多級菜單來有條理的顯示課程的各項資源,使用CSS制作的菜單可以很方便地為網(wǎng)站帶來清晰的導(dǎo)航支持。本資源庫平臺在HTML無序列表的結(jié)構(gòu)基礎(chǔ)上基于CSS技術(shù)制作了一個兩級下拉菜單,如圖3所示。
二級菜單的制作過程是先定義菜單的HTML結(jié)構(gòu),然后利用CSS設(shè)置樣式,實現(xiàn)當(dāng)鼠標(biāo)經(jīng)過主菜單項時相應(yīng)的二級菜單顯示,鼠標(biāo)離開時二級菜單隱藏的效果。網(wǎng)頁中通過DIV定義網(wǎng)頁的導(dǎo)航條內(nèi)容,具體代碼如下:
基于CSS技術(shù)制作出來的下拉菜單樣式美觀,初始狀態(tài)下二級菜單項是隱藏的,只顯示主菜單項,不影響整個網(wǎng)頁的顯示效果和瀏覽速度,而當(dāng)瀏覽者需要查看某個菜單的具體內(nèi)容時就可以將鼠標(biāo)移動到該菜單項區(qū)域,該菜單的二級菜單項就會通過列表形式展現(xiàn),瀏覽者就可以根據(jù)需要進(jìn)入到相應(yīng)的菜單項查看相關(guān)內(nèi)容。這種下拉菜單結(jié)構(gòu)實用性強,易于實現(xiàn),在網(wǎng)頁設(shè)計中可以廣泛采用。
4 結(jié)語
綜上可以看出,應(yīng)用DIV+CSS技術(shù)制作的資源平臺網(wǎng)站頁面,代碼簡潔、樣式美觀、后期維護(hù)和更新也很方便,具有明顯的優(yōu)勢,本文的制作方法也為其他的資源平臺網(wǎng)站開發(fā)提供了借鑒。
參考文獻(xiàn)
[1] 蘇文.DIV+CSS技術(shù)在高校教務(wù)網(wǎng)站頁面設(shè)計中的應(yīng)用[J].連云港職業(yè)技術(shù)學(xué)院學(xué)報,2013,6:24-26.
[2] 魏穎穎.基于CSS的網(wǎng)頁下拉菜單設(shè)計與實現(xiàn)[J].計算機技術(shù)與發(fā)展,2011,4:17-20.
[3] 劉翼.DIV+CSS技術(shù)在延安大學(xué)網(wǎng)上考試系統(tǒng)中的應(yīng)用研究[J].電子設(shè)設(shè)計工程,2012(10):35-37.
[4] 劉麗霞.DIV+CSS商業(yè)案例與網(wǎng)頁布局開發(fā)精講[M].中國鐵道出版社,2010,9.endprint