淺談網(wǎng)站頁面表現(xiàn)層的結(jié)構(gòu)設(shè)計思路

摘 要：本文結(jié)合筆者多年網(wǎng)站設(shè)計及制作的實踐經(jīng)驗和研究，主要探討網(wǎng)站建設(shè)過程中的頁面表現(xiàn)層設(shè)計思路，從網(wǎng)站建設(shè)初期即對未來網(wǎng)站運行乃至運維起到至關(guān)重要的作用，對網(wǎng)站建設(shè)和維護(hù)具有一定的參考價值和借鑒意義。

關(guān)鍵詞：網(wǎng)站；表現(xiàn)層；結(jié)構(gòu)設(shè)計

中圖分類號：TP393

近年來，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)媒體已成為重要的宣傳陣地，網(wǎng)站建設(shè)需求日趨火爆。目前的趨勢則要求網(wǎng)站開發(fā)和維護(hù)的響應(yīng)速度越來越快，時效越來越高。針對這一需求，網(wǎng)站建設(shè)初期就要嚴(yán)格銜接好各個環(huán)節(jié)，將網(wǎng)站結(jié)構(gòu)設(shè)計的更加合理，更加易于使用和維護(hù)。因此對于網(wǎng)站結(jié)構(gòu)的設(shè)計需要清晰的思路和規(guī)范的建站手冊。Web開發(fā)人員拿到網(wǎng)站設(shè)計圖紙后，第一步是設(shè)計網(wǎng)站的結(jié)構(gòu)，擁有一個優(yōu)秀的網(wǎng)站結(jié)構(gòu)不僅可以提高開發(fā)效率、降低維護(hù)成本、節(jié)約網(wǎng)絡(luò)資源，而且可以提高訪問者的體驗和信賴。

1 網(wǎng)站表現(xiàn)層

1.1 什么是表現(xiàn)層。所謂網(wǎng)站的表現(xiàn)層，就是訪問者在瀏覽器看到的各種數(shù)據(jù)的頁面表現(xiàn)形式。也就是說，訪問者在瀏覽器上看到的包含數(shù)據(jù)信息的頁面都可以稱之為表現(xiàn)層。

1.2 表現(xiàn)層的結(jié)構(gòu)。表現(xiàn)層包含的內(nèi)容形式多樣，風(fēng)格不一。有清新淡雅的，有絢麗多彩的，但表現(xiàn)層的結(jié)構(gòu)基本一致，分為數(shù)據(jù)和表現(xiàn)。所謂數(shù)據(jù)，就是網(wǎng)站要向訪問者展示的信息。其中包括文檔、表格、圖片、音頻、視頻、程序、文件等。而表現(xiàn)則是為數(shù)據(jù)提供顯示服務(wù)的，它包括頁面結(jié)構(gòu)，文字格式，色彩搭配、圖片修飾、音視頻播放、程序文件下載等。

2 表現(xiàn)層分離

由于表現(xiàn)層包含的內(nèi)容多樣，結(jié)構(gòu)繁雜，為了更清楚地了解表現(xiàn)層的內(nèi)部結(jié)構(gòu)，下面將這些元素一一分離。

2.1 數(shù)據(jù)與表現(xiàn)分離。如圖1所示，數(shù)據(jù)單元“A”、“B”從表現(xiàn)層分離后，剩下的部分就是“表現(xiàn)”。

在頁面中，數(shù)據(jù)可以是不斷更新的，新數(shù)據(jù)會不斷代替以往數(shù)據(jù)，如圖1中的A、B數(shù)據(jù)單元內(nèi)容可能被替換或不斷更新。相對來說，頁面的表現(xiàn)所要更新或變換的頻率要小的多，兩者相互不受影響，所以可以將它們分離。

2.2 結(jié)構(gòu)與樣式分離。如圖2所示，“表現(xiàn)”由頁面代碼和CSS樣式兩個部分組成。而“數(shù)據(jù)”除了具有CSS樣式外，又分為文件型和數(shù)據(jù)庫型。通常靜態(tài)網(wǎng)站使用的都是文件型數(shù)據(jù)，而動態(tài)網(wǎng)站都是從數(shù)據(jù)庫中提取的結(jié)構(gòu)化數(shù)據(jù)的模式。

圖2中CSS成為分離結(jié)構(gòu)和樣式的關(guān)鍵所在，所有與樣式相關(guān)的部分都可以從頁面中剝離出來，組成單獨的文件。在設(shè)計網(wǎng)頁時，設(shè)計者可以先設(shè)計網(wǎng)頁結(jié)構(gòu)，再根據(jù)結(jié)構(gòu)設(shè)計網(wǎng)頁樣式，不僅網(wǎng)頁變得“輕巧”，而且調(diào)整樣式、改變網(wǎng)頁外觀也變得更加靈活。

3 表現(xiàn)層優(yōu)化

表現(xiàn)層的結(jié)構(gòu)雖然已經(jīng)分離，但這樣的分離仍然存在代碼冗余現(xiàn)象和數(shù)據(jù)訪問效率低下等問題，下面需要對表現(xiàn)層進(jìn)一步優(yōu)化。

3.1 頁面結(jié)構(gòu)優(yōu)化。頁面結(jié)構(gòu)的優(yōu)化可以減少大量的冗余代碼，并有助于提高網(wǎng)頁批量修改操作效率。如圖3所示，頁面代碼可以再次分解。其中結(jié)構(gòu)代碼是網(wǎng)頁的主體代碼，也就是網(wǎng)頁的框架。另一部分則是可復(fù)用的代碼，例如：網(wǎng)站的頁眉、頁腳、主菜單、宣傳欄等，這些部分是首頁、二級、三級頁面共用的。

優(yōu)化后，頁面結(jié)構(gòu)更加清晰了。可復(fù)用部分變成了一個個獨立的文件，哪里需要就在哪里調(diào)用，只需修改一處，其余頁面就全部更新了。可復(fù)用代碼通過現(xiàn)在比較流行的SSI包含結(jié)構(gòu)來實現(xiàn)調(diào)用。

3.2 數(shù)據(jù)靜態(tài)化優(yōu)化。數(shù)據(jù)靜態(tài)化是指網(wǎng)頁展示的數(shù)據(jù)信息作為網(wǎng)頁的組成部分嵌入在頁面里，或者以文本文件形式包含進(jìn)網(wǎng)頁里。數(shù)據(jù)靜態(tài)化主要針對動態(tài)網(wǎng)頁而言，動態(tài)網(wǎng)頁在被訪問時從數(shù)據(jù)庫查詢數(shù)據(jù)，涉及大量IO操作，消耗了服務(wù)器大量資源，占用大量系統(tǒng)時間。

數(shù)據(jù)靜態(tài)化是通過編寫后臺程序，由網(wǎng)站內(nèi)容管理系統(tǒng)事先把網(wǎng)頁要顯示的動態(tài)數(shù)據(jù)從數(shù)據(jù)庫讀取出來寫到Web頁面里，或者把動態(tài)數(shù)據(jù)寫到文本文件中，然后通過包含技術(shù)把文本文件包含到網(wǎng)頁要顯示地區(qū)域，頁面靜態(tài)化便完成了。

網(wǎng)站數(shù)據(jù)變成了靜態(tài)的文件形式，減輕了服務(wù)器計算壓力，可以釋放更多的性能用于提供更多、更快的訪問服務(wù)。

如圖4所示，對表現(xiàn)層結(jié)構(gòu)進(jìn)行分解，最后被網(wǎng)頁結(jié)構(gòu)代碼所調(diào)用。

4 結(jié)語

通過了解和剖析網(wǎng)站表現(xiàn)層的結(jié)構(gòu)，對于網(wǎng)站開發(fā)和建設(shè)維護(hù)團(tuán)隊來說都是非常有益的，不僅可以將工作化整為零，也可以優(yōu)化團(tuán)隊協(xié)作，減輕網(wǎng)站維護(hù)成本，提高網(wǎng)站可維護(hù)度，對網(wǎng)頁進(jìn)行不斷的調(diào)整和改進(jìn)，內(nèi)容不斷充實、擴(kuò)充并且多處復(fù)用。相信每個開發(fā)人員對于網(wǎng)站的結(jié)構(gòu)都有自己的一套經(jīng)驗和理論，希望本文可以幫助那些初學(xué)者和對網(wǎng)站開發(fā)有興趣、志同道合的人，共同探討和借鑒學(xué)習(xí)，不斷深入網(wǎng)站設(shè)計與制作的理論基礎(chǔ)，推動網(wǎng)站事業(yè)的發(fā)展。

參考文獻(xiàn)：

[1]丁士鋒.網(wǎng)頁制作與網(wǎng)站建設(shè)實戰(zhàn)大全[M].北京：清華大學(xué)出版社，2013（1）.

[2]張春曉.網(wǎng)頁制作與網(wǎng)站建設(shè)寶典[M].北京：電子工業(yè)出版社，2012（1）.

[3]劉增杰，劉海松.精通DIV+CSS3網(wǎng)頁布局與樣式[M].北京：清華大學(xué)出版社，2012（1）.

作者簡介：邵海鵬（1981-），男，北京人，網(wǎng)絡(luò)工程師，本科，從事網(wǎng)站設(shè)計與制作的研究。