- 相關(guān)推薦
基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實(shí)踐
基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實(shí)踐
聞立鷗
（北京財(cái)貿(mào)職業(yè)學(xué)院，北京101101）
摘要：表現(xiàn)與技術(shù)相分離來制作網(wǎng)頁已經(jīng)是一種必然趨勢�？梢栽诰W(wǎng)頁結(jié)構(gòu)不變的情況下，通過修改樣式表文件實(shí)現(xiàn)頁面重構(gòu)，變換網(wǎng)頁的表現(xiàn)風(fēng)格。不僅大大提高了頁面的制作效率，而且提高了網(wǎng)站的維護(hù)效率。本文通過案例的制作，將表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實(shí)踐過程與大家分享。
關(guān)鍵詞：表現(xiàn)；結(jié)構(gòu)；網(wǎng)頁布局
作者簡介：聞立鷗（1971-），女，副教授，主要從事計(jì)算機(jī)應(yīng)用方面的研究。
一、引言
隨著Web 2.0標(biāo)準(zhǔn)化設(shè)計(jì)理念的普及，DIV+CSS進(jìn)行網(wǎng)頁制作已經(jīng)是必然趨勢，網(wǎng)頁制作人員應(yīng)該順應(yīng)網(wǎng)絡(luò)技術(shù)的發(fā)展，及時(shí)更新技術(shù)手段。學(xué)會(huì)通過HTML語言構(gòu)建網(wǎng)頁的語義化結(jié)構(gòu)并盡可能優(yōu)化，然后運(yùn)用CSS樣式表文件呈現(xiàn)網(wǎng)頁的可視化效果，實(shí)現(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)，然后利用樣式表文件“還原”出與效果圖一致的頁面效果。如果要實(shí)現(xiàn)網(wǎng)頁內(nèi)容和外觀樣式的完全分離，應(yīng)創(chuàng)建一個(gè)新的樣式文件，然后以鏈入外部CSS樣式表的方法將這個(gè)樣式文件鏈接到網(wǎng)頁文檔中。這樣就完全做到網(wǎng)站的維護(hù)人員可通過修改樣式文件來改變頁面風(fēng)格，修改網(wǎng)頁文件來改變內(nèi)容，互不干擾。
三、表現(xiàn)與結(jié)構(gòu)分離技術(shù)制作網(wǎng)站流程解析本案例為個(gè)人網(wǎng)站，包括首頁和相關(guān)二級(jí)頁面，首頁效果圖如下。所有頁面布局整齊且風(fēng)格統(tǒng)一。使用表現(xiàn)與結(jié)構(gòu)分離技術(shù)制作流程如左圖。
1. 利用XHTML
構(gòu)建整體網(wǎng)頁的結(jié)構(gòu)。
四、結(jié)語
采用結(jié)構(gòu)與表現(xiàn)相分離技術(shù)制作網(wǎng)頁，在“表格時(shí)代”是不可能實(shí)現(xiàn)的。如果要修改網(wǎng)頁的外觀風(fēng)格，直接修改CSS樣式文件代碼即可，準(zhǔn)確而快捷呈現(xiàn)效果圖的顯示效果。但是如果按照WEB標(biāo)準(zhǔn)更加專業(yè)更加規(guī)范設(shè)計(jì)網(wǎng)頁，還需要熟練運(yùn)用XHTML與CSS代碼，加強(qiáng)實(shí)踐，認(rèn)真思考并嘗試運(yùn)用多種方法去解決實(shí)踐中出現(xiàn)的問題。
參考文獻(xiàn)：
[1]聞立鷗。網(wǎng)頁制作實(shí)用教程[M].北京：清華大學(xué)出版社，2009.
[2]柯海鵬。任務(wù)驅(qū)動(dòng)法在DIV+CSS網(wǎng)頁布局技術(shù)中的教學(xué)探索[J].教師，2013，（22）。
[3] 關(guān)秀英。Flash CS4商業(yè)動(dòng)畫、片頭與網(wǎng)站設(shè)計(jì)案例精解[M].北京：清華大學(xué)出版社，2010.
[4]聞立鷗。DIV+CSS之布局一行三列頁面實(shí)證分析[J].教育教學(xué)論壇，2014，（22）。
【基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實(shí)踐】相關(guān)文章：
用線條表現(xiàn)物體的結(jié)構(gòu)08-16
基于Internet的多媒體教學(xué)系統(tǒng)結(jié)構(gòu)08-17
基于SEO的高職《網(wǎng)頁制作》課程改革初探08-17
美術(shù)教案－用線條表現(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