網(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)鍵培養(yǎng)學生具備一定的網(wǎng)站界面設(shè)計能力，能獨立

課程定位

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

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

網(wǎng)站建設(shè)與管理人才。

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

教材：

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

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

參考教材：

《PhotoshopCS3中文版圖像處理基礎(chǔ)教程》，崔英敏編著，人民

郵電出版社，2008.11

《中文版PHOTOSHOP圖像處理使用教程》，李敏編著，中國鐵道出

教材及版社，2008.07

參考教材《網(wǎng)站界面設(shè)計案例教程》，唐乾林編著，機械工業(yè)出版社，

2009.02

《網(wǎng)頁界面設(shè)計與制作》，鄧文達、貪亞男編著，人民郵電出版社，

2012.08

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

2008.08

《電子商務(wù)網(wǎng)站界面設(shè)計》，丁榮濤編著，人民郵電出版社，

2009.09

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

第1章圖像的基礎(chǔ)知識

1.1位圖和矢量圖1.2分辨率

課時分配1.3色彩模式L4常用文件格式

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

2.1界面介紹2.2文件操作

2.3圖像顯示控制

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

2.5圖像和畫布尺寸

2.6設(shè)置圖像顏色

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

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

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

3.4裁切和變換圖像

3.5輔助編輯圖像工具

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章濾鏡效果

第16次

9.1濾鏡的應(yīng)用

9.2濾鏡的操作技巧

第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è)計基礎(chǔ)

11網(wǎng)站界面的發(fā)展

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è)計

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

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

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

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章圖像的基礎(chǔ)知識第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)用技巧，為進一步的編輯和處理圖像打下堅

實的基礎(chǔ)。

教學內(nèi)容：

1.1位圖和矢量圖1.2分辨率

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輔助編輯圖像工具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分鐘；

布置下次課預習內(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章圖像的基礎(chǔ)知識

1.1位圖和矢量圖

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

兩種類型的圖像可以相互交叉使用。

1.1.1位圖

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

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

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

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

增大。使用放大工具放大后，可以清晰地看到像素的小方塊形狀與不同的顏色。

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模式、索引顏色模式、位圖模式、雙色調(diào)模式、多通

道模式。

1.4常用文件格式

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

格式、TGA格式。

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

用于印刷：TIFF、EPSo

出版物:PDFo

Internet圖像：GIF、JPEG、PNG0

用于Photoshop工作:PSD、PDD、TIFFo

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

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

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

的計算，才能改變圖像的效果。所以配置的高低對于軟件的運行有直接的影響。

中文PhotoshopCS3的最低配置：

>CPU：Pentium4處理器。

>內(nèi)存：512MBo推薦用IGBo

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

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

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

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

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

>CD—ROMo

2.1界面介紹

主要由標題欄、菜單欄、工具箱、屬性欄、控制面板和狀態(tài)欄組成。

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工具箱

工具箱提供了強大的工具，包括選擇工具、繪圖工具、填充工具、編輯W

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

選擇工具箱的工具有兩種方式：直接用鼠標點擊；使用快捷鍵。

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

標反復單擊；按住shift再反復按鍵盤上的工具快捷鍵）?；蛑?/p>

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

具”命令。駕.

2.1.3屬性欄

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

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

2.1.4狀態(tài)欄

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

2.1.5控制面板

控制面板是處理圖像時另一個不可或缺的部分。軟件的界面為用戶提供了多個

控制面板組。

選擇控制面板有三種方式：在窗口菜單中選擇；使用快捷鍵（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觀察放大圖像

抓手工具?？梢杂脕硪苿訄D像，以改變圖像在窗口中的顯示位置。

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

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

＞按H鍵

A按住Spacebar（空格）鍵

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

2.4.1標尺的設(shè)置

編輯》首選項〉單位與標尺。視圖/標尺命令；Ctrl+R。

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ū)的基礎(chǔ)上再增加新的選區(qū)。從選區(qū)減去選項在原有選區(qū)的基礎(chǔ)

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

3.1.1矩形選框工具

口，I后口的畫|喇0g|口消除幅齒|牌：回

3.1.2橢圓選框工具

OT里尊的購|翱t：|opx|畫消除鋸齒|樣式：I正常|￡|寬度：|I*ag：|11|調(diào)整邊像...|

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

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

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

3.1.3套索工具

03.aQrHj羽化：Opx，消除鋸齒[詞整理"_]

3.1.4多邊形套索工具

V1■JCJPSJm：op>r，消除鋸齒

3.1.5魔棒工具

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

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

\?aQ?a,，幽蹴>，堂對神雕蚪

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

3.2編輯選區(qū)

3.2.1移動選區(qū)

在圖像中創(chuàng)建選區(qū)后，將光標放在選區(qū)中，光標變?yōu)椤耙苿舆x區(qū)”形狀時，

按下鼠標左鍵拖曳鼠標可移動選區(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ū)的基礎(chǔ)上，按住Shift鍵，繪制出增加

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

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

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

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

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

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

選擇“選擇＞修改”命令，