應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計中的一些疑問

厲迦遲楠 2006-07-30

展開全文

應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計中的一些疑問

結(jié)合自己的web標(biāo)準(zhǔn)學(xué)習(xí)和應(yīng)用歷程中的一些經(jīng)歷和藍(lán)色理想網(wǎng)頁標(biāo)準(zhǔn)化版面版友們提出的問題和學(xué)習(xí)交流中探討的問題整理一些在web標(biāo)準(zhǔn)學(xué)習(xí)和應(yīng)用中的一些疑問，并進(jìn)行回答，有不對的地方還請大家指出。

1.web標(biāo)準(zhǔn)是一個標(biāo)準(zhǔn)嗎？

回答：WEB標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如 W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。

2.Design with web standard(應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計)就是div+css替代table布局嗎？

回答：肯定不是，上面一個問題里提過了，他是很多標(biāo)準(zhǔn)的集合，怎么能一個div+css就概括了呢？確切的說，我們常見的設(shè)計應(yīng)該是xhtml+css+DOM,結(jié)構(gòu)標(biāo)準(zhǔn)+表現(xiàn)標(biāo)準(zhǔn)+行為標(biāo)準(zhǔn)。
xhtml是網(wǎng)頁的結(jié)構(gòu)，CSS格式化網(wǎng)頁、控制字體、布局、顏色等等。DOM創(chuàng)建交互行為和效果。而每一個部分都要遵循相應(yīng)標(biāo)準(zhǔn)。
<div>是一個xhtml的標(biāo)簽（tag）,沒有語義，他被作為一個裝載信息的容器（box）來使用，目的是為了CSS能更好的控制網(wǎng)頁的視覺效果，為設(shè)計師提供更廣闊的發(fā)揮空間。
<table>是指定所含內(nèi)容要組織成行列的表格,傳統(tǒng)的table布局就是一種誤用，而且不具備標(biāo)準(zhǔn)所擁有的優(yōu)點，所以在應(yīng)用web標(biāo)準(zhǔn)設(shè)計網(wǎng)頁時，table布局當(dāng)然被拋棄了。

3.應(yīng)用web標(biāo)準(zhǔn)設(shè)計的網(wǎng)頁瀏覽器兼容性為什么不理想？

回答：這個問題的提出我想是因為網(wǎng)頁的表現(xiàn)效果在各種瀏覽器下不是很一致。這個問題的產(chǎn)生主要是由于CSS和DOM，你看到的兼容性不好，是因為web標(biāo)準(zhǔn)中的表現(xiàn)（CSS）標(biāo)準(zhǔn)沒有得到現(xiàn)代的瀏覽器（古老的瀏覽器肯定不能很好的支持）很好的支持，有很多的CSS解析bug，如盒bug、IE浮動 3pxbug等，這些都是瀏覽器自身的問題。web標(biāo)準(zhǔn)是為了消除瀏覽器之爭，打破他們的私有代碼，讓web標(biāo)準(zhǔn)體系里的代碼在所有的瀏覽器上都正常解析，實現(xiàn)web的跨平臺性，而不是你的代碼符合web標(biāo)準(zhǔn)就能帶來很好像兼容性，那些古老的瀏覽器也沒有支持web標(biāo)準(zhǔn)嘛，而且Firefox， Opera新版本不是很快就支持標(biāo)準(zhǔn)了嗎？IE7.0的泄漏版本也在向標(biāo)準(zhǔn)靠近。
雖然CSS布局比較困難，布局中的問題也挺多，但是比起table布局了，擴(kuò)展性確實提高了，就像blog的功能欄可以放到左邊頁可以放到右邊，table布局能實現(xiàn)的div配合CSS也全部都實現(xiàn)了，而且還做到了table布局不能做到的。

4.web標(biāo)準(zhǔn)能做出漂亮的網(wǎng)頁嗎？

回答：藝術(shù)效果和web標(biāo)準(zhǔn)無關(guān)。這是一個老掉牙的誤解的，但是與CSS的應(yīng)用有一定的關(guān)系，看看CSSbeauty,CSSimport等網(wǎng)站收錄的通過W3C校檢的網(wǎng)站，你就不會再問了，而且CSS的誕生就是為了讓網(wǎng)頁有更豐富更完美的視覺效果，只要是表現(xiàn)就沒有CSS做不到的。還有作為視覺修飾的圖片一律在CSS中使用（如：background:url(yourpic.jpg);）,作為信息的圖片才能用于<img>。
在web標(biāo)準(zhǔn)推廣的過程中，這個問題一直是熱點，CSS也被人作為標(biāo)準(zhǔn)的重點來學(xué)習(xí)，原因很簡單，因為網(wǎng)頁不只是是信息，還有表現(xiàn)、視覺效果，沒有漂亮的用戶界面，客戶是不會選中你的作品的。

5.W3C校檢通過就是符合web標(biāo)準(zhǔn)嗎？

回答：不一定，W3C校檢只是從代碼的層面分析你有沒有錯誤的語法，比如<br/>沒有閉合，span中嵌套div等等。而有些table布局的網(wǎng)頁也能通過W3C校檢，比如table布局的一個實例,因為語義不符合，table布局就是結(jié)構(gòu)和表現(xiàn)混雜。但是沒通過W3C校檢的也不一定符合web標(biāo)準(zhǔn)，web標(biāo)準(zhǔn)主要是語義化和結(jié)構(gòu)&表現(xiàn)分離。

6.為什么要應(yīng)用web標(biāo)準(zhǔn)設(shè)計網(wǎng)頁？

回答：好處很多，最基本的是：
1)對網(wǎng)站瀏覽者的好處：

文件下載與頁面顯示速度更快；
內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；
內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等）
用戶能夠通過樣式選擇定制自己的表現(xiàn)界面
所有頁面都能提供適于打印的版本

2)對網(wǎng)站所有者的好處：

更少的代碼和組件，容易維護(hù)
帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當(dāng) ESPN.com 使用 CSS改版后，每天節(jié)約超過兩[*]兆字節(jié)（terabytes）的帶寬。
更容易被搜尋引擎搜索到
改版方便，不需要變動頁面內(nèi)容
提供打印版本而不需要復(fù)制內(nèi)容
提高網(wǎng)站易用性。在美國，有嚴(yán)格的法律條款（Section 508）來約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國家也有類似的要求。

想了解更多?

7.什么是好的結(jié)構(gòu)？

回答：好的結(jié)構(gòu)這里所說的是xhtml的結(jié)構(gòu)，首先聲明<Doctype>和<head>部分采用標(biāo)準(zhǔn)推薦寫法，其次就是標(biāo)簽的語義化，無語義的標(biāo)簽（<div>,<span>）作容器，<Hx>作標(biāo)題，<p>作段落，<ul,ol,dl>作列表，<acronym>標(biāo)明縮寫詞，<table>指定所含內(nèi)容要組織成行列的表格等等。再次是div容器的合理使用，層層嵌套也不好，代碼冗余，太少也不好，表現(xiàn)的擴(kuò)展性太差，這個需要具體分析解決。

8.table什么時候使用?

回答：<table>有組織的所含內(nèi)容成行列的表格，比如成績單，學(xué)生花名冊，排行榜等數(shù)據(jù)，想了解更多?

9.Web設(shè)計必須要符合Web標(biāo)準(zhǔn)嗎？

回答：沒有人規(guī)定你必須設(shè)計符合標(biāo)準(zhǔn)的網(wǎng)頁，Web標(biāo)準(zhǔn)也不是非常完美，他還沒有支持多媒體（如flash）。而且Web標(biāo)準(zhǔn)推廣書名是Design with web standard，中文翻譯版本也是《網(wǎng)站重構(gòu)——應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計》，不是遵循web標(biāo)準(zhǔn)進(jìn)行設(shè)計。

10.web標(biāo)準(zhǔn)化中CSS能做多少事情?

回答：去看看小毅的CSS不是萬能藥膏，CSS是負(fù)責(zé)表現(xiàn)的，也就是你的視覺感受都可以用CSS來實現(xiàn)，還有一些動態(tài)效果:hover（鼠標(biāo)滑過）效果。

11.做div+css的人都是什么人？

回答：這個問題首先是對web標(biāo)準(zhǔn)的一個誤解，提問者的意思可能是xhtml+css設(shè)計網(wǎng)頁由什么人來負(fù)責(zé)，xhtml是結(jié)構(gòu)網(wǎng)頁設(shè)計師需要學(xué)習(xí)程序員也需要學(xué)習(xí)，CSS 是表現(xiàn)設(shè)計師的事情，但是有的設(shè)計師對編碼不夠擅長，但是一個網(wǎng)頁設(shè)計師是綜合性的web UI（web用戶界面）設(shè)計師，不能只會設(shè)計圖紙，但是在過渡階段可以有一個擅長xhtml+css設(shè)計師來銜接界面設(shè)計師和程序員。想了解更多去看看什么人適合學(xué)習(xí)WEB標(biāo)準(zhǔn)。

12.web標(biāo)準(zhǔn)體系中CSS最重要嗎？
回答：引用小毅的話“結(jié)構(gòu)是戰(zhàn)略的高度，表現(xiàn)和行為是策略的高度”，具體說說就是web是一個裝載信息的容器，他的作用就是傳達(dá)信息，表現(xiàn)是為了讓信息更容易的讓瀏覽著接受，為了優(yōu)化用戶體驗。行為也是用戶體驗的一部份。到了具體的應(yīng)用，品牌形象展示藝術(shù)效果很重要，但是你的信息更重要，瀏覽著不能看見你的 logo就能很具體的了解企業(yè)的情況。而且你企業(yè)的介紹、提供的服務(wù)等信息，可以通過web標(biāo)準(zhǔn)的對搜索引擎友好的優(yōu)點讓更多人了解到。