CSS+DIV布局之道

以前用CSS+DIV做過兩個小項目，感覺並不是很通暢，覺得有必要在這方面補補課，最近又用CSS+DIV山寨了幾個介面，算是練手吧，現在思路清晰多了，和大家分享。

 

一、為什麼採用CSS+DIV布局？簡單談幾點？

首先，CSS+DIV布局對搜尋引擎友好，為什麼友好？是因為CSS+Div布局的代碼簡單，提高spider爬行效率，能在較短的時間內爬完整個頁面，這樣對收錄品質有好處。真正的網站最佳化不只是為了追求收錄，還需要良好的使用者體驗，代碼簡單自然會有良好的響應速度，對提高使用者體驗很有協助。

 

例如：結合CSS和XHTML來製作導覽功能表會比使用Javascript或圖片來實現同樣效果更加節省代碼(CSS可以結合一些圖片來製作導航而且代碼量很小，而完全使用圖片的導航代碼量也要多很多)，

另外如果儘可能完善到能通過W3C驗證，與普通表格組成頁面的網站相比，使用XTML架構的網站排名狀況要好。

 

其次，內容與樣式分離，修改設計效率高。到CSS裡找到相應的ID或class或標記修改屬性值即可，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的配置樣式。而且可以實現一鍵切換整個頁面風格。

 

還有視覺方面，以往表格嵌套的製作方法，使得頁面與頁面或者地區與地區之間的顯示效果會有所偏差；而使用DIV+CSS的製件方法，將所有的頁面或所有地區統一用CSS檔案控制，就避免了不同地區或不同頁面體現出的效果偏差。使用CSS來設計導覽功能表並不會限制你的設計。事實上，CSS會提供更加靈活的導航設計方案，當用CSS來設定背景圖時也能實現各種視覺效果。

 

二、採用CSS+DIV布局，從何做起。

 

當你從美工那裡（如果沒有美工，我們後面談）拿到一個頁面的草圖，準備用CSS+DIV實現這個頁面，那麼一般要經過這麼三個步驟：

分析構架，模組拆分，整體調整。

 

第一步、分析構架

 

例如，分析下面這個頁面

我們應該把他的內容忽略掉，直接提取出這個頁面的骨架，也就是這個頁面的排版構架。見。

其他常用的布局，大概也就是下面這幾個，你就從網上看吧，大概都差不多，無非就這麼幾塊倒來倒去。

第二步，模組拆分

 

這裡主要是分析架構中都有哪幾部分，也就是考慮這個頁面由哪些元素構成。方便我們實施DIV分塊。

 

從，我們也很容易看出，這個頁面主要有四個部分：導航和頂端banner，左側列表，內容區，腳註（草圖中省去了，太長了）

 

Div分塊結束後，然後再針對內容加入CSS樣式。

 

第三步，整體調整

這裡無非就是對於整個頁面邊邊角角的把握。一些收尾工作吧。

 

 

三、一些小建議，也是用CSS+DIV做頁面的一點心得。

 

1、如果沒有美工給你提供介面的草圖。個人又沒有沒學基礎，或者缺少靈感，建議，從網上找一個差不多的介面，實行高仿（或者找一個免費的模板），當然不要總是對一個介面下手（小心侵權）。這樣效率高，頁面效果也不會太差，太差得你也看不上是吧。或者，你不想從頭設計頁面的某個部分，例如導覽功能表，那麼有大量的免費資源可以拿來使用。

 

拿來主義雖好，但我可不提倡，因為這樣會和其它網站使用同樣的風格。不過有一些菜單可以自訂樣式來符合你自己的網站風格。

 

2、如果要做全瀏覽器安全色網站，那麼一定要邊開發，邊檢查瀏覽器安全色，為什嗎？如果你在一個瀏覽器上開發完一個介面，甚至所有介面，那麼忽然換一個瀏覽器測試，出了問題，如果小問題還好，如果是位置等一些問題，你會發現，它會打亂你整個頁面的布局，等於你又要從頭開始檢查，一點點改過來，我試過，麻煩得要死。

 

沒辦法，這是CSS現在最主要的缺點：並非所有的CSS元素與所有的瀏覽器安全色。正因為如此，我們必須寫一些自訂CSS來解決問題。這也是它與table布局的主要區別之一。

 

3、Firefox和Google提供的開發人員工具，例如firebug等，一定要會使，無論是研究別人的頁面，還是維護自己的頁面，都會為你的開發帶來事半功倍的效果。

 

4、做好積累工作，在開發過程中用到的小技巧，特效或者處理一些瀏覽器安全色的方法，一定要記錄下來，積極分享，於人於己都有好處。

 

5、要使你的頁面儘可能的輕，能用小圖，不用大圖，能用小圖repeat-x，絕對不要用一整張大圖。至於精簡代碼的好處，前面已經提到。