A2. Add
on HTML modeEx2. sample text
Tuesday, February 6, 2007
Monday, February 5, 2007
HTML 表格已死..... or .....表格長存
自從網頁標準計劃 (The Web Standards Project) 提出瀏覽器升級方案 (Browser Upgrade Initiative) 後，無數的網站設計師開始採用較為符合標準的網站設計方式：他們用 CSS 來設計版面，以取代傳統使用的表格。"表格已死....."
有些設計師在 Jeffrey Zeldman 的指導下，用撰寫教學文件的方式幫助我們解決第一道難題 – 不使用表格，網頁會缺乏設計感。起初他們的重心放在撰寫幾篇以 CSS 的定位能力取代表格的專欄：如此一來，網站設計師就能把網頁的架構與內容完整地分離。在 Eric Costello 的 glish 網站及 Rob Chandanais 的 Blue Robot 網站都有許多相關的技術文件。
許多人也一起參與，包括製作 Box lesson 的 Owen Briggs，以及撰寫相關討論的 Eric Costello 與 Tantek Çelik。Dotfile、Web Nouveau (譯註：已經無法連結) 列舉了數百個利用 CSS 設計版面的網站。".....表格長存"
當大家可以利用這些資源，只靠著 CSS 的定位能力來設計一般性版面時，我們這些設計師卻發現有某些實作上的問題，可以用表格輕易解決，而使用 CSS 時則會遇到一些麻煩。像這樣的問題都會以 "Tables are dead ... long live tables." 這個標題發表在 Webdesign-L 網站上。
巢狀 DIV 與巢狀 TABLE 有什麼不一樣？
一堆的巢狀 (nested) DIV，這比巢狀表格好在哪裡？答案是在於這些標籤的設計觀點上。DIV 暗示著一種邏輯或結構上的分組，即使它們以巢狀表示，仍然具有標記的結構性。在我們的例子裡，我們把縮圖跟它們的標題分成一組 (第一層)，再將這些成對的縮圖跟標題依照相似性分組 (第二層)。這些都是利用 DIV 標籤把結構上的分組處理得相當好的範例。
然而表格暗示的是一種行與列的標頭 (header) 跟每個欄位資料的關係。當我們利用表格設計版面時，我們就喪失了表格結構的意義。讓我們回過頭來用 HTML 設計版面，巢狀表格只會讓問題複雜化。
有些設計師在 Jeffrey Zeldman 的指導下，用撰寫教學文件的方式幫助我們解決第一道難題 – 不使用表格，網頁會缺乏設計感。起初他們的重心放在撰寫幾篇以 CSS 的定位能力取代表格的專欄：如此一來，網站設計師就能把網頁的架構與內容完整地分離。在 Eric Costello 的 glish 網站及 Rob Chandanais 的 Blue Robot 網站都有許多相關的技術文件。
許多人也一起參與，包括製作 Box lesson 的 Owen Briggs，以及撰寫相關討論的 Eric Costello 與 Tantek Çelik。Dotfile、Web Nouveau (譯註：已經無法連結) 列舉了數百個利用 CSS 設計版面的網站。".....表格長存"
當大家可以利用這些資源，只靠著 CSS 的定位能力來設計一般性版面時，我們這些設計師卻發現有某些實作上的問題，可以用表格輕易解決，而使用 CSS 時則會遇到一些麻煩。像這樣的問題都會以 "Tables are dead ... long live tables." 這個標題發表在 Webdesign-L 網站上。
巢狀 DIV 與巢狀 TABLE 有什麼不一樣？
一堆的巢狀 (nested) DIV，這比巢狀表格好在哪裡？答案是在於這些標籤的設計觀點上。DIV 暗示著一種邏輯或結構上的分組，即使它們以巢狀表示，仍然具有標記的結構性。在我們的例子裡，我們把縮圖跟它們的標題分成一組 (第一層)，再將這些成對的縮圖跟標題依照相似性分組 (第二層)。這些都是利用 DIV 標籤把結構上的分組處理得相當好的範例。
然而表格暗示的是一種行與列的標頭 (header) 跟每個欄位資料的關係。當我們利用表格設計版面時，我們就喪失了表格結構的意義。讓我們回過頭來用 HTML 設計版面，巢狀表格只會讓問題複雜化。
Subscribe to:
Posts (Atom)
