- 相關(guān)推薦
基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實踐
基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實踐
聞立鷗
（北京財貿(mào)職業(yè)學(xué)院，北京101101）
摘要：表現(xiàn)與技術(shù)相分離來制作網(wǎng)頁已經(jīng)是一種必然趨勢。可以在網(wǎng)頁結(jié)構(gòu)不變的情況下，通過修改樣式表文件實現(xiàn)頁面重構(gòu)，變換網(wǎng)頁的表現(xiàn)風(fēng)格。不僅大大提高了頁面的制作效率，而且提高了網(wǎng)站的維護效率。本文通過案例的制作，將表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實踐過程與大家分享。
關(guān)鍵詞：表現(xiàn)；結(jié)構(gòu)；網(wǎng)頁布局
作者簡介：聞立鷗（1971-），女，副教授，主要從事計算機應(yīng)用方面的研究。
一、引言
隨著Web 2.0標(biāo)準(zhǔn)化設(shè)計理念的普及，DIV+CSS進行網(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ī)劃切割效果圖，接下來使用可擴展的超文本標(biāo)記語言搭建網(wǎng)頁內(nèi)容結(jié)構(gòu)，然后利用樣式表文件“還原”出與效果圖一致的頁面效果。如果要實現(xiàn)網(wǎng)頁內(nèi)容和外觀樣式的完全分離，應(yīng)創(chuàng)建一個新的樣式文件，然后以鏈入外部CSS樣式表的方法將這個樣式文件鏈接到網(wǎng)頁文檔中。這樣就完全做到網(wǎng)站的維護人員可通過修改樣式文件來改變頁面風(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)。
四、結(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代碼，加強實踐，認(rè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）。
【基于表現(xiàn)與結(jié)構(gòu)分離的網(wǎng)頁布局實踐】相關(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)對策略08-24
清城區(qū)優(yōu)化工業(yè)結(jié)構(gòu)布局情況的調(diào)研報告08-12
基于CSSCI的200108-18