網站前端設計，從960框架開始

一個網站進入到前端設計階段，第一步肯定是為全站搭建一個統一的，基礎的HTML模型，在這里推薦一下我剛學習的960框架。
960是一個CSS框架，你肯定在想，這個世界肯定是瘋了，連CSS都有框架了嗎，沒錯，有，而且不止一個，960CSS是一個輕量級的布局框架，此外還有很多，諸如ElementsCSS ,Blueprint等等，對其他CSS框架感興趣的朋友請看這篇文章。
首先了解一下在軟件開發領域，什么叫框架。在代碼界，框架的定義是：一種能夠為你的項目的整體或局部功能提供統一代碼組織的結構，并且這種結構是符合大眾標準的，能夠提高開發效率，提高產品質量，方便項目移植的。
960CSS正是這樣一種輕巧的組織結構，這套框架將頁面定義成一個960像素寬度的一個容器，將容器分成12或者16列，每列的寬度由框架計算，用戶只需關心自己頁面上每個子容器的大概占比即可。960是一個優美的定義，無論是twitter還是facebook，不管是個人博客還是企業展示型網站，它們的前端設計都是使用的960網格模型，也就是頁面容器的寬度都是960像素。經過實驗，960像素的寬度也確實是比較適合現代屏幕閱讀的。到官網上將ZIP下載回來便可以直接使用，壓縮包里有幾個CSS文件就是這個框架的核心了。

首先在HTML里引入960.css（如果你將你的頁面定義成12列，你也可以只引入960_12_col.css）然后就開始編寫基礎的HTML的布局結構了。

<div class="container_12"><h2>12 Column Grid</h2><div class="grid_12"><p>一整排空間，比較適合做導航條</p></div><div class="clear"></div><div class="grid_1"><p>側邊欄</p></div><div class="grid_11"><p>主容器</p></div></div>

根據960CSS的規范，上面這段HTML將頁面定義成12列，首先出現了一行12列滿空間的DIV，然后在下面出現了一個1列的DIV，與其并排布置了一個11列的DIV。從代碼規范來看，整個容器是一個以container_12命名的DIV，在這個容器里，以grid_1到grid_12定義了一系列CSS類，用戶只需要估算好自己每個容器所占比例就好。按照這種方式布局的網站，組織結構清晰，布局優美規范，正統嚴謹，保證了頁面上下每個子容器的邊框能夠對齊，不錯位。
有朋友會說，如果這樣定義HTML會顯得毫無條理，以前每個DIV的class都有明確的含義，比如nav或者footer之類的字眼，現在用container和grid來為class命名會導致代碼無意義。其實我們更應該學會利用CSS的多屬性來寫HTML，W3C允許也提倡我們為標簽定義多個class類，最主要的好處就是能夠降低代碼重復率，提高瀏覽器解析效率，在960CSS的基礎上，我們完全可以為不同的子容器繼續定義更加個性化的CSS樣式，并為其命名，不過要注意的是，自定義的容器樣式不要出現有關寬度和邊距的定義，以免破換960框架為我們設計好的頁面布局。