建站常識
DIV與Table布局在大型網(wǎng)站的可用性比較
2006-11-09 11:29:00
DIV與TABLE本身并不存在什么優(yōu)缺點,所謂web標(biāo)準(zhǔn)只是推薦的是正確的使用標(biāo)簽,好比說:DIV用于布局,而TABLE則本來就是轉(zhuǎn)二維數(shù)據(jù)的。讓TABLE做該做的事,并不是說頁面里不出現(xiàn)TABLE就是多么多么牛。
用DIV進行排版的優(yōu)勢就是我不說,大家應(yīng)該都比較清楚。DIV是標(biāo)準(zhǔn),是大勢所趨,但并不意味著所有的頁面都適合用它來做。
中國的門戶和國外的有很大的區(qū)別,中國網(wǎng)民并不喜歡信息量少的頁面,YAHOO到了中國頁面上的內(nèi)容就多了不少,而上次改為簡潔的頁面后訪問量下降的厲害以至于沒過幾天就又改了回來。正式由于中國的國情造就了搜狐、新浪這樣門戶。
為什么DIV不適合他們?下面我從幾個方面來逐一說明:
精簡代碼:
大家都說DIV的布局精簡代碼,但是用DIV替代TABLE所節(jié)約的代碼又被CSS(樣式)所占用,而這些樣式大多用于控制DIV的排版布局。那你會說了,CSS可以放在外部重用啊,要想得到這個問題的答案請往下看。
重用性與下載量:
統(tǒng)一使用一個.css的樣式表文件,可以實現(xiàn)修改一次,全站修改的效果,這樣使得維護的成本更低。但是請大家換一個角度想,如果所有頁面在加載時都要訪問一個文件,那這個文件每天的下載量,特別時在搜狐、新浪的網(wǎng)站平臺上將達到幾億次,這就需要后面有很多臺前端web服務(wù)器在做支撐,那后臺的成本無形中也提高了很多。如果后臺支撐沒有做好,那么頁面就會出現(xiàn)花屏,之前所作的工作也是白費。很多人會問,這樣的幾率太小了。我們所作的工作就是為了避免這一兩次意外的發(fā)生,如果意外發(fā)生了,對于門戶后果將是不堪設(shè)想的。
HTTP通訊:
統(tǒng)一的樣式表文件采用外部調(diào)用的形式,這樣每次加載單個頁面都會多一次對服務(wù)器的http請求服務(wù)器都會增加一次響應(yīng),這樣對前端web服務(wù)器會是很大的消耗。而原來很長時間都是將css和js寫在頁面前端(大家可以看看sohu和sina的頁面,大多都是采用這樣的形式),而不是作為外部調(diào)用的形式,也是為了盡量避免給服務(wù)器增加消耗。
頁面緩存:
每次用戶訪問的頁面,都會在瀏覽器緩存中保存一定時間,以保證用戶下次再訪問該頁面時能夠大大提高頁面顯示速度。而每次修改都會使頁面重新下載,對于每個外部導(dǎo)入的樣式文件也是如此,如果CSS文件修改,那么訪問網(wǎng)站的每一個頁面都會重新下載,而以往的將樣式寫在頁面中的方式,只是修改的頁面需要重新下載。
兼容性:
對于CSS(樣式表)并不是所有瀏覽器的所有版本都支持的很好,比如IE5以前的瀏覽器對于CSS的支持就不是很好。而現(xiàn)在使用IE5以前版本瀏覽器的用戶不在少數(shù),這樣就使得在頁面制作的過程中需要針對不同瀏覽器版本進行測試,以保證兼容性,無形中也增加很多工作量(至少我接觸的開發(fā)人員制作div頁面比table頁面的標(biāo)準(zhǔn)時間要長一些)。
橫切與延展性:
橫切——傳統(tǒng)的布局方式為了使頁面下載的更快,把頁面自上而下分成若干個塊,但是往往采用DIV進行布局的頁面都會出現(xiàn)這樣的情況,由于每塊中間欄或者其他欄內(nèi)容條數(shù)不固定導(dǎo)致兩邊欄目沒有同時自適應(yīng),而出現(xiàn)留白。
原來的頁面:
而在出現(xiàn)內(nèi)容不固定的情況,頁面就會變成下面的樣子:
相比之下傳統(tǒng)的table方式更容易規(guī)避這樣情況的發(fā)生。
以上我們只是討論某一技術(shù)在某一領(lǐng)域的可用性,而非技術(shù)本身。
說了這么多并不是說DIV這種布局方式不好,而是說我們應(yīng)該正確的看待Table在以內(nèi)容為基礎(chǔ)的大型門戶中的作用,而不是人云亦云。之所以DIV的布局方式?jīng)]有在大型網(wǎng)站應(yīng)用,不是說門戶沒有用DIV是技術(shù)落后,是里面的人沒有前瞻性,而是多種原因決定的。網(wǎng)易之所以全部采用DIV的方式是因為內(nèi)容并不是他們主攻方向。而對于其他門戶來說,這樣的決策是要靠時間來驗證的。只是現(xiàn)在這個時機還不成熟而已。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2009-11-12 14:36:00] 視覺設(shè)計前瞻實用性研究(PNVD) 第一期
- [2007-12-21 11:09:00] 導(dǎo)航的流行趨勢
- [2010-03-10 21:35:00] 解構(gòu)用戶研究
- [2007-03-08 13:09:00] 越減越妙:簡單表格的再設(shè)計
- [2017-03-02 16:00:00] 網(wǎng)約車最新消息
- [2009-07-15 08:08:00] 更好地展示推薦商品
- [2007-06-08 13:57:00] Yahoo! China
- [2009-05-21 09:14:00] 電子商務(wù)網(wǎng)站的購物流程設(shè)計(簡述)
- [2010-01-11 21:46:00] 閑言碎語:體驗如何設(shè)計
- [2006-11-08 11:08:00] 如何有效進行網(wǎng)站的設(shè)計、管理和維護?
- [2005-12-28 13:29:00] 行業(yè)網(wǎng)站設(shè)計心得
- [2010-04-29 08:37:00] 一些與時間維度有關(guān)的產(chǎn)品設(shè)計
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
空白和簡潔的設(shè)計 輪胎網(wǎng)站設(shè)計 營銷型網(wǎng)站 網(wǎng)站SEO 網(wǎng)站視覺 網(wǎng)站動畫 集團性網(wǎng)站 營銷型網(wǎng)站建設(shè) 青島黃島、紅島網(wǎng)站建設(shè)公司 審美 網(wǎng)站優(yōu)化 青島做網(wǎng)站多少錢 網(wǎng)站推廣 營銷策略 H5 網(wǎng)站改版 html和css 建站常識 如何做網(wǎng)站優(yōu)化 企業(yè)網(wǎng)站為什么要備案 版面布局 響應(yīng)式設(shè)計 青島網(wǎng)站設(shè)計哪家好 青島高端網(wǎng)站設(shè)計公司哪家好 青島SEO H5定制設(shè)計 舒適的界面 青島網(wǎng)站制作 SEO優(yōu)化 網(wǎng)站建設(shè)的步驟有哪些