Web設(shè)計基礎(chǔ)-網(wǎng)頁布局設(shè)計

Web設(shè)計基礎(chǔ)教程網(wǎng)頁布局設(shè)計目錄1網(wǎng)頁布局的概念2網(wǎng)頁布局形式3網(wǎng)頁版面設(shè)計常用方法4Photoshop在網(wǎng)頁布局中的作用8.1網(wǎng)頁布局的概念網(wǎng)頁布局設(shè)計也可以理解為網(wǎng)頁版面設(shè)計，就是我們在瀏覽器上看到的一個完整的頁面。我們?nèi)绾螌⑺幸w現(xiàn)的內(nèi)容完整的分布布局，達(dá)到一種視覺效果，這就叫做版面布局設(shè)計。8.1.1網(wǎng)頁布局的要素1．頁面尺寸2．圖像的運(yùn)用3．文字的運(yùn)用8.1.2網(wǎng)頁布局設(shè)計遵循的原則1．重點突出、主次分明2．平衡性3．對比4．疏密度5．對齊6．圖文并茂7．網(wǎng)頁版面設(shè)計風(fēng)格的統(tǒng)一性8.2網(wǎng)頁布局形式8.2.1傳統(tǒng)的網(wǎng)頁版式布局設(shè)計傳統(tǒng)的網(wǎng)頁設(shè)計版式布局結(jié)構(gòu)大致可分為“同”字型、“國”字型、拐角型、“三字”型、對稱型、POP型等?！巴弊中徒Y(jié)構(gòu)布局實例拐角型布局實例“三”字型布局實例POP布局實例對稱對比布局實例大框套小框布局大框套小框布局實例通欄布局實例8.2.2網(wǎng)頁設(shè)計布局的流行趨勢1．打破框架的版面設(shè)計8.2.2網(wǎng)頁設(shè)計布局的流行趨勢2．去界面化8.2.2網(wǎng)頁設(shè)計布局的流行趨勢3．基于模塊或網(wǎng)格8.2.2網(wǎng)頁設(shè)計布局的流行趨勢4．一屏以內(nèi)8.3網(wǎng)頁版面設(shè)計常用方法1．瀑布設(shè)計法

2．原型設(shè)計法3．螺旋設(shè)計法4．增量開發(fā)法8.4Photoshop在網(wǎng)頁布局中的作用8.4.1用Photoshop設(shè)計網(wǎng)頁布局的優(yōu)點1．布局靈活2．修改方便3．加快瀏覽進(jìn)度8.4.2用Photoshop設(shè)計網(wǎng)頁布局應(yīng)注意的幾個問題1、字體，標(biāo)題。2、布局格式3、科學(xué)使用參考線8.4.3Photoshop切片工具“切片”這關(guān)鍵的一步，應(yīng)遵循以下原則：

1．必須依靠參考線

2．Logo和Banner必切

3．虛線和轉(zhuǎn)角形狀必切

4．漸變必切

5．大圖必切

6．特殊文字效果必切

7．導(dǎo)航條必切

8．有效存儲切片8.5網(wǎng)頁柵格系統(tǒng)8.5.1什么是網(wǎng)頁柵格系統(tǒng)柵格系統(tǒng)英文為“gridsystems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實是一回事。不過從定義上說，柵格更為準(zhǔn)確些，一般給它的定義為：柵格設(shè)計系統(tǒng)，是一種平面設(shè)計的方法與風(fēng)格，即運(yùn)用固定的格子設(shè)計版面布局，以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面結(jié)構(gòu)以及信息漫衍。在設(shè)計商業(yè)網(wǎng)站時，為了讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，一般建議選擇合適的柵格系統(tǒng)和頁面寬度。8.5.2柵格系統(tǒng)的設(shè)計原理及應(yīng)用

(A×n)-i=WA：一個柵格單元的寬度a：一個柵格的寬度i：柵格與柵格之間的間隙A=a+in：正整數(shù)W