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

最後修改日期: 2019 年 2 月 21 日

作者

留言

留言功能已關閉。