• 原文作者：Sergio Villarreal
• 作者簡(jiǎn)介：墨西哥網(wǎng)頁(yè)設(shè)計(jì)師，1993年接觸網(wǎng)絡(luò)，個(gè)人主頁(yè)為Overcaffeinated.net
• 原文出處：sitepoint.com
• 原文發(fā)表時(shí)間：2004年5月27日

前言

我第一次在internet上沖浪用的還是啞終端。不久以后，明尼蘇達(dá)州的一種單色的顯示器居然可以通過(guò)服務(wù)器播放電影”巨蟒和圣杯”。當(dāng)時(shí)沒(méi)有鼠標(biāo)，沒(méi)有良好的操作界面，更不用說(shuō)24位彩色了。Gopher是唯一可用的工具。搜索則只能用Archie和Veronica。沒(méi)有人聽(tīng)說(shuō)過(guò)W3( World Wide Web)，當(dāng)時(shí)網(wǎng)絡(luò)看起來(lái)已經(jīng)足夠用了。

又過(guò)了一段時(shí)間，奇怪的代碼開(kāi)始充斥我的搜索結(jié)果，我雖然還能夠閱讀需要的內(nèi)容，但這些代碼卻令人討厭。同事告訴我那是HT ML，一種internet圖形化語(yǔ)言，我曾經(jīng)學(xué)習(xí)了一些方法試圖濾掉HTML。再后來(lái)，出現(xiàn)了256色的顯示器和Mosaic瀏覽器的第一個(gè)版本，一切都開(kāi)始變得不同了。

從那時(shí)到現(xiàn)在已經(jīng)很長(zhǎng)時(shí)間了，技術(shù)上已經(jīng)發(fā)生了難以置信的提高，web界面也被無(wú)數(shù)次地徹底改革、重新思考和重新改造。從我開(kāi)始成為網(wǎng)頁(yè)設(shè)計(jì)師工作，我親自歷經(jīng)了表格為基礎(chǔ)的設(shè)計(jì)、ja;vascript的悲哀、CSS的努力發(fā)展以及更重要、更普遍接受的web標(biāo)準(zhǔn)各個(gè)發(fā)展時(shí)期。

一開(kāi)始，internet只是按照Geek(技術(shù)狂熱分子)想法創(chuàng)建出來(lái)的，internet上只有純粹的內(nèi)容，他們沒(méi)有考慮到背景顏色和漂亮的圖片。但事實(shí)上，人們都喜歡在沖浪的時(shí)候看到更豐富的表現(xiàn)形式。表格(table)設(shè)計(jì)方法的出現(xiàn)解決了這個(gè)困難，我們可以通過(guò)表格來(lái)控制布局！我們紛紛開(kāi)始”欺騙”系統(tǒng)，不能做出1 pixel的細(xì)線？只要在表格的行中插入一個(gè)透明的GIF小點(diǎn)，再設(shè)置一個(gè)背景色就可以實(shí)現(xiàn)了！不能控制字體？那就使用另一個(gè)標(biāo)簽<font>!

在我接觸CSS和web標(biāo)準(zhǔn)之前，我已經(jīng)用表格方法設(shè)計(jì)好多年了。web標(biāo)準(zhǔn)的設(shè)計(jì)方法完全與以前不同，它是有效率的，它是迷人的。我深深地、熱烈的喜歡上新的設(shè)計(jì)方法。它可以用有意義的代碼將內(nèi)容從布局中分離出來(lái)，卻依然保持空格和美麗的設(shè)計(jì)，我一下就”喜新厭舊”了，不再采用老的設(shè)計(jì)方法。

關(guān)于web標(biāo)準(zhǔn)和CSS目前已經(jīng)有了很多的討論，就象每一個(gè)好的關(guān)鍵詞，它將成為web技術(shù)發(fā)展史上下一個(gè)”大人物”。它開(kāi)始于Dougl as Bowman重新設(shè)計(jì)連線網(wǎng)站(Wired.com)，并不斷發(fā)展。2003年，Zeldman寫的《Designing with Web Standards》一書(shū)出版，讓我們都看見(jiàn)了曙光，全世界各地的設(shè)計(jì)師都為新的設(shè)計(jì)方法而擁抱歡呼。它是結(jié)構(gòu)化的，它是有語(yǔ)義的，它是快速的和輕量級(jí)的。

然而，依然有一部分人們?cè)俨捎脗鹘y(tǒng)的表格設(shè)計(jì)方法，甚至還在用<font>標(biāo)簽，他們說(shuō)傳統(tǒng)方法更容易，更方便維護(hù)和快速開(kāi)發(fā)。到底誰(shuí)是正確的？

我決定親自做一個(gè)實(shí)驗(yàn)來(lái)看看事情是如何變化的，我們到底選擇哪種方法更好。

挑戰(zhàn)

我用圖象軟件設(shè)計(jì)了一個(gè)假想的網(wǎng)站。然后先用HTML4.01制作它，用表格,不用任何CSS；作為對(duì)比，再用XHTML1.0 Transitional 制作它，代碼符合易用性和可訪問(wèn)性規(guī)范，并采用CSS，盡量避免表格(除非表格是用來(lái)表現(xiàn)表格化數(shù)據(jù)。)

制作過(guò)程分三階段，并詳細(xì)記錄過(guò)程，進(jìn)行正反兩面的比較，看看我們得到了什么？失去了什么？我們應(yīng)該站在哪一邊。

第一階段：設(shè)計(jì)站點(diǎn)

我開(kāi)始設(shè)計(jì)虛構(gòu)的站點(diǎn)。我假設(shè)為一個(gè)叫”Butterfly Watchers Association(蝴蝶觀察協(xié)會(huì))”的組織制作網(wǎng)站。呵呵，這也許是我最好的客戶了，不會(huì)參與到設(shè)計(jì)流程中來(lái)。我盡量把它制作的真實(shí)一點(diǎn)，假想網(wǎng)站的目標(biāo)用戶，采用傳統(tǒng)的布局和比較權(quán)威的字體。

我希望站點(diǎn)是結(jié)構(gòu)緊湊的、有效的、簡(jiǎn)明扼要的。而且，我想頁(yè)面上應(yīng)該有蝴蝶，我到處尋找合適的蝴蝶圖片，不久就在stock.xchng找到了圖片。藍(lán)色的蝴蝶停在綠葉中，非常符合站點(diǎn)的形象。經(jīng)過(guò)一些處理、修飾，這張圖就成為我們頁(yè)面的header。

在設(shè)計(jì)過(guò)程中，我堅(jiān)持一些易用性原則。例如盡量使圖片文件尺寸最小。一開(kāi)始我準(zhǔn)備在導(dǎo)航上采用Garamond字體，后來(lái)考慮到用戶的機(jī)器上可能沒(méi)有這種字體，我決定采用Georgia字體(這種字體類似 Times New Roman，最差情況下可以用 Times New Roman字體替代)。但在header圖片上，我還是采用了Georgia，因?yàn)樗菆D片。

文本使用灰色背景，使用Trebuchet MS字體；新聞采用Verdana字體，這種字體縮小時(shí)看起來(lái)也很好。有一種不成文的規(guī)則，就是在一個(gè)設(shè)計(jì)中采用4種字體，我并不怎么同意這種觀點(diǎn)。

對(duì)于蝴蝶和那些觀察它們的人們我知之甚少，我放了一篇觀察稀有蝴蝶的文章在首頁(yè)重要位置，我想這是用戶比較感興趣的內(nèi)容。作為組織，應(yīng)該有很多會(huì)員，所以我還放了一些會(huì)員信息。同時(shí)新聞也是必不可少的，我也加了上去。然后，還加了版權(quán)，一些象素裝飾圖，一個(gè)標(biāo)語(yǔ)口號(hào)(They flutter. We watch them.)。整個(gè)頁(yè)面的布局是一個(gè)頁(yè)頭(header)緊接著是一行導(dǎo)航菜單，然后是2列內(nèi)容，最后一行footer。我將”About”菜單設(shè)置為高亮，以顯示onmouserover的效果，整個(gè)頁(yè)面看起來(lái)就象這樣：

好了，現(xiàn)在可以開(kāi)始代碼了。

第二階段：”用以前的做法，使用透明的GIF圖片來(lái)控制間距.”

如果你已經(jīng)是一位參加過(guò)多個(gè)項(xiàng)目的網(wǎng)頁(yè)設(shè)計(jì)師，下面的結(jié)構(gòu)是你再熟悉不過(guò)的：

用表格說(shuō)話，我們已經(jīng)習(xí)慣于用它了，因?yàn)樗俏覀冏罨镜?#8221;積木塊”。例如：用透明的GIF圖片來(lái)控制間距、用表格的各種屬性來(lái)控制位置。有人這么解釋：表格是可靠的，用表格布局的頁(yè)面可以向前兼容！沒(méi)有css敢與表格對(duì)抗，表格可以適合所有瀏覽器等等。

讓我們開(kāi)始一步一步再現(xiàn)整個(gè)設(shè)計(jì)過(guò)程。

第1小時(shí)

噢。好象時(shí)光倒流，不用CSS我們用什么來(lái)定義背景顏色?哦，對(duì)…是bgcolor，謝謝提示。好，開(kāi)始制作表格，預(yù)覽效果。我定義了”align=center”，這樣就可以在所有瀏覽器中居中，太好了，這多么簡(jiǎn)單！表格看上去好象并不壞，我有與老友重逢的感覺(jué)。我熟練地使用透明的GIF圖片來(lái)控制間距，工作飛速前進(jìn)！恩？在header和菜單之間怎么會(huì)出現(xiàn)空白呢？哦，原來(lái)在images代碼后面多了一個(gè)空格，IE瀏覽器會(huì)把它顯示出來(lái)。這改起來(lái)簡(jiǎn)單，刪除空格就好了。

第2小時(shí)

我使用ja;vascript制作導(dǎo)航菜單的翻轉(zhuǎn)效果：

ja;vascript這樣寫:

除了我對(duì)老設(shè)計(jì)方法有點(diǎn)忘記以外，整個(gè)進(jìn)度還是相當(dāng)快的。雖然，我盡量減少表格的嵌套，但代碼看上去還是有些復(fù)雜，所以我加了一些注釋上去，以方便找到我們需要修改的地方。

遇到了一個(gè)小問(wèn)題：不用css就無(wú)法消除鏈接的下劃線。也許有解決辦法，讓我們用google來(lái)搜索一下。

第3小時(shí)

google搜索后還是沒(méi)有找到辦法，如何才能制作沒(méi)有下劃線的鏈接？一定有一個(gè)解決辦法！

第4小時(shí)

可惡！因?yàn)椴荒芟聞澗€，我不能繼續(xù)制作圖片菜單。不過(guò)這個(gè)實(shí)驗(yàn)的規(guī)則是我自己制定的，我可以破例違反一下。我用一點(diǎn)點(diǎn) css來(lái)解決，只要放一句style=”text-decoration: none;”在鏈接的地方就可以了，yay!解決了菜單下劃線的問(wèn)題。

好了，我們接下來(lái)可以制作主要的2列。正文中的蝴蝶圖片我用了2個(gè)表格來(lái)實(shí)現(xiàn)細(xì)邊框效果，就象這樣：

讓我們來(lái)看看前4個(gè)小時(shí)的成果在IE6以外瀏覽器上的效果。噢！在Firefox中非常丑陋，在Opera和Netscape中看起來(lái)還不錯(cuò)。

第5小時(shí)

繼續(xù)代碼…，調(diào)試和修改。

工作中，我認(rèn)識(shí)到<font>標(biāo)簽控制字體尺寸的局限性，我不能定義多種尺寸。真是該死！

News部分的文字排版也遇到了問(wèn)題，為了縮進(jìn)，我不得不用更多的表格嵌套來(lái)實(shí)現(xiàn)效果。為了使正文中的蝴蝶圖片排列在文字的右面，我也不得不增加表格來(lái)解決。這種“欺騙”式的排版讓我感到很無(wú)奈。

第6小時(shí)

設(shè)計(jì)結(jié)束了，看上去和最初的設(shè)計(jì)差不多，你可以點(diǎn)擊這里看看 。

其中包含了多少表格，點(diǎn)擊這里查看。

第三階段：我們不需要表格！

下面我們將看看什么是基于web標(biāo)準(zhǔn)的、用CSS布局的設(shè)計(jì)。我將從內(nèi)容的標(biāo)識(shí)開(kāi)始。我將盡量使標(biāo)識(shí)有語(yǔ)義，避免多余的標(biāo)簽。

頁(yè)頭是一個(gè)圖片，但它也是一個(gè)標(biāo)題，所以我這樣寫代碼：

我將稍后再考慮如何正確顯示這個(gè)標(biāo)題(理想情況下，我們盡可能多的關(guān)心內(nèi)容，盡可能少的關(guān)心布局)。其他標(biāo)題(news，Sightin gs and Membership)將被標(biāo)識(shí)為<h2>。

菜單從根本上講就是一個(gè)無(wú)序列表(list)，所以將被標(biāo)識(shí)為list。段落不需要分類(我們采用繼承選擇器來(lái)把它們”掛”在包含的層中)。我將對(duì)比原始的內(nèi)容文本，看為了實(shí)現(xiàn)布局需要增加多少額外的標(biāo)簽(我將盡力避免增加標(biāo)簽)。

這就是原始的內(nèi)容文本?？纯丛a，它符合x(chóng)html1.0 transitional規(guī)范。注意所有的元素都已經(jīng)被包含在定義了名稱的<div>中。新聞中的日期也被加上了date的類(class)。你可以看到代碼非常簡(jiǎn)單。

第1小時(shí)

定義”container” 層的border為1px。通過(guò)在body樣式中定義”text-align: center”將內(nèi)容居中。為了在所有瀏覽器中都居中，還在”container”中定義了margin: 0 auto;(意思就是top=0, right=auto, bottom=0, left=auto)。居中的處理方法和表格一樣容易。

定義”body”的padding”top”和”bottom”數(shù)值為20px(不直接在”container”中定義padding是為了適合所有瀏覽器)。

無(wú)序列表(li)必須定義為”display:inline”，這樣菜單會(huì)被顯示在一行內(nèi)。我在菜單間增加了導(dǎo)航圖標(biāo)。這些導(dǎo)航圖標(biāo)是用不重復(fù)背景方法定義的，可以精確定義(x,y)位置，類似這樣：

菜單的點(diǎn)擊顏色變化效果采用鏈接的hover樣式，不再需要ja;vascript。

我設(shè)置頁(yè)頭的蝴蝶圖片為<h1>的背景，這樣可以不用擔(dān)心易用性，在不能顯示圖片的設(shè)備中(如屏幕閱讀機(jī)和搜索機(jī)器人)也可以正常閱讀標(biāo)題。

第2小時(shí)

菜單的第一項(xiàng)(HOME)使用一個(gè)不同的圖標(biāo)，我不得不隱藏原來(lái)的背景，為HOME菜單增加一個(gè)額外的id(frst):

再另外一個(gè)(CONTACT)圖標(biāo)：

我無(wú)法用CSS控制2列有一樣的高度，幸運(yùn)的是，我可以用背景圖片來(lái)變通實(shí)現(xiàn)。我定義了”container”縱向重復(fù)背景。

第3小時(shí)

CSS定義盒比表格方便多了，特別是邊框的許多屬性非常有用。

現(xiàn)在我開(kāi)始定義<h2>標(biāo)題。圖標(biāo)的定義和上面的方法一樣。

我將”news”層浮動(dòng)(float)在”sightings” 和 “membership”的右面。 定義”copyright”層” clear: both;”，這樣它可以跟在浮動(dòng)層的下面。將正文中的蝴蝶圖片浮動(dòng)在右面，文字可以自動(dòng)環(huán)繞在圖片周圍。定義圖片的1px border和設(shè)置padding距離就可以實(shí)現(xiàn)原來(lái)2個(gè)表格嵌套的效果。

又發(fā)現(xiàn)一些問(wèn)題：版權(quán)層與內(nèi)容層有部分重疊。

第4小時(shí)

顯示的錯(cuò)誤與”sightings” and “membership”的float:right; 定義有關(guān)。將它們浮動(dòng)在左面就可以解決這個(gè)問(wèn)題，這看上去很奇怪。我用firefox進(jìn)行第一次測(cè)試，恩，看上去還不壞，只是菜單的圖標(biāo)有幾pixel的移位。

有一些CSS技巧可以修正在非IE瀏覽器的顯示效果，例如給不同瀏覽器不同的屬性值。

我同一元素定義中使用了!important 值，相同的定義寫在前面可以優(yōu)先執(zhí)行，這個(gè)值不被IE瀏覽器支持。

在CSS中，如果同一元素有多個(gè)定義，最后一個(gè)是有效的。但是因?yàn)镮E不支持!important，所以IE將使用第二個(gè)定義值，而其他瀏覽器將采用第一個(gè)定義值。

全部完成，看這里的結(jié)果。

結(jié)論

基于表格的設(shè)計(jì)

我用各種能找到的瀏覽器來(lái)測(cè)試頁(yè)面，包括linux、windows和Macintosh平臺(tái)的瀏覽器。表格布局的頁(yè)面在不同瀏覽器中看上去都一樣。”它象巖石一樣堅(jiān)固”，這是給表格布局的第一評(píng)價(jià)。

然而，當(dāng)需要修改頁(yè)面部分內(nèi)容時(shí)，表格布局改起來(lái)相當(dāng)費(fèi)力。這是一個(gè)問(wèn)題，如果我們使用CMS(內(nèi)容管理系統(tǒng))，內(nèi)容需要被格式化就比較麻煩。

整個(gè)設(shè)計(jì)時(shí)間有點(diǎn)長(zhǎng)，是因?yàn)槲乙呀?jīng)有點(diǎn)遺忘了老方法，如果重新再來(lái)一次，我想可能會(huì)節(jié)省1-2個(gè)小時(shí)。

我形容基于表格的設(shè)計(jì)是大量”老土的(grunt work)”工作，雖然我經(jīng)常吃驚于那些高級(jí)設(shè)計(jì)技巧。使用基于純CSS的設(shè)計(jì)，我通常習(xí)慣于分解設(shè)計(jì)和逐步分析bug。而用表格設(shè)計(jì)則不需要這些工作，你只要不斷往設(shè)計(jì)里面扔table就可以了。讓我們?cè)賮?lái)看看CSS的過(guò)程。

基于CSS的設(shè)計(jì)

用CSS設(shè)計(jì)的感覺(jué)好多了。代碼的改變直接而透明，我能清楚得控制整個(gè)過(guò)程，反觀表格的設(shè)計(jì)就象在壘磚頭。頁(yè)面的改變?cè)酱?，越感到CSS設(shè)計(jì)的方便和效率。

CSS設(shè)計(jì)對(duì)節(jié)省帶寬也非常有意義，將所有樣式提取出來(lái)放在單獨(dú)的文件中，整個(gè)站點(diǎn)用一個(gè)或幾個(gè)樣式表文件，可以使整個(gè)站點(diǎn)尺寸更小。

將布局信息從內(nèi)容中分離出來(lái)，也有許多的好處。在將來(lái)，我可以隨時(shí)改版整個(gè)站點(diǎn)而不需要修改任何內(nèi)容，就象CSS Zen Garden 。同時(shí)也增加了易用性，搜索機(jī)器人將更加方便發(fā)現(xiàn)你的頁(yè)面(記住：google是你最重要的訪客來(lái)源)。

在制作完畢，我同樣在不同平臺(tái)不同瀏覽器上進(jìn)行測(cè)試。IE5.5和IE6.0表現(xiàn)完美。IE5.0上出現(xiàn)了錯(cuò)誤，菜單和一些縮進(jìn)失效，錯(cuò)位的頁(yè)頭效果看下面圖片：

好無(wú)疑問(wèn)這個(gè)bug可以被修復(fù)，但是考慮到這篇文章的主題范圍，我不展開(kāi)講了。如果這是一個(gè)真實(shí)的客戶項(xiàng)目，我肯定不能犧牲I E5.0的用戶。在更老一點(diǎn)的瀏覽器中，CSS的設(shè)計(jì)表現(xiàn)得一團(tuán)糟。

IE4

Netscape 4.7x

如果對(duì)不支持CSS的瀏覽器做一些代碼處理(例如對(duì)Netscape用@import)看上去會(huì)好一些。

盡管當(dāng)你熟悉基于CSS的設(shè)計(jì)后工作效率非常高，但是之前你必須花費(fèi)大量的時(shí)間學(xué)習(xí)規(guī)則、盒模型的不同、瀏覽器的處理技巧以及許多的理論，并需要不斷的實(shí)踐來(lái)掌握。簡(jiǎn)而言之，CSS比tables更簡(jiǎn)單，但如果你想使用純CSS設(shè)計(jì)，請(qǐng)準(zhǔn)備投資大量的時(shí)間學(xué)習(xí)。即使你是一位經(jīng)驗(yàn)老到的開(kāi)發(fā)高手，也要準(zhǔn)備好應(yīng)對(duì)各種bug，有時(shí)候處理一個(gè)bug會(huì)花費(fèi)幾個(gè)小時(shí)。

勝者

CSS和基于web標(biāo)準(zhǔn)的設(shè)計(jì)勝出。只要看看兩種方法的代碼就足以做出選擇了。CSS提供了更多的好處(主要在易用性方面)。其實(shí)根本的原因是我的懶惰。如果用表格設(shè)計(jì)，客戶一年后聯(lián)系我說(shuō)需要改版，我可能會(huì)告訴他我參軍了，正在國(guó)外某個(gè)鄉(xiāng)村。如果我使用的是CSS，我將毫不思索地為客戶改版，因?yàn)槲也恍枰客品貋?lái)。

感謝

謝謝Ava McBride，使用Browsercam 幫助測(cè)試我的設(shè)計(jì)。