網頁設計以內容、結構、表現分離

對於初學者，咱們常看見web標準的好處之一是「能作到表現和結構相分離」，那這究竟是什麼意思呢？我將以一個實際的例子來詳細說明。首先咱們必須先明白一些基本的概念：內容、結構、表現和行爲。

1.內容

內容就是頁面實際要傳達的真正信息，包含數據、文檔或者圖片等。注意這裏強調的「真正」，是指純粹的數據信息自己。好比一個不包含輔助的信息,好比導航菜單、裝飾性圖片等。舉個例子，有下面一段文本是咱們頁面要表現的信息。

憶江南(1)唐.白居易江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如 藍，(3)能不憶江南。做者介紹772－846 ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，後貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又爲蘇州(今屬江蘇)、 同州(今屬陝西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，爲中唐你們。也是早期詞人中的佼佼者，所做對後世影響 甚大。註釋(1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕爲亡姬謝秋娘做。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋 五十四字，皆平韻。(2)諳(音安)：熟悉。(3)藍：藍草，其葉可制青綠染料。品評此詞寫江南春色，首句「江南好」，以一個既淺切又圓活的「好」字，攝 盡江南春色的種種佳處，而做者的讚頌之意與嚮往之情也盡寓其中。同時，惟因「好」之已甚，方能「憶」之不休，所以，此句又已暗逗結句「能不憶江南」，並與 之相關闔。次句「風景舊曾諳」，點明江南風景之「好」，並不是得之傳聞，而是做者出牧杭州時的親身體驗與親身感覺。這就既落實了「好」字，又照應了「憶」 字，不失爲勾通一篇意脈的精彩筆墨。3、四兩句對江南之「好」進 　行形象化的演繹，突出渲染江花、江水紅綠相映的明豔色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映託，充分顯示了做 者善於著色的技巧。篇末，以「能不憶江南」收束全詞，既托出身在洛陽的做者對江南春色的無限讚歎與懷念，又形成一種悠遠而又深長的韻味，把讀者帶入餘情搖 漾的境界中。

2.結構(Structure)

能夠看到上面的文本信息自己已經完整。可是混亂一團，難以閱讀和理解，咱們必須給它格式化一下。把它分紅標題、做者、章、節、段落和列表等。

標題 憶江南(1)
做者 唐.白居易
正文
江南好，風景舊曾諳。(2)
日出江花紅勝火，春來江水綠如藍，(3)
能不憶江南。
節1做者介紹
772－846 ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，後貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又爲蘇州(今屬江蘇)、 同州(今屬陝西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，爲中唐你們。也是早期詞人中的佼佼者，所做對後世影響 甚大。
節2註釋
列表
(1) 據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕爲亡姬謝秋娘做。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。
(2)諳(音安)：熟悉。
(3)藍：藍草，其葉可制青綠染料。
節3品評
此 詞寫江南春色，首句「江南好」，以一個既淺切又圓活的「好」字，攝盡江南春色的種種佳處，而做者的讚頌之意與嚮往之情也盡寓其中。同時，惟因 「好」之已甚，方能「憶」之不休，所以，此句又已暗逗結句「能不憶江南」，並與之相關闔。次句「風景舊曾諳」，點明江南風景之「好」，並不是得之傳聞，而是 做者出牧杭州時的親身體驗與親身感覺。這就既落實了「好」字，又照應了「憶」字，不失爲勾通一篇意脈的精彩筆墨。3、四兩句對江南之「好」進 　行形象化的演繹，突出渲染江花、江水紅綠相映的明豔色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映託，充分顯示了做 者善於著色的技巧。篇末，以「能不憶江南」收束全詞，既托出身在洛陽的做者對江南春色的無限讚歎與懷念，又形成一種悠遠而又深長的韻味，把讀者帶入餘情搖 漾的境界中。

相似上面標題、做者、章、節、段落和列表，咱們就把它稱作結構。結構使內容更加具備邏輯性，易用性。

2.表現(Presentation)

雖然定義告終構，可是內容仍是原來的樣式沒有改變，例如標題字體沒有變大，正文的顏色也沒有變化，沒有背景，沒有修飾。全部這些用來改變內容外觀的東西，咱們稱之爲「表現」。下面是對上面文本用表現處理事後的效果:

憶江南(1)

唐.白居易

江南好，風景舊曾諳。(2)
日出江花紅勝火，春來江水綠如藍，(3)
能不憶江南。

做者介紹

772－846 ，字樂天，太原(今屬山西)人。唐德宗朝進士，元和三年(808)拜左拾遺，後貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又爲蘇州(今屬江蘇)、 同州(今屬陝西大荔)刺史。晚居洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，爲中唐你們。也是早期詞人中的佼佼者，所做對後世影響 甚大。

註釋

• (1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕爲亡姬謝秋娘做。又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。
• (2)諳(音安)：熟悉。
• (3)藍：藍草，其葉可制青綠染料。

品評

此詞寫江南春色，首句「江南好」，以一個既淺切又圓活的「好」字，攝盡江南春色的種種佳處，而做者的讚頌之意與嚮往之情也盡寓其中。同時，惟因 「好」之已甚，方能「憶」之不休，所以，此句又已暗逗結句「能不憶江南」，並與之相關闔。次句「風景舊曾諳」，點明江南風景之「好」，並不是得之傳聞，而是 做者出牧杭州時的親身體驗與親身感覺。這就既落實了「好」字，又照應了「憶」字，不失爲勾通一篇意脈的精彩筆墨。3、四兩句對江南之「好」進 　行形象化的演繹，突出渲染江花、江水紅綠相映的明豔色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映託，充分顯示了做 者善於著色的技巧。篇末，以「能不憶江南」收束全詞，既托出身在洛陽的做者對江南春色的無限讚歎與懷念，又形成一種悠遠而又深長的韻味，把讀者帶入餘情搖 漾的境界中。

噢，很明顯，咱們加了2種背景，將標題字體變大並居中，將小標題加粗並變成紅色，等等等等。全部這些，都是「表現」的做用。它使你的內容看上去漂 亮、可愛多了！形象一點的比喻:內容是模特，結構標明頭和四肢等各個部位，表現則是服裝,將模特打扮得漂漂亮亮。(請原諒我用模特打比方，不少時候模特比 web標準更具備吸引力。)

那麼行爲是什麼？

3.行爲(Behavior)

行爲就是對內容的交互及操做效果。例如，咱們最熟悉不過的JavaScript。使用JavaScript咱們可使內容動起來，能夠判斷一些表單提交，能夠相應你的一些操做。這個我就再也不舉例子了。

全部HTML和XHTML頁面就是由「結構、表現和行爲」這三方面組成的。抽象一點理解，內容是基礎層，而後是附加上去結構層和表現層，做後再對它們作點「行爲」,示意草圖以下：

4.傳統的HTML方法

傳統的HTML3.2/4.0標籤裏既有控制結構的標籤，例如<title>,<p>，又有控 製表現的標籤，例如<font>,<b>，還有本意用於結構後來被濫用於控制表現的標籤，例 如：<h1>,<table>等。結構標籤與表現標籤混雜在一塊兒。

例如上面舉例的頁面，你可能很熟練的2-5個表格來控制邊框、背景和文本居中； 用<h2><h3>來定義標題和小節標題；用<font>和<b>來控制字體大小、顏色和粗體。輕而易 舉地就能製做好頁面。聰明些的設計師還採用CSS樣式表來統一控制一些字體的表現。下面的代碼是咱們最熟悉不過的了：

<table border="0" width="100%"><tr><td align="center"><h1><font color="#C61C18">憶江南</font></h1></td></tr>< /table>

傳統的方法看上去並無什麼問題。(咱們已經很習慣了,歷來沒有想過會有什麼問題。)可是既然W3C放棄HTML，推薦XHTML和XML就必定有它的道理和緣由，問題出在哪裏？

問題就出在結構層和表現層混雜在一塊兒！當咱們只發布一些簡單頁面，沒什麼影響。當咱們發佈了大量頁面，問題就來了。

第一個問題是：如何改版。假如因爲某些緣由咱們須要把背景替換成黑色，邊框變成1px黃色，文字變成白色，全部文字居中。你可能就要一頁一頁的修改。好，你說你用了CSS，那麼恭喜你，你能夠直接修改樣式表，輕鬆實現這樣簡單的改版。(複雜改版暫且不提。)

第二個問題是：數據的利用。本質上講全部頁面信息都是數據。當我發佈了唐詩300首，宋詞100首，就是一個可觀的數據 庫，這個應該不難理解。那麼好，是數據就存在數據查詢，處理和交換的問題。假如我全部的頁面上都不須要顯示「品評」這一小節；假如我要將頁面數據轉成 excel格式；假如我要打印一個乾淨內容的頁面(不要背景、導航、版權等不相干信息)怎麼辦？傳統的解決方法是：一頁一頁刪除「品評」小節；一頁一頁地 拷貝粘貼到excel，一頁一頁地製做"打印友好頁"。這樣作顯然不是有效率的辦法。

實際上，第一個問題實質是批量改變"表現"。因爲傳統HTML方法的結構並不明顯，甚至能夠視做只有表現，咱們就象設計 時尚雜誌那樣精心畫出每一頁。嚴謹的設計師能夠控制到每1px的細節。內容與表格緊密的嵌套、混雜在一塊兒，結構只是用表現來表現出來，而不是用標籤。這種 設計方法下，任何內容的變化，結構的變化都會影響整個頁面的表現，都須要一點一點細節的修改。CSS的出現，一開始彷佛就是用來解決"批量改表現"的問 題。大部分的網頁設計師已經可以熟練使用CSS來控制字體的大小顏色，超連接的效果，表格的邊框等等，已經體會到CSS批量改變表現的效率。

第二個問題則是沒法避免。因爲結構和表現混雜在一塊兒(內容被n層的表格拆分)，你沒法判斷哪一個td裏面到那個td是你需 要的數據，沒法剝離其中夾雜的<font><b>的標籤。上例中，從哪裏開始是正文？哪裏開始是「品評」小節?哪些是附加信息不 須要打印？咱們都沒法讓電腦本身去判斷，惟一的方法是人工判斷，手工處理。結構和表現混雜在一塊兒，頁面就比如是一張圖片，你沒法讓電腦搜索其中的文字。 (哦，我聽見有人說：個人站點有全文檢索啊。恩，我想說的是，第一,這樣的檢索效率很是低，你須要濾過整個內容，匹配到你的"檢索關鍵字"，例如，我要查 找做者李白，搜索引擎會檢索頁面全部文字才能告訴你這頁裏面含有"李白"，並且不必定出如今做者上。第二，這樣的檢索對數據處理和交換毫無用處。例如我要 將全部做者李白的詩摘出來，我要給全部做者增長一個肖像圖片，這樣的搜索毫無幫助。)

對於第二個問題，要如何解決呢？解決的辦法就是：結構清晰化，將內容、結構與表現相分離。

5.web標準推薦的方法

對於內容、結構與表現相分離，最先是在軟件開發架構理論中提出來的。QQ用過吧，QQ面板的變動皮膚就是內容不變，外觀 表如今變化；還有 winamp的skin也是這種原理的典型體現。其實咱們大多數的設計師已經在實踐中都接觸到。咱們的動態信息發佈系統，實際上就是基於這個原理製做的， 設計師只須要設計模版，程序員將數據(標題、做者、發佈日期、摘要、相關文章、相關圖片等等)從數據庫中讀出，嵌入你的模板，造成一個新的頁面再展現給瀏 覽者。其中的內容已經被結構化後分別保存在數據庫的不一樣字段中。例如查找做者，咱們只要在做者字段中搜索，這樣的效率就提升不少了。

上面都是有賴於程序，若是頁面文檔自己就能實現表現和結構相分離，那麼數據的交換和再利用不就更方便了。嘿嘿，其實 XML就是奔着這個方向去的，XML容許你本身定製結構標識，還提供了XSLT用來格式化、查詢和處理文檔內容。例如上面的詩詞頁面，用XML寫出來的代 碼就象這樣：

<標題>憶江南</標題>
<做者>唐.白居易</做者>
<正文>江南好...</正文>
<做者介紹>772－846 ，字樂天...</做者介紹>
<註釋>據《樂府雜錄》...</註釋>
<品評>此詞寫江南春色...</品評>

這些<標題><做者>都是本身定義的標籤，這樣文檔結構很是清晰，查詢和處理也很簡單。啊哦，說遠了。仍是回到目前能應用的web標準方法上。

web標準方法目前推薦你們使用XHTML+CSS來製做網站。目標是使結構與表現完全相分離。

就是說，XHTML 的標籤只用來定義文檔的結構， 全部涉及表現的東西統統剝離出來，把它放到一個單獨的文件裏，這個單獨的文件就是CSS。(CSS的好處上面已經講到，能夠批量處理表現)。採用這種方法 後，上面的第二個問題中的3個假設困難就迎刃而解。咱們能夠利用樣式表將全部"品評"結構不顯示 (DISPLAY: none);咱們能夠根據頁面結構標籤將內容自動導入到excel；咱們能夠設計一個專門的打印樣式表，隱藏掉全部附加的信息，只打印乾淨的內容。就這麼 簡單。

如今你明白了吧，爲何咱們反對用表格設計佈局。緣由是<table>用於佈局的時候，它是一個控制表現的標籤。混雜在內容和結構中，使咱們的內容數據沒法再利用。結構與表現相分離帶來的好處主要有：

1.數據的多樣顯示。經過不一樣的樣式表適應不一樣的設備，作到內容與設備無關

2.保持整個站點的視覺一致性變得很是簡單，修改樣式表就能夠輕鬆改版; 

3.因爲結構清晰，數據的集成、更新和處理更加方便靈活；

4.更有意義的搜索。