Web Design

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

1.內容

內容設計就是頁面實際要傳達的真正資訊，包含數據、文檔或者圖片等。注意這裡強調的“真正”，是指純粹的數據資訊本身。比如一個不包含輔助的資訊,比如導航菜單、裝飾性圖片等。舉個例子，有下面一段文本是我們設計頁面要表現的資訊。

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

2.結構(Structure)

可以看到上面的文本資訊本身已經完整。但是混亂一團，難以閱讀和理解，我們必須給它格式化一下。把它分成標題、作者、章、節、段落和列表等。

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

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