結(jié)合自己的web標(biāo)準(zhǔn)學(xué)習(xí)和應(yīng)用歷程中的一些經(jīng)歷和藍(lán)色理想網(wǎng)頁(yè)標(biāo)準(zhǔn)化版面版友們提出的問(wèn)題和學(xué)習(xí)交流中探討的問(wèn)題整理一些在web標(biāo)準(zhǔn)學(xué)習(xí)和應(yīng)用中的一些疑問(wèn),并進(jìn)行回答,有不對(duì)的地方還請(qǐng)大家指出。
1.web標(biāo)準(zhǔn)是一個(gè)標(biāo)準(zhǔn)嗎?回答:WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成:結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面:結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS,行為標(biāo)準(zhǔn)主要包括對(duì)象模型(如 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è)計(jì))就是div+css替代table布局嗎?回答:肯定不是,上面一個(gè)問(wèn)題里提過(guò)了,他是很多標(biāo)準(zhǔn)的集合,怎么能一個(gè)div+css就概括了呢?確切的說(shuō),我們常見(jiàn)的設(shè)計(jì)應(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)頁(yè)的結(jié)構(gòu),CSS格式化網(wǎng)頁(yè)、控制字體、布局、顏色等等。DOM創(chuàng)建交互行為和效果。而每一個(gè)部分都要遵循相應(yīng)標(biāo)準(zhǔn)。
<div>是一個(gè)xhtml的標(biāo)簽(tag),沒(méi)有語(yǔ)義,他被作為一個(gè)裝載信息的容器(box)來(lái)使用,目的是為了CSS能更好的控制網(wǎng)頁(yè)的視覺(jué)效果,為設(shè)計(jì)師提供更廣闊的發(fā)揮空間。
<table>是指定所含內(nèi)容要組織成行列的表格,傳統(tǒng)的table布局就是一種誤用,而且不具備標(biāo)準(zhǔn)所擁有的優(yōu)點(diǎn),所以在應(yīng)用web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)時(shí),table布局當(dāng)然被拋棄了。
3.應(yīng)用web標(biāo)準(zhǔn)設(shè)計(jì)的網(wǎng)頁(yè)瀏覽器兼容性為什么不理想?回答:這個(gè)問(wèn)題的提出我想是因?yàn)榫W(wǎng)頁(yè)的表現(xiàn)效果在各種瀏覽器下不是很一致。這個(gè)問(wèn)題的產(chǎn)生主要是由于CSS和DOM,你看到的兼容性不好,是因?yàn)閣eb標(biāo)準(zhǔn)中的表現(xiàn)(CSS)標(biāo)準(zhǔn)沒(méi)有得到現(xiàn)代的瀏覽器(古老的瀏覽器肯定不能很好的支持)很好的支持,有很多的CSS解析bug,如盒bug、IE浮動(dòng) 3pxbug等,這些都是瀏覽器自身的問(wèn)題。web標(biāo)準(zhǔn)是為了消除瀏覽器之爭(zhēng),打破他們的私有代碼,讓web標(biāo)準(zhǔn)體系里的代碼在所有的瀏覽器上都正常解析,實(shí)現(xiàn)web的跨平臺(tái)性,而不是你的代碼符合web標(biāo)準(zhǔn)就能帶來(lái)很好像兼容性,那些古老的瀏覽器也沒(méi)有支持web標(biāo)準(zhǔn)嘛,而且Firefox, Opera新版本不是很快就支持標(biāo)準(zhǔn)了嗎?IE7.0的泄漏版本也在向標(biāo)準(zhǔn)靠近。
雖然CSS布局比較困難,布局中的問(wèn)題也挺多,但是比起table布局了,擴(kuò)展性確實(shí)提高了,就像blog的功能欄可以放到左邊頁(yè)可以放到右邊,table布局能實(shí)現(xiàn)的div配合CSS也全部都實(shí)現(xiàn)了,而且還做到了table布局不能做到的。
4.web標(biāo)準(zhǔn)能做出漂亮的網(wǎng)頁(yè)嗎?回答:藝術(shù)效果和web標(biāo)準(zhǔn)無(wú)關(guān)。這是一個(gè)老掉牙的誤解的,但是與CSS的應(yīng)用有一定的關(guān)系,看看
CSSbeauty,
CSSimport等網(wǎng)站收錄的通過(guò)W3C校檢的網(wǎng)站,你就不會(huì)再問(wèn)了,而且CSS的誕生就是為了讓網(wǎng)頁(yè)有更豐富更完美的視覺(jué)效果,只要是表現(xiàn)就沒(méi)有CSS做不到的。還有作為視覺(jué)修飾的圖片一律在CSS中使用(如:background:url(yourpic.jpg);),作為信息的圖片才能用于<img>。
在web標(biāo)準(zhǔn)推廣的過(guò)程中,這個(gè)問(wèn)題一直是熱點(diǎn),CSS也被人作為標(biāo)準(zhǔn)的重點(diǎn)來(lái)學(xué)習(xí),原因很簡(jiǎn)單,因?yàn)榫W(wǎng)頁(yè)不只是是信息,還有表現(xiàn)、視覺(jué)效果,沒(méi)有漂亮的用戶界面,客戶是不會(huì)選中你的作品的。
5.W3C校檢通過(guò)就是符合web標(biāo)準(zhǔn)嗎?回答:不一定,W3C校檢只是從代碼的層面分析你有沒(méi)有錯(cuò)誤的語(yǔ)法,比如<br/>沒(méi)有閉合,span中嵌套div等等。而有些table布局的網(wǎng)頁(yè)也能通過(guò)W3C校檢,比如
table布局的一個(gè)實(shí)例,因?yàn)檎Z(yǔ)義不符合,table布局就是結(jié)構(gòu)和表現(xiàn)混雜。但是沒(méi)通過(guò)W3C校檢的也不一定符合web標(biāo)準(zhǔn),web標(biāo)準(zhǔn)主要是語(yǔ)義化和結(jié)構(gòu)&表現(xiàn)分離。
6.為什么要應(yīng)用web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)頁(yè)?回答:好處很多,最基本的是:
1)對(duì)網(wǎng)站瀏覽者的好處:
- 文件下載與頁(yè)面顯示速度更快;
- 內(nèi)容能被更多的用戶所訪問(wèn)(包括失明、視弱、色盲等殘障人士);
- 內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)(包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等)
- 用戶能夠通過(guò)樣式選擇定制自己的表現(xiàn)界面
- 所有頁(yè)面都能提供適于打印的版本
2)對(duì)網(wǎng)站所有者的好處:
- 更少的代碼和組件,容易維護(hù)
- 帶寬要求降低(代碼更簡(jiǎn)潔),成本降低。舉個(gè)例子:當(dāng) ESPN.com 使用 CSS改版后,每天節(jié)約超過(guò)兩[*]兆字節(jié)(terabytes)的帶寬。
- 更容易被搜尋引擎搜索到
- 改版方便,不需要變動(dòng)頁(yè)面內(nèi)容
- 提供打印版本而不需要復(fù)制內(nèi)容
- 提高網(wǎng)站易用性。在美國(guó),有嚴(yán)格的法律條款(Section 508)來(lái)約束政府網(wǎng)站必須達(dá)到一定的易用性,其他國(guó)家也有類似的要求。
想了解更多?
7.什么是好的結(jié)構(gòu)?
回答:好的結(jié)構(gòu)這里所說(shuō)的是xhtml的結(jié)構(gòu),首先聲明<Doctype>和<head>部分采用標(biāo)準(zhǔn)推薦寫(xiě)法,其次就是標(biāo)簽的語(yǔ)義化,無(wú)語(yǔ)義的標(biāo)簽(<div>,<span>)作容器,<Hx>作標(biāo)題,<p>作段落,<ul,ol,dl>作列表,<acronym>標(biāo)明縮寫(xiě)詞,<table>指定所含內(nèi)容要組織成行列的表格等等。再次是div容器的合理使用,層層嵌套也不好,代碼冗余,太少也不好,表現(xiàn)的擴(kuò)展性太差,這個(gè)需要具體分析解決。
8.table什么時(shí)候使用?
回答:<table>有組織的所含內(nèi)容成行列的表格,比如成績(jī)單,學(xué)生花名冊(cè),排行榜等數(shù)據(jù),想了解更多?
9.Web設(shè)計(jì)必須要符合Web標(biāo)準(zhǔn)嗎?
回答:沒(méi)有人規(guī)定你必須設(shè)計(jì)符合標(biāo)準(zhǔn)的網(wǎng)頁(yè),Web標(biāo)準(zhǔn)也不是非常完美,他還沒(méi)有支持多媒體(如flash)。而且Web標(biāo)準(zhǔn)推廣書(shū)名是Design with web standard,中文翻譯版本也是《網(wǎng)站重構(gòu)——應(yīng)用web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)》,不是遵循web標(biāo)準(zhǔn)進(jìn)行設(shè)計(jì)。
10.web標(biāo)準(zhǔn)化中CSS能做多少事情?
回答:去看看小毅的CSS不是萬(wàn)能藥膏,CSS是負(fù)責(zé)表現(xiàn)的,也就是你的視覺(jué)感受都可以用CSS來(lái)實(shí)現(xiàn),還有一些動(dòng)態(tài)效果:hover(鼠標(biāo)滑過(guò))效果。
11.做div+css的人都是什么人?
回答:這個(gè)問(wèn)題首先是對(duì)web標(biāo)準(zhǔn)的一個(gè)誤解,提問(wèn)者的意思可能是xhtml+css設(shè)計(jì)網(wǎng)頁(yè)由什么人來(lái)負(fù)責(zé),xhtml是結(jié)構(gòu)網(wǎng)頁(yè)設(shè)計(jì)師需要學(xué)習(xí)程序員也需要學(xué)習(xí),CSS 是表現(xiàn)設(shè)計(jì)師的事情,但是有的設(shè)計(jì)師對(duì)編碼不夠擅長(zhǎng),但是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師是綜合性的web UI(web用戶界面)設(shè)計(jì)師,不能只會(huì)設(shè)計(jì)圖紙,但是在過(guò)渡階段可以有一個(gè)擅長(zhǎng)xhtml+css設(shè)計(jì)師來(lái)銜接界面設(shè)計(jì)師和程序員。想了解更多去看看什么人適合學(xué)習(xí)WEB標(biāo)準(zhǔn)。
12.web標(biāo)準(zhǔn)體系中CSS最重要嗎?
回答:引用小毅的話“結(jié)構(gòu)是戰(zhàn)略的高度,表現(xiàn)和行為是策略的高度”,具體說(shuō)說(shuō)就是web是一個(gè)裝載信息的容器,他的作用就是傳達(dá)信息,表現(xiàn)是為了讓信息更容易的讓瀏覽著接受,為了優(yōu)化用戶體驗(yàn)。行為也是用戶體驗(yàn)的一部份。到了具體的應(yīng)用,品牌形象展示藝術(shù)效果很重要,但是你的信息更重要,瀏覽著不能看見(jiàn)你的 logo就能很具體的了解企業(yè)的情況。而且你企業(yè)的介紹、提供的服務(wù)等信息,可以通過(guò)web標(biāo)準(zhǔn)的對(duì)搜索引擎友好的優(yōu)點(diǎn)讓更多人了解到。