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

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

2．原型設(shè)計(jì)法3．螺旋設(shè)計(jì)法4．增量開發(fā)法8.4Photoshop在網(wǎng)頁(yè)布局中的作用8.4.1用Photoshop設(shè)計(jì)網(wǎng)頁(yè)布局的優(yōu)點(diǎn)1．布局靈活2．修改方便3．加快瀏覽進(jìn)度8.4.2用Photoshop設(shè)計(jì)網(wǎng)頁(yè)布局應(yīng)注意的幾個(gè)問題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．有效存儲(chǔ)切片8.5網(wǎng)頁(yè)柵格系統(tǒng)8.5.1什么是網(wǎng)頁(yè)柵格系統(tǒng)柵格系統(tǒng)英文為“gridsystems”，也有人翻譯為“網(wǎng)格系統(tǒng)”，其實(shí)是一回事。不過從定義上說，柵格更為準(zhǔn)確些，一般給它的定義為：柵格設(shè)計(jì)系統(tǒng)，是一種平面設(shè)計(jì)的方法與風(fēng)格，即運(yùn)用固定的格子設(shè)計(jì)版面布局，以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面結(jié)構(gòu)以及信息漫衍。在設(shè)計(jì)商業(yè)網(wǎng)站時(shí)，為了讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，一般建議選擇合適的柵格系統(tǒng)和頁(yè)面寬度。8.5.2柵格系統(tǒng)的設(shè)計(jì)原理及應(yīng)用

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