使用 960 Grid System 製作網頁示範（下）

有關 960 Grid System 的簡介可讀上半部。

本示範以 12-column 的 grid 製作，12-column 即表示每一行的寬度為 60 pixels，左右兩邊各有 10 pixels 的邊界。我先根據附上的圖檔作初步的規劃，把網頁上各部分內容佔據頁面的行數固定。

一個佔據版面 3 行的元素，例如 side bar 究竟的寬度是多少呢？只要把 80 x 3，減去左右 10 pixels 的邊界就是答案 (220 pixels)。有一點要注意，就算一個元素佔 12 格 (即 class grid_12)，其寬度也只是 940 pixels，而其 parent container div 才是 960 pixels，如果把背景設在 container div，可避免 container 和內部元素的背景圖連在一起，比較美觀，例如示範網頁中，主要內容的白色背景就是用上述方式設置，令其不會和包含在內的部分連在一起。當完成了規劃及製作了背景圖，就可以動手編碼。

大家可參看示範網頁的編碼，詳細使用方法請參看前文內的教學連結。

用 960 GS 另一個要注意的地方，是不可再設置 grid 和 container 的左右 margin 和 padding (上下的沒有問題)，否則會破壞了整個系統的結構。但在製作網頁時，往往希望內文不要和背景圖貼在一起，解決的方法是在 div 內再加多一個 div tag，為其加上 padding size，這可是一個較麻煩的地方。不過整體而言，使用起來也算容易，個人認為比使用現成的 css template 有更高靈活性。

960 Grid System 的限制

• 這 css framework 只處理網頁的排版，因此使用者仍需要懂得使用 css ，設置網頁的外觀，而且要懂得何時需要用 clear float
• 960 pixels 的寬度不能更改，如果你希望自設網頁的寬度，這 framework 不合用
• 960 GS 看似較為工整，限制了設計的變化，不過若不在網頁的每部分都設背景圖，則一格格的外觀不會很明顯，而且本示範也沒有使用界圖的方法製作背景。不過始終使用時有一些規律要遵守，例如邊界和格的寬度就不建議作出太大的調整，否則不如不用。

Sitepoint 的文章 What’s So Bad About CSS Frameworks? 討論了使用 css framework 的壞處，讀者可先去看看，再決定是否用 framework 製作網頁。