元伸網頁設計公司,十年網頁設計經驗
提供各式專業的客製化網站設計服務。
包含網頁設計、程式設計、網站優化。
Knowledge
資訊分享網站建置程式設計 DIV+CSS 網頁設計佈局的優點與影響

DIV+CSS 網頁設計佈局的優點與影響

CSS+DIV 進行網頁重構相對與傳統的TABLE網頁佈局而具有以下四個顯著優勢:

1. 網頁設計和網站內容可以做分離

將設計部分做區隔出來放在一個獨立樣式(CSS)文件中,HTML 文件中只存放網站內容。

2. 提高搜尋引擎對網頁的索引效率

用只包含結構化內容的 HTML 代替嵌套的標簽,搜尋引擎將更有效地搜尋到你的網頁內容。

3. 提高頁面瀏覽速度

對於同一個頁面視覺效果,採用 CSS+DIV 重構的頁面容量要比 TABLE 編碼的頁面語法少太多了,前者一般只有後者的一半大小。

4. 容易維護和改版

簡單的修改幾個 CSS 文件就可以重新設計整個網站的頁面。

 

從以上的描述來看,採用 CSS+DIV 對製作網站可以提升網站用戶與搜尋引擎的友好度。CSS+DIV 所以成為目前網頁設計主流,主要核心原因,其實不僅僅是其符合 W3C 標準,而是通過採用 CSS+DIV,網頁程式也比較好操作,已經把設計與程式分離了。現在 DIV+CSS 已經很風靡了,各大網站都重新製作成 DIV+CSS 模式,採用 DIV層和 CSS 後,網頁打開速度快了很多。

 

從 SEO 的角度來分析,用 DIV+CSS 進行網站建構必要性:

  • 用 DIV+CSS 構架的網站,容易符合 W3C 標準。網站是否符合 W3C 標準,是搜尋引擎給網頁排名的一個影響因素,特別是 YAHOO,它看的比較重。
  • 網站原始碼變簡單了,除了幾個 div,ul,li,dl,dd,dt 之類的標籤外,幾乎不用其他標籤,網站內容完全裸露在關鍵字搜尋引擎面前,便於抓取網頁關鍵內容,加強關鍵內容的頁面的比重,從而為排名因素增加比重。
  • 關鍵字更容易閱讀到了。一般的網站都是左中右三欄式,頁面的主要內容是在中間一欄,而關鍵字搜尋頁面內容是按照從上而下,從左至右的順序進行的,如果你的左欄內容比較多,內容的關鍵字搜尋就會下降。而用 DIV+CSS 就可以把主要內容先寫在前面,再寫左欄,右欄內容,通過 CSS 定位就可以了。
  • 對於常用的表格佈局,如果想改佈局,可能就要動到全部,網站層結構如果設計的合理,可以用 CSS 很輕鬆的改變網站的表現,這就是結構和內容,行為的分離。 如果網站結構定期改動,自然對關鍵字搜尋的影響力也不小。

 

CSS+DIV 的架構作好,之後在網路優化 (SEO) 的層面就會比較輕鬆了。