基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁(yè)布局實(shí)踐

摘要：表現(xiàn)與技術(shù)相分離來(lái)制作網(wǎng)頁(yè)已經(jīng)是一種必然趨勢(shì)。可以在網(wǎng)頁(yè)結(jié)構(gòu)不變的情況下，通過(guò)修改樣式表文件實(shí)現(xiàn)頁(yè)面重構(gòu)，變換網(wǎng)頁(yè)的表現(xiàn)風(fēng)格。不僅大大提高了頁(yè)面的制作效率，而且提高了網(wǎng)站的維護(hù)效率。本文通過(guò)案例的制作，將表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁(yè)布局實(shí)踐過(guò)程與大家分享。

關(guān)鍵詞：表現(xiàn)；結(jié)構(gòu)；網(wǎng)頁(yè)布局

中圖分類(lèi)號(hào)：G712 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1674-9324（2015）27-0282-03

一、引言

隨著Web 2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，DIV+CSS進(jìn)行網(wǎng)頁(yè)制作已經(jīng)是必然趨勢(shì)，網(wǎng)頁(yè)制作人員應(yīng)該順應(yīng)網(wǎng)絡(luò)技術(shù)的發(fā)展，及時(shí)更新技術(shù)手段。學(xué)會(huì)通過(guò)HTML語(yǔ)言構(gòu)建網(wǎng)頁(yè)的語(yǔ)義化結(jié)構(gòu)并盡可能優(yōu)化，然后運(yùn)用CSS樣式表文件呈現(xiàn)網(wǎng)頁(yè)的可視化效果，實(shí)現(xiàn)網(wǎng)頁(yè)的表現(xiàn)與內(nèi)容的分離。大大減少了代碼冗余，提高網(wǎng)頁(yè)制作效率，改善網(wǎng)頁(yè)瀏覽質(zhì)量。

二、內(nèi)容與表現(xiàn)相分離技術(shù)簡(jiǎn)介

內(nèi)容和表現(xiàn)相分離，是目前WEB2.0標(biāo)準(zhǔn)技術(shù)制作網(wǎng)頁(yè)最基本的方法，也是CSS網(wǎng)頁(yè)布局重要的目標(biāo)之一。基本的制作流程是，先分析規(guī)劃切割效果圖，接下來(lái)使用可擴(kuò)展的超文本標(biāo)記語(yǔ)言搭建網(wǎng)頁(yè)內(nèi)容結(jié)構(gòu)，然后利用樣式表文件“還原”出與效果圖一致的頁(yè)面效果。如果要實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容和外觀樣式的完全分離，應(yīng)創(chuàng)建一個(gè)新的樣式文件，然后以鏈入外部CSS樣式表的方法將這個(gè)樣式文件鏈接到網(wǎng)頁(yè)文檔中。這樣就完全做到網(wǎng)站的維護(hù)人員可通過(guò)修改樣式文件來(lái)改變頁(yè)面風(fēng)格，修改網(wǎng)頁(yè)文件來(lái)改變內(nèi)容，互不干擾。

三、表現(xiàn)與結(jié)構(gòu)分離技術(shù)制作網(wǎng)站流程解析

本案例為個(gè)人網(wǎng)站，包括首頁(yè)和相關(guān)二級(jí)頁(yè)面，首頁(yè)效果圖如下。所有頁(yè)面布局整齊且風(fēng)格統(tǒng)一。使用表現(xiàn)與結(jié)構(gòu)分離技術(shù)制作流程如左圖。

1.利用XHTML構(gòu)建整體網(wǎng)頁(yè)的結(jié)構(gòu)。

設(shè)計(jì)之路堅(jiān)信而痛苦，伴隨著譏諷與嘲笑，但我們依然堅(jiān)持。

just do it

}

#header {

background： url（../images/bg-header.png） no-repeat center top；

height： 206px；

text-align： right；

}

#header.div {

width： 940px；

margin： 0 auto；

padding： 0 10px；

}

#logo {

float： left；

}

#navigation {

list-style： none；

display： inline-block；

width： 610px；

margin： 0；

padding： 0；

}

#navigation li {

float： left；

font-size： 14pt；

height： 206px；

width： 138px；

margin-left： -16px；

text-align： center；

}

#navigation li a {

background-position： -144px 0；

color： #e4dec0；

display： block；

font-family： 'Caudex-Regular'；

font-size： 14px；

height： 206px；

width： 138px；

line-height： 200px；

text-decoration： none；

}

#navigation li a：hover， #navigation li.selected a {

background-position： 0 0；

color： #fff；

font-family： "方正超粗黑繁體"；

font-size： 24px；

}

#contents {

background： url（../images/bg-content-top.png） no-repeat center -6px；

min-height： 85px；

margin-top： -79px；

position： relative；

}

#contents.div {

width： 960px；

margin： 0 auto；

padding-top： 30px；

}

#contents h1， h3， h5 {

color： #836544；

font-family： "方正超粗黑繁體"；

font-weight： normal；

margin： 0 0 30px；

font-size： 36px；

}

#contents h5 {

color： #474747；

}

#contents p {

color： #474747；

font-size： 13px；

line-height： 24px；

margin： 0；

padding： 0 0 24px；

}

#contents p a {

color： #474747；

}

#contents p a：hover {

color： #887c6c；

}

#footer div.footer {

font-family： 'Caudex-Regular'；

width： 940px；

margin： 0 auto；

padding： 0 10px；font-size： 11px；

}

至此，本網(wǎng)頁(yè)樣式表文件已經(jīng)完成，就可以使用該文件控制XHTML文檔的表現(xiàn)，代碼如下：

網(wǎng)頁(yè)所要呈現(xiàn)的內(nèi)容便與效果圖一致了。按照內(nèi)容與表現(xiàn)相分離的方法，如修改網(wǎng)頁(yè)內(nèi)容，可對(duì)XNTML文檔作修改，變可快速完成風(fēng)格一致的若干張網(wǎng)頁(yè)文檔。

四、結(jié)語(yǔ)

采用結(jié)構(gòu)與表現(xiàn)相分離技術(shù)制作網(wǎng)頁(yè)，在“表格時(shí)代”是不可能實(shí)現(xiàn)的。如果要修改網(wǎng)頁(yè)的外觀風(fēng)格，直接修改CSS樣式文件代碼即可，準(zhǔn)確而快捷呈現(xiàn)效果圖的顯示效果。但是如果按照WEB標(biāo)準(zhǔn)更加專業(yè)更加規(guī)范設(shè)計(jì)網(wǎng)頁(yè)，還需要熟練運(yùn)用XHTML與CSS代碼，加強(qiáng)實(shí)踐，認(rèn)真思考并嘗試運(yùn)用多種方法去解決實(shí)踐中出現(xiàn)的問(wèn)題。

參考文獻(xiàn)：

[1]聞立鷗.網(wǎng)頁(yè)制作實(shí)用教程[M].北京：清華大學(xué)出版社，2009.

[2]柯海鵬.任務(wù)驅(qū)動(dòng)法在DIV+CSS網(wǎng)頁(yè)布局技術(shù)中的教學(xué)探索[J].教師，2013，（22）.

[3]關(guān)秀英.Flash CS4商業(yè)動(dòng)畫(huà)、片頭與網(wǎng)站設(shè)計(jì)案例精解[M].北京：清華大學(xué)出版社，2010.

[4]聞立鷗.DIV+CSS之布局一行三列頁(yè)面實(shí)證分析[J].教育教學(xué)論壇，2014，（22）.endprint