有許多 web 設計師都有為紙質印刷品設計版面的經驗。事實上，設計網站時，把網頁當做紙質印刷品來對待是最容易想到的思想，除了把白紙換成了屏幕，其他做法沒什么兩 樣。這種做法注定會失敗。 Web 是一種不同的媒體。在設計紙質印刷品是時，必須把原始內容和版面設計交織在一起才能看到最終的印刷效果，但在設計網頁時，只有將其分離開來才能獲得最佳的 結果。
最准確的網頁設計思路是把網頁分成三個層次，即：結構層、表示層、行為層。
網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P 標簽表達了這樣一種語義：“這是一個文本段。”
網頁的表示層（presentation layer） 由 CSS 負責創建。 CSS 對“如何顯示有關內容”的問題做出了回答。
網頁的行為層（behavior layer）負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM 主宰的領域。
網頁的表示層和行為層總是存在的，即使我們未明確地給出任何具體的指令也是如此。此時， Web 瀏覽器將把它的默認樣式和默認事件處理函數施加在網頁的結構層上。例如，瀏覽器會在呈現“文本段”元素時留出頁邊距，有些瀏覽器會在用戶把鼠標指針懸停在 某個元素的上方時彈出一個顯示着該元素的 title 屬性值的提示框，等等。
分離
在所有的產品設計活動中，選擇最適用的工具去解決問題是最基本的原則。具體到網頁設計工作，這意味着：
- 使用 (X)HTML 去搭建文檔的結構。
- 使用 CSS 去設置文檔的呈現效果。
- 使用 DOM 腳本去實現文檔的行為。
不過，在這三種技術之間存在着一些潛在的重疊區域，如：DOM 技術可以用來改變網頁的結構。在 CSS 身上也可以找到這種技術相互重疊的例子。諸如 :hover 和 :focus 之類的預定義符號（偽 class 屬性） 使我們可以根據用戶觸發事件來改變呈現效果。改變元素的呈現效果當然是表示層的“勢力范圍”，但對用戶觸發事件做出反應卻是行為層的領地。表示層和行為層 的這種重疊形成了一個灰色地帶。
偽 class 屬性是 CSS 正在深入 DOM 領地證據，但 DOM 在這方面也不是毫無作為。我們完全可以利用 DOM 技術把樣式信息施加在 HTML 元素身上。
分離的效果要做到即使去掉表示層和行為層，文檔的內容也依然可以訪問，因為“內容才是一切”。而且網頁的行為層 (javascript) 與其結構 (XHTML) 是彼此互不干擾的，不能混雜在一起。還要給行為層“預留退路”，要考慮到如果你的用戶禁用了 Javascript 會怎樣？是不可網頁還可以正常運作。
額？說了半天發現都是些理論的東西，算是些基本的思想吧，具體的大家要在不斷的實踐過程中去慢慢體會。
總之，這三種技術就像是一個凳子的三條腿，要想成為一名技能全面的 Web 技術師，就必須熟練掌握這三種技術，並知道每種技術最適用於哪一類問題
原文鏈接：http://www.web92.net/870.html