布局用CSS+DIV的優(yōu)點(diǎn)總結(jié)
更新時(shí)間:2007年08月23日 17:39:41 作者:
采用CSS+DIV對(duì)網(wǎng)站重構(gòu)日趨被大家重視起來(lái)了,尤其是大型站點(diǎn),像阿里巴巴、163等大型門戶站點(diǎn)就已經(jīng)完成了重構(gòu)工作。本人在去年就已經(jīng)有了使用CSS+DIV來(lái)編寫網(wǎng)頁(yè)源碼的習(xí)慣了,個(gè)人感覺(jué)這種方法確實(shí)比傳統(tǒng)的TABLE形式的源碼架構(gòu)強(qiáng)多了。
1:表現(xiàn)和內(nèi)容相分離
將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中,HTML文件中只存放文本信息。
2:提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率
用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽,搜索引擎將更有效地搜索到你的網(wǎng)頁(yè)內(nèi)容,并可能給你一個(gè)較高的評(píng)價(jià)。
3:提高頁(yè)面瀏覽速度
對(duì)于同一個(gè)頁(yè)面視覺(jué)效果,采用CSS+DIV重構(gòu)的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多,前者一般只有后者的1/2大小。
還有因?yàn)?lt;table>標(biāo)簽是要等</table>下載好以后才可以顯示的,所以整個(gè)網(wǎng)頁(yè)是一下子跳出來(lái)的,這樣讓人感覺(jué)起來(lái)顯示速度非常的慢。而使用css+div,<div> 標(biāo)簽不用等</div>下載好就可以顯示里面的內(nèi)容的,所以讓人感覺(jué)打開網(wǎng)頁(yè)的速度非常之快。
4:易于維護(hù)和改版
你只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面。
從以上的描述來(lái)看,采用CSS+DIV對(duì)網(wǎng)站重構(gòu)可以大大提升網(wǎng)站用戶與搜索引擎的友好度。
CSS+DIV所以成為目前網(wǎng)頁(yè)布局主流,在我看主要核心原因,其實(shí)不僅僅是其符合W3C標(biāo)準(zhǔn),而是通過(guò)采用CSS+DIV,網(wǎng)頁(yè)工程從此:
表現(xiàn)與內(nèi)容分離
現(xiàn)在div+css已經(jīng)很風(fēng)靡了,各大網(wǎng)站都紛紛重構(gòu)為div+css模式,網(wǎng)易就是最好的例子,采用層和CSS后,給用戶最直觀的體驗(yàn)就是網(wǎng)頁(yè)打開速度快了很多。能給用戶好的體驗(yàn),為什么不做呢?
今天我主要從SEO的角度來(lái)分析用DIV+CSS進(jìn)行網(wǎng)站制作或重構(gòu)的必要性:
1、用div+css構(gòu)架的網(wǎng)站容易向W3C 標(biāo)準(zhǔn)靠攏,網(wǎng)站是否符合W3C標(biāo)準(zhǔn)是搜索引擎給網(wǎng)頁(yè)排名的一個(gè)影響因素,特別是YAHOO,它看的比較重。
2、網(wǎng)站源代碼簡(jiǎn)潔,除了幾個(gè)div,ul,li,dl,dd,dt之類的標(biāo)簽外,幾乎不用其他標(biāo)簽,這樣,是網(wǎng)站內(nèi)容完全裸露在搜索引擎的蜘蛛面前,便于抓取關(guān)鍵內(nèi)容,增大關(guān)鍵內(nèi)容的頁(yè)面的比重,從而為排名因素增加比重。
3、可輕松做到關(guān)鍵內(nèi)容先被蜘蛛讀取。一般的站點(diǎn)都是左中右三欄式,頁(yè)面的主要內(nèi)容是在中間一欄,而蜘蛛讀取頁(yè)面內(nèi)容是按照從上而下,從左至右的順序進(jìn)行的,如果你的左欄內(nèi)容比較多,那就麻煩了,你的頁(yè)面主要內(nèi)容權(quán)值就會(huì)下降。而用div+css就可以把主要先寫在前面,在寫左欄,右欄內(nèi)容,然后通過(guò)CSS一定位就可以了
4、方便調(diào)整網(wǎng)站結(jié)構(gòu)布局。對(duì)于常用的表格布局,若想改下布局,可謂牽一發(fā)而動(dòng)全身,網(wǎng)站層結(jié)構(gòu)如果設(shè)計(jì)的合理,可以用CSS很輕松的改變網(wǎng)站的表現(xiàn),這就是結(jié)構(gòu)和內(nèi)容,行為的分離。如果網(wǎng)站結(jié)構(gòu)定期改動(dòng),自然對(duì)搜索引擎的蜘蛛吸引力不小的。
一個(gè)用層和css做好根基的網(wǎng)站,以后的優(yōu)化工作自然會(huì)省力不少的。
1:表現(xiàn)和內(nèi)容相分離
將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中,HTML文件中只存放文本信息。
2:提高搜索引擎對(duì)網(wǎng)頁(yè)的索引效率
用只包含結(jié)構(gòu)化內(nèi)容的HTML代替嵌套的標(biāo)簽,搜索引擎將更有效地搜索到你的網(wǎng)頁(yè)內(nèi)容,并可能給你一個(gè)較高的評(píng)價(jià)。
3:提高頁(yè)面瀏覽速度
對(duì)于同一個(gè)頁(yè)面視覺(jué)效果,采用CSS+DIV重構(gòu)的頁(yè)面容量要比TABLE編碼的頁(yè)面文件容量小得多,前者一般只有后者的1/2大小。
還有因?yàn)?lt;table>標(biāo)簽是要等</table>下載好以后才可以顯示的,所以整個(gè)網(wǎng)頁(yè)是一下子跳出來(lái)的,這樣讓人感覺(jué)起來(lái)顯示速度非常的慢。而使用css+div,<div> 標(biāo)簽不用等</div>下載好就可以顯示里面的內(nèi)容的,所以讓人感覺(jué)打開網(wǎng)頁(yè)的速度非常之快。
4:易于維護(hù)和改版
你只要簡(jiǎn)單的修改幾個(gè)CSS文件就可以重新設(shè)計(jì)整個(gè)網(wǎng)站的頁(yè)面。
從以上的描述來(lái)看,采用CSS+DIV對(duì)網(wǎng)站重構(gòu)可以大大提升網(wǎng)站用戶與搜索引擎的友好度。
CSS+DIV所以成為目前網(wǎng)頁(yè)布局主流,在我看主要核心原因,其實(shí)不僅僅是其符合W3C標(biāo)準(zhǔn),而是通過(guò)采用CSS+DIV,網(wǎng)頁(yè)工程從此:
表現(xiàn)與內(nèi)容分離
現(xiàn)在div+css已經(jīng)很風(fēng)靡了,各大網(wǎng)站都紛紛重構(gòu)為div+css模式,網(wǎng)易就是最好的例子,采用層和CSS后,給用戶最直觀的體驗(yàn)就是網(wǎng)頁(yè)打開速度快了很多。能給用戶好的體驗(yàn),為什么不做呢?
今天我主要從SEO的角度來(lái)分析用DIV+CSS進(jìn)行網(wǎng)站制作或重構(gòu)的必要性:
1、用div+css構(gòu)架的網(wǎng)站容易向W3C 標(biāo)準(zhǔn)靠攏,網(wǎng)站是否符合W3C標(biāo)準(zhǔn)是搜索引擎給網(wǎng)頁(yè)排名的一個(gè)影響因素,特別是YAHOO,它看的比較重。
2、網(wǎng)站源代碼簡(jiǎn)潔,除了幾個(gè)div,ul,li,dl,dd,dt之類的標(biāo)簽外,幾乎不用其他標(biāo)簽,這樣,是網(wǎng)站內(nèi)容完全裸露在搜索引擎的蜘蛛面前,便于抓取關(guān)鍵內(nèi)容,增大關(guān)鍵內(nèi)容的頁(yè)面的比重,從而為排名因素增加比重。
3、可輕松做到關(guān)鍵內(nèi)容先被蜘蛛讀取。一般的站點(diǎn)都是左中右三欄式,頁(yè)面的主要內(nèi)容是在中間一欄,而蜘蛛讀取頁(yè)面內(nèi)容是按照從上而下,從左至右的順序進(jìn)行的,如果你的左欄內(nèi)容比較多,那就麻煩了,你的頁(yè)面主要內(nèi)容權(quán)值就會(huì)下降。而用div+css就可以把主要先寫在前面,在寫左欄,右欄內(nèi)容,然后通過(guò)CSS一定位就可以了
4、方便調(diào)整網(wǎng)站結(jié)構(gòu)布局。對(duì)于常用的表格布局,若想改下布局,可謂牽一發(fā)而動(dòng)全身,網(wǎng)站層結(jié)構(gòu)如果設(shè)計(jì)的合理,可以用CSS很輕松的改變網(wǎng)站的表現(xiàn),這就是結(jié)構(gòu)和內(nèi)容,行為的分離。如果網(wǎng)站結(jié)構(gòu)定期改動(dòng),自然對(duì)搜索引擎的蜘蛛吸引力不小的。
一個(gè)用層和css做好根基的網(wǎng)站,以后的優(yōu)化工作自然會(huì)省力不少的。
相關(guān)文章
Zen Coding 快速編寫HTML/CSS代碼的實(shí)現(xiàn)
在本文中我們將展示一種新的使用仿CSS選擇器的語(yǔ)法來(lái)快速開發(fā)HTML和CSS的方法。它由Sergey Chikuyonok開發(fā)。2011-01-01網(wǎng)頁(yè)綠色系配色應(yīng)用實(shí)例圖文
綠色在黃色和藍(lán)色(冷暖)之間,屬于較中庸的顏色,這樣使得綠色的性格最為平和、安穩(wěn)、大度、寬容。是一種柔順、恬靜、滿足、優(yōu)美、受歡迎之色。也是網(wǎng)頁(yè)中使用最為廣泛的顏色之一。2008-08-08firefox css自動(dòng)換行的實(shí)現(xiàn)方法
越發(fā)感覺(jué)網(wǎng)頁(yè)設(shè)計(jì)人員的辛苦,就一個(gè)自動(dòng)換行,2008-08-08網(wǎng)頁(yè)打開新窗口target=_blank不符合標(biāo)準(zhǔn)
我們要在新窗口中打開鏈接通常的做法是在鏈接后面加target="_blank",我們采用過(guò)渡型的DOCTYPE(xh tml1-transitional. dtd)時(shí)沒(méi)有問(wèn)題,但是當(dāng)我們使用嚴(yán)格的DOCTYPE(xhtml1-strict.dtd)時(shí),這個(gè)方法將通不過(guò)W3C的校驗(yàn),會(huì)出現(xiàn)如下錯(cuò)誤提示:2008-05-05DIV+CSS作網(wǎng)頁(yè)容易犯的錯(cuò)誤小結(jié)
DIV+CSS作網(wǎng)頁(yè)容易犯的錯(cuò)誤小結(jié)...2007-11-11關(guān)于《精通css》之幾個(gè)不錯(cuò)的注意事項(xiàng)
這篇文章主要介紹了關(guān)于《精通css》之幾個(gè)不錯(cuò)的注意事項(xiàng),需要的朋友可以參考下2007-03-03多中語(yǔ)言實(shí)現(xiàn)判斷客戶訪問(wèn)用得是那個(gè)域名 然后轉(zhuǎn)到對(duì)應(yīng)的目錄
多中語(yǔ)言實(shí)現(xiàn)判斷客戶訪問(wèn)用得是那個(gè)域名 然后轉(zhuǎn)到對(duì)應(yīng)的目錄...2007-05-05