網(wǎng)頁(yè)設(shè)計(jì)新手對(duì)“WEB標(biāo)準(zhǔn)化”的理解
官方的話(huà)
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)。
初級(jí)階段
2007年10月,第一次接觸到Div+Css,這個(gè)詞語(yǔ)。憑著對(duì)互聯(lián)網(wǎng)的熱愛(ài),深入的進(jìn)行了一下了解,當(dāng)初的感覺(jué)就是,哇塞,DIV布局好帥哦。把網(wǎng)頁(yè)分成了一塊一塊的了,不用像表格那樣復(fù)雜的進(jìn)行嵌套來(lái)實(shí)現(xiàn)網(wǎng)站的布局。瘋狂的熱愛(ài)上了這門(mén)技術(shù),花了兩個(gè)星期的日夜練習(xí),終于寫(xiě)出了自己的第一個(gè)所謂的“DIV+CSS”頁(yè)面,網(wǎng)站除了DIV,Span,Img,A,UL,li標(biāo)簽外。沒(méi)有多余的了,我想這就是所謂的入門(mén)吧……
成長(zhǎng)階段
不斷的進(jìn)行“DIV+CSS”布局,手寫(xiě)代碼的能力越來(lái)越高了,發(fā)現(xiàn)原來(lái)布局是這么“簡(jiǎn)單”后,靜下心學(xué)著去看其它高手的頁(yè)面,以及一些概念的東西,這時(shí)候才知道,原來(lái)所謂的“DIV+CSS”,還有另外的叫法,即“XHTML+CSS”,除了,DIV標(biāo)簽外,還有其它能使頁(yè)面元素更有語(yǔ)義的標(biāo)簽……嘗試著改變自己的“DIV習(xí)慣”,進(jìn)一步的“標(biāo)準(zhǔn)化”,并嘗試承接頁(yè)面制作任務(wù),通過(guò)大量的任務(wù)實(shí)踐,讓自己的水平,處理兼容性的程度上進(jìn)一步提高。我想這就是所謂的像“標(biāo)準(zhǔn)”的成長(zhǎng)階段吧……
現(xiàn)在階段
結(jié)構(gòu),表現(xiàn),行為相分離,網(wǎng)上的解釋已經(jīng)夠多了。自己現(xiàn)在也有了自己的理解。我們所看到的網(wǎng)頁(yè),就好比一座高樓大廈,地基,橫梁,樓梯,水管,空間,好比我們頁(yè)面中的標(biāo)簽(結(jié)構(gòu))。房子建好了。裝修公司按照房子進(jìn)行裝修,同一棟大樓,很多同樣的房子,但是可以裝修出不同的風(fēng)格,這就是我們頁(yè)面中的CSS(表現(xiàn))。至于JS,我不知道這樣的比喻是否恰當(dāng),大廈里每家都要用水和電,通過(guò)物業(yè)的控制,可以控制是否給某家用戶(hù)(點(diǎn))供水電,我想這就是所謂的行為吧。
做頁(yè)面,首先要對(duì)效果圖進(jìn)行分析,分析過(guò)后,要認(rèn)真布局,就像修房子一樣,地基沒(méi)打好,以后遲早會(huì)垮掉……要考慮到該布局的向后延展性……以后我要在這里添加或隱藏掉一個(gè)BOX,是否會(huì)大面積修改頁(yè)面。
地基打好了,CSS寫(xiě)起來(lái)也順暢了,關(guān)于CSS的寫(xiě)法,能合并簡(jiǎn)寫(xiě)的地方就盡量去做,還要考慮每個(gè)瀏覽器對(duì)CSS的解釋。深刻理解“盒模型”,減少不必要的Hack。
關(guān)于JS,由于我現(xiàn)在還不能自己寫(xiě)JS,只能從理解上來(lái)想一想,讓所有的瀏覽器能夠兼容,這是首要的,其次,簡(jiǎn)寫(xiě)代碼,用最簡(jiǎn)單的方法實(shí)現(xiàn)同樣的效果,但是,一定要考慮瀏覽器,用戶(hù)的機(jī)器性能等因素,不要做過(guò)多的算法運(yùn)算和遍歷。以免對(duì)用戶(hù)造成不必要的后果。
頁(yè)面優(yōu)化,現(xiàn)在正在往這方面學(xué)習(xí),合理使用標(biāo)簽,CSS分離,背景融合,減少Http請(qǐng)求數(shù),頁(yè)面中的圖片能減小體積就要減小……
多多總結(jié)別人和自己的經(jīng)驗(yàn),掌握一些小技巧,小技巧可以讓你用最簡(jiǎn)單的辦法,實(shí)現(xiàn)你用復(fù)雜方法(結(jié)構(gòu))實(shí)現(xiàn)的東西,也可以減少代碼量……
其它,用戶(hù)體驗(yàn),我想這也是一門(mén)很深?yuàn)W的學(xué)問(wèn)吧,我們所做的這么多,就是要給用戶(hù)帶來(lái)最大的方便,合理的布局讓用戶(hù)賞心悅目,優(yōu)化頁(yè)面讓用戶(hù)訪(fǎng)問(wèn)速度達(dá)到最佳,當(dāng)然還有很多酷炫的“行為”,可以留住用戶(hù)……等等
最后說(shuō)一下,不需要盲目的去追求所謂的“標(biāo)準(zhǔn)”,什么W3C驗(yàn)證阿,完全不需要,個(gè)人覺(jué)得,能給用戶(hù)和網(wǎng)站帶來(lái)最好效果和體驗(yàn)的,才是最佳的?。海?br />
以上是本人在學(xué)習(xí)中對(duì)web標(biāo)準(zhǔn)化的理解,難免有錯(cuò)誤和遺漏,也是想起什么就說(shuō)什么,請(qǐng)見(jiàn)諒……現(xiàn)在還在不斷學(xué)習(xí)中……
本文地址:http://m.irelandcustomcontracting.com/tutorial/yj1552.html
您可能還喜歡
- 設(shè)計(jì)師接私單如何談合同,不被騙方案
- 經(jīng)驗(yàn)分享:網(wǎng)頁(yè)設(shè)計(jì)中的6個(gè)小技巧
- 404頁(yè)面十大最佳用處實(shí)踐
- 淺談話(huà)題“如何自我提升”(精)
- 《創(chuàng)意VC——暢游VC網(wǎng)頁(yè)設(shè)計(jì)觀點(diǎn)與實(shí)例
- 精品設(shè)計(jì)分享:30個(gè)設(shè)計(jì)師常用的找圖網(wǎng)
- 設(shè)計(jì)師的個(gè)人素養(yǎng)小記
- 輕松玩轉(zhuǎn)一萬(wàn)張圖片 - FastStone Imag
- 網(wǎng)站測(cè)試中的AB測(cè)試(A/B Test)方法
- 我討厭現(xiàn)在讓人窒息的網(wǎng)頁(yè)布局
- 專(zhuān)訪(fǎng):石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏