今天下午,我的一個朋友問我:對于一個想了解web標準的老網頁設計師有什么建議。
我想將我的email回復貼在這里讓更多人看見將是一個很好的范例。我的回復是:這有一個全面的,非正式的,有些羅嗦的指南,送給所有聽說過web標準,希望使用web標準卻又不知道從哪里開始設計師。
正文
首先不要急著開始!在做任何事情之前做好2個心理準備,這對你的學習過程是最重要的事情:
1).學習需要時間,要循序漸進;
2).前進的過程中會遇到挫折。
但是你并不孤獨,我們中許多人正在投入到學習和使用web標準的行列中來。有一個不斷擴大的團體來幫助你更容易地學習,老手在學習技術和技巧的過程中遇到許多困難,幸運的后來者(包括我自己)將從他們的汗水與淚水中獲益。
當最后,你能熟練使用基于web標準的設計方法(使那些傳統的基于表格的方法顯得黯然無光)時,回頭再看,你將驚奇用CSS布局頁面并不是那么難。哦,當然,如果主流瀏覽器能對CSS2規范中的一些操作支持更好,實際上使用時可能會更加容易。
恩,我好象有點跑題了。
那么,讓我們立刻開始了解實際有用的信息。首先,去買一本《Designing With Web Standards》(中文版已經引入),不用多想,立刻去做。已經有了?好,現在就閱讀它,不要讓它積滿灰塵。我想說的每一點在書里都有詳細的解釋。書分為平均的兩部分,宣言(為什么你應該怎么做)和教程(你怎樣去做)。這對你是有用的。
現在,第一件事情就是樹立一個XHTML的思想體系概念,不管你選擇HTML4.01或者XHTML 1.0 Strict(有很多理由選擇其中的任一種,現在你可以先忽略這些,以后不能忽略,除非你準備做讓人麻木的苦差事。),所有的文檔以選擇一個DOCTYPE開始。告訴瀏覽器你的文檔用什么標記語言,這樣做可以防止出現不必要的表現錯誤,否則糟糕的頁面顯示結果會使你瘋狂。打個比方:我想飛往芝加哥,就必須告訴旅行社我要去哪里,否則可能無目的的亂飛到維也納。要顯示的是HTML或者XHTML,你必須先告訴瀏覽器,設置DOCTYPE可以確保我到達"目的地"。
下一個目標:嚴謹格式的標識。這非常容易掌握。把所有的屬性加上引號(例如:<a href="link">);正確的嵌套標識;關閉所有打開的標識(例如:<input type="text" />)。每一個標識或者元素都需要關閉。
快速注釋:不知道什么時候,標識(tags)變成了元素(elements),它們是相同的含意,不同的說法。不管你怎么稱呼它們,現在正確的稱呼似乎應該是"元素",也許一開始就是這樣的,我不知道也沒有人告訴過我。
無論如何,每一個元素都必須被正確的關閉。如果你使用HTML4.01,可以不考慮單獨元素象<br>,<hr>和<input>,如果你使用XHTML,單獨元素也必須關閉,就是在最后加一個斜杠,例如:<br>變成<br />。
接下來,是一個有點令人糊涂的、關于XHTML屬性的規則:所有的屬性都必須有一個值,如果沒有值,就用它本身。例如<input type="radio" checked="checked" />。在HTML4.01中checked是不需要值的,而XHTML中它是必須的。
最后,XHTML需要你用小寫寫所有的代碼,HTML不區分大小寫,但XHTML區分,它遵循的是xml語法規則。
上面就是所有關于標識的變化!你已經都知道了!深呼吸、喝口啤酒,放松一下。因為那只是第一步。
第二節
在下面這段演示代碼中,哪些用于表現的屬性和標簽應該被消除?
<center><h1><font face="Verdana">This is my first web site.</font></h1></center> <table border="0" cellpadding="0" cellspacing="0"> <body bgcolor="#ffffff" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0"> <td bgcolor="#ffffff" valign="top" align="center"><p>They're coming to take me away...</p></td>
準備好你的答案了嗎?好,正確的結果列在下面,這是干凈的沒有表現痕跡的結構化的代碼:
<h1>This is my first web site.</h1> <table> <body> <td><p>They're coming to take me away...</p></td>
就這樣?就是這樣。
雖然這段代碼不明確符合任何一種規范,這樣的分離,更大的意義在于使用了正確的元素。使用表格布局則是次要問題,在上面的例子中,使用表格方法不正確,從長遠、謹慎的角度考慮應該移去<table>和<td>元素。雖然表格不被贊成使用,但表格依然非常有用,它們可以用在適當的地方--表格排列的數據上。
好,我們已經將格式從我們的頁面剝離,萬歲!現在還做什么呢?那只剩下一些丑陋的元素,Times-New-Roman字體的文本和線條。一點都不有趣,哪里是我們許諾的生動漂亮的頁面?
回頭看Zen Garden的例子,看見可愛的設計了嗎?看起來它們是多么不同?關鍵是:在那些漂亮的設計下面是相同的XHTML,就和你剛才未格式化的文檔一樣乏味。不對嗎?
事實上,乏味和丑陋卻有一個好的基礎,你可能已經注意到這個沒有格式化的HTML看起來就象1994年的web一樣糟糕。除了少數例外,這些元素和web本身一樣老,<h2>自從Mosaic瀏覽器出現那天就有了。
好處當然不僅限于此,幾乎不用考慮易用性(滿足那些特殊需求),內建搜索引擎優化,帶寬的成本下降,等等等等。Jeffrey Veen已經在去年寫了"web標準的商業價值",Roger Johansson在他最近的"使用web標準開發"中也解釋了基于標準的設計的技術和好處。
CSS已經被今天所有主流瀏覽器很好的支持,有數不盡的資源幫助學習CSS的語法、基于CSS的布局以及高級技巧。我推薦幾個比較好的:westCiv提供一個正在進行的免費的CSS課程,將幫助你入門和快速掌握。Andrew Fernandez已經建立了一個巨大的CSS資源列表,不論你是否新手都將對你有幫助。Eric Meyer已經寫了一捆書,你可以放在案頭隨時查閱。這些書包括以案例為基礎的《Eric Meyer on CSS》《More Eric Meyer on CSS》。O’Reilly出版社出版的CSS參考書:《CSS權威指南》已經發行第2版,你最好也放在桌上。同樣還有Molly Holzschlag的《The Designer’s Edge》以及Chris Schmitt的《Designing CSS Web Pages》。
深入應用CSS的細節和構建布局將花費太多時間。我就不多說了。以上就是我能給那些開始注意web標準的設計師的建議。通讀并分享您的心得,讓我們作為一個團體一起成長,我們中有許多人在積極推動web標準發展,我們有一個全球的網絡,充分利用它吧。
新聞熱點
疑難解答