如何利用柵格快速搭建網頁結構
時間：2023-09-27 20:48:01 | 來源：網站運營
時間：2023-09-27 20:48:01 來源：網站運營
如何利用柵格快速搭建網頁結構：在我們平常做網頁設計，最常用得到的就是柵格系統(tǒng)，說到柵格系統(tǒng)，
什么是柵格系統(tǒng)？
柵格系統(tǒng)英文為“grid systems”，也有人翻譯為“網格系統(tǒng)”，運用固定的格子設計版面布局，其風格工整簡潔，在二戰(zhàn)后大受歡迎，已成為今日出版物設計的主流風格之一。
柵格系統(tǒng)的設計原理及應用
那么如何設計一個柵格系統(tǒng)？接下來我們將通過實例，詳細的介紹一下網頁柵格系統(tǒng)的原理與應用：
在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：
(A×n) – i = W[1]柵格系統(tǒng)的使用步驟
- 確定內容的總寬度W（常用的1180px、1190px、1200px、1400px）
- 確定柵格數目n（如果你的網頁結構相對簡單，則n=12即可，如果網頁結構比較復雜或者具有排版的不確定性，則用n=24。）
- 確定水槽的寬度i（水槽寬度常用的6、8、10、15、20px）
- 在sketch/ps里設置上面的參數即可得到一套柵格系統(tǒng)
柵格在Sketch軟件如何快速搭建：
在工具欄——右側——顯示——布局設置：
這樣就可以快速繪制好我們想要固定安全尺寸，也就是我們常說的版心。
柵格在PS軟件如何快速搭建：
在PS菜單欄——視圖——新建參考線版面
Ω
可以用（總尺寸——版心尺寸）/2 就是左右二邊的尺寸，這樣中間版心就算出來了。
以上是如何利用格柵快速搭建網頁結構 ，如有問題，可以私聊我。
在線咨詢
