網(wǎng)頁美工_網(wǎng)頁布局設(shè)計(jì)

1、網(wǎng)站美工 1網(wǎng)站美工 2網(wǎng)頁美工網(wǎng)站美工 3課程重點(diǎn) 、難點(diǎn)項(xiàng)目重點(diǎn)、難點(diǎn)項(xiàng)目重點(diǎn)、難點(diǎn)l網(wǎng)頁布局元素網(wǎng)頁布局元素l網(wǎng)頁布局原則網(wǎng)頁布局原則l網(wǎng)頁布局版式欣賞網(wǎng)頁布局版式欣賞重點(diǎn)重點(diǎn)網(wǎng)站美工 4合理應(yīng)用網(wǎng)頁元素合理應(yīng)用網(wǎng)頁元素選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季纸?jīng)典布局賞析經(jīng)典布局賞析實(shí)戰(zhàn)演練實(shí)戰(zhàn)演練作業(yè)作業(yè)授課內(nèi)容網(wǎng)站美工 5 案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季諰OGO和公司名和公司名網(wǎng)站美工 6案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?網(wǎng)頁是供千千萬萬的瀏覽者瀏覽的，網(wǎng)頁是供千千萬萬的瀏覽者瀏覽的，他們使用的計(jì)算機(jī)可能千差萬別，所用的他們使用的計(jì)算機(jī)可能千差萬別，所用的瀏覽器的類型與

2、版本也有許多類別。因此瀏覽器的類型與版本也有許多類別。因此，在開始設(shè)計(jì)網(wǎng)頁之前，我們需要了解一，在開始設(shè)計(jì)網(wǎng)頁之前，我們需要了解一些約定俗成的標(biāo)準(zhǔn)或訪問者的瀏覽習(xí)慣。些約定俗成的標(biāo)準(zhǔn)或訪問者的瀏覽習(xí)慣。怎樣才能讓我們把網(wǎng)頁內(nèi)容設(shè)計(jì)的更好、怎樣才能讓我們把網(wǎng)頁內(nèi)容設(shè)計(jì)的更好、更能吸引瀏覽者的眼球。更能吸引瀏覽者的眼球。選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季志W(wǎng)站美工 7案例2 分析 思考：下面兩個(gè)主頁給我們什么樣的感覺？思考：下面兩個(gè)主頁給我們什么樣的感覺？網(wǎng)站美工 8案例2 分析 思考：下面兩個(gè)主頁給我們什么樣的感覺？思考：下面兩個(gè)主頁給我們什么樣的感覺？網(wǎng)站美工 9案例2 分析 分享：分享： 內(nèi)容亂無章

3、；內(nèi)容亂無章； 鏈接不顯眼；鏈接不顯眼； 整體不集中，色彩使用過多；整體不集中，色彩使用過多； 不專業(yè)。不專業(yè)。網(wǎng)站美工 10案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季謱W(xué)習(xí)經(jīng)驗(yàn)分享：學(xué)習(xí)經(jīng)驗(yàn)分享： 告訴你一些網(wǎng)頁布局應(yīng)遵循的基本原則。告訴你一些網(wǎng)頁布局應(yīng)遵循的基本原則。網(wǎng)站美工 11案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季志W(wǎng)站美工 12案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?頁面尺寸和顯示器大小及分辨率有關(guān)系。頁面尺寸和顯示器大小及分辨率有關(guān)系。 單位：像素單位：像素選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 頁面尺寸頁面尺寸分辨率分辨率頁面尺寸頁面尺寸8006007804281024768

4、1007600網(wǎng)站美工 13案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?、 頁面尺寸頁面尺寸建議：建議： 不要讓瀏覽者向下拖動(dòng)頁面超過三屏。不要讓瀏覽者向下拖動(dòng)頁面超過三屏。 不要出現(xiàn)水平滾動(dòng)條。不要出現(xiàn)水平滾動(dòng)條。網(wǎng)站美工 14案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?網(wǎng)頁的整體形象，圖形與文本的結(jié)合網(wǎng)頁的整體形象，圖形與文本的結(jié)合應(yīng)該是層疊有序的。雖然瀏覽器是矩形的應(yīng)該是層疊有序的。雖然瀏覽器是矩形的，但對(duì)于頁面的造型，你可以充分運(yùn)用自，但對(duì)于頁面的造型，你可以充分運(yùn)用自然界中的其他形狀以及它們的組合：然界中的其他形狀以及它們的組合： 選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 整體造型整體造

5、型網(wǎng)站美工 15不同形狀代表的意義不同形狀代表的意義網(wǎng)站美工 16矩形設(shè)計(jì)矩形設(shè)計(jì)網(wǎng)站美工 17圓形設(shè)計(jì)圓形設(shè)計(jì)網(wǎng)站美工 18三角形設(shè)計(jì)三角形設(shè)計(jì)請(qǐng)你上網(wǎng)查一查？請(qǐng)你上網(wǎng)查一查？網(wǎng)站美工 19案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?頁眉也稱為頁頭，其作用是定義網(wǎng)頁頁眉也稱為頁頭，其作用是定義網(wǎng)頁的主題。例如，網(wǎng)站的名稱通常都放在頁的主題。例如，網(wǎng)站的名稱通常都放在頁眉中。眉中。 頁眉是整個(gè)頁眉是整個(gè) 網(wǎng)頁設(shè)計(jì)的關(guān)鍵，它將網(wǎng)頁設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)網(wǎng)頁的協(xié)調(diào)牽涉到下面的更多設(shè)計(jì)和整個(gè)網(wǎng)頁的協(xié)調(diào)性。性。 選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 頁眉頁眉網(wǎng)站美工 20案例案例2

6、2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?、 頁眉頁眉網(wǎng)站美工 21案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?、 頁眉頁眉頁眉設(shè)計(jì)頁眉設(shè)計(jì)網(wǎng)站美工 22案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?文本在網(wǎng)頁中出現(xiàn)都以行或者段落出文本在網(wǎng)頁中出現(xiàn)都以行或者段落出現(xiàn)，決定著整個(gè)網(wǎng)頁布局的可視性?，F(xiàn)，決定著整個(gè)網(wǎng)頁布局的可視性。選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 文本文本網(wǎng)站美工 234、 文本文本網(wǎng)站美工 24案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?頁腳和頁眉相呼應(yīng)。頁眉是放置站點(diǎn)頁腳和頁眉相呼應(yīng)。頁眉是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公主題的地方，而頁腳是放置制作者或者公司信息的地方

7、?；旧暇W(wǎng)頁的制作信息都司信息的地方?；旧暇W(wǎng)頁的制作信息都放置在頁腳。放置在頁腳。選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 頁腳頁腳網(wǎng)站美工 255、 頁腳頁腳頁腳的內(nèi)容網(wǎng)站美工 26案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，缺一不可。如何處理好圖片和文本的位置缺一不可。如何處理好圖片和文本的位置是整個(gè)網(wǎng)頁布局的關(guān)鍵，而一個(gè)網(wǎng)頁的布是整個(gè)網(wǎng)頁布局的關(guān)鍵，而一個(gè)網(wǎng)頁的布局是否合理也將體現(xiàn)于此。局是否合理也將體現(xiàn)于此。選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、 圖片圖片網(wǎng)站美工 276、 圖片圖片網(wǎng)站美工 28案例案例2 2 選擇恰當(dāng)?shù)牟季诌x擇恰當(dāng)?shù)牟季?網(wǎng)頁中還可以添加聲音、動(dòng)畫、視頻網(wǎng)頁中還可以添加聲音、動(dòng)畫、視頻等其他媒體。在設(shè)計(jì)等其他媒體。在設(shè)計(jì)選擇恰當(dāng)?shù)倪x擇恰當(dāng)?shù)牟季植季?、多媒體、多媒體網(wǎng)站美工 29小結(jié)網(wǎng)站美工 30經(jīng)