960 Grid System 是一個頗受注視的 css framework，可讓網頁設計人員利用一套設定好的 css，製作以 grid 排版的網頁，grid system 在平面設計上有很長的歷史，網頁上使用 gs 則在近幾年才流行，其實這也反映了人們閱讀網頁習慣的改變，由什麼也愛看，演變到要快速到找到想看的東西，gs 的規律性質比早期網頁的 free style 有明顯的優勢。
為什麼這套 css framework 叫 960？原因是其寬度是 960 pixels，為什麼要 960？因 960 很接近 1024，而最多人用 1024 x 768 pixels 來瀏覽網頁，雖然現在很多人都用 16:10 或 16:9 的 LCD，不過用 wide screen 也不一定會用整個螢幕開啟瀏覽器。另一方面，960 這個數字可被多個數字整除，換句話說，如果以 960 pixels 為基礎，可創製出多個不同的 grid size。
960 Grid System 提供了 12-column 和 16-column 兩個選擇，12-column 表示 grid size 為 60 pixels，另外左右 2 邊有 10 pixels 的邊界，而 16-column 的 grid size 為 40 pixels，另加左右 10 pixels 邊界。其實正如前述，960 可被多個數字整除，因此理論上你可自行製作一個 24-column，grid size 為 30 pixels 左右 2 邊 5 pixels 的一個 template。
作者認為 960 Grid System 也很適合用作設計初稿時使用，因此在下載的檔案中，提供了 photoshop、fireworks、visio 的 template，如果你習慣先利用繪圖軟件設計網頁，可參看 Photoshop Tutorials 網站的教學。容許我說幾句題外話，以上的教學被某網站翻譯成中文後，被多個國內網站「轉載」，全都沒有連去原創網站，可見為國內網站攪 SEO，製作原創內容希望做成 link baiting，談何容易呢！
我會為大家示範利用 960 Grid System，製作如下一個常見的網站主頁：
（可按上圖看示範網頁）
我不會詳細每一個步驟，因為大家可先去 net tut+ 看視頻教學。 視頻中你會發現這個 css framework 相當容易使用。下一次我會和大家分享使用心得和技巧。
留言
寫下留言