DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS初學者入門:使用table布局網頁不明智
CSS初學者入門:使用table布局網頁不明智
編輯:CSS詳解     
使用Table布局頁面為什麼是不明智的?
大家看到標題,不要誤解認為在頁面中不能使用Table,而是可以使用Table,但是盡量不要用Table去布局頁面,為什麼這麼說呢,因為使用Table布局頁面會使頁面失去靈活性,怎麼個靈活法呢,比如今天你好不容易做出來的頁面,第二天老板說我不喜歡登錄模塊放到右邊,還是放到左邊,通知板塊放到右側去,頁面風格最好一個月換一種,如果遇到這種老板,提出這種要求,並且你的頁面是用Table布局的,那麼你會崩潰的,工作量那是大大滴~,如果不相信的話,你們自己可以找個頁面,用Table布局出來,然後變換板塊和風格,你就會體會到Table布局的不靈活性,這是為什麼呢,因為Table的誕生是為存儲數據用的,功能和Execel差不多,不是用來布局用的,只不過後來大家發現用Table可以把想放的頁面元素,比如圖片,放到任何自己想放的地方,且做出來的頁面可以兼容多種浏覽器,於是Table就承擔起了布局頁面的重擔,這一做就是好幾年... ...直到Web2.0時代的到來,Table才從布局頁面的工作中逐漸解脫,專心的去存儲數據^_^

    既然Table是為存儲數據誕生的,那誰的誕生是為了頁面布局呢?
    答案就是:DIV,DIV就是為布局頁面而誕生的,只不過一直不被人認同,原因就是DIV去布局頁面需要CSS的配合,使用比較繁瑣,還不如Table拖拖拽拽頁面就布局OK了,感覺還不如Table方便,從而DIV被人們放置在一個無人問津的昏暗角落裡,暗暗的等待著伯樂的出現,直到2003年美國加州Scott Design公司參加了在舊金山舉辦的有關網頁排版和設計的一個研討會上的演講,使DIV看到了陽光,走出了陰霾... ...

    說了那麼多,我們對比一下Table布局頁面和DIV布局頁面的優缺點
使用表格進行頁面布局會帶來很多問題:
* 把格式數據混入你的內容中。這使得文件的大小無謂地變大,而用戶訪問每個 頁面時都必須下載一次這樣的格式信息,帶寬並非免費。
* 這使得重新設計現有的站點和內容極為消耗勞力 (且昂貴)。
* 這還使我們保持整個站點的視覺的一致性極難,花費也極高。
* 基於表格的頁面還大大降低了它對殘疾人和用手機或 PDA 浏覽者的親和力。
而使用CSS進行網頁布局,它會:
* 使你的頁面載入得更快
* 降低你的流量費用
* 讓你在修改設計時更有效率而代價更低
* 幫助你的整個站點保持視覺的一致性
* 讓你的站點可以更好地被搜索引擎找到
* 使你的站點對浏覽者和浏覽器更具親和力
* 在世界上越來越多人采用 Web 標准時,它還能 提高你的職場競爭實力 (事實上也就是降低失業的風險)。
網上有一篇文章,轉過來,文章著重介紹DIV三點優勢,也許看完文章後,就像社區元老heflyaway說的感覺作者比較迷戀Table,每篇文章都不可避免的帶有個人色彩,而轉出來的目的,其實就是想給大家降降DIV+CSS的溫度,免得“走火入魔”,視DIV+CSS是為萬能的,如果想學好CSS布局頁面,就要從多個方面看它,好了,不多說了,下面是作者對CSS布局頁面的三點優勢及理解:
1、內容和形式分離,網頁前台只需要顯示內容就行,形式上的美工交給CSS來處理。生成的Html文件代碼精簡,更小打開更快。
2、改版網站更簡單容易了,不用重新設計排版網頁,甚至於不用動原網站的任何Html和程序頁面,只需要改動CSS文件就完成了所有改版。對於門戶網站來說改版就像換件衣服一樣簡單容易。
3、搜索引擎更友好,排名更容易靠前。
    第一點、內容和形式分離
網頁前台只需要顯示內容就行,形式上的美工交給CSS來處理。生成的Html文件代碼精簡,更小打開更快。
這個是DIV+CSS技術最顯著的特點,也是CSS存在的根源。完全的顛覆現在傳統(table)網頁設計的技術。所有現在用table制作的內容,都可以用CSS來解決掉,而且解決的更完美,更強大。不需要大家再表格套表格,讓生成的網頁文件大小更精簡,更小。table時代,一個頁面表格達到10個以上是非常普遍的事情,但是現在用DIV+CSS,一個table都可以不用,就完全達到之前的效果,這就直接導致網頁文件大小比使用table時減少50%-80%,更節約各位站長的硬盤空間,訪問者打開網頁時更快,而且用div+CSS時,不像以往使用table時,必須把全部table讀取完了才顯示頁面內容,現在是可以讀一個div就顯示一個效果,大家打開網頁不用等。好處真是明顯而強大。
這個優點的確是顯著的,凡是使用傳統table建的網頁,內容多的話,有時候達到30K左右都有可能,文件打了打開時,肯定就有0.0幾秒的延遲。使用DIV+CSS,你前台打開看到的全是直接內容,CSS文件都是導入鏈接的,是另一個文件,根本和HTML文件大小沒關系,這種生成的Html文件,一個也就10K左右大小。


    第二點,改版網站更簡單容易了
不用重新設計排版網頁,甚至於不用動原網站的任何Html和程序頁面,只需要改動CSS文件就完成了所有改版。
DIV+CSS對於門戶網站來說改版就像換件衣服一樣簡單容易,改版時,不用改動全站Html頁面,只需要重新寫CSS,再用新CSS覆蓋以前的CSS就可以實現改版了。方便吧。

    第三點,搜索引擎更友好,確實能夠對SEO起到一定的幫助。
通過DIV+CSS對網頁的布局,可以讓一些重要的鏈接、文字信息,優先讓搜索引擎蜘蛛爬取。這對於SEO也有幫助。

綜上所述,個人感覺DIV+CSS不能太迷信它的很好很強大,它作為制作網頁,美化網頁的一個重要輔助是很強大方便的。可以彌補table制作框架和表格時的很多不足和美工上的缺點,但是完全只用它來做,太費時費力,對於全國中小型網站長來說,真的不太適合。我個人覺得用table+DIV+CSS是最好的組合,也是最省時省力的辦法。

還需要再說明一下,本節講得是Table布局頁面和CSS布局頁面的問題,討論的是“布局頁面”上用誰更好,並不是說在CSS布局的頁面內不能用Table,真正厲害的人物是DIV、Table、CSS用得恰到好處,他們三個各做各的事情,DIV布局頁面,Table存儲數據,CSS給頁面穿衣服!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved