幾年前DIV+CSS開始逐漸成為網頁設計的首選方式,目前來看,DIV+CSS已成為網頁設計的標準,國內非常多的網站在這幾年已完成了從TABLE到DIV+CSS的重構。筆者也是偏好這種方式的網頁設計師,工作3年來一直採用div+css方式為客戶提供設計。那麼比起TABLE,它具有哪些優勢呢?以下談談個人幾點體會和認識,希望對同儕和相關人員有幫助。
網頁設計採用DIV+CSS,最大的優勢是實現網頁程式碼的標準化,摒棄過時的表格版面方式,實現了內容、表現和行為這3者間的分離,html程式碼結構性更好,閱讀和維護更容易,同時網頁檔案大小也更小。例如最近給一個客戶的網站重構後,網頁檔案大小不到原來的一半,因此佔用更少的網站空間,網站開啟速度也更快。
DIV+CSS與TABLE方式在設計時差異很大,網頁開始設計前需要仔細規劃,例如對組成網頁的各部分元素命名,方便在css中進行樣式定義,公共屬性部分最好用類名定義。整個網站通用的樣式可以放到單獨的一個css檔案中,常有的公共屬性有:網頁寬度、背景顏色、背景圖片、字體預設大小、顏色、連結樣式等,每個網頁不同的樣式在css文件中最好集中一塊,並在區塊前說明是哪個網頁或哪個網頁部分,這樣既精簡css檔案大小,又避免出現混亂,對維護也更方便。值得一提的是,網頁程式碼中不要嵌入樣式,徹底實現內容和樣式的分離。
做好DIV+CSS的網頁設計,個人決得有三點需要重點理解。
1.float屬性:DIV(層)預設是佔據一整行,對於常見的兩列或多列佈局的設計,需要能夠正確設定float及width屬性實現效果。多列佈局結束後如果跟了一個佔據通欄的層,此時需要設定clear屬性清除層浮動。
2.盒子模式:層具有寬度width、高度height、邊框border、內間距padding和外間距margin等屬性,而層實際佔據的空間是上述屬性值相加的大小,合理運用這些屬性能實現緊湊而又美觀的網頁版面。
3.層嵌套:有經驗的網頁設計師都知道層不宜嵌套過多,一般不超過3層,嵌套過多的會導致程式碼複雜冗餘、維護困難及運行慢的問題。另外,在多列佈局時完全可以用層浮動實現,不需要整體設定一個ie層來嵌入。
單獨提下瀏覽器相容的話題。 DIV+CSS相比TABLE佈局,更容易出現多種瀏覽器不相容的問題,主要原因是不同的瀏覽器對web標準預設值不同。國內主流是ie,Firefox及Chrome用的較少,在相容性測試方面,首先需要保證在ie多版本不出現問題,這裡設計到一些方法和技巧,可以針對具體問題在網站找到解決辦法。
總結:DIV+CSS相比TABLE有根多的優勢,網頁設計師應該及早拋棄TABLE方式,這樣更有利於督促自己深入學習DIV+CSS知識。學習並使用DIV+CSS的網頁設計方式並不難,只要了解一些基礎知識,然後多做幾個案例就能逐漸理解掌握。
本文由http://www.swjns.com站長[嬉皮]發表,轉載請保留網址。
感謝hbjsp 的投稿