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

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

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

一、引言

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

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

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

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

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

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

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

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)頁樣式表文件已經(jīng)完成，就可以使用該文件控制XHTML文檔的表現(xiàn)，代碼如下：

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

四、結(jié)語

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

參考文獻(xiàn)：

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

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

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

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