布局用CSS+DIV的優點總結_經驗交流
來源:互聯網
上載者:User
採用CSS+DIV對網站重構日趨被大家重視起來了,尤其是大型網站,像阿里巴巴、163等大型門戶網站就已經完成了重構工作。本人在去年就已經有了使用CSS+DIV來編寫網頁源碼的習慣了,個人感覺這種方法確實比傳統的TABLE形式的源碼架構強多了。
1:表現和內容相分離
將設計部分剝離出來放在一個獨立樣式檔案中,HTML檔案中只存放文本資訊。
2:提高搜尋引擎對網頁的索引效率
用只包含結構化內容的HTML代替嵌套的標籤,搜尋引擎將更有效地搜尋到你的網頁內容,並可能給你一個較高的評價。
3:提高頁面瀏覽速度
對於同一個頁面視覺效果,採用CSS+DIV重構的頁面容量要比TABLE編碼的分頁檔容量小得多,前者一般只有後者的1/2大小。
還有因為<table>標籤是要等</table>下載好以後才可以顯示的,所以整個網頁是一下子跳出來的,這樣讓人感覺起來顯示速度非常的慢。而使用css+div,<div> 標籤不用等</div>下載好就可以顯示裡面的內容的,所以讓人感覺開啟網頁的速度非常之快。
4:易於維護和改版
你只要簡單的修改幾個CSS檔案就可以重新設計整個網站的頁面。
從以上的描述來看,採用CSS+DIV對網站重構可以大大提升網站使用者與搜尋引擎的友好度。
CSS+DIV所以成為目前網頁布局主流,在我看主要核心原因,其實不僅僅是其符合W3C標準,而是通過採用CSS+DIV,網頁工程從此:
表現與內容分離
現在div+css已經很風靡了,各大網站都紛紛重構為div+css模式,網易就是最好的例子,採用層和CSS後,給使用者最直觀的體驗就是網頁開啟速度快了很多。能給使用者好的體驗,為什麼不做呢?
今天我主要從SEO的角度來分析用DIV+CSS進行網站製作或重構的必要性:
1、用div+css構架的網站容易向W3C 標準靠攏,網站是否符合W3C標準是搜尋引擎給網頁排名的一個影響因素,特別是YAHOO,它看的比較重。
2、網站原始碼簡潔,除了幾個div,ul,li,dl,dd,dt之類的標籤外,幾乎不用其他標籤,這樣,是網站內容完全裸露在搜尋引擎的蜘蛛面前,便於抓取關鍵內容,增大關鍵內容的頁面的比重,從而為排名因素增加比重。
3、可輕鬆做到關鍵內容先被蜘蛛讀取。一般的網站都是左中右三欄式,頁面的主要內容是在中間一欄,而蜘蛛讀取頁面內容是按照從上而下,從左至右的順序進行的,如果你的左欄內容比較多,那就麻煩了,你的頁面主要內容權值就會下降。而用div+css就可以把主要先寫在前面,在寫左欄,右欄內容,然後通過CSS一定位就可以了
4、方便調整網站結構布局。對於常用的表格版面配置,若想改下布局,可謂牽一髮而動全身,網站層結構如果設計的合理,可以用CSS很輕鬆的改變網站的表現,這就是結構和內容,行為的分離。如果網站結構定期改動,自然對搜尋引擎的蜘蛛吸引力不小的。
一個用層和css做好根基的網站,以後的最佳化工作自然會省力不少的。