|
Author: Jim Ramsey
《San Francisco Examiner》最近成為美國最暢銷的報紙之一，其原因是什么呢？答案是，他們完全采用WEB標(biāo)準(zhǔn)來發(fā)布站點(diǎn)，利用有效XHTML來替代tables的排版方式。
我在《Examiner》做站點(diǎn)主管有4年多了，并且很多次的重新設(shè)計網(wǎng)站。但每次重新設(shè)計，HTML代碼和JavaScript都顯得很笨重、麻煩。最終，還是給我留下令我感到異常復(fù)雜、并讓人氣餒的經(jīng)歷。
之后我發(fā)現(xiàn)了WEB標(biāo)準(zhǔn)。然后就頻繁地出入于A List Apart ，Douglas Bowman的Stopdesign ，還有Dan Cederholm的SimpleBits 這些站點(diǎn)。與那些依靠著圖片和動感為基礎(chǔ)的FLASH站點(diǎn)相比，這些站點(diǎn)更注重內(nèi)容、排版、簡潔的制作和更實(shí)用的頁面架構(gòu)設(shè)計。
這些網(wǎng)站看起來真是太棒了。更重要的是，它們依靠HTML代碼和單獨(dú)的CSS來支撐起整個頁面架構(gòu)�？赐赀@些頁子的代碼之后，我簡直都不想再用table了。
我漸漸的開始將更多的CSS合并到以table為基礎(chǔ)的頁面中。那還是在幾個月前，我打開《San Francisco Examiner》網(wǎng)站廣告時就下定決心——要求徹底重新設(shè)計。我意識到，這無疑是一個創(chuàng)建完全適應(yīng)WEB標(biāo)準(zhǔn)站點(diǎn)的完美機(jī)會。
整個"旅程"大概要一年時間，并且要經(jīng)歷許多個版本。它不只一次的讓我感到灰心和進(jìn)度緩慢，不過WEB標(biāo)準(zhǔn)的優(yōu)勢是不可否認(rèn)的。
再見，我的老朋友
一些苦樂參半的小經(jīng)歷就是在利用WEB標(biāo)準(zhǔn)設(shè)計的時候，補(bǔ)白圖片（spacer.gif）的消失。還記得我最初開始學(xué)WEB設(shè)計的時候，那是不可思議的方法，利用1像素（1px）透明圖片就可以讓table變成任何你想得到的樣子。但是現(xiàn)在，這種補(bǔ)白圖片（spacer.gif）也將"瀕臨滅絕".我再使用它也是為了查看在《Examiner》站點(diǎn)中的效果有何不同。
三月，當(dāng)我們的網(wǎng)站還處于table與CSS架構(gòu)過渡階段，光是補(bǔ)白圖片（spacer.gif）就獨(dú)占了90MB的帶寬，占每月總流量的0.3%.七月，當(dāng)我們轉(zhuǎn)換到以CSS為基礎(chǔ)的站點(diǎn)后，它只占用了2MB（0.004%）不到的當(dāng)月帶寬（那只是一些還沒有來得急更新的舊文章）。
不可否認(rèn)，削減掉不到1%的月流量是無足一提的，但是消失的補(bǔ)白圖片（spacer.gif）卻顯得和拋棄tables轉(zhuǎn)換為CSS與WEB標(biāo)準(zhǔn)的站點(diǎn)一樣有趣。當(dāng)它開始為我們節(jié)省帶寬的時候，補(bǔ)白圖片（spacer.gif）簡直就像是冰山一梢。
夠簡潔，伙計！
這是我們在進(jìn)行重構(gòu)之前，最后一年導(dǎo)航欄的基礎(chǔ)鏈接代碼。
<tr> <td class="navmenu" height="18" onClick="javascript:rolloutNav(this);document.location='/home/index.cfm'" onMouseOver="javascript:rolloverNav(this);" onMouseOut="javascript:rolloutNav(this); " colspan="2"><a href="/home/index.cfm" class="nav">HOME</a></td> </tr> <tr> <td bgcolor="#EEEEEE" class="navmenuspacer" colspan="2"><img src="../site_images/spacer.gif" width="1" height="2"> </td> </tr> 看看現(xiàn)在的Examiner 的導(dǎo)航欄都是像這樣的代碼。
<li><a href="/home/">Home</a></li>
那是很大的差別。事實(shí)上第一種真是糟透了，我很困窘把它包括在這里。但是我又拿什么去填充那額外的部分？基本上，沒有任何東西。用JavaScript產(chǎn)生的滾動效果和用table控制的網(wǎng)格間隙，所有這一切都可以用樣式（styles）來解決。
讓我們看另外一個例子。這是一個采用標(biāo)準(zhǔn)前，由一個文本片段鏈接到一篇故事的代碼。
<img src="../site_images/sfex/homekickerarrow.gif" width="6" height="8"><span class="kicker">Movie Review: Dickie Roberts<br></span> <a href="../templates/story.cfm?displaystory=1&storyname=090503a_dickie" class="headlinesm">Problem 'Child'</a><hr noshade size="1" color="#EEEEEE">
而這是利用標(biāo)準(zhǔn)完成同樣效果的代碼。
<h5>Movie Review: Hero</h5> <h4><a href="/article/index.cfm/i/082704a_hero">Holding out for a 'Hero'</a></h4> 重復(fù)一下，一旦第二種應(yīng)用了樣式（styles）會達(dá)到和第一種同樣的效果。當(dāng)你可以用這種方法簡化你的代碼時，它將在節(jié)省你的帶寬中起著重大的變化。
用我們新的基于標(biāo)準(zhǔn)的站點(diǎn)同最后一年基于table的站點(diǎn)相比較，我們首頁的信息總量是相似的。二者基本上包含相同的元素，然而HTML只有13K小于CSS版本的19.6K.
結(jié)果表明，盡管我們2004年7月的通信量高于2003年9月，但是這兩個月我們的帶寬基本上是一樣的。
正確位置的鏈接
從站點(diǎn)中的一個鏈接直接連接到打印頁中一篇文章的做法在普遍不過了，我也能理解這種動機(jī)。有些網(wǎng)站會預(yù)防盜鏈。然而這也會警告網(wǎng)站的發(fā)布者誰產(chǎn)生了廣告收入。
打印頁很少提供廣告并且通常不提供像常規(guī)網(wǎng)頁一樣的導(dǎo)航。結(jié)果，訪問者就只訪問了這個頁子而很少喜歡再去訪問這個站點(diǎn)里的其他網(wǎng)頁。
在基于標(biāo)準(zhǔn)的站點(diǎn)中，然而，打印模板被替換成打印樣式，這些樣式被應(yīng)用于常規(guī)頁和只提供打印服務(wù)的頁面。它們直接連接到那些規(guī)則的文章頁里。不僅可以節(jié)省帶寬，更可以重復(fù)使用文件，而且站點(diǎn)的管理者還可以保證站點(diǎn)的商標(biāo)持續(xù)存在，增加廣告收入，并且還可以使瀏覽者查詢或瀏覽到站點(diǎn)里的所有頁面。
"Making a silk purse out of a sow's ear"把WEB標(biāo)準(zhǔn)提供的無數(shù)個"under the hood"的優(yōu)勢累積起來，作為一個站點(diǎn)的正文，CSS——設(shè)計師的夢。電腦屏幕并不是迄今為止最好的文本閱讀器，所以令"觀眾們"有更好的體驗是一個以文本為主要內(nèi)容的網(wǎng)站的設(shè)計者應(yīng)當(dāng)首要考慮的問題。
一份印刷報紙的版面是有限的，所以空間與線之間都會緊密相連，以便更可能有效的來布置內(nèi)容。然而在網(wǎng)頁中，設(shè)計者們則不必要去用同樣方法處理空間的局限性問題。即使不用基于標(biāo)準(zhǔn)的全新設(shè)計，大多數(shù)站點(diǎn)也可以利用提升重要性(using line-height)或增加文章段落空隙(using margins)來改善可讀性。
取得飛躍
其實(shí)我有點(diǎn)擔(dān)心越來越多的報紙和媒體網(wǎng)站開始采用WEB標(biāo)準(zhǔn)。它有舉不勝舉的優(yōu)勢，當(dāng)瀏覽器對其的支持得以改善，不利條件就幾乎不存在了。
但是這僅僅是給各位一個正確的導(dǎo)向，這里是來自五大主流報紙站點(diǎn)的有趣的統(tǒng)計：
Newspaper Spacer gifs HTML size *
Washington Post 20 120.7K
New York Times 62 69.8K
Los Angeles Times 66 83.0K
USA Today 153 79.3K
Christian Science Monitor 215 74.1K
*每日HTML變化的精確大小。
一年內(nèi)反復(fù)檢查這些數(shù)字的變化是件非常有趣的事。我希望這些網(wǎng)頁都能采用WEB標(biāo)準(zhǔn)，即使意味著讓那些補(bǔ)白圖片（spacer.gif）統(tǒng)統(tǒng)下崗。
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
