資源簡介

(共45張PPT)
初中學段九年級下冊美術學科
我的網頁
網頁的風格
壹
1.1 網頁風格的構成元素
1.2 網頁風格設計欣賞
1.3 網頁圖標設計示范
1.4 自主學習任務單1
網頁是什么？
這是一個交流的平臺，擁有無限的魅力；這是一個廣闊的世界，展現全新的傳播方式。走進這個多彩的領域，為自己設計一個別致的網頁，盡情彰顯你的才華與個性。
網頁的風格？
優秀的網頁設計往往將一些構成頁面的基本元素進行合理的組織，體現出語言難以表現的情境，同時展現網站獨特的風格與個性，促使瀏覽者在眾多選擇中對其留下深刻的印象?，F在同學們常用的有QQ空間或微博空間等個人社交網頁。
1.1 網頁的構成元素有哪些？
構成網頁的元素包括文本、色彩、圖標、圖片、導航欄、超鏈接、動畫、聲音、視頻等。
“加菲貓”專題網站主頁整體版面設計
網頁大體布局
主頁中整體導航欄目設計
主頁中主體圖標形象設計
主體的圖
標形象起到點
綴、裝飾網頁
的作用，同時
使得網頁個性
更明顯，更具
辨識性。
導航欄是網頁主頁上的一組按鈕，可以幫助瀏覽者進入各個子頁面或者返回主
頁，起到貫穿整個網頁的作用。其中可設置動畫效果的動態裝飾，使網頁具有運動
的形式美感與視覺沖擊力。
淺藍色的底色能更
突出主題、強化色彩對
比與活潑氣氛。
直觀形象的圖文設
計便于瀏覽者的頁面選
擇與瀏覽。
主頁中相關超鏈接設計
網頁大PK——網頁設計“類比研究學習”
下列是加菲貓網站中英文不同版本的兩個主頁設計。比較兩者在網頁
導航欄、超鏈接、主體圖標、色彩搭配等方面的異同，談談你覺得哪個網
頁設計相對更好的看法。
暫停
1.2 網頁風格創意手法及設計欣賞
色彩鮮明的書簽成了個性化的網頁導航欄。
簡潔生動、活潑可愛的小蝴蝶成為網頁的主體圖標。
手繪一本翻開的便簽筆記本，配合書簽與圖畫，構成一個極富特點的網頁。
個
性
化
網
頁
風
格
設
計
賞
析
1
主體圖標的巧妙設計，把網頁中的主要元素全部整合其中，讓人分不清是圖形設計作品，還是一個網頁的版面設計。
個
性
化
網
頁
風
格
設
計
賞
析
2
對于個性化的專題網站而言，網頁上凸顯網頁特色的個性化主體圖標設計不但打破設計常規，易于吸引瀏覽者的視覺注意，更重要的是能在第一時間生動表達出網頁的主題內容，使人過目不忘。
個
性
化
網
頁
風
格
設
計
賞
析
3
網頁主體圖標學生設計作品1
圖標起到點綴、裝飾的作用，同時使頁面個性更鮮明，更具可辨性。
網頁圖標組合 我的信箱 小螞蟻之家
網頁主體圖標的學生手繪作品2
網頁主體圖標的學生手繪作品3
選一選1：
右側四個擬定的網頁圖標形象中，你覺得哪個更能體現“天文觀察愛好者專題網站”的網頁個性特點？并說說你選擇圖標的理由。
自主學習任務單一
暫停
選一選2：
下列四個擬定的網頁圖標形象中，你覺得哪個更能體現“自然環境體驗者”的網頁個性特點？并說說你選擇圖標的理由。
1.3
網
頁
圖
標
設
計示
范
用手繪方式制作的方式為自己的個人網頁設計一個圖標，并能體現個人的個性、愛好、特長等。
自主學習任務單1
暫停
網頁設計
貳
2.1 文字、圖像、色彩
2.2 版式的類型
2.3 網頁整體舉例
2.4 自主學習任務單
多種電腦軟件與設備為網頁設計的實現提供了多樣的手段。圖片的形狀、位置、大小、數量等直接關系到網頁的視覺效果。文字是網頁中的主要信息描述要素，文字表現的好與壞將影響到整個網頁的質量。
2.1 文字、圖像、色彩
1.使用美術軟件（如奇奕畫王）中的文字工具輸入標題文字，并選擇你喜歡的字體和效果。
2.使用區域選擇和操作工具進行摳圖、旋轉等圖像處理。
3.使用鼠標或電腦繪圖板并結合軟件中的各種模擬畫筆可以自由地添加圖形。
Wacom數位板
4.通過色彩調節工具變換背景和圖形的顏色，達成不同的配色效果。
色彩的表達與網頁的內容要相關聯。網頁的色彩要鮮明、獨特，與表達的內容氣氛相適應。
對比色 近似色
依據內容的多少、功能的分類、頁面的大小設計一種版式，然后將文字、圖像、圖標、導航欄等各元素納入框架中。
曲線型版式富于韻律與節奏。
骨骼型版式呈現和諧與理性（最常見）。
焦點型版式視覺效果強烈而集中。
2.2網頁的版式
耐克公司中國網站
1.確定網頁名稱，選擇底色，明確網頁基調。
2.明確內容區域，版式排列要統一中有變化。
3.導入恰當的圖片，形成頁面風格。
4.強化版式、色彩和圖文的協調呼應，豐富頁面效果。
自主學習任務單2
把你喜歡的圖片在電腦中進行一些處理， 再試著搭配上不同的圖文，變換不同的底色，看看頁面版式會有哪些不一樣的效果。
暫停
網站的建立
03
網站的建立
確立大致的板塊框架和清晰明確的導航系統，是建設網站極其關鍵的一步，也將涉及后期的更新與延展性的間題。
合理劃分內容板塊，分類安排內容，使每個頁面都有一個清晰明了的導航系統，可以條理清楚地引導讀者點擊感興趣的頁面。
網頁制作工具有Dreamweaver、Frontpage等，圖片編輯工具有Photoshop、奇奕畫王等，動畫制作工具有Flash、Cool3d、UleadGifAnimator等，還有一些網頁特效工具，可以根據需要靈活運用。
《我的網頁》 思維導圖小結
收集本班成長經歷以及班級和校園生活的資料，共同建設自己的網上家園——班級主頁?？捎镁W頁、QQ或微博空間等方式的一種設計，建立大家喜歡的欄目，展示班級風采等。
要求：1. 設計與主題對應
2.造型簡潔美感突出
終極任務單

展開更多......

收起↑