- 相關推薦
基于表現(xiàn)與結構分離的網(wǎng)頁布局實踐
基于表現(xiàn)與結構分離的網(wǎng)頁布局實踐
聞立鷗
（北京財貿職業(yè)學院，北京101101）
摘要：表現(xiàn)與技術相分離來制作網(wǎng)頁已經(jīng)是一種必然趨勢。可以在網(wǎng)頁結構不變的情況下，通過修改樣式表文件實現(xiàn)頁面重構，變換網(wǎng)頁的表現(xiàn)風格。不僅大大提高了頁面的制作效率，而且提高了網(wǎng)站的維護效率。本文通過案例的制作，將表現(xiàn)與結構分離的網(wǎng)頁布局實踐過程與大家分享。
關鍵詞：表現(xiàn)；結構；網(wǎng)頁布局
作者簡介：聞立鷗（1971-），女，副教授，主要從事計算機應用方面的研究。
一、引言
隨著Web 2.0標準化設計理念的普及，DIV+CSS進行網(wǎng)頁制作已經(jīng)是必然趨勢，網(wǎng)頁制作人員應該順應網(wǎng)絡技術的發(fā)展，及時更新技術手段。學會通過HTML語言構建網(wǎng)頁的語義化結構并盡可能優(yōu)化，然后運用CSS樣式表文件呈現(xiàn)網(wǎng)頁的可視化效果，實現(xiàn)網(wǎng)頁的表現(xiàn)與內容的分離。大大減少了代碼冗余，提高網(wǎng)頁制作效率，改善網(wǎng)頁瀏覽質量。
二、內容與表現(xiàn)相分離技術簡介
內容和表現(xiàn)相分離，是目前WEB2.0標準技術制作網(wǎng)頁最基本的方法，也是CSS網(wǎng)頁布局重要的目標之一�；镜闹谱髁鞒淌牵确治鲆�(guī)劃切割效果圖，接下來使用可擴展的超文本標記語言搭建網(wǎng)頁內容結構，然后利用樣式表文件“還原”出與效果圖一致的頁面效果。如果要實現(xiàn)網(wǎng)頁內容和外觀樣式的完全分離，應創(chuàng)建一個新的樣式文件，然后以鏈入外部CSS樣式表的方法將這個樣式文件鏈接到網(wǎng)頁文檔中。這樣就完全做到網(wǎng)站的維護人員可通過修改樣式文件來改變頁面風格，修改網(wǎng)頁文件來改變內容，互不干擾。
三、表現(xiàn)與結構分離技術制作網(wǎng)站流程解析本案例為個人網(wǎng)站，包括首頁和相關二級頁面，首頁效果圖如下。所有頁面布局整齊且風格統(tǒng)一。使用表現(xiàn)與結構分離技術制作流程如左圖。
1. 利用XHTML
構建整體網(wǎng)頁的結構。
四、結語
采用結構與表現(xiàn)相分離技術制作網(wǎng)頁，在“表格時代”是不可能實現(xiàn)的。如果要修改網(wǎng)頁的外觀風格，直接修改CSS樣式文件代碼即可，準確而快捷呈現(xiàn)效果圖的顯示效果。但是如果按照WEB標準更加專業(yè)更加規(guī)范設計網(wǎng)頁，還需要熟練運用XHTML與CSS代碼，加強實踐，認真思考并嘗試運用多種方法去解決實踐中出現(xiàn)的問題。
參考文獻：
[1]聞立鷗。網(wǎng)頁制作實用教程[M].北京：清華大學出版社，2009.
[2]柯海鵬。任務驅動法在DIV+CSS網(wǎng)頁布局技術中的教學探索[J].教師，2013，（22）。
[3] 關秀英。Flash CS4商業(yè)動畫、片頭與網(wǎng)站設計案例精解[M].北京：清華大學出版社，2010.
[4]聞立鷗。DIV+CSS之布局一行三列頁面實證分析[J].教育教學論壇，2014，（22）。
【基于表現(xiàn)與結構分離的網(wǎng)頁布局實踐】相關文章：
用線條表現(xiàn)物體的結構08-16
基于Internet的多媒體教學系統(tǒng)結構08-17
基于SEO的高職《網(wǎng)頁制作》課程改革初探08-17
新入園幼兒“分離焦慮”的表現(xiàn)及應對策略08-24
清城區(qū)優(yōu)化工業(yè)結構布局情況的調研報告08-12
基于高校教育改革中的教學實踐探析08-08
基于CSSCI的200108-18