|
三、理解表現(xiàn)與內(nèi)容相脫離
表現(xiàn)與內(nèi)容相脫離，這應(yīng)該算是web標(biāo)準(zhǔn)所提倡的核心了。按w3c提出的標(biāo)準(zhǔn)，將網(wǎng)頁劃分成了三大塊，即結(jié)構(gòu)層、表現(xiàn)層、行為層。下邊我們還是以上一節(jié)中的效果圖為例，來了解這三塊內(nèi)容。您可以在新窗口中打開這個(gè)頁面。
Html代碼：從頁面代碼的角度上看，我們應(yīng)該說只能看到這些東西：就是一個(gè)標(biāo)題，以及一個(gè)詳細(xì)列表。所以說在腦海中初步形成的代碼應(yīng)該是：
<h4>標(biāo)題</h4>
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
...
<li>列表項(xiàng)</li>
</ul>
CSS代碼：就是大家看到的視覺效果。通過更換css文件，我們可以在不修練html代碼的基礎(chǔ)上任意變換這個(gè)頁面的視覺效果。所有的效果應(yīng)該是與html內(nèi)容本身沒有關(guān)系的。因?yàn)橐曈X效果僅僅是為了讓頁面更漂亮、更容易讓用戶去接受。
Javascript:細(xì)心的朋友會發(fā)現(xiàn)，標(biāo)題欄左側(cè)有一個(gè)小三角形。通過點(diǎn)擊這個(gè)圖標(biāo)，我們可以完成一個(gè)收縮功能，這就是行為，也是與頁面內(nèi)容無關(guān)的東西。
三種角色負(fù)責(zé)三個(gè)不同的分工，盡量不要去相互影響。
一個(gè)網(wǎng)頁，應(yīng)該以它的主體內(nèi)容為根本，所以我主張。先編寫html代碼，在編寫html代碼時(shí)，我們盡量不去考慮為了迎合它的表現(xiàn)形式，這樣才能寫出結(jié)構(gòu)化、語義化的頁面代碼。當(dāng)然，在CSS實(shí)現(xiàn)以及行為腳本時(shí)，我們也允許最小程度的去修改現(xiàn)有的html代碼，畢竟還有很多客觀因素在制約著。但這絕不意味著像某些網(wǎng)站，純粹為了通過w3c驗(yàn)證、為了實(shí)現(xiàn)某些不合理的效果圖去寫出類似于N個(gè)div嵌套、滿頁都是div的現(xiàn)象。時(shí)下所流行的一種叫法“div+css”讓很多初學(xué)者對web標(biāo)準(zhǔn)產(chǎn)生了嚴(yán)重的誤解，認(rèn)為就是用div去代替以前的table，會產(chǎn)生“滿頁盡是div”的錯誤結(jié)論。
這種表現(xiàn)與內(nèi)容相脫離的設(shè)計(jì)思想，對于頁面制作人員而言,也同時(shí)提出了更高的要求：
- 拋棄"所見即所得"的網(wǎng)頁編輯軟件，改用手寫。親身去感受每一個(gè)html標(biāo)簽的真實(shí)意義。你會發(fā)現(xiàn)除了table標(biāo)簽，原來還有那么多有用而根本沒有勝過的標(biāo)簽。
- 以前只用DW、FP等軟件拉出無數(shù)個(gè)表格然后填充些東西進(jìn)去就能保存為網(wǎng)頁的時(shí)代過去了，你要懂每一個(gè)html標(biāo)簽它應(yīng)該布置在網(wǎng)頁的什么位置。
- 頁面html代碼不負(fù)責(zé)頁面的效果，它只是告訴瀏覽器我這個(gè)頁面的結(jié)構(gòu)和內(nèi)容，所以剛開始時(shí)，你會覺得符合標(biāo)準(zhǔn)的頁面做出來都比較難看，那是因?yàn)槟氵�沒有學(xué)會CSS，就算學(xué)會了，你還沒有經(jīng)過多次的這種html代碼與css代碼分開編寫的實(shí)踐。
- 要盡量讓頁面上的每一個(gè)標(biāo)簽都有它的實(shí)際意義。不要讓html代碼為css而活著。
出處：藍(lán)色理想
責(zé)任編輯：blue
上一頁 基于web標(biāo)準(zhǔn)的網(wǎng)頁基本特征 下一頁 重新認(rèn)識javascript
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 3 頁 理解表現(xiàn)與內(nèi)容相脫離
