DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 用CSS進行網頁布局的好處
用CSS進行網頁布局的好處
編輯:CSS詳解     

符合WEB標准的CSS網頁布局相對於傳統TABLE布局的一些優勢:

  一、代碼臃腫

  首先,Table裡面唯一無法用CSS定義的屬性只有Cellspacing,Cellpadding幾個,其它屬性都可以並且應當使用CSS,這樣,剩下的,就是<table><tr><td>和<div>的對決,我相信一個動辄幾十K大小的網頁,即使使用了幾十個Table,因此多出來的代碼也可以忽略不計,那些埋怨Table代碼臃腫的人其實該檢查自己的編碼習慣,能將Table寫得十分臃腫的人,寫Div相比也未必會簡潔到哪裡。

  代碼臃腫:你至少需要寫下<table><tr><td>這三個標簽之後,才能開始真正的內容,另外,Table的各種標簽中還包含了復雜的屬性定義,而Div只需<div>一個標簽。

  二、頁面渲染性能問題

  我使用一台2004年的筆記本電腦,1.6G的CPU與1G內存,這種配置下,看不出Table布局和Div布局在頁面渲染上有任何速度差別,其實這點差別即使有,相對網絡本身的延遲也可以忽略。

  頁面渲染性能問題:浏覽器需要將整個表格完全讀完後才會開始渲染。

  三、不利於搜索引擎優化SEO

  如果你盡可能使用CSS而不是Table的屬性,前面說了,產生的代碼和Div的差別也不會很大,搜索引擎會歧視<table>標簽嗎,這種說法的依據我至今並沒有找到。

  不利於搜索引擎優化:搜索引擎喜歡內容與修飾分開。

  四、可訪問性差

  這是Table固有的缺陷,不過多數Div+CSS的擁趸似乎並不是基於這個原因才排斥Table。

  可訪問性差:屏幕朗讀軟件和盲文浏覽器無法很好地理解Table中的內容。

  五、不夠語義

  語義Web的含義要深遠得多,並不是僅僅在Table和Div上糾纏,即使W3C,也並沒有規定Table只能用來顯示表格數據,很多在Table的語義上進行糾纏的人,其實不妨再等等Html5,那才是真正的語義。

  不夠語義(Semantic):我們需要語義的Web。

  本文的目的不是讓你丟棄Div投身Table,相反,如果Div能滿足你的設計需要,Div仍是首選,但沒必要避諱Table,否則會走入另外一個極端。很多使用Div無法簡單實現的設計,仍可以使用Table,當然,不管使用什麼,都應該用CSS將內容與修飾分離。Div+CSS和Table+CSS都是合法的設計,誰更簡單就用誰。根據我的經驗,當你能預見你的內容的格式,對你即將加入的內容有能力完全控制其顯示格式時,應當使用Div+CSS;當你即將加入的內容是不固定的,你無法預見其格式,如果不想讓頁面坍塌,使用Table+CSS是一種保險的做法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved