Posted on by xxc

從表格編排技巧到CSS：一個網頁設計者的歷程

前言

最近市面上出現了幾本CSS教學的書，如《The Zen of CSS－網頁視覺設計的王道》，《Eric Meyer再談CSS網頁排版設計》、《Web CSS網頁樣式設計學》、《CSS網頁設計師手札－101個您一定會遇到的問題與解答》等等。同學也買了後兩本來自修CSS。我翻了一下，發現有關於版面編排(layout)的問題分別是放在第七章與第八章來說明的，前面的章節都在教讀者如何修改字型與顏色等等。當然，一開始初步如何呼叫使用CSS是最基本的，但是我自己認為，應該先對CSS 編排有最基本的概念，才能往下學習各種修飾語法。其中一本竟然還教讀者使用表格(table)來編排頁面，真是越教越回去了。

我才想起我以前(2004)有翻譯了幾篇A List Apart關於CSS觀念的入門文章，我以為我早就放在網路上了，沒想到今天在學校上網既然遍尋不到。回家一看，原來還壓在一堆檔案裡面。我已經忘了當初是什麼原因沒有放上來，好像是翻譯授權的關係。我今天又上A list apart 看，發現翻譯是可以免費取得授權的，只要註明原文來源，與不要任意更動文句，與不從事販賣等商業行為就可以了。

這篇文章是由Jeffrey Zeldman在2001年寫好的，說明了從以往網頁設計演進到使用CSS設計的過程，許多環境因素已經與當時大不相同，A list apart的網站也早已改版多次，文中所說的三欄或兩欄式的CSS編排也早就是大部分主流blog的用法。但是，對大部分已經會作網頁，但是還不瞭解CSS編排的精神的，這是一篇值得參考的文章；另一方面，我們也可以瞭解到，當初費盡心思發展出CSS三欄編排所為何來。文章中最主要說明的是，網頁標準的精神在於：

  • 內容與視覺樣式分開；
  • 將資料結構化；
  • 讓CSS控制所有的視覺編排工作。

這三點才是應用CSS網頁設計最主要的重點。文章是2004年四月翻譯的，那時候翻的不好，當然現在也沒長進就是了。

(翻譯自 Table Hacks to CSS Layout: A Web Designer’s Journey)

這是一段長達六年的網頁設計血淚史。

在一開始我們用盡一切方法，為了讓每個設計都可以在各種瀏覽器上正常的呈現。在當時那個充斥著非標準HTML設計的時代裡，我們利用表格讓每個字跟每個圖檔都出現在正確的位置。

接著我們又解決陸續而來的問題。Netscape 4根本忽視CSS的{margin: 0;}
宣告？那就用四個非標準的BODY屬性：LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT 來牢牢固定頁面吧。IE4不完全支援CSS的border屬性？那就用一個黑色的Table包在白色的Table外面吧。

我們的現況

這是1995年網站建置的情形。真是一場災難，搞不清楚狀況的軟體公司又火上加油似的創造了一個視覺化網頁編輯器的市場，像是 Dreamweaver, GoLive, 跟FrontPage。但是，老手們還是只能用手工的方法寫網頁。並不是為了追求完美的品質，而是因為我們必須用一些非標準語法的「眉角」(台語：技巧)與JavaScript來「修正」那些蠢瀏覽器的問題。

我們一方面抱怨那些「所見即所得」(WYSIWYG)的編輯器不好用，可是另一方面我們寫出的程式碼也是沒有好到哪裡去。當我們對問題束手無策的時候，我們通常到郵件論壇(maillist)或是聚會中分享各種破解方法，而非去參考W3C或ECMA
的標準。然後當瀏覽器變得真正支援標準的時候，我們轉為抱怨他們如何破壞了我們之前作的HTML技巧，跟各種瀏覽器專屬的「DHTML」。

這確實是愚蠢的工作方法。但是當我們要重新設計網站的時候，一切只有變得更糟了。除非我們是在專屬的出版系統上工作(雖然也有其他的問題)，所有的舊網頁內容都滿佈了<FONT>標籤，並且還跟表格糾纏在一起，所以必須用手工一頁一頁的把內容挖出來。

我們的未來

我們知道網頁標準是未來唯一的方向。而且網頁標準要求把內容與樣式分開，呈現與結構分開，設計與資料分開。

我們知道現在市場上的瀏覽器多多少少都會遵守網頁標準。IE5, Netscape 6, and Opera 5提供的CSS, HTML, and JavaScript/ECMAScript 也都遵循絕大部分的標準，可以讓我們拋棄荒唐的過去，而從HTML設計的束縛中解放出來。

我們也知道上百萬人還在用比4.0更舊的瀏覽器在上網。這讓我們知道未來的界線與開創未來的網頁設計方法。

於是我開始跨過傳統的設計做法……

邁向偉大的未知

恐怖電影教導我們：千萬不要一個人獨自走進黑暗的房間。在開始設計網站的新道路之前，我找到一些堅強的夥伴與我同行。其中兩位是參與CSS標準訂定的專家，因為他們不想要曝光，所以我們稱他們為大師A和大師B。

之後，ALA(A List Apart)的David Eisenberg 也加入了我們這個小小探險隊，進行跨平台的測試與提醒我們各種瀏覽器中對於樣式表有著不同等級的支援。

標準對標準

建立符合標準網站有兩個方式：一個是依照字面上的標準，另一個是依照標準的精神。

字面上的標準

依照字面上的標準是安全穩當，又能避免錯誤的方法。但是卻仍然受縛內容的枷鎖，欠缺網頁標準的精神。

例如，WaSP (Web Standards Project, 網頁標準計劃)
的網站一直都是符合標準的，也都用CSS控制呈現的字型。但是他的編排還是用HTML的表格，以讓網頁在任何的桌上電腦系統的瀏覽器中都可以正常的呈現。(這篇文章原本是在2001年發表，現在的WaSP網頁(2004)也已經沒有任何Table的存在了。)

其優點就是：在任何的瀏覽器中都會正常的呈現。缺點是：

  1. 更改設計時要手工處理上千的表格的寬、顏色、與邊框，精心設計新的表格編排 — 一個非常耗費時間與成本的過程。
  2. 這些HTML編排技巧對於非傳統的瀏覽器都是沒有意義的，並且W3C認為是有害的，即使頁面已經通過W3C的驗證。
  3. 這些傳統的技巧會減少頁面對人與設備的可及性(accessible, 或譯：親和性、無障礙性)。

精神上的標準

第二個方法，網頁標準的精神是：把內容與視覺樣式分開，將資料結構化，而讓CSS控制所有的視覺編排工作。

彈性化

以前的ALA網站是用複雜的巢狀表格來編排網頁。因此在更新內容的時候，就算是我自己也很難在複雜的表格與欄位之間找到正確的位置，所以我就作了以下的蠢事情：

<!-- Dress left -->
<table border="0" cellpadding="0"
cellspacing="0">
<!-- Your variable left margin -->
<tr valign="top"><td width="15%"
bgcolor="#ffffcc">&nbsp;</td>
<td width="75%" bgcolor="#ffffcc"
valign="top">
<!-- Your actual content -->

重新思考編排

對我來說，這是一個機會，讓我們再思考如何從HTML設計轉移到用CSS。傳統的HTML編排總是想盡辦法，用一個制式的框架，把內容塞進電腦的螢幕裡。我想要用CSS來重新創造彈性的內容編排，而非再作一個新的制式框架出來。

用CSS作一個三欄式的編排

我決定最上面的一欄，就是上面出現的brand欄，是不需要的。所以branding會放在內容欄裡面。(原始的A List Apart網站的banner在編排上市獨立於內容的 — 譯註)

坦白說，用CSS作一個三欄的編排出來幾乎是不可能達成的，雖然這樣的潛力已經在CSS-3的規劃中了(事實上，一個三欄式的編排在CSS中相對的容易達成，像是
examples by Porter Glendinning 與 your humble author 。但是在ALA第一次作CSS重新設計的時候，這個問題看來令人氣餒。– 編註)

重新設計：第一步

我首先想到的是，先做兩個HTML DIV出來，一個是content用的，另個是給右側的選單區域。我第一次試就幾乎達到我要的效果了。一個content DIV宣告為： 

.content {width: 75%; padding-left: 10%; padding-right: 10px; padding-top: 10px;}

content DIV 佔用75%的頁面寬度，而且有一些padding的設定，以便在邊界與內文中留出一些空白出來。然而，”menu” DIV設定為剩下的25%的寬度：

.menu {position: absolute; left: 75%; top: 0px; height:
100%; width: 25%; margin: 0; padding-left: 15px; padding-right: 10px;
padding-top: 10px; background-color: #cc0; background-image:
url(backgrounds/striperight.gif); font: 10px/14px geneva, arial, helvetica,
sans-serif; color: black; }

這個設定在IE5/Windows環境裡運作的很好，但是在更符合標準的瀏覽器中，會出現水平與垂直的捲軸( IE5/Mac, Netscape 6, and Opera 5)。

這是怎麼回事？難道頁面的100%不是100%嗎？75%加上25%不是等於100%嗎？為什麼瀏覽器看起來會變這個樣子？

當然，不是他們錯，是我的錯(包括IE5/Win)。因為我沒有正確的理解到CSS區塊(Box)的概念。

區塊，與區塊模型(BOX MODELS)

注意：在CSS區塊模型(CSS box model)中，padding與border的值會增加整個區域的尺寸。

錯誤：一個300px寬，內部padding為20px的區塊，在IE/Windows認定的寬度是300px。看起來沒錯，可是不符合CSS1的規格。

正確：一個300px寬，內部每邊的padding為20px的區塊，其寬度是340px (300+20px的左邊+20px右邊)。那是因為設定了padding的關係，雖然padding是在區塊的內部，根據CSS1的規格，padding值會再增加整個區塊的寬度。

很多在跟CSS搏鬥的網頁設計師會問說，為何IE跟Netscape對於DIV的處理不一樣。答案是，在麥金塔平台上，IE5/Mac and Netscape 6 (like Opera
5)都能正確的處理CSS的區塊模型。在Windows上，IE跟Netscape會不同是因為Netscape處理的方式是對的。對於IE6，我只能夢想他也可以處理正確。

{編案:
從這篇文章動筆到網站設計之後，IE6才公開發佈。的確IE6正確的處理了CSS區塊模型。這篇文章與設計文件是在2001年四月七日完成以符合這些瀏覽器王國的變遷。}

區塊與DOCTYPE(文件類型)

這個區塊模型的爭議也解釋了IE5與Netscape6 對於border屬性處理的不同之處。正確的情況下，一個10px的邊框應該是會增加其DIV、段落、或是任何一個區塊等級的元素的原有範圍之外。在真正符合CSS標準的瀏覽器上，如果一個網頁上整個螢幕寬(100%)的影像上增加一個寬度為10px的邊框，將會超過螢幕的寬度(100%+10px+10px，螢幕加上左右各10px的寬度)，而出現橫向的捲軸。但是用IE5/Win來看的話，卻不會有捲軸。就概念上而言，其實IE5/Win在對於區塊處理的想法，某些方面來看還蠻合理的，只是的確是不符合W3C的CSS標準。

IE5/Mac 在模糊模式(Quirks mode)中模仿非標準的IE5/Windows ，但是在精準模式(Strict mode)中是採取標準相符的處理方式。啟用模糊模式是以省略DOCTYPE或是沒有W3C URL的DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

啟用精確模式是在頁面開頭加上包含W3C URL 的 DOCTYPE ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Gecko 瀏覽器 (Mozilla, Netscape 6.x) 跟IE5/Mac 一樣，IE6 beta 也是 [now IE6 — 編按]。在這些瀏覽器中，你可以用DOCTYPES來控制要用完整的網頁標準，或是模擬舊的瀏覽器，或是不符標準的瀏覽器。

超出整個畫面的問題

現在你可以了解我一開始說的ALA的重新設計工作裡，捲軸的問題讓我們很傷腦筋。必須在整個寬度的計算裡，增加對padding與margin的設定的百分比值。恩，我想想，75%加25%等於100%。加上content DIV的10%的paddning跟10px，加上menu多增加的25px….。這要怎樣拼在一起呢？

我要怎樣處理這些頑固又嚴格的數字與規則？顯然的我不可以用這種擺爛的樣式表寫法：

{width: 75% AND PLEASE IGNORE THE PADDING} /* code翻譯：{寬度：75% 且請忽略padding} */

如果我已經運用了絕對寬度，我應該只要設定頁面所需要的寬度就好。但是實際上呈現的頁面編排，在某些人的螢幕會看起來太寬，而在某些人會看起來又太窄。所以我創出一種彈性編排(liquid layout)。如果我只是去胡謅一個寬度數字，那永遠不會搞好。很明顯的，不可能這樣同時混合百分比跟padding的值，又可以不讓寬度加起來變成103%？104.25%？每個螢幕都可能會不一樣，但是總歸是錯誤的。

此時，大師A跳脫區塊的思考，解決了這個問題。

浮動(Floating)與迴避

原本我們把ALA的編排規劃為，在內容頁面裡面插入靠右的選單區；而大師A的規劃是為先有右側的選單，然後再安排內容區塊。他使用了一個很不常用的CSS屬性”float”，讓內容呈現需要的寬度：

#content   {
float: left;
width:  67%;
padding: 45px 10% 100px 15%;
margin: 0 15px 0 0;
border-right: 2px dotted black;
border-bottom: 2px dotted black;
}

注意我一開始用的gif圖檔背景已經換成了CSS的border屬性(2px dotted black)。而且寬度的百分比也從75%改到67%。

事實上，我們理想的寬度應該比這個值還窄一點。因為在設定為800*600以下的螢幕解析度中，只有25%的menu區域是不夠寬的，所以這時menu區域會滑到頁面的下方去。因此我們理想中content區塊的寬度是52%。記得，52%是還沒有加上padding跟margin的寬度……。夠煩人了吧！這時也許你該去喝個幾杯，然後再回來試試看。

一些你會問的問題

  1. 為何在舊版表格式的ALA網站不會有這些問題？因為表格式的編排是很鬆散的。當表格式編排的menu區域太窄時，瀏覽器會自行調整他的寬度。而符合CSS的瀏覽器不會調整你所犯的錯誤。
  2. 如果理想的寬度是52%，那為什麼content
    DIV要設定為67%？因為67%是一個用來可以騙過IE5，好讓它正確的顯示更多或更少內容的值。

記住，IE5/Win處理區塊模型錯誤的地方是因為沒有把padding與margin的值作正確的處理。67%是一個52%再加上padding跟margin以後大概的值。

維護正確性

之前的這個設定可以在比較不符合標準的瀏覽器上正常的顯示，像是IE/Win。其他的就不行。

所以大師A又加上了CSS2的宣告來進一步修正寬度的問題：

body>#content {
width: 52%;
padding: 35px 5% 100px 10%;
}

body>#content 不是亂碼，是一個CSS2的選取子(selector)，IE5/Mac, Netscape 6, and Opera 5 看的懂。但是IE5/Windows看不懂(ps.
IE6/Windows也看不懂)，所以他會跳過這段CSS，而只看懂了之前設定的67%寬度。而更符合CSS標準的瀏覽器則會根據更明確性(specificity)的規範。那，什麼是明確性呢？

更明確性的規則

將<body>設為{1em Arial}，這是一個全域的樣式表宣告。然後將段落的部分<P>設定為{0.8em Verdana}。因為我們直接對段落<P>下宣告，所以段落內的文字會呈現<P>所宣告的字型，取代<body>裡面宣告的全域樣式。

所以更具明確性的樣式會優先於較不具明確性的樣式。

在CSS的世界裡，對一個<body>裡面content div 作宣告是比直接對一個content div宣告更有明確性，儘管他們可能都是指同一個東西。如果
IE5/Win可以讀取CSS2的語法，他就會跟其他瀏覽器一樣的來解讀這段語法，那這樣這個小技巧就沒有用了。

4.0 瀏覽器的問題

所以現在我們可以用彈性編排，與乾淨的CSS來設計整個網站了。雖然這個設計可以在幾乎所有大致上跟CSS相符的瀏覽器正常運作，可是4.0時代的瀏覽器仍然無法正常運作。

所以WaSP會提出 瀏覽器升級主張 。而大師B有個很棒的點子，用iframe來提醒使用者升級老舊的瀏覽器。不過不幸的是，在最新的XHTML語法中並沒有支援 iframe。所以我們隨後把iframe換成XHTML語法中支援的OBJECT標籤。

很不幸的，在隱藏在OBJECT標籤裡面的文字，在符合標準的瀏覽器或是Lynx和Plam Pilots之類的裝置中，還是會跑出來。所以我們又在OBJECT標籤中多加上JavaScript，來把文字內容藏起來。

很不幸的，在OBJECT標籤裡面加上JavaScript，會讓 IE5+/Windows 的網頁TITLE消失。而且某些使用者的安全設定會讓IE5+/Windows 發出安全性警告。

最後大師A打造了一個狠勁十足的技巧(但是絕對符合規格)，可以讓任何瀏覽器怎麼用都不會爛掉。但是關於這一方面，我們已經投降了。我們把我們的「升級」訊息用一個簡單的<P>標籤包起來，然後用CSS來隱藏。

<p class="ahem">
<big>
This site will work and look better in a browser that supports
<a href="http://www.webstandards.org/upgrade/"
title="The Web Standards Project’s BROWSER UPGRADE initiative.">
web standards</a>, but it is accessible to any browser
or Internet device.
</big>
</p>

關於為什麼要做這件事情，WaSP在其開發者的訣竅裡有說明。

保持純淨

現在有更多的決定要作：是否要讓4.0瀏覽器的使用者看到搭配上新的CSS的慘狀？我們決定幫他們過濾一下。

有很多方法可以做這樣的事情，最早是用JavaScript讓瀏覽器判斷應該看什麼版本的內容，或是由伺服器判斷應該提供什麼版本的內容。我們則是用HTML。一般的連結樣式表的方法是：

<link rel=StyleSheet href="/css/style.css"
type="text/css" media=screen>

… 而我們改成：

<style type="text/css" media="all">
@import "/nucss.css";
</style>

5.0以上的瀏覽器可以讀懂新的寫法，4.0的瀏覽器沒辦法。

OOPS!

在稍後，我們發現 IE4.5/Macintosh 看的懂@import ，而且對於區塊模型的解讀也是正確的，但是他們看不懂CSS2的選取子。

所以IE4.5/Mac 會呈現CSS1方法所宣告的寬度值。不幸的是，就如前面所提到的，我們用CSS1宣告的寬度值是給 IE5.5/Windows 的非標準的區塊模型用的。當然IE4.5在這個錯的宣告下也呈現的很好，只是會寬了一點點。

最後，在ALA用了以上的方法重新設計網站之後，IE6 beta版公開了。像IE5/Mac一樣，IE6也支援DOCTYPE切換。像IE5/Mac, Opera 5, 和Gecko 瀏覽器一樣有正確的CSS區塊模型。但是還是認不得CSS2的選取子。

所以跟IE4.5/Mac一樣，IE6 beta 在錯誤的宣告上也呈現的很好，只是在編排上有錯誤。

幸運的，我們在 ALA Issue No. 100 解決了這個問題，我們用了一個更簡單的樣式表與包裝的DIV，在符合CSS標準的瀏覽器下把所有的區塊拼在一起。

非正式對談

在四月的第一週裡，使用CSS的網頁設計師，協助制定CSS規格的專家，符合標準的瀏覽器的開發者，參與了一個非正式對談來討論能在所有瀏覽器中最佳的CSS編排方法。

與會者 Eric Costello總結 了很多意見， 且我們大多用了Tantek Celik 所創的 CSS box model hack ，他是 Tasman rendering engine的開發領導，也是CSS2與CSS-3的貢獻者。看起來比實際上還要不同且複雜多了。

ALA Issue 100 以後則是使用另一種方式的CSS技術，在IE6 beta, IE5/Win, IE5.5/Win, IE5/Mac, Mozilla, Konqueror, Netscape 6, and Opera 5都可以正常的呈現。

回饋

用合法的CSS取代HTML的表格編排技巧，對網頁使用者、設計者是有益的
。在這篇文章之後，也出現了一些不錯的網路資源：

  1. BlueRobot的CSS 編排倉庫
    與CSS置中的快速學習手冊 #1  #2

  2. Glish的 CSS 編排技巧
  3. Owen Briggs驚人的 Little
    Boxes     視覺編排頁面，與 區塊課程 (Box
    Lesson    ) 問題與解答集，指出不同瀏覽器之間的錯誤之處。

繼續探索的旅程

ALA現在已經把內容與樣式分開了，但是明天，或是說某天之後，所有的網站都會如此。在革命之後，也許仍然會有各種的使用者阻礙，各種的不方便。也就是說，網頁設計師永遠有工作可以做。

對於那些認為網頁主要是圖形設計的人來說，我認為他們需要擴大他們的視野，但是也不需要放棄他們的視覺天賦與美感。並且，會獲得更大的控制與彈性

也許你會希望加入我們的工作。或者你保留觀察的距離注意我們的發展。但是不論你選擇積極參與或是不參與，現在都是開始學習如何使用這些標準的好時機，並且享受運用這些標準帶來的能力。因為很快的整個網路環境都會以符合標準的方式運作。因為CSS畢竟是一個更好的、更不讓人喪氣、更強大的網站建置方法。

當然，如果你選擇不學CSS或是其他網頁標準，麥當勞說他們的在職管理訓練是非常優秀的。(…….譯注：這是作者特有的幽默….)

我們會看到有些人還在圍籬之內，有些已經邁向另一條未來的道路了。

“Translated with the permission of A List Apart Magazine and the author[s].”