網頁美工_網頁布局設計

1、網站美工 1網站美工 2網頁美工網站美工 3課程重點 、難點項目重點、難點項目重點、難點l網頁布局元素網頁布局元素l網頁布局原則網頁布局原則l網頁布局版式欣賞網頁布局版式欣賞重點重點網站美工 4合理應用網頁元素合理應用網頁元素選擇恰當的布局選擇恰當的布局經典布局賞析經典布局賞析實戰(zhàn)演練實戰(zhàn)演練作業(yè)作業(yè)授課內容網站美工 5 案例案例2 2 選擇恰當的布局選擇恰當的布局LOGO和公司名和公司名網站美工 6案例案例2 2 選擇恰當的布局選擇恰當的布局 網頁是供千千萬萬的瀏覽者瀏覽的，網頁是供千千萬萬的瀏覽者瀏覽的，他們使用的計算機可能千差萬別，所用的他們使用的計算機可能千差萬別，所用的瀏覽器的類型與

2、版本也有許多類別。因此瀏覽器的類型與版本也有許多類別。因此，在開始設計網頁之前，我們需要了解一，在開始設計網頁之前，我們需要了解一些約定俗成的標準或訪問者的瀏覽習慣。些約定俗成的標準或訪問者的瀏覽習慣。怎樣才能讓我們把網頁內容設計的更好、怎樣才能讓我們把網頁內容設計的更好、更能吸引瀏覽者的眼球。更能吸引瀏覽者的眼球。選擇恰當的選擇恰當的布局布局網站美工 7案例2 分析 思考：下面兩個主頁給我們什么樣的感覺？思考：下面兩個主頁給我們什么樣的感覺？網站美工 8案例2 分析 思考：下面兩個主頁給我們什么樣的感覺？思考：下面兩個主頁給我們什么樣的感覺？網站美工 9案例2 分析 分享：分享： 內容亂無章

3、；內容亂無章； 鏈接不顯眼；鏈接不顯眼； 整體不集中，色彩使用過多；整體不集中，色彩使用過多； 不專業(yè)。不專業(yè)。網站美工 10案例案例2 2 選擇恰當的布局選擇恰當的布局學習經驗分享：學習經驗分享： 告訴你一些網頁布局應遵循的基本原則。告訴你一些網頁布局應遵循的基本原則。網站美工 11案例案例2 2 選擇恰當的布局選擇恰當的布局網站美工 12案例案例2 2 選擇恰當的布局選擇恰當的布局 頁面尺寸和顯示器大小及分辨率有關系。頁面尺寸和顯示器大小及分辨率有關系。 單位：像素單位：像素選擇恰當的選擇恰當的布局布局1、 頁面尺寸頁面尺寸分辨率分辨率頁面尺寸頁面尺寸8006007804281024768

4、1007600網站美工 13案例案例2 2 選擇恰當的布局選擇恰當的布局1、 頁面尺寸頁面尺寸建議：建議： 不要讓瀏覽者向下拖動頁面超過三屏。不要讓瀏覽者向下拖動頁面超過三屏。 不要出現水平滾動條。不要出現水平滾動條。網站美工 14案例案例2 2 選擇恰當的布局選擇恰當的布局 網頁的整體形象，圖形與文本的結合網頁的整體形象，圖形與文本的結合應該是層疊有序的。雖然瀏覽器是矩形的應該是層疊有序的。雖然瀏覽器是矩形的，但對于頁面的造型，你可以充分運用自，但對于頁面的造型，你可以充分運用自然界中的其他形狀以及它們的組合：然界中的其他形狀以及它們的組合： 選擇恰當的選擇恰當的布局布局2、 整體造型整體造

5、型網站美工 15不同形狀代表的意義不同形狀代表的意義網站美工 16矩形設計矩形設計網站美工 17圓形設計圓形設計網站美工 18三角形設計三角形設計請你上網查一查？請你上網查一查？網站美工 19案例案例2 2 選擇恰當的布局選擇恰當的布局 頁眉也稱為頁頭，其作用是定義網頁頁眉也稱為頁頭，其作用是定義網頁的主題。例如，網站的名稱通常都放在頁的主題。例如，網站的名稱通常都放在頁眉中。眉中。 頁眉是整個頁眉是整個 網頁設計的關鍵，它將網頁設計的關鍵，它將牽涉到下面的更多設計和整個網頁的協(xié)調牽涉到下面的更多設計和整個網頁的協(xié)調性。性。 選擇恰當的選擇恰當的布局布局3、 頁眉頁眉網站美工 20案例案例2

6、2 選擇恰當的布局選擇恰當的布局3、 頁眉頁眉網站美工 21案例案例2 2 選擇恰當的布局選擇恰當的布局3、 頁眉頁眉頁眉設計頁眉設計網站美工 22案例案例2 2 選擇恰當的布局選擇恰當的布局 文本在網頁中出現都以行或者段落出文本在網頁中出現都以行或者段落出現，決定著整個網頁布局的可視性。現，決定著整個網頁布局的可視性。選擇恰當的選擇恰當的布局布局4、 文本文本網站美工 234、 文本文本網站美工 24案例案例2 2 選擇恰當的布局選擇恰當的布局 頁腳和頁眉相呼應。頁眉是放置站點頁腳和頁眉相呼應。頁眉是放置站點主題的地方，而頁腳是放置制作者或者公主題的地方，而頁腳是放置制作者或者公司信息的地方

7、。基本上網頁的制作信息都司信息的地方?；旧暇W頁的制作信息都放置在頁腳。放置在頁腳。選擇恰當的選擇恰當的布局布局5、 頁腳頁腳網站美工 255、 頁腳頁腳頁腳的內容網站美工 26案例案例2 2 選擇恰當的布局選擇恰當的布局 圖片和文本是網頁的兩大構成元素，圖片和文本是網頁的兩大構成元素，缺一不可。如何處理好圖片和文本的位置缺一不可。如何處理好圖片和文本的位置是整個網頁布局的關鍵，而一個網頁的布是整個網頁布局的關鍵，而一個網頁的布局是否合理也將體現于此。局是否合理也將體現于此。選擇恰當的選擇恰當的布局布局6、 圖片圖片網站美工 276、 圖片圖片網站美工 28案例案例2 2 選擇恰當的布局選擇恰當的布局 網頁中還可以添加聲音、動畫、視頻網頁中還可以添加聲音、動畫、視頻等其他媒體。在設計等其他媒體。在設計選擇恰當的選擇恰當的布局布局7、多媒體、多媒體網站美工 29小結網站美工 30經