第17講：網(wǎng)頁(yè)布局和網(wǎng)頁(yè)元素

1、網(wǎng)頁(yè)設(shè)計(jì)之未雨綢繆網(wǎng)頁(yè)設(shè)計(jì)之未雨綢繆圖像處理軟件一、課前導(dǎo)入通過(guò)網(wǎng)頁(yè)效果圖案例欣賞，互相討論，找出你認(rèn)為好和不好的網(wǎng)頁(yè)效果圖，并說(shuō)明原因。二、課程目標(biāo)01掌握網(wǎng)頁(yè)設(shè)計(jì)的基本流程掌握網(wǎng)頁(yè)設(shè)計(jì)的基本流程02熟悉網(wǎng)頁(yè)的框架架構(gòu)熟悉網(wǎng)頁(yè)的框架架構(gòu)03初步掌握濾鏡的應(yīng)用初步掌握濾鏡的應(yīng)用三、課程任務(wù)任務(wù)1理解網(wǎng)頁(yè)設(shè)計(jì)的思路和流程任務(wù)2掌握濾鏡的基本應(yīng)用01策劃階段一、網(wǎng)站一、網(wǎng)站名稱(chēng)名稱(chēng)二、網(wǎng)站的二、網(wǎng)站的類(lèi)型類(lèi)型三、簡(jiǎn)述網(wǎng)站的建設(shè)三、簡(jiǎn)述網(wǎng)站的建設(shè)方案方案1.網(wǎng)站作用2.網(wǎng)站規(guī)模3.網(wǎng)站目標(biāo)客戶(hù)4.網(wǎng)站特色01策劃階段四、網(wǎng)站的風(fēng)格及配色四、網(wǎng)站的風(fēng)格及配色方案方案1.網(wǎng)站主題2.網(wǎng)站標(biāo)準(zhǔn)色（主色調(diào)7

2、0%，輔助色25%，點(diǎn)綴色5%）3.網(wǎng)站標(biāo)準(zhǔn)字體（主要使用一種文字）4.網(wǎng)站特色（創(chuàng)意點(diǎn)，亮點(diǎn)）六、網(wǎng)站的欄目設(shè)計(jì)（畫(huà)出欄目結(jié)構(gòu)圖）六、網(wǎng)站的欄目設(shè)計(jì)（畫(huà)出欄目結(jié)構(gòu)圖）01策劃階段首頁(yè)首頁(yè)設(shè)計(jì)（重點(diǎn)）設(shè)計(jì)（重點(diǎn)）首頁(yè)設(shè)計(jì)是整個(gè)網(wǎng)站整體形象的濃縮，要進(jìn)行創(chuàng)意設(shè)計(jì)，效果圖要美觀簡(jiǎn)潔，大氣。及高端大氣上檔次。01策劃階段首頁(yè)設(shè)計(jì)首頁(yè)設(shè)計(jì)(準(zhǔn)備階段）1.網(wǎng)站主題（根據(jù)主題訂風(fēng)格）2.網(wǎng)站標(biāo)準(zhǔn)色（主色調(diào)70%，輔助色25%，點(diǎn)綴色5%）3.網(wǎng)站標(biāo)準(zhǔn)字體（主要使用一種文字）4.網(wǎng)站特色（創(chuàng)意點(diǎn)，亮點(diǎn)）5.元素搜集01策劃階段內(nèi)頁(yè)設(shè)計(jì)內(nèi)頁(yè)設(shè)計(jì)1.風(fēng)格內(nèi)頁(yè)設(shè)計(jì)在風(fēng)格上追求與首頁(yè)保持一致，但仍需保留自己的特色。

3、2.根據(jù)內(nèi)頁(yè)功能選擇合適版式如以文字為主的內(nèi)頁(yè)和以圖片展示為主的內(nèi)頁(yè)01策劃階段內(nèi)頁(yè)設(shè)計(jì)內(nèi)頁(yè)設(shè)計(jì)1.風(fēng)格內(nèi)頁(yè)設(shè)計(jì)在風(fēng)格上追求與首頁(yè)保持一致，但仍需保留自己的特色。2.根據(jù)內(nèi)頁(yè)功能選擇合適版式如以文字為主的內(nèi)頁(yè)和以圖片展示為主的內(nèi)頁(yè)02網(wǎng)頁(yè)的框架結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)“國(guó)國(guó)”字型字型布局布局1. 上面是網(wǎng)站的標(biāo)題及橫幅廣告條，2. 左右分列一些內(nèi)容，3. 中間是主要部分，與左右一起羅列到底4. 最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等02網(wǎng)頁(yè)的框架結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)t型型布局布局1. 上部是“網(wǎng)站標(biāo)志+廣告條”，2. 左面是主菜單，3. 右面是主要內(nèi)容。4. 優(yōu)點(diǎn)：頁(yè)面結(jié)

4、構(gòu)清晰、主次分明5. 缺點(diǎn)：頁(yè)面呆板，如果不注意細(xì)節(jié)上的色彩，很容易讓人“看之乏味”。02網(wǎng)頁(yè)的框架結(jié)構(gòu)02網(wǎng)頁(yè)的框架結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)網(wǎng)頁(yè)布局結(jié)構(gòu)pop布局布局指頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心。02網(wǎng)頁(yè)效果圖初步設(shè)計(jì)網(wǎng)頁(yè)的構(gòu)成元素網(wǎng)頁(yè)的構(gòu)成元素1. 文字文字（字體設(shè)計(jì)，字體顏色，排版的疏密變化）2. 圖像圖像（圖像尺寸、圖像作用，圖像）3. 超超鏈接鏈接4. 多媒體多媒體5. 動(dòng)畫(huà)等。動(dòng)畫(huà)等。02網(wǎng)頁(yè)效果圖初步設(shè)計(jì)小圖像大圖像02網(wǎng)頁(yè)效果圖初步設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)網(wǎng)頁(yè)結(jié)構(gòu)1.頁(yè)頭頁(yè)頭02網(wǎng)頁(yè)效果圖初步設(shè)計(jì)網(wǎng)頁(yè)結(jié)構(gòu)網(wǎng)頁(yè)結(jié)構(gòu)2.導(dǎo)航欄導(dǎo)航欄設(shè)計(jì)原則：簡(jiǎn)潔，易用。02網(wǎng)頁(yè)效果圖初步設(shè)計(jì)3.banner四、課程總結(jié)1 1、本講主要講解網(wǎng)頁(yè)設(shè)計(jì)的前期工作。、本講主要講解網(wǎng)頁(yè)設(shè)計(jì)的前期工作