好用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….等等,也是一樣會有已畫好的網格,以便大家使用,甚下的大家研究研究。

1 則留言

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

留言功能已關閉。