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

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

　　聞立鷗

　�。ū本┴�(cái)貿(mào)職業(yè)學(xué)院，北京101101）

　　摘要：表現(xiàn)與技術(shù)相分離來(lái)制作網(wǎng)頁(yè)已經(jīng)是一種必然趨勢(shì)�？梢栽诰W(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è)布局

　　作者簡(jiǎn)介：聞立鷗（1971-），女，副教授，主要從事計(jì)算機(jī)應(yīng)用方面的研究。

　　一、引言

　　隨著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)。

　　四、結(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)更加專(zhuā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）。

【基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁(yè)布局實(shí)踐】相關(guān)文章：

用線(xiàn)條表現(xiàn)物體的結(jié)構(gòu)08-16

基于Internet的多媒體教學(xué)系統(tǒng)結(jié)構(gòu)08-17

基于SEO的高職《網(wǎng)頁(yè)制作》課程改革初探08-17

美術(shù)教案－用線(xiàn)條表現(xiàn)物體的結(jié)構(gòu)08-16

新入園幼兒“分離焦慮”的表現(xiàn)及應(yīng)對(duì)策略08-24

清城區(qū)優(yōu)化工業(yè)結(jié)構(gòu)布局情況的調(diào)研報(bào)告08-12

基于高校教育改革中的教學(xué)實(shí)踐探析08-08

基于CSSCI的200108-18

基于工學(xué)結(jié)合的高職文秘專(zhuān)業(yè)433實(shí)踐教學(xué)模式的構(gòu)建08-26

基于問(wèn)題學(xué)習(xí)語(yǔ)文，重建學(xué)習(xí)過(guò)程機(jī)制的實(shí)踐研究08-18