一、網(wǎng)格的作用
1唱星、網(wǎng)格以解決問(wèn)題為首要任務(wù)雳旅，美觀在其次。
2间聊、網(wǎng)格是用戶體驗(yàn)的組成部分攒盈。
3、網(wǎng)格越簡(jiǎn)單哎榴，就越有效型豁。
二、步驟
1尚蝌、進(jìn)行調(diào)查迎变，明確要求。
2飘言、畫線框圖衣形。
3服鹅、設(shè)計(jì)預(yù)備：基本草圖，建立單元袍暴、藍(lán)坊萝、基線以及進(jìn)行計(jì)算，頁(yè)面草圖纪铺。
4相速、正式設(shè)計(jì)。
5鲜锚、制作突诬，編寫代碼。
三芜繁、調(diào)查并明確限制條件
1旺隙、技術(shù)限制（分辨率）；
2骏令、商業(yè)限制（流暢度蔬捷、停留時(shí)間、廣告點(diǎn)擊率榔袋、引導(dǎo)消費(fèi)和品牌的定位周拐、市場(chǎng)相關(guān)，設(shè)計(jì)能力凰兑、技術(shù)力量）妥粟；
3、內(nèi)容和排版（字體吏够、標(biāo)題勾给、長(zhǎng)度、引文锅知、數(shù)據(jù)表格播急、圖表等）
四、專業(yè)術(shù)語(yǔ)
單元售睹、欄桩警、區(qū)域、段昌妹、分行網(wǎng)絡(luò)生真、橫向和縱向、縫捺宗、外邊距和內(nèi)填局柱蟀、元素、模塊蚜厉。
五长已、網(wǎng)格設(shè)計(jì)實(shí)例步驟
1、準(zhǔn)備工作
①了解項(xiàng)目需求；②視窗（網(wǎng)頁(yè)尺寸）③廣告單元④第三個(gè)限制條件：品牌（LOGO）
分別率是視窗的80%术瓮，一般為960寬度康聂，屏幕區(qū)域960x650.廣告單元：336x280.
2、畫出設(shè)計(jì)方案
草圖：鉛筆和白紙胞四。
3恬汁、創(chuàng)建網(wǎng)格
①建立分欄網(wǎng)格：16個(gè)單元，每個(gè)單元50像素辜伟，單元與單元之間10像素的縫氓侧，兩邊的單元空出5像素
②建立分行網(wǎng)格：10個(gè)單元9個(gè)縫是590像素，18pt的行間距
③建立段：頁(yè)面寬度593pt导狡，3個(gè)180pt的段约巷，每段10個(gè)基本行
4、設(shè)計(jì)網(wǎng)頁(yè)模板
核心部件：搜索框旱捧、導(dǎo)航欄独郎、用戶登錄和注冊(cè)區(qū)、品牌LOGO枚赡。
