對于初學(xué)者，我們?？匆?jiàn)web標準的好處之一是“能做到表現和結構相分離”，那這到底是什么意思呢？我將以一個(gè)實(shí)際的例子來(lái)詳細說(shuō)明。首先我們必須先明白一些基本的概念：內容、結構、表現和行為。
內容就是頁(yè)面實(shí)際要傳達的真正信息，包含數據、文檔或者圖片等。注意這里強調的“真正”，是指純粹的數據信息本身。比如一個(gè)不包含輔助的信息,比如導航菜單、裝飾性圖片等。舉個(gè)例子，有下面一段文本是我們頁(yè)面要表現的信息。
憶江南(1)唐.白居易江南好，風(fēng)景舊曾諳。(2)日出江花紅勝火，春來(lái)江水綠如藍，(3)能不憶江南。作者介紹772－846 ，字樂(lè )天，太原(今屬山西)人。唐德宗朝進(jìn)士，元和三年(808)拜左拾遺，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽(yáng)，自號醉吟先生、香山居士。其詩(shī)政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人中的佼佼者，所作對后世影響甚大。注釋(1)據《樂(lè )府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。又名《望江南》、《夢(mèng)江南》等。分單調、雙調兩體。單調二十七字，雙凋五十四字，皆平韻。(2)諳(音安)：熟悉。(3)藍：藍草，其葉可制青綠染料。品評此詞寫(xiě)江南春色，首句“江南好”，以一個(gè)既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的贊頌之意與向往之情也盡寓其中。同時(shí)，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結句“能不憶江南”，并與之相關(guān)闔。次句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”，并非得之傳聞，而是作者出牧杭州時(shí)的親身體驗與親身感受。這就既落實(shí)了“好”字，又照應了“憶”字，不失為勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進(jìn) 行形象化的演繹，突出渲染江花、江水紅綠相映的明艷色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善于著(zhù)色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽(yáng)的作者對江南春色的無(wú)限贊嘆與懷念，又造成一種悠遠而又深長(cháng)的韻味，把讀者帶入余情搖漾的境界中。可以看到上面的文本信息本身已經(jīng)完整。但是混亂一團，難以閱讀和理解，我們必須給它格式化一下。把它分成標題、作者、章、節、段落和列表等。
標題憶江南(1)類(lèi)似上面標題、作者、章、節、段落和列表，我們就把它稱(chēng)做結構。結構使內容更加具有邏輯性，易用性。
雖然定義了結構，但是內容還是原來(lái)的樣式?jīng)]有改變，例如標題字體沒(méi)有變大，正文的顏色也沒(méi)有變化，沒(méi)有背景，沒(méi)有修飾。所有這些用來(lái)改變內容外觀(guān)的東西，我們稱(chēng)之為“表現”。下面是對上面文本用表現處理過(guò)后的效果:
772－846 ，字樂(lè )天，太原(今屬山西)人。唐德宗朝進(jìn)士，元和三年(808)拜左拾遺，后貶江州(今屬江西)司馬，移忠州(今屬四川)刺史，又為蘇州(今屬江蘇)、同州(今屬陜西大荔)刺史。晚居洛陽(yáng)，自號醉吟先生、香山居士。其詩(shī)政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人中的佼佼者，所作對后世影響甚大。
注釋此詞寫(xiě)江南春色，首句“江南好”，以一個(gè)既淺切又圓活的“好”字，攝盡江南春色的種種佳處，而作者的贊頌之意與向往之情也盡寓其中。同時(shí)，唯因“好”之已甚，方能“憶”之不休，因此，此句又已暗逗結句“能不憶江南”，并與之相關(guān)闔。次句“風(fēng)景舊曾諳”，點(diǎn)明江南風(fēng)景之“好”，并非得之傳聞，而是作者出牧杭州時(shí)的親身體驗與親身感受。這就既落實(shí)了“好”字，又照應了“憶”字，不失為勾通一篇意脈的精彩筆墨。三、四兩句對江南之“好”進(jìn) 行形象化的演繹，突出渲染江花、江水紅綠相映的明艷色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者善于著(zhù)色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽(yáng)的作者對江南春色的無(wú)限贊嘆與懷念，又造成一種悠遠而又深長(cháng)的韻味，把讀者帶入余情搖漾的境界中。
噢，很明顯，我們加了2種背景，將標題字體變大并居中，將小標題加粗并變成紅色，等等等等。所有這些，都是“表現”的作用。它使你的內容看上去漂亮、可愛(ài)多了！形象一點(diǎn)的比喻:內容是模特，結構標明頭和四肢等各個(gè)部位，表現則是服裝,將模特打扮得漂漂亮亮。(請原諒我用模特打比方，很多時(shí)候模特比web標準更具有吸引力。)
那么行為是什么？
行為就是對內容的交互及操作效果。例如，我們最熟悉不過(guò)的JavaScript。使用JavaScript我們可以使內容動(dòng)起來(lái)，可以判斷一些表單提交，可以相應你的一些操作。這個(gè)我就不再舉例子了。
所有HTML和XHTML頁(yè)面就是由“結構、表現和行為”這三方面組成的。抽象一點(diǎn)理解，內容是基礎層，然后是附加上去結構層和表現層，作后再對它們做點(diǎn)“行為”,示意草圖如下：
傳統的HTML3.2/4.0標簽里既有控制結構的標簽，例如<title>,<p>，又有控制表現的標簽，例如<font>,<b>，還有本意用于結構后來(lái)被濫用于控制表現的標簽，例如：<h1>,<table>等。結構標簽與表現標簽混雜在一起。
例如上面舉例的頁(yè)面，你可能很熟練的2-5個(gè)表格來(lái)控制邊框、背景和文本居中；用<h2><h3>來(lái)定義標題和小節標題；用<font>和<b>來(lái)控制字體大小、顏色和粗體。輕而易舉地就能制作好頁(yè)面。聰明些的設計師還采用CSS樣式表來(lái)統一控制一些字體的表現。下面的代碼是我們最熟悉不過(guò)的了：
<table border="0" width="100%"><tr><td align="center"><h1><font color="#C61C18">憶江南</font></h1></td></tr></table>傳統的方法看上去并沒(méi)有什么問(wèn)題。(我們已經(jīng)很習慣了,從來(lái)沒(méi)有想過(guò)會(huì )有什么問(wèn)題。)但是既然W3C放棄HTML，推薦XHTML和XML就一定有它的道理和原因，問(wèn)題出在哪里？
問(wèn)題就出在結構層和表現層混雜在一起！當我們只發(fā)布一些簡(jiǎn)單頁(yè)面，沒(méi)什么影響。當我們發(fā)布了大量頁(yè)面，問(wèn)題就來(lái)了。
第一個(gè)問(wèn)題是：如何改版。假如由于某些原因我們需要把背景替換成黑色，邊框變成1px黃色，文字變成白色，所有文字居中。你可能就要一頁(yè)一頁(yè)的修改。好，你說(shuō)你用了CSS，那么恭喜你，你可以直接修改樣式表，輕松實(shí)現這樣簡(jiǎn)單的改版。(復雜改版暫且不提。)
第二個(gè)問(wèn)題是：數據的利用。本質(zhì)上講所有頁(yè)面信息都是數據。當我發(fā)布了唐詩(shī)300首，宋詞100首，就是一個(gè)可觀(guān)的數據庫，這個(gè)應該不難理解。那么好，是數據就存在數據查詢(xún)，處理和交換的問(wèn)題。假如我所有的頁(yè)面上都不需要顯示“品評”這一小節；假如我要將頁(yè)面數據轉成excel格式；假如我要打印一個(gè)干凈內容的頁(yè)面(不要背景、導航、版權等不相干信息)怎么辦？傳統的解決方法是：一頁(yè)一頁(yè)刪除“品評”小節；一頁(yè)一頁(yè)地拷貝粘貼到excel，一頁(yè)一頁(yè)地制作"打印友好頁(yè)"。這樣做顯然不是有效率的辦法。
實(shí)際上，第一個(gè)問(wèn)題實(shí)質(zhì)是批量改變"表現"。由于傳統HTML方法的結構并不明顯，甚至可以視作只有表現，我們就象設計時(shí)尚雜志那樣精心畫(huà)出每一頁(yè)。嚴謹的設計師可以控制到每1px的細節。內容與表格緊密的嵌套、混雜在一起，結構只是用表現來(lái)表現出來(lái)，而不是用標簽。這種設計方法下，任何內容的變化，結構的變化都會(huì )影響整個(gè)頁(yè)面的表現，都需要一點(diǎn)一點(diǎn)細節的修改。CSS的出現，一開(kāi)始似乎就是用來(lái)解決"批量改表現"的問(wèn)題。大部分的網(wǎng)頁(yè)設計師已經(jīng)能夠熟練使用CSS來(lái)控制字體的大小顏色，超鏈接的效果，表格的邊框等等，已經(jīng)體會(huì )到CSS批量改變表現的效率。
第二個(gè)問(wèn)題則是無(wú)法避免。由于結構和表現混雜在一起(內容被n層的表格拆分)，你無(wú)法判斷哪個(gè)td里面到那個(gè)td是你需要的數據，無(wú)法剝離其中夾雜的<font><b>的標簽。上例中，從哪里開(kāi)始是正文？哪里開(kāi)始是“品評”小節?哪些是附加信息不需要打??？我們都無(wú)法讓電腦自己去判斷，唯一的方法是人工判斷，手工處理。結構和表現混雜在一起，頁(yè)面就好比是一張圖片，你無(wú)法讓電腦搜索其中的文字。(哦，我聽(tīng)見(jiàn)有人說(shuō)：我的站點(diǎn)有全文檢索啊。恩，我想說(shuō)的是，第一,這樣的檢索效率非常低，你需要濾過(guò)整個(gè)內容，匹配到你的"檢索關(guān)鍵字"，例如，我要查找作者李白，搜索引擎會(huì )檢索頁(yè)面所有文字才能告訴你這頁(yè)里面含有"李白"，而且不一定出現在作者上。第二，這樣的檢索對數據處理和交換毫無(wú)用處。例如我要將所有作者李白的詩(shī)摘出來(lái)，我要給所有作者增加一個(gè)肖像圖片，這樣的搜索毫無(wú)幫助。)
對于第二個(gè)問(wèn)題，要如何解決呢？解決的辦法就是：結構清晰化，將內容、結構與表現相分離。
對于內容、結構與表現相分離，最早是在軟件開(kāi)發(fā)架構理論中提出來(lái)的。QQ用過(guò)吧，QQ面板的變更皮膚就是內容不變，外觀(guān)表現在變化；還有winamp的skin也是這種原理的典型體現。其實(shí)我們大多數的設計師已經(jīng)在實(shí)踐中都接觸到。我們的動(dòng)態(tài)信息發(fā)布系統，實(shí)際上就是基于這個(gè)原理制作的，設計師只需要設計模版，程序員將數據(標題、作者、發(fā)布日期、摘要、相關(guān)文章、相關(guān)圖片等等)從數據庫中讀出，嵌入你的模板，形成一個(gè)新的頁(yè)面再展示給瀏覽者。其中的內容已經(jīng)被結構化后分別保存在數據庫的不同字段中。例如查找作者，我們只要在作者字段中搜索，這樣的效率就提高很多了。
上面都是有賴(lài)于程序，如果頁(yè)面文檔本身就能實(shí)現表現和結構相分離，那么數據的交換和再利用不就更方便了。嘿嘿，其實(shí)XML就是奔著(zhù)這個(gè)方向去的，XML允許你自己定制結構標識，還提供了XSLT用來(lái)格式化、查詢(xún)和處理文檔內容。例如上面的詩(shī)詞頁(yè)面，用XML寫(xiě)出來(lái)的代碼就象這樣：
<標題>憶江南</標題>這些<標題><作者>都是自己定義的標簽，這樣文檔結構非常清晰，查詢(xún)和處理也很簡(jiǎn)單。啊哦，說(shuō)遠了。還是回到目前能應用的web標準方法上。
web標準方法目前推薦大家使用XHTML+CSS來(lái)制作網(wǎng)站。目標是使結構與表現徹底相分離。
就是說(shuō)，XHTML的標簽只用來(lái)定義文檔的結構，所有涉及表現的東西通通剝離出來(lái)，把它放到一個(gè)單獨的文件里，這個(gè)單獨的文件就是CSS。(CSS的好處上面已經(jīng)講到，可以批量處理表現)。采用這種方法后，上面的第二個(gè)問(wèn)題中的3個(gè)假設困難就迎刃而解。我們可以利用樣式表將所有"品評"結構不顯示(DISPLAY: none);我們可以根據頁(yè)面結構標簽將內容自動(dòng)導入到excel；我們可以設計一個(gè)專(zhuān)門(mén)的打印樣式表，隱藏掉所有附加的信息，只打印干凈的內容。就這么簡(jiǎn)單。
現在你明白了吧，為什么我們反對用表格設計布局。原因是<table>用于布局的時(shí)候，它是一個(gè)控制表現的標簽?；祀s在內容和結構中，使我們的內容數據無(wú)法再利用。結構與表現相分離帶來(lái)的好處主要有：
好了，說(shuō)到這，關(guān)于表現與結構相分離的概念，您是否有一點(diǎn)理解？如果還是模模糊糊，也不要緊，自己實(shí)際制作體驗一把，在實(shí)踐中逐步領(lǐng)會(huì )。學(xué)習web標準需要循序漸進(jìn)，阿捷和您一樣，也在努力學(xué)習中。
要一個(gè)符合wbe標準的實(shí)際例子？查看本頁(yè)原代碼，講"表現"概念的那個(gè)例子就是用CSS+DIV實(shí)現的。樣式表的內容直接在本頁(yè)head區，沒(méi)有另外單獨調用，便于你的查看:)
聯(lián)系客服
