| |
使用Table布局頁(yè)面為什么是不明智的？
大家看到標(biāo)題，不要誤解認(rèn)為在頁(yè)面中不能使用Table，而是可以使用Table，但是盡量不要用Table去布局頁(yè)面，為什么這么說(shuō)呢，因?yàn)槭褂肨able布局頁(yè)面會(huì)使頁(yè)面失去靈活性，怎么個(gè)靈活法呢，比如今天你好不容易做出來(lái)的頁(yè)面，第二天老板說(shuō)我不喜歡登錄模塊放到右邊，還是放到左邊，通知板塊放到右側(cè)去，頁(yè)面風(fēng)格最好一個(gè)月?lián)Q一種，如果遇到這種老板，提出這種要求，并且你的頁(yè)面是用Table布局的，那么你會(huì)崩潰的，工作量那是大大滴~，如果不相信的話，你們自己可以找個(gè)頁(yè)面，用Table布局出來(lái)，然后變換板塊和風(fēng)格，你就會(huì)體會(huì)到Table布局的不靈活性，這是為什么呢，因?yàn)門able的誕生是為存儲(chǔ)數(shù)據(jù)用的，功能和Execel差不多，不是用來(lái)布局用的，只不過(guò)后來(lái)大家發(fā)現(xiàn)用Table可以把想放的頁(yè)面元素，比如圖片，放到任何自己想放的地方，且做出來(lái)的頁(yè)面可以兼容多種瀏覽器，于是Table就承擔(dān)起了布局頁(yè)面的重?fù)?dān)，這一做就是好幾年... ...直到Web2.0時(shí)代的到來(lái)，Table才從布局頁(yè)面的工作中逐漸解脫，專心的去存儲(chǔ)數(shù)據(jù)^_^
既然Table是為存儲(chǔ)數(shù)據(jù)誕生的，那誰(shuí)的誕生是為了頁(yè)面布局呢？
答案就是:DIV，DIV就是為布局頁(yè)面而誕生的，只不過(guò)一直不被人認(rèn)同，原因就是DIV去布局頁(yè)面需要CSS的配合，使用比較繁瑣，還不如Table拖拖拽拽頁(yè)面就布局OK了，感覺還不如Table方便，從而DIV被人們放置在一個(gè)無(wú)人問(wèn)津的昏暗角落里，暗暗的等待著伯樂(lè)的出現(xiàn)，直到2003年美國(guó)加州Scott Design公司參加了在舊金山舉辦的有關(guān)網(wǎng)頁(yè)排版和設(shè)計(jì)的一個(gè)研討會(huì)上的演講，使DIV看到了陽(yáng)光，走出了陰霾... ...
說(shuō)了那么多，我們對(duì)比一下Table布局頁(yè)面和DIV布局頁(yè)面的優(yōu)缺點(diǎn)
使用表格進(jìn)行頁(yè)面布局會(huì)帶來(lái)很多問(wèn)題：
* 把格式數(shù)據(jù)混入你的內(nèi)容中。這使得文件的大小無(wú)謂地變大，而用戶訪問(wèn)每個(gè) 頁(yè)面時(shí)都必須下載一次這樣的格式信息,帶寬并非免費(fèi)。
* 這使得重新設(shè)計(jì)現(xiàn)有的站點(diǎn)和內(nèi)容極為消耗勞力 (且昂貴)。
* 這還使我們保持整個(gè)站點(diǎn)的視覺的一致性極難，花費(fèi)也極高。
* 基于表格的頁(yè)面還大大降低了它對(duì)殘疾人和用手機(jī)或 PDA 瀏覽者的親和力。
而使用CSS進(jìn)行網(wǎng)頁(yè)布局，它會(huì)：
* 使你的頁(yè)面載入得更快
* 降低你的流量費(fèi)用
* 讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低
* 幫助你的整個(gè)站點(diǎn)保持視覺的一致性
* 讓你的站點(diǎn)可以更好地被搜索引擎找到
* 使你的站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力
* 在世界上越來(lái)越多人采用 Web 標(biāo)準(zhǔn)時(shí)，它還能 提高你的職場(chǎng)競(jìng)爭(zhēng)實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。
網(wǎng)上有一篇文章，轉(zhuǎn)過(guò)來(lái)，文章著重介紹DIV三點(diǎn)優(yōu)勢(shì),也許看完文章后，就像社區(qū)元老heflyaway說(shuō)的感覺作者比較迷戀Table，每篇文章都不可避免的帶有個(gè)人色彩，而轉(zhuǎn)出來(lái)的目的，其實(shí)就是想給大家降降DIV+CSS的溫度，免得“走火入魔”，視DIV+CSS是為萬(wàn)能的，如果想學(xué)好CSS布局頁(yè)面，就要從多個(gè)方面看它，好了，不多說(shuō)了，下面是作者對(duì)CSS布局頁(yè)面的三點(diǎn)優(yōu)勢(shì)及理解：
1、內(nèi)容和形式分離，網(wǎng)頁(yè)前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來(lái)處理。生成的HTML文件代碼精簡(jiǎn)，更小打開更快。
2、改版網(wǎng)站更簡(jiǎn)單容易了，不用重新設(shè)計(jì)排版網(wǎng)頁(yè)，甚至于不用動(dòng)原網(wǎng)站的任何HTML和程序頁(yè)面，只需要改動(dòng)CSS文件就完成了所有改版。對(duì)于門戶網(wǎng)站來(lái)說(shuō)改版就像換件衣服一樣簡(jiǎn)單容易。
3、搜索引擎更友好，排名更容易靠前。
第一點(diǎn)、內(nèi)容和形式分離
網(wǎng)頁(yè)前臺(tái)只需要顯示內(nèi)容就行，形式上的美工交給CSS來(lái)處理。生成的HTML文件代碼精簡(jiǎn)，更小打開更快。
這個(gè)是DIV+CSS技術(shù)最顯著的特點(diǎn)，也是CSS存在的根源。完全的顛覆現(xiàn)在傳統(tǒng)（table）網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)。所有現(xiàn)在用table制作的內(nèi)容，都可以用CSS來(lái)解決掉，而且解決的更完美，更強(qiáng)大。不需要大家再表格套表格，讓生成的網(wǎng)頁(yè)文件大小更精簡(jiǎn)，更小。table時(shí)代，一個(gè)頁(yè)面表格達(dá)到10個(gè)以上是非常普遍的事情，但是現(xiàn)在用DIV+CSS，一個(gè)table都可以不用，就完全達(dá)到之前的效果，這就直接導(dǎo)致網(wǎng)頁(yè)文件大小比使用table時(shí)減少50%-80%，更節(jié)約各位站長(zhǎng)的硬盤空間，訪問(wèn)者打開網(wǎng)頁(yè)時(shí)更快，而且用div+CSS時(shí)，不像以往使用table時(shí)，必須把全部table讀取完了才顯示頁(yè)面內(nèi)容，現(xiàn)在是可以讀一個(gè)div就顯示一個(gè)效果，大家打開網(wǎng)頁(yè)不用等。好處真是明顯而強(qiáng)大。 本新聞共 2頁(yè),當(dāng)前在第 1頁(yè) 1 2 |
|
|
| 【收藏】【打印】【進(jìn)入論壇】 |
|
|
|
|
| |
|
|
|
