div還是table？這是個問題……
　　自從web標準和網(wǎng)站重構(gòu)的熱潮席卷而來，到處都可以看到如下的問題：
　　問題1：怎么做1px高的div？
　　問題2：這個x行y列的table用div怎么實現(xiàn)？
　　問題3：css能不能實現(xiàn)拖動這個行？
　　問題4：為什么網(wǎng)頁在瀏覽器里是正常的，可是在dw里卻亂了？
　　問題5：為什么布局在ie里面是正確的，可是在ff里就亂了？
　　……
　　對于剛剛發(fā)覺表格布局已經(jīng)被大家所拋棄，從而開始接觸web標準來構(gòu)建網(wǎng)頁的人來說，這確實是個問題。
　　其實，這個問題從一開始就偏離了中心。
　　web標準并不可以簡單地理解為：“查找：table，替換為：div”，而是要從根本上轉(zhuǎn)變思想，其中比較重要的，就是把內(nèi)容、行為與表現(xiàn)分離。
　　對于設(shè)計人員以及已經(jīng)使用表格布局很長時間的人來說，這也正是難點所在。
　　往往我們現(xiàn)在的網(wǎng)頁制作，都是從一張psd圖開始的，而制作人員負責把這個psd圖轉(zhuǎn)換成html文件。對于制作人員來說，將圖片分割然后再組合，使用表格是再簡單快捷不過的了，特別是現(xiàn)在可視化開發(fā)軟件越來越強大，但是這樣正培養(yǎng)了制作人員的惰性，人們往往習慣于動動鼠標點點設(shè)設(shè)就完成了，而不去考慮實際的代碼是什么亂七八糟的樣子。
　　內(nèi)容、行為與表現(xiàn)？那什么是內(nèi)容？什么是行為？什么又是表現(xiàn)呢？
　　內(nèi)容，顧名思義，就是訪問者真正想了解的信息，可以包含數(shù)據(jù)、文檔或者圖片等。注意這里強調(diào)的“真正”，是指純粹的數(shù)據(jù)信息本身，而不包含輔助的信息，比如導航菜單、裝飾性圖片等。
　　例如貓窩的另一篇文章《盒模型（BOXModel）》的頁面，其真正的內(nèi)容應該是：
盒模型（BOXModel）如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖1所示。……

　　明確了內(nèi)容的定義，表現(xiàn)其實很容易理解，就是頁面的外觀，例如：導航條的位置、鏈接的顏色、文字的大小等等。
　　而行為則是一些交互的操作，比如表單的驗證、點擊按鈕使某個層顯示和隱藏，這些需要通過javascript來完成。
交互是javascript的工作，不要指望css能完成。

　　理解了內(nèi)容、行為與表現(xiàn)的區(qū)別，下面來說說“結(jié)構(gòu)”。
　　上面例子中的內(nèi)容，看上去很亂，而結(jié)構(gòu)則使內(nèi)容具有邏輯性、易用性。因此，可將上例中的文字結(jié)構(gòu)化如下：
　　標題=〉盒模型（BOXModel）
　　正文=〉如果想熟練掌握DIV和CSS的布局方法，首先要對盒模型有足夠的了解。每個HTML元素都可以看作一個裝了東西的盒子，盒子里面的內(nèi)容到盒子的邊框之間的距離即填充（padding），盒子本身有邊框（border），而盒子邊框外和其他盒子之間，還有邊界（margin），如圖1所示。
　　結(jié)構(gòu)對于頁面來說，是非常重要的，可以說它是一個頁面的骨架，只有真正搞懂了“結(jié)構(gòu)”的意義，才能實現(xiàn)表現(xiàn)和內(nèi)容分離，保證頁面的源代碼語義清晰且簡潔。
　　因此，當制作人員拿到一個設(shè)計圖的時候，首先要做的，并不是劃分切片，而是提取頁面的內(nèi)容將其結(jié)構(gòu)化，而上例中的頁面結(jié)構(gòu)如圖1所示。

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

　　當然，為了更好的視覺效果，還是需要使用css來完成“表現(xiàn)”。
　　只有在確定了結(jié)構(gòu)之后，才能確定css以及圖片切片如何劃分。劃分切片已經(jīng)從原來最重要的工作變得不那么重要了。
　　再回到div與table之爭。
　　之所以提出用div布局來替換table布局，其實中心思想是讓xhtml的各個標簽能名副其實，專職專用。例如，上面的例子中，“盒模型（BOXModel）”使用h2（2級標題），而正文則用p（段落）。css可以應用在任何的xhtml標簽上，因此不要嵌套一層又一層的div和span。
　　但是，table是否就被判了死刑不能再用了呢？
　　當然不是！
　　table也是xhtml的標簽之一，而且它有它的意義——放置表格類數(shù)據(jù)，表格內(nèi)的數(shù)據(jù)也是內(nèi)容的一部分。例如一個班學生的考試成績表，自然要用表格來顯示，如果也非要用所謂的div布局，那就是舍本逐末了。
　　理論搞清楚了，那么還有什么難點擋在我們實現(xiàn)表現(xiàn)與內(nèi)容分離的路上？
　　首先就是瀏覽器！
　　這個問題無法回避，畢竟頁面就是為了放在瀏覽器內(nèi)看的。而不同的瀏覽器自然會有不同的表現(xiàn)方式。雖然ie在國內(nèi)是應用最廣的瀏覽器，但是現(xiàn)在使用firefox和opera等瀏覽器的也大有人在。而制作軟件，無論它再怎么號稱“所見即所得”，但它畢竟不是瀏覽器，因此不可能所見所得，因此不要相信你的制作軟件，在幾個流行的瀏覽器內(nèi)測試才是正道！
　　此時，另一個巨大的問題又出現(xiàn)了——瀏覽器的bug。
　　俗話說，人不是完美的，因此人寫的瀏覽器也不可能是完美的。多多利用搜索引擎，可以搜到很多關(guān)于瀏覽器bug。
不要相信ie，它可以說是bug最多的瀏覽器。先用符合標準的瀏覽器測試，比如firefox或者opera，再針對ie的問題使用hack。這樣會縮減工作時間提高效率。
當然，還可以祈禱ie7會符合標準，不過這怕是不太可能的。

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

最新評論