寫(xiě)給剛剛接觸web標(biāo)準(zhǔn)的新人們

2024-07-11 08:23:51

字體：大中小

供稿：網(wǎng)友

　　div還是table？這是個(gè)問(wèn)題……
　　自從web標(biāo)準(zhǔn)和網(wǎng)站重構(gòu)的熱潮席卷而來(lái)，到處都可以看到如下的問(wèn)題：
　　問(wèn)題1：怎么做1px高的div？
　　問(wèn)題2：這個(gè)x行y列的table用div怎么實(shí)現(xiàn)？
　　問(wèn)題3：css能不能實(shí)現(xiàn)拖動(dòng)這個(gè)行？
　　問(wèn)題4：為什么網(wǎng)頁(yè)在瀏覽器里是正常的，可是在dw里卻亂了？
　　問(wèn)題5：為什么布局在ie里面是正確的，可是在ff里就亂了？
　　……
　　對(duì)于剛剛發(fā)覺(jué)表格布局已經(jīng)被大家所拋棄，從而開(kāi)始接觸web標(biāo)準(zhǔn)來(lái)構(gòu)建網(wǎng)頁(yè)的人來(lái)說(shuō)，這確實(shí)是個(gè)問(wèn)題。
　　其實(shí)，這個(gè)問(wèn)題從一開(kāi)始就偏離了中心。
　　web標(biāo)準(zhǔn)并不可以簡(jiǎn)單地理解為：“查找：table，替換為：div”，而是要從根本上轉(zhuǎn)變思想，其中比較重要的，就是把內(nèi)容、行為與表現(xiàn)分離。

　　對(duì)于設(shè)計(jì)人員以及已經(jīng)使用表格布局很長(zhǎng)時(shí)間的人來(lái)說(shuō)，這也正是難點(diǎn)所在。
　　往往我們現(xiàn)在的網(wǎng)頁(yè)制作，都是從一張psd圖開(kāi)始的，而制作人員負(fù)責(zé)把這個(gè)psd圖轉(zhuǎn)換成html文件。對(duì)于制作人員來(lái)說(shuō)，將圖片分割然后再組合，使用表格是再簡(jiǎn)單快捷不過(guò)的了，非凡是現(xiàn)在可視化開(kāi)發(fā)軟件越來(lái)越強(qiáng)大，但是這樣正培養(yǎng)了制作人員的惰性，人們往往習(xí)慣于動(dòng)動(dòng)鼠標(biāo)點(diǎn)點(diǎn)設(shè)設(shè)就完成了，而不去考慮實(shí)際的代碼是什么亂七八糟的樣子。

　　內(nèi)容、行為與表現(xiàn)？那什么是內(nèi)容？什么是行為？什么又是表現(xiàn)呢？

　　內(nèi)容，顧名思義，就是訪問(wèn)者真正想了解的信息，可以包含數(shù)據(jù)、文檔或者圖片等。注重這里強(qiáng)調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身，而不包含輔助的信息，比如導(dǎo)航菜單、裝飾性圖片等。
　　例如貓窩的另一篇文章《盒模型（BOX Model）》的頁(yè)面，其真正的內(nèi)容應(yīng)該是：
盒模型（BOX Model）假如想熟練把握DIV和CSS的布局方法，首先要對(duì)盒模型有足夠的了解。每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖1所示。……

　　明確了內(nèi)容的定義，表現(xiàn)其實(shí)很輕易理解，就是頁(yè)面的外觀，例如：導(dǎo)航條的位置、鏈接的顏色、文字的大小等等。

　　而行為則是一些交互的操作，比如表單的驗(yàn)證、點(diǎn)擊按鈕使某個(gè)層顯示和隱藏，這些需要通過(guò)javascript來(lái)完成。
交互是javascript的工作，不要指望css能完成。

　　理解了內(nèi)容、行為與表現(xiàn)的區(qū)別，下面來(lái)說(shuō)說(shuō)“結(jié)構(gòu)”。
　　上面例子中的內(nèi)容，看上去很亂，而結(jié)構(gòu)則使內(nèi)容具有邏輯性、易用性。因此，可將上例中的文字結(jié)構(gòu)化如下：
　　標(biāo)題=〉盒模型（BOX Model）
　　正文=〉假如想熟練把握DIV和CSS的布局方法，首先要對(duì)盒模型有足夠的了解。每個(gè)HTML元素都可以看作一個(gè)裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖1所示。

　　結(jié)構(gòu)對(duì)于頁(yè)面來(lái)說(shuō)，是非常重要的，可以說(shuō)它是一個(gè)頁(yè)面的骨架，只有真正搞懂了“結(jié)構(gòu)”的意義，才能實(shí)現(xiàn)表現(xiàn)和內(nèi)容分離，保證頁(yè)面的源代碼語(yǔ)義清楚且簡(jiǎn)潔。
　　因此，當(dāng)制作人員拿到一個(gè)設(shè)計(jì)圖的時(shí)候，首先要做的，并不是劃分切片，而是提取頁(yè)面的內(nèi)容將其結(jié)構(gòu)化，而上例中的頁(yè)面結(jié)構(gòu)如圖1所示。
寫(xiě)給剛剛接觸web標(biāo)準(zhǔn)的新人們

圖1 頁(yè)面的結(jié)構(gòu)
　　此時(shí)，可以看到標(biāo)題文字已經(jīng)變大、表單有邊框、文字也沒(méi)有擠在一起，這是因?yàn)闉g覽器內(nèi)有預(yù)制的css設(shè)定，規(guī)定了標(biāo)題的大小、表單的樣式等。雖然這個(gè)頁(yè)面不好看，但是它卻有很高的可讀性，瀏覽者已經(jīng)可以輕松地閱讀頁(yè)面的內(nèi)容，而且，這個(gè)頁(yè)面內(nèi)沒(méi)有為了裝飾而存在的div或者其它什么代碼。
還在想怎么用div來(lái)實(shí)現(xiàn)1px的橫線？仔細(xì)看看css中border的定義吧！

　　當(dāng)然，為了更好的視覺(jué)效果，還是需要使用css來(lái)完成“表現(xiàn)”。
　　只有在確定了結(jié)構(gòu)之后，才能確定css以及圖片切片如何劃分。劃分切片已經(jīng)從原來(lái)最重要的工作變得不那么重要了。

　　再回到div與table之爭(zhēng)。
　　之所以提出用div布局來(lái)替換table布局，其實(shí)中心思想是讓xhtml的各個(gè)標(biāo)簽?zāi)苊逼鋵?shí)，專(zhuān)職專(zhuān)用。例如，上面的例子中，“盒模型（BOX Model）”使用h2（2級(jí)標(biāo)題），而正文則用p（段落）。css可以應(yīng)用在任何的xhtml標(biāo)簽上，因此不要嵌套一層又一層的div和span。

　　但是，table是否就被判了死刑不能再用了呢？
　　當(dāng)然不是！
　　table也是xhtml的標(biāo)簽之一，而且它有它的意義——放置表格類(lèi)數(shù)據(jù)，表格內(nèi)的數(shù)據(jù)也是內(nèi)容的一部分。例如一個(gè)班學(xué)生的考試成績(jī)表，自然要用表格來(lái)顯示，假如也非要用所謂的div布局，那就是舍本逐末了。

　　理論搞清楚了，那么還有什么難點(diǎn)擋在我們實(shí)現(xiàn)表現(xiàn)與內(nèi)容分離的路上？

　　首先就是瀏覽器！
　　這個(gè)問(wèn)題無(wú)法回避，究竟頁(yè)面就是為了放在瀏覽器內(nèi)看的。而不同的瀏覽器自然會(huì)有不同的表現(xiàn)方式。雖然ie在國(guó)內(nèi)是應(yīng)用最廣的瀏覽器，但是現(xiàn)在使用firefox和opera等瀏覽器的也大有人在。而制作軟件，無(wú)論它再怎么號(hào)稱(chēng)“所見(jiàn)即所得”，但它究竟不是瀏覽器，因此不可能所見(jiàn)所得，因此不要相信你的制作軟件，在幾個(gè)流行的瀏覽器內(nèi)測(cè)試才是正道！
　　此時(shí)，另一個(gè)巨大的問(wèn)題又出現(xiàn)了——瀏覽器的bug。
　　俗話說(shuō)，人不是完美的，因此人寫(xiě)的瀏覽器也不可能是完美的。多多利用搜索引擎，可以搜到很多關(guān)于瀏覽器bug以及破解方法的文章。
不要相信ie，它可以說(shuō)是bug最多的瀏覽器。先用符合標(biāo)準(zhǔn)的瀏覽器測(cè)試，比如firefox或者opera，再針對(duì)ie的問(wèn)題使用hack。這樣會(huì)縮減工作時(shí)間提高效率。
當(dāng)然，還可以祈禱ie7會(huì)符合標(biāo)準(zhǔn)，不過(guò)這怕是不太可能的。

　　然后，還可能的，就是制作者的懶惰。
　　css和xhtml都是基礎(chǔ)，花些時(shí)間好好看看手冊(cè)，一定會(huì)有很大收獲的。
想想吧，當(dāng)你不再依靠dw或者golive而能寫(xiě)出一個(gè)完整漂亮的頁(yè)面，制作人員的價(jià)值也就體現(xiàn)出來(lái)了。不會(huì)再混同于一個(gè)用ps的自動(dòng)切片來(lái)生成頁(yè)面的電腦愛(ài)好者了。

上一篇：CSS教程:水平對(duì)齊(text-align)

下一篇：CSS教程:CSS中的定位(position)