網格設計呢，通常顯得很整齊規范，有時看上去也比較專業。但網格設計相對來說也是比較復雜的，往往需要精準的測量和欄目劃分。960 grid system/960網格系統，這是一套可以讓你快速創建網格設計的工具，之所以叫960，就是說模板的寬度是960像素。而之所以用960像素來做為標 準，是因為960像素寬具有高度的靈活性。今天我們就來教大家制作一個960 grid system的網頁模板。（960 grid system官方網站：http://960.gs/）

　　960 grid system的特性是將960像素的網頁分為12列的布局和16列布局。12列布局將總寬分成12份，每份的寬度是60px，而16列的布局分成16份，每份的寬度是40px，每部分左右邊距都是10px，從而每列產生20px的空隙。

　　先看最終效果圖

最終效果圖

　　按照960 grid system的定義，我們找一張960像素，12等份，每部分左右邊距都是10px。這里縮小了圖片，大家做的時候按照960像素去切割，去960 grid system官方網站可以下載布局好的素材。（參見"960 grid system"的官方網站介紹。）

模版素材

　　新建圖層，大小為填充中間的10等份，并與左右剩余的兩個“等份”相距5像素。填充為為黑色。

填充中間的10等份

　　接著新建一個圖層，為左右各添加白到黑色的漸變色，效果如下：

添加漸變色

|||

　　刪除中間的黑色圖層。

刪除黑色圖層

　　接下來把中間的十等份全部刪除吧。當然，你可以隱藏中間的十等份，下面的操作可以參考這十等份來調節位置。

隱藏中間的部分

　　添加一條豎立的虛線，在網頁制作的時候，這條虛線可以使用dashed border來制作，這里只是用ps來做效果而已。

制作虛線

　　完成文字和導航，導航的位置這里可以參考之前“十等份布局”的大約位置來布局。

文字和導航

|||

　　為了使讀者知道在第幾頁，我們把當前標簽換一個顏色。

更換當前標簽顏色

　　添加rss閱讀標簽的圖片。

rss閱讀的標識

|||

　　插入頭圖、文字

頭圖和文字

添加文字口號

欄目內容

|||

　　好下面我們來對應一下十等份的位置！

用基線確定位置

　　底色并復制

復制圖層

|||

　右側添加75*75像素的圖片

添加小圖

　　我們再給這些圖片加上一個像素天藍色邊框，在網頁切割時候我們可以直接寫css就可以了。

添加圖片邊框

初步效果

|||

　　加上其他文字，我們自己做960 grid system就完成了！

添加其它文字，完成

　　本實例其實制作起來非常簡單，主要是根據960 grid system的布局，把握好每一個元素的定位。