網(wǎng)站美工設(shè)計教學設(shè)計方案教案

教學設(shè)計方案

系（部）（蓋章）：信息工程系

教研室：計算機多媒體

課程名稱：網(wǎng)站美工設(shè)計

主講教師：

2014年?2015年第二學期

****職業(yè)技術(shù)學院制

教學設(shè)計方案

課程學時80課程學分5

授課班級1：計多專業(yè)13級2班

授課班級2：計多專業(yè)13級3班

公共必修課（）公共選修課（）專業(yè)必修課（J）專業(yè)

課程性質(zhì)

選修課（）

課程類型理論課（）理論課（）理實一體課（V）

本課程主要面對網(wǎng)站界面設(shè)計、網(wǎng)站美工設(shè)計、網(wǎng)頁制作、

網(wǎng)站開發(fā)等相關(guān)崗位，扶植學生明確網(wǎng)站界面設(shè)計在網(wǎng)站開發(fā)中

的重要性，關(guān)鍵培育學生具備肯定的網(wǎng)站界面設(shè)計實力，能獨立

課程定位

完成一個網(wǎng)站界面的設(shè)計與制作，為后續(xù)課程打下扎實的根底，

具備網(wǎng)站界面設(shè)計的素養(yǎng)和技能，最終成為適應(yīng)社會崗位需求的

網(wǎng)站建立與管理人才。

考核方式考試（J）考察（）

教材：

《美工神話：Dreamweaver+Photoshop+Flash網(wǎng)頁設(shè)計與美化》，

鄧文達，龔勇編著，人民郵電出版社，

參考教材：

教材及

《中文版PHOTOSHOP圖像處理運用教程

參考教材

《網(wǎng)站色彩與構(gòu)圖案例教程》，唐一鵬編著，北京高校出版社，

2008.08

序號授課章節(jié)課時

第1章圖像的根底學問

1.1位圖和矢量圖1.2辨別率

1.3色彩形式1.4常用文件格式

第2章文件操作和設(shè)置顏色

2.1界面介紹2.2文件操作

課時安排2.3圖像顯示限制

第1次

2.4標尺、網(wǎng)格線和參考線

2.5圖像和畫布尺寸

2.6設(shè)置圖像顏色

第3章繪制選區(qū)和編輯圖像

3.1選區(qū)工具3.2編輯選區(qū)

3.3編輯選區(qū)中的圖像

3.4裁切和變換圖像

3.5協(xié)助編輯圖像工具

3.6復原操作

第4章繪制和修飾圖像

4.1繪圖工具4.2填充工具

4.3填充與描邊吩咐

4.4歷史記錄畫筆

4.5修復與修補工具

4.6修飾工具4.7橡皮擦工具

第2次工程一：制作風景插畫

第3次工程二：制作歡樂兒童照片

第4次工程三：修復照片

第5次工程四：更換照片背景

第5章圖像色彩

5.1調(diào)整圖像色彩

第6次第6章繪制途徑和圖形

6.1繪制途徑6.2繪制圖形

6.3選取和編輯途徑

第7次工程五：將彩色照片調(diào)為單色

第8次工程六：調(diào)整照片的部分顏色

第9次工程七：制作服飾產(chǎn)品插畫

第10次工程八：制作兒童照片模板

第7章圖層、通道與蒙版

7.1圖層7.2通道7.3蒙版

第11次第8章輸入與編輯文字

8.1文本輸入8.2文字變形

8.3途徑文字

第12次工程九：制作夢幻鼠標

第13次工程十：制作歡樂廚師

第14次工程十一：制作餐飲廣告

第15次工程十二：制作運動鞋廣告

第9章濾鏡效果

9.1濾鏡的應(yīng)用

9.2濾鏡的操作技巧

第16次第10章動作的創(chuàng)立與應(yīng)用

10.1動作限制面板10.2創(chuàng)立動作

第11章網(wǎng)頁圖片

11.1圖像切片11.2存儲圖片

第17次工程十三：制作素描人生2

第18次工程十四：制作水墨畫效果2

第19次工程十五：制作餅干包裝2

第20次工程十六：制作端午節(jié)網(wǎng)頁2

第21次Photoshop圖形圖像處理綜合訓練2

第22次工程十七：水果光盤2

第23次工程十八：愛惜地球2

第24次工程十九：沖出畫框2

第25次工程二十：可樂蘋果2

第1章網(wǎng)站界面設(shè)計根底

11網(wǎng)站界面的開展

1.2網(wǎng)站界面的構(gòu)成要素和要點

1.3網(wǎng)站界面設(shè)計原則

1.4網(wǎng)站界面與軟件界面的異同

1.5常用工具軟件簡介

第2章網(wǎng)站界面設(shè)計中的色彩

2.1色彩的作用2.2色彩的根本原理

第26次2.3色彩設(shè)計的心理效應(yīng)2

第3章網(wǎng)站界面設(shè)計中的圖形圖像

3.1圖形圖像的作用

3.2圖形圖像的分類

3.3圖形圖像的處理技巧

3.4圖形圖像的創(chuàng)意與設(shè)計

第4章網(wǎng)站界面中首頁的設(shè)計

4.1網(wǎng)站界面的整體設(shè)計

4.2版式的設(shè)計

第27次工程二十一：網(wǎng)站按鈕的制作2

第28次工程二十二：網(wǎng)站導航欄設(shè)計2

第29次工程二十三：網(wǎng)站Log。制作2

第30次工程二十四：網(wǎng)站文字制作2

第5章：網(wǎng)站界面中導航系統(tǒng)的設(shè)計

5.1導航系統(tǒng)設(shè)計概述

5.2導航系統(tǒng)設(shè)計

第6章網(wǎng)站界面中其他功能的設(shè)計

第31次2

6.1用戶注冊與登錄6.2論壇

6.3搜尋界面的設(shè)計

6.4互動界面設(shè)計技巧

6.5后臺管理系統(tǒng)的界面設(shè)計

第7章網(wǎng)站界面中的廣告設(shè)計

7.1網(wǎng)絡(luò)廣告的特點

7.2網(wǎng)絡(luò)廣告設(shè)計的原則

7.3網(wǎng)絡(luò)廣告的表現(xiàn)手法

7.4網(wǎng)絡(luò)廣告的設(shè)計

第32次工程二十五：需求的提出12

第33次工程二十六：綜合設(shè)計12

第34次工程二十七：用Photoshop設(shè)計效果圖12

工程二十八：在Dreamweaver中生成網(wǎng)頁

第35次2

1

復習；布置考核工程完成信息工程系

第36次2

網(wǎng)站首頁界面的設(shè)計

第37次工程二十九：需求的提出22

第38次工程三十：綜合設(shè)計22

第39次工程三H—：用Photoshop設(shè)計效果圖22

工程三十二：在Dreamweaver中生成網(wǎng)頁

第40次2

2

備注：

1、課時安排可依據(jù)工程、情境設(shè)計，也可依據(jù)教材篇章組織，一般是2節(jié)課為1次課。

2、表格內(nèi)的字體為“仿宋_GB2312,小四”。

第1次

【理論一】

授課

第1章圖像的根底學問第2章文件操作和設(shè)置顏色

章節(jié)

第3章繪制選區(qū)和編輯圖像第4章繪制和修飾圖像

授課

授課課時2

日期

1、對PhotoshopCS3有初步的相識和理解，并可以駕馭軟件的根本操作方法。

駕馭圖像處理的根本概念。

2、嫻熟應(yīng)用PhotoshopCS3的選擇工具繪制須要的選區(qū)，并能應(yīng)用好選區(qū)的操

作技巧編輯選區(qū)。

教學

3、理解PhotoshopCS3繪制、修飾以及填充圖像的功能。理解和駕馭繪制和修

目的

飾圖像的根本方法和操作技巧。學會將繪制和修飾圖像的各種功能和效果應(yīng)用

到實際的設(shè)計制作任務(wù)中，真正做到學有所用。

4、理解并駕馭圖像的編輯方法和應(yīng)用技巧，為進一步的編輯和處理圖像打下堅

實的根底。

教學內(nèi)容：

1.1位圖和矢量圖L2辨別率

1.3色彩形式1.4常用文件格式

2.1界面介紹2.2文件操作

2.3圖像顯示限制2.4標尺、網(wǎng)格線和參考線

2.5圖像和畫布尺寸2.6設(shè)置圖像顏色

3.1選區(qū)工具3.2編輯選區(qū)

3.3編輯選區(qū)中的圖像3.4裁切和變換圖像

3.5協(xié)助編輯圖像工具3.6復原操作

教學4.1繪圖工具4.2填充工具

內(nèi)容4.3填充與描邊吩咐4.4歷史記錄畫筆

4.5修復與修補工具4.6修飾工具

4.7橡皮擦工具

重點：

1、理解工作界面，圖層的含義，標尺參考線等的設(shè)置，圖像畫布尺寸的調(diào)整、

位圖矢量圖的概念及圖像文件格式。

2、選框工具的運用、套索工具的運用、魔棒工具的運用。

3、繪圖工具、修圖工具、填充工具的應(yīng)用。

4、圖像編輯工具、圖像的挪動復制和刪除、圖像的裁剪和變換。

難點：選區(qū)編輯、修補工具的運用。

學復習：0分鐘；教師講解：30分鐘；思索探討：5分鐘；

教

法

方學生講解：0分鐘；學生練習：50分鐘；布置作業(yè)：0分鐘；

布置下次課預(yù)習內(nèi)容：5分鐘；

教學

多媒體模型口實物口掛圖口音像口實訓口其他口

手段

教任務(wù)教師活動設(shè)計學生活動設(shè)計時間支配

學

鐘

5分

演練

后風景

制作秋

1

過任務(wù)

程

鐘

5分

任務(wù)2

演練

然風光

制作自

鐘

5分

任務(wù)3

演練

片閱讀

制作照

鐘

5分

演練

海報

樂視聽

繪制音

任務(wù)4

鐘

5分

演練

案

素化圖

制作像

任務(wù)5

鐘

5分

油畫

制作

任務(wù)6

演練

鐘

5分

任務(wù)7

雜物

片中的

去除照

演練

鐘

5分

任務(wù)8

物照片

修復人

演練

鐘

5分

飾畫

制作裝

任務(wù)9

演練

鐘

5分

插畫

靈驛站

制作心

演練

10

任務(wù)

無。

作業(yè)

課后

體會

授課主要內(nèi)容

教學內(nèi)容：

第1章圖像的根底學問

位圖和矢量圖

圖像文件可以分為兩大類：位圖和矢量圖。在繪圖或處理圖像的過程中，這

兩種類型的圖像可以互相穿插運用。

1.1.1位圖

位圖圖像也叫點陣圖像，它是由很多單獨的小方塊組成的，這些小方塊又稱為

像素點。每個像素點都有特定的位置和顏色值。位圖圖像的顯示效果與像素點是嚴

密聯(lián)絡(luò)在一起的，不同排列和著色的像素點組合在一起構(gòu)成了一幅色彩豐富的圖

像。像素點越多，圖像的辨別率越高，相應(yīng)地，圖像文件占用的存儲空間也會隨之

增大。運用放大工具放大后，可以清楚地看到像素的小方塊形態(tài)與不同的顏色。

1.1.2矢量圖

矢量圖也叫向量圖，它是一種基于圖形的幾何特性來描繪的圖像。是以數(shù)學的

矢量方式來記錄圖像內(nèi)容的。矢量圖像中的圖形元素稱為對象，每個對象都是獨立

的，具有各自的屬性。矢量圖是由各種線條、曲線或是文字組合而成。矢量圖與辨

別率無關(guān)。

1.2辨別率

辨別率是用于描繪圖像文件信息的術(shù)語。辨別率分為圖像辨別率、屏幕辨別

率和輸出辨別率。

1.2.1圖像辨別率

在Photoshop中，圖像中每單位長度上的像素數(shù)目，稱為圖像的辨別率，其

單位為像素/英寸或是像素/厘米。

1.2.2屏幕辨別率

顯示器上每單位長度顯示的像素數(shù)目。

1.2.3輸出辨別率

照排機或打印機等輸出設(shè)備產(chǎn)生的每英寸的油墨點數(shù)（dpi）o

1.3色彩形式

1.3.1CMYK形式

C：青色；M：洋紅色；Y：黃色；K：黑色。

1.3.2RGB形式

一種加色形式。R：紅色；G：綠色；B：藍色。

1.3.3灰度形式

灰度形式的灰度圖又叫8bit深度圖。

此外還有Lab形式、HSB形式、索引顏色形式、位圖形式、雙色彩形式、多通

道形式。

1.4常用文件格式

PSD格式和PDD格式、TIF格式（TIFF）、JPEG格式、BMP格式、GIF格式、EPS

格式、TGA格式。

可以依據(jù)工作任務(wù)的須要選擇適宜的圖像文件存儲格式。

用于印刷:TIFF、EPSo

出版物：PDFo

Internet圖像：GIF、JPEG、PNG0

用于Photoshop工作：PSD、PDD、TIFF。

第2章文件操作和設(shè)置顏色

PhotoshopCS3的系統(tǒng)要求：

圖片文件不僅有大量的信息須要存儲，而且在每一步操作中都須要經(jīng)過困難

的計算，才能變更圖像的效果。所以配置的凹凸對于軟件的運行有干脆的影響。

中文PhotoshopCS3的最低配置：

>CPU：Pentium4處理器。

>內(nèi)存:512MB。舉薦用lGBo

>硬盤：80GB可用磁盤空間。

>顯示器：16位彩色或更高級視頻卡的彩色顯示器。

>1024*768像素或更高的顯示器辨別率。

>鼠標或其他定位設(shè)備。

>Windows2000sp4或XPspl或sp2操作系統(tǒng)。

>CD—ROMo

2.1界面介紹

主要由標題欄、菜單欄、工整竺、屬性攔艮制面板和狀態(tài)欄組成。

:產(chǎn)/X

"一

2.1.1菜單欄及快捷方式

1、菜單分類

分為文件、編輯、圖像、圖層、選擇、濾鏡、分析、視圖、窗口及扶植菜單。

2、菜單吩咐的不同狀態(tài)

子菜單吩咐；不行執(zhí)行的菜單吩咐；可彈出對話框的菜單吩咐。

3、按工作類型分類顯示

可以依據(jù)操作習慣存儲自定義的工作區(qū)。窗口》工作區(qū)》存儲工作區(qū)。

可以依據(jù)須要突出顯示軟件的新增功能。窗口》工作區(qū)》新增功能。

可以依據(jù)不同的工作類型，顯示不同的限制面板。窗口》工作區(qū)〉動畫。

4、顯示或隱藏菜單吩咐

編輯》菜單。

5、突出顯示菜單吩咐

編輯》菜單。

6、鍵盤快捷方式

運用方法有幾種：運用鼠標選擇所須要的吩咐；運用快捷鍵選擇所須要的吩

咐（如Ctrl+0翻開文件吩咐、Alt+英文字母翻開某個菜單）；自定義鍵盤快捷方

式（編輯-鍵盤快捷鍵,或Alt+Shift+Ctrl+K）。

2.1.2工具箱

工具箱供應(yīng)了強大的工具，包括選擇工具、繪圖工具、填充工具、編輯F

工具、顏色選擇工具、屏幕視圖工具、快速蒙版工具等。

選擇工具箱的工具有兩種方式：干脆用鼠標點擊；運用快捷鍵。喙這

選擇隱藏工具：運用鼠標選擇；運用快捷鍵選擇（按住Alt鍵，再用鼠

標反復單擊；按住shift再反復按鍵盤上的工具快捷鍵）。￥三

復原工具箱的默認設(shè)置。在屬性欄中右鍵單擊工具圖標，選擇“復位工

具”吩咐。號.

2.1.3屬性欄

用戶選擇工具箱中的隨意一個工具后，都會在界面中出現(xiàn)相對應(yīng)的屬性欄。

可以通過屬性欄對工具進展進一步的設(shè)置。

2.1.4狀態(tài)欄

窗口底部為狀態(tài)欄，左側(cè)是顯示百分數(shù)，中間是文件信息。

2.1.5限制面板

限制面板是處理圖像時另一個不行或缺的部分。軟件的界面為用戶供應(yīng)了多個

限制面板組。

選擇限制面板有三種方式：在窗口菜單中選擇；運用快捷鍵（F6為顏色、F7

為圖層、F8為信息）；用鼠標點解所須要的面板。

收縮與擴展限制面板、拆分限制面板、組合限制面板、限制面板彈出式菜單。

Tab：隱藏或顯示工具箱和限制面板；Shift+Tab：隱藏或顯示限制面板。也可

以通過窗口菜單來隱藏或顯示。

自定義工作區(qū)：窗口〉工作區(qū)》存儲工作區(qū)。

刪除工作區(qū)：窗口》工作區(qū)》刪除工作區(qū)。

2.2文件操作

2.2.1新建圖像

文件》新建；Ctrl+N；按住Ctrl的同時在灰色區(qū)域雙擊。

2.2.2翻開圖像

文件》翻開；Crtl+O；在灰色區(qū)域干脆雙擊。

2.2.3保存圖像

文件〉存儲；Ctrl+S；文件＞存儲為;Shift+Ctrl+So

2.2.4關(guān)閉圖像

文件》關(guān)閉吩咐；Ctrl+W；單擊關(guān)閉按鈕。

2.3圖像顯示限制

2.3.1100%顯示圖像

2.3.2放大顯示圖像

運用縮放工具（Ctrl++）、導航面板、狀態(tài)欄都可以放大圖像的顯示效果。

2.3.3縮小顯示圖像

運用縮放工具（Ctrl+-）、導航面板、狀態(tài)欄都可以縮小圖像的顯示效果。

2.3.4全屏顯示圖像

選擇縮放工具，單擊“合適屏幕”按鈕，勾選“調(diào)整窗口大小以滿屏顯示”,

窗口會和屏幕的尺寸相適應(yīng)。

單擊“實際像素”，圖像將以實際像素比例顯示。

單擊“填充屏幕”，圖像鋪滿整個圖像區(qū)域。

單擊“打印尺寸”，圖像將以打印辨別率顯示。

2.3.5圖像窗口顯示

鼠標拖曳法;窗口＞排列＞層疊吩咐；窗口＞排列〉平鋪吩咐。

2.3.6視察放大圖像

抓手工具。可以用來挪動圖像，以變更圖像在窗口中的顯示位置。

啟用抓手工具，有以下幾種方法。

＞單擊工具箱中的“抓手”工具

＞按H鍵

＞按住Spacebar（空格）鍵

2.4標尺、網(wǎng)格線和參考線

2.4.1標尺的設(shè)置

編輯》首選項〉單位與標尺。視圖/標尺吩咐；Ctrl+Ro

2.4.2網(wǎng)格線的設(shè)置

編輯》首選項＞參考線、網(wǎng)格和切片。視圖/顯示/網(wǎng)格；Ctrl+\

2.4.3參考線的設(shè)置

視圖/顯示/參考線；Ctrl+；o

鎖定、去除、新建參考線操作：視圖菜單。

2.5圖像和畫布尺寸

2.5.1圖像尺寸的調(diào)整

圖像》圖像大小。

2.5.2畫布尺寸的調(diào)整

圖像》畫布大小。

2.6設(shè)置圖像顏色

2.6.1運用“拾色器”對話框設(shè)置顏色

2.6.2運用“顏色”限制面板設(shè)置顏色

2.6.3運用“色板”限制面板設(shè)置顏色

還可以運用吸管工具汲取所需顏色進展設(shè)置前風光和背風光。

第3章繪制選區(qū)和編輯圖像

3.1選區(qū)工具

選框工具包括矩形選框工具、橢圓選框工具、單行選框工具和單列選框工具。

在各選框工具的屬性欄中，新選區(qū)選項去除舊選區(qū)，繪制新選區(qū)。添加到選

區(qū)選項在原有選區(qū)的根底上再增加新的選區(qū)。從選區(qū)減去選項在原有選區(qū)的根底

上減去新選區(qū)的部分。與選區(qū)穿插選項選擇新舊選區(qū)重疊的部分。

3.1.1矩形選框工具

ill*|1口?也|m：|opx|□消除鋸齒|樣式：|正常1gll寬度:匚二|=高度:匚二11J

3.1.2橢圓選框工具

O▼」口好的羽化:恒二《消除鋸齒牌蹄日期：||二ag：|11I調(diào)整,…]

套索工具可以在圖像或圖層中繪制不規(guī)則形態(tài)的選區(qū)，選取不規(guī)則形態(tài)的圖

像，套索工具組共包括套索工具、多邊形套索工具和磁性套索工具，反復按Shift+L

組合鍵，可以在這3個工具之間進展切換。

3.1.3套索工具

g▼」口尸的|羽化:|0px|叵消除鋸齒

3.1.4多邊形套索工具

'▼」口『旦1|羽化：0^/消除鋸齒W二

3.1.5魔棒工具

選擇“魔棒”工具，或按W鍵，可以選擇“魔棒工具”，它可以選取圖像中的

某一點，并將與這一點顏色一樣或相近的點自動融入選區(qū)中。

入，」口『期容差:]，消除幅￡3，連續(xù)對所有51層或祥

3.1.6課堂案例一一制作秋后風景

3.2編輯選區(qū)

3.2.1挪動選區(qū)

在圖像中創(chuàng)立選區(qū)后，將光標放在選區(qū)中，光標變?yōu)椤芭矂舆x區(qū)”形態(tài)時，

按下鼠標左鍵拖曳鼠標可挪動選區(qū)。

當運用矩形選框工具或橢圓選框工具繪制選區(qū)時，在繪制過程中，按住鍵盤

上的Spacebar（空格）鍵并拖曳鼠標，可挪動選區(qū)。

按鍵盤上的方向鍵，可以將選區(qū)挪動1個像素。按Shift+方向鍵，可以將選

區(qū)挪動10個像素。

3.2.2調(diào)整選區(qū)

選擇》調(diào)整邊緣吩咐。

中選擇圖像的區(qū)域后，還可以進展增加選區(qū)、減小選區(qū)、相交選區(qū)等操作。

>運用快捷鍵調(diào)整選區(qū)：在已有選區(qū)的根底上，按住Shift鍵，繪制出增加

的選區(qū)。按住Alt鍵，繪制出減小的選區(qū)。按住Shift+Alt組合鍵，繪制

出相交選區(qū)。按Ctrl+D組合鍵，可以取消選區(qū)。按Shift+Ctrl+I組合鍵,

可以對當前的選區(qū)進展反向選取。

>運用工具屬性欄調(diào)整選區(qū)。

>運用菜單調(diào)整選區(qū)。在“選擇”菜單下選擇“全選”、“取消選擇”和“反

選”吩咐，可以對圖像選區(qū)進展全部選擇、取消選擇、反向選擇的操作。

選擇”選擇>修改”吩咐，可對選區(qū)進展平滑、擴展、收縮等操作。

3.2.3羽化選區(qū)

“羽化”吩咐可以使圖像產(chǎn)生柔軟的效果。通過以下的方法可以設(shè)置選區(qū)的羽

化