好用960網格系統以PS為例

960 grid system

大家因在規劃網頁版面的時候，常常會在算這個欄位寬要多少，那個欄位寬要算多少，我的網頁全寬要設定多少，是要800X600還是要算1024X768，很傷腦筋吧，就算設好，後面要切板時又要為那不是整數的寬加加減減。來用960網格系統吧。在規劃版面時可以省去算寬的麻煩，為啥要用960為網頁的全寬哩 ，因為960 這個數字可被多個數字整除，所以可以規劃出不同的版面，後面要用CSS去切板時也比較方便 ，960 grid system有提供12-column、16-column、24-column的分割，大家可以參考看看。

進入官網網頁下載網頁左邊的Download，下載下來的檔案解開後裡面有一個，templates資料夾，裡面有 Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp Design以分割好的檔案，已Photoshop為例看下圖。

 

grid12

 

 

grid16

 

 

grid24

 

下圖外國網頁是用960 grid system所做的網頁版型。

各位會發現上方網頁的各部分區塊，都會剛好對其分割線。960 grid system所提供的檔案，如Illustrater、Flash、Fireworks….等等，也是一樣會有已畫好的網格，以便大家使用，甚下的大家研究研究。

相關文章:

960 Grid System(網格系統) for Dreamweaver外部擴充 快速製作網頁版面免費好工具，UI、響應、網格、樣式、主題整理介紹 Reset CSS bootstrap Grid System for Dreamweaver外部擴充

1 則留言

  1. […] 960 Gird System在之前有簡單介紹過用於Photoshop的使用(可以到這裡)，也可以加快製作html網頁版型的好工具，雖然網格已把尺寸設好，但要記主每個尺寸與號碼的關係就要習慣一段時間才會熟練，在找資料時無意間找到，DW(Dreamweaver)的外部擴充，才知到有人專門寫了960Grid的外部擴充，也馬上是試了一下，對於要走960 Gird System作網頁的人來說是非常不錯用的好工具，下面就開始為大家介紹。 […]

留言功能已關閉。