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