网站美工设计——教学设计方案(教案)..docx
《网站美工设计——教学设计方案(教案)..docx》由会员分享，可在线阅读，更多相关《网站美工设计——教学设计方案(教案)..docx（138页珍藏版）》请在冰点文库上搜索。
教 学 设 计 方 案
系（部）（盖 信息工程系
章）：
教研室：
计算机多媒体课程名称：
网站美工设计主讲教师：
2014年～2015年第二学期
****职业技术学院制
教学设计方案
课程学时
80
课程学分
5
授课班级1：
计多 专业13 级2 班授课班级2：
计多 专业13 级3班
课程性质
公共必修课（ ）公共选修课（ ）专业必修课（√）专业选修课（ ）
课程类型
理论课（ ） 实践课（ ） 理实一体课（√）
课程定位
本课程主要面向网站界面设计、网站美工设计、网页制作、网站开发等相关岗位，帮助学生明确网站界面设计在网站开发中的重要性，关键培养学生具备一定的网站界面设计能力，能独立完成一个网站界面的设计与制作，为后续课程打下扎实的基础，具备网站界面设计的素质和技能，最终成为适应社会岗位需求的网站建设与管理人才。
考核方式
考试（ √） 考查（）
教 材：
《美工神话：
Dreamweaver+Photoshop+Flash网页设计与美化》，
邓文达，龚勇编著，人民邮电出版社，
参考教材：
《PhotoshopCS3中文版图像处理基础教程》，崔英敏编著，人民
邮电出版社，2008.11
《中文版PHOTOSHOP图像处理使用教程》，李敏编著，中国铁道
教材及参考教材
出版社，2008.07
《网站界面设计案例教程》，唐乾林编著，机械工业出版社，
2009.02
《网页界面设计与制作》，邓文达、贠亚男编著，人民邮电出版
社，2012.08
《网站色彩与构图案例教程》, 唐一鹏编著，北京大学出版社，
2008.08
《电子商务网站界面设计》，丁荣涛编著，人民邮电出版社，
2009.09
课时分配
序 号
授课章节
课时
第1次
第1章图像的基础知识
1.1位图和矢量图 1.2分辨率
1.3色彩模式 1.4常用文件格式第2章文件操作和设置颜色
2.1界面介绍 2.2文件操作
2.3图像显示控制
2.4标尺、网格线和参考线
2.5图像和画布尺寸
2.6设置图像颜色
第3章绘制选区和编辑图像
3.1选区工具 3.2编辑选区
3.3编辑选区中的图像
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次
项目四：
更换照片背景
第6次
第5章图像色彩
5.1调整图像色彩
第6章绘制路径和图形
6.1绘制路径 6.2绘制图形
6.3选取和编辑路径
第7次
项目五：
将彩色照片调为单色
第8次
项目六：
调整照片的局部颜色
第9次
项目七：
制作服饰产品插画
第10次
项目八：
制作儿童照片模板
第11次
第7章图层、通道与蒙版
7.1图层 7.2通道 7.3蒙版第8章输入与编辑文字
8.1文本输入 8.2文字变形
8.3路径文字
第12次
项目九：
制作梦幻鼠标
第13次
项目十：
制作快乐厨师
第14次
项目十一：
制作餐饮广告
第15次
项目十二：
制作运动鞋广告
第16次
第9章滤镜效果
9.1滤镜的应用
9.2滤镜的操作技巧
第10章动作的创建与应用
10.1动作控制面板10.2创建动作第11章网页图片
11.1图像切片 11.2存储图片
第17次
项目十三：
制作素描人生
2
第18次
项目十四：
制作水墨画效果
2
第19次
项目十五：
制作饼干包装
2
第20次
项目十六：
制作端午节网页
2
第21次
Photoshop图形图像处理综合训练
2
第22次
项目十七：
水果光盘
2
第23次
项目十八：
爱护地球
2
第24次
项目十九：
冲出画框
2
第25次
项目二十：
可乐苹果
2
第26次
第1章网站界面设计基础
11网站界面的发展
1.2网站界面的构成要素和要点
1.3网站界面设计原则
1.4网站界面与软件界面的异同
1.5常用工具软件简介
第2章网站界面设计中的色彩
2.1色彩的作用 2.2色彩的基本原理
2.3色彩设计的心理效应
第3章网站界面设计中的图形图像
3.1图形图像的作用
3.2图形图像的分类
3.3图形图像的处理技巧
3.4图形图像的创意与设计
第4章网站界面中首页的设计
4.1网站界面的整体设计
4.2版式的设计
2
第27次
项目二十一：
网站按钮的制作
2
第28次
项目二十二：
网站导航栏设计
2
第29次
项目二十三：
网站Logo制作
2
第30次
项目二十四：
网站文字制作
2
第31次
第5章：
网站界面中导航系统的设计
5.1导航系统设计概述
2
5.2导航系统设计
第6章网站界面中其他功能的设计
6.1用户注册与登录 6.2论坛
6.3搜索界面的设计
6.4互动界面设计技巧
6.5后台管理系统的界面设计第7章网站界面中的广告设计
7.1网络广告的特点
7.2网络广告设计的原则
7.3网络广告的表现手法
7.4网络广告的设计
第32次
项目二十五：
需求的提出1
2
第33次
项目二十六：
综合设计1
2
第34次
项目二十七：
用Photoshop设计效果图1
2
第35次
项目二十八：
在Dreamweaver中生成网
页1
2
第36次
复习；布置考核项目——完成信息工程
系网站首页界面的设计
2
第37次
项目二十九：
需求的提出2
2
第38次
项目三十：
综合设计2
2
第39次
项目三十一：
用Photoshop设计效果图2
2
第40次
项目三十二：
在Dreamweaver中生成网
页2
2
备注：
1、课时分配可根据项目、情境设计，也可根据教材篇章组织，一般是2节课为1次课。
2、表格内的字体为“仿宋_GB2312，小四”。
授课章节
【理论一】
第1章图像的基础知识 第2章文件操作和设置颜色
第3章绘制选区和编辑图像 第4章绘制和修饰图像
授课日期
授课课时
2
教学目标
1、对PhotoshopCS3有初步的认识和了解，并能够掌握软件的基本操作方法。
掌握图像处理的基本概念。
2、熟练应用Photoshop CS3的选择工具绘制需要的选区，并能应用好选区的操作技巧编辑选区。
3、理解Photoshop CS3绘制、修饰以及填充图像的功能。
了解和掌握绘制和修饰图像的基本方法和操作技巧。
学会将绘制和修饰图像的各种功能和效果应用到实际的设计制作任务中，真正做到学有所用。
4、了解并掌握图像的编辑方法和应用技巧，为进一步的编辑和处理图像打下
坚实的基础。
教学内容
教学内容：
1.1位图和矢量图 1.2分辨率
1.3色彩模式 1.4常用文件格式
2.1界面介绍 2.2文件操作
2.3图像显示控制 2.4标尺、网格线和参考线
2.5图像和画布尺寸 2.6设置图像颜色
3.1选区工具 3.2编辑选区
3.3编辑选区中的图像 3.4裁切和变换图像
3.5辅助编辑图像工具 3.6恢复操作
4.1绘图工具 4.2填充工具
4.3填充与描边命令 4.4历史记录画笔
4.5修复与修补工具 4.6修饰工具
4.7橡皮擦工具重点：
1、了解工作界面，图层的含义，标尺参考线等的设置，图像画布尺寸的调整、位图矢量图的概念及图像文件格式。
2、选框工具的使用、套索工具的使用、魔棒工具的使用。
3、绘图工具、修图工具、填充工具的应用。
4、图像编辑工具、图像的移动复制和删除、图像的裁剪和变换。
难点：
选区编辑、修补工具的使用。
教学方法
复 习：
0分钟；教师讲解：
30分钟；思考讨论：
5分钟；学生讲解：
0分钟；学生练习：
50分钟；布置作业：
0分钟；
布置下次课预习内容：
5分钟；
教学手段
多媒体
模
型□实
物□
挂
图□音
像□
实
训□
其
他□
教
学
任务
教师活动设计
学生活动设计
时间安排
第1次
过程
任务1
制作秋后风景
演练
5分钟
任务2
制作自然风光
演练
5分钟
任务3
制作照片浏览
演练
5分钟
任务4
绘制音乐视听海报
演练
5分钟
任务5
制作像素化图案
演练
5分钟
任务6
制作油画
演练
5分钟
任务7
清除照片中的杂物
演练
5分钟
任务8
修复人物照片
演练
5分钟
任务9
制作装饰画
演练
5分钟
任务10
制作心灵驿站插画
演练
5分钟
作业
无。
课后体会
授课主要内容
教学内容：
第1章图像的基础知识
1.1位图和矢量图
图像文件可以分为两大类：
位图和矢量图。
在绘图或处理图像的过程中，这两种类型的图像可以相互交叉使用。
1.1.1位图
位图图像也叫点阵图像，它是由许多单独的小方块组成的，这些小方块又称为像素点。
每个像素点都有特定的位置和颜色值。
位图图像的显示效果与像素点是紧密联系在一起的，不同排列和着色的像素点组合在一起构成了一幅色彩丰富的图像。
像素点越多，图像的分辨率越高，相应地，图像文件占用的存储空间也会随之增大。
使用放大工具放大后，可以清晰地看到像素的小方块形状与不同的颜色。
1.1.2矢量图
矢量图也叫向量图，它是一种基于图形的几何特性来描述的图像。
是以数学的矢量方式来记录图像内容的。
矢量图像中的图形元素称为对象，每个对象都是独立的，具有各自的属性。
矢量图是由各种线条、曲线或是文字组合而成。
矢量图与分辨率无关。
1.2分辨率
分辨率是用于描述图像文件信息的术语。
分辨率分为图像分辨率、屏幕分辨率和输出分辨率。
1.2.1图像分辨率
在Photoshop中，图像中每单位长度上的像素数目，称为图像的分辨率，其单位为像素/英寸或是像素/厘米。
1.2.2屏幕分辨率
显示器上每单位长度显示的像素数目。
1.2.3输出分辨率
照排机或打印机等输出设备产生的每英寸的油墨点数（dpi）。
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格式。
可以根据工作任务的需要选择合适的图像文件存储格式。
用于印刷：
TIFF、EPS。
出版物：
PDF。
Internet图像：
GIF、JPEG、PNG。
用于Photoshop工作：
PSD、PDD、TIFF。
第2章文件操作和设置颜色
PhotoshopCS3的系统要求：
图片文件不仅有大量的信息需要存储，而且在每一步操作中都需要经过复杂的计算，才能改变图像的效果。
所以配置的高低对于软件的运行有直接的影响。
中文PhotoshopCS3的最低配置：
ØCPU：
Pentium4处理器。
Ø内存：
512MB。
推荐用1GB。
Ø硬盘：
80GB可用磁盘空间。
Ø显示器：
16位彩色或更高级视频卡的彩色显示器。
Ø1024*768像素或更高的显示器分辨率。
Ø鼠标或其他定位设备。
ØWindows2000sp4或XPsp1或sp2操作系统。
ØCD—ROM。
2.1界面介绍
主要由标题栏、菜单栏、工具箱、属性栏、控制面板和状态栏组成。
2.1.1菜单栏及快捷方式
1、菜单分类
分为文件、编辑、图像、图层、选择、滤镜、分析、视图、窗口及帮助菜单。
2、菜单命令的不同状态
子菜单命令；不可执行的菜单命令；可弹出对话框的菜单命令。
3、按工作类型分类显示
可以根据操作习惯存储自定义的工作区。
窗口>工作区>存储工作区。
可以根据需要突出显示软件的新增功能。
窗口>工作区>新增功能。
可以根据不同的工作类型，显示不同的控制面板。
窗口>工作区>动画。
4、显示或隐藏菜单命令编辑>菜单。
5、突出显示菜单命令编辑>菜单。
6、键盘快捷方式
使用方法有几种：
使用鼠标选择所需要的命令；使用快捷键选择所需要的命令（如Ctrl+O打开文件命令、Alt+英文字母打开某个菜单）；自定义键盘快捷方式（编辑-键盘快捷键，或Alt+Shift+Ctrl+K）。
2.1.2工具箱
工具箱提供了强大的工具，包括选择工具、绘图工具、填充工具、编辑工具、颜色选择工具、屏幕视图工具、快速蒙版工具等。
选择工具箱的工具有两种方式：
直接用鼠标点击；使用快捷键。
选择隐藏工具：
使用鼠标选择；使用快捷键选择（按住Alt键，再用鼠标反复单击；按住shift再反复按键盘上的工具快捷键）。
恢复工具箱的默认设置。
在属性栏中右键单击工具图标，选择“复位工具”命令。
2.1.3属性栏
用户选择工具箱中的任意一个工具后，都会在界面中出现相对应的属性栏。
可以通过属性栏对工具进行进一步的设置。
2.1.4状态栏
窗口底部为状态栏，左侧是显示百分数，中间是文件信息。
2.1.5控制面板
控制面板是处理图像时另一个不可或缺的部分。
软件的界面为用户提供了多个控制面板组。
选择控制面板有三种方式：
在窗口菜单中选择；使用快捷键（F6为颜色、F7为图层、F8为信息）；用鼠标点解所需要的面板。
收缩与扩展控制面板、拆分控制面板、组合控制面板、控制面板弹出式菜单。
Tab：
隐藏或显示工具箱和控制面板；Shift+Tab：
隐藏或显示控制面板。
也可以通过窗口菜单来隐藏或显示。
自定义工作区：
窗口>工作区>存储工作区。
删除工作区：
窗口>工作区>删除工作区。
2.2文件操作
2.2.1新建图像
文件>新建；Ctrl+N；按住Ctrl的同时在灰色区域双击。
2.2.2打开图像
文件>打开；Crtl+O；在灰色区域直接双击。
2.2.3保存图像
文件>存储；Ctrl+S；文件>存储为；Shift+Ctrl+S。
2.2.4关闭图像
文件>关闭命令；Ctrl+W；单击关闭按钮。
2.3图像显示控制
2.3.1100%显示图像
2.3.2放大显示图像
使用缩放工具（Ctrl++）、导航面板、状态栏都可以放大图像的显示效果。
2.3.3缩小显示图像
使用缩放工具（Ctrl+-）、导航面板、状态栏都可以缩小图像的显示效果。
2.3.4全屏显示图像
选择缩放工具，单击“适合屏幕”按钮，勾选“调整窗口大小以满屏显示”，窗口会和屏幕的尺寸相适应。
单击“实际像素”，图像将以实际像素比例显示。
单击“填充屏幕”，图像铺满整个图像区域。
单击“打印尺寸”，图像将以打印分辨率显示。
2.3.5图像窗口显示
鼠标拖曳法；窗口>排列>层叠命令；窗口>排列>平铺命令。
2.3.6观察放大图像
抓手工具。
可以用来移动图像，以改变图像在窗口中的显示位置。
启用抓手工具，有以下几种方法。
Ø单击工具箱中的“抓手”工具
Ø按H键
Ø按住Spacebar（空格）键
2.4标尺、网格线和参考线
2.4.1标尺的设置
编辑>首选项>单位与标尺。
视图/标尺命令；Ctrl+R。
2.4.2网格线的设置
编辑>首选项>参考线、网格和切片。
视图/显示/网格；Ctrl+’。
2.4.3参考线的设置
视图/显示/参考线；Ctrl+；。
锁定、清除、新建参考线操作：
视图菜单。
2.5图像和画布尺寸
2.5.1图像尺寸的调整图像>图像大小。
2.5.2画布尺寸的调整图像>画布大小。
2.6设置图像颜色
2.6.1使用“拾色器”对话框设置颜色
2.6.2使用“颜色”控制面板设置颜色
2.6.3使用“色板”控制面板设置颜色
还可以使用吸管工具吸取所需颜色进行设置前景色和背景色。
第3章绘制选区和编辑图像
3.1选区工具
选框工具包括矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具。
在各选框工具的属性栏中，新选区选项去除旧选区，绘制新选区。
添加到选区选项在原有选区的基础上再增加新的选区。
从选区减去选项在原有选区的基础上减去新选区的部分。
与选区交叉选项选择新旧选区重叠的部分。
3.1.1矩形选框工具
3.1.2椭圆选框工具
套索工具可以在图像或图层中绘制不规则形状的选区，选取不规则形状的图像，套索工具组共包括套索工具、多边形套索工具和磁性套索工具，反复按
Shift+L组合键，可以在这3个工具之间进行切换。
3.1.3套索工具
3.1.4多边形套索工具
3.1.5魔棒工具
选择“魔棒”工具，或按W键，可以选择“魔棒工具”，它可以选取图像中的某一点，并将与这一点颜色相同或相近的点自动融入选区中。
3.1.6课堂案例——制作秋后风景
3.2编辑选区
3.2.1移动选区
在图像中创建选区后，将光标放在选区中，光标变为“移动选区”形状时，按下鼠标左键拖曳鼠标可移动选区。
当使用矩形选框工具或椭圆选框工具绘制选区时，在绘制过程中，按住键盘上的Spacebar（空格）键并拖曳鼠标，可移动选区。
按键盘上的方向键，可以将选区移动1个像素。
按Shift+方向键，可以将选区移动10个像素。
3.2.2调整选区
选择>调整边缘命令。
当选择图像的区域后，还可以进行增加选区、减小选区、相交选区等操作。
Ø使用快捷键调整选区：
在已有选区的基础上，按住Shift键，绘制出增加的选区。
按住Alt键，绘制出减小的选区。
按住Shift+Alt组合键，绘制出相交选区。
按Ctrl+D组合键，可以取消选区。
按Shift+Ctrl+I组合键可以对当前的选区进行反向选取。
Ø使用工具属性栏调整选区。
Ø使用菜单调整选区。
在“选择”菜单下选择“全选”、“取消选择”和“反选”命令，可以对图像选区进行全部选择、取消选择、反向选择的操作。
选择“选择>修改”命令，可对选区进行平滑、扩展、收缩等操作。
3.2.3羽化选区
“羽化”命令可以使图像产生柔和的效果。
通过以下的方法可以设置选区的羽化值。
选择>修改>羽化；Ctrl+Alt+D；在绘制选区前，在所使用工具的属性栏中直接输入羽化的数值。
3.2.4创建和取消选区
选择>取消选择；Ctrl+D。
3.2.5全选和反选选区
全选：
选择>全部；Ctrl+A。
反选：
选择>反向；Ctrl+Shift+I。
3.2.6利用“色彩范围”命令选取选择>色彩范围。
3.2.7课堂案例——制作自然风光
3.3编辑选区中的图像
3.3.1选区图像的移动
在同一文件中移动图像：
选择“移动”工具，拖曳选区中的图像。
在不同文件中移动图像：
选择“移动”工具，拖曳选区中的图像到新文件中。
移动图像，有以下几种方法：
Ø选择移动工具，拖曳图像，可以移动图像；若图像中含有选区，使用移动工具拖曳选区，可以移动选区中的图像。
Ø选择菜单“编辑>剪切”命令或按Ctrl+X组合键，再选择菜单“编辑>粘贴”命令或按Ctrl+V组合键，可以移动选区中的图像。
Ø选择移动工具，按键盘上的方向键，可以移动选区中的图像。
3.3.2选区图像的复制
复制图像，有以下几种方法：
Ø选择移动工具，按住Alt键的同时，按下鼠标并拖曳，可以将当前图层中的图像或选区中的图像进行复制。
Ø选择菜单“编辑>拷贝”命令或按Ctrl+C组合键，再选择菜单“编辑>粘贴”命令或按Ctrl+V组合键，可以复制选区中的图像。
Ø按住Ctrl+Alt键的同时，拖曳选区中的图像到合适位置，即可复制选区中的图像。
3.3.3选区图像的删除
删除选区中的图像，有以下两种方法：
Ø使用菜单命令删除图像：
编辑>清除命令，可以将选区内的图像删除。
Ø使用快捷键删除图像：
Delete或Backspace键，删除选区中的图像；
Alt+Delete或Alt+Backspace，删除选区中的图像，并填充前景色。
3.3.4选区图像的变换
使用菜单命令变换图像的选区：
在图像中绘制好选区，选择“编辑>自由变换”或“变换”命令，可以对图像的选区进行各种变换。
包括缩放、旋转、斜切、扭曲、透视、变形、旋转180度、旋转90度（顺时针）、旋转90度（逆时针）、水平翻转、垂直翻转。
使用快捷键变换图像的选区：
按Ctrl+T组合键，拖曳变换框的控制手柄，可以对图像选区自由地缩放。
按住Shift键，拖曳变换框的控制手柄，可以等比例缩放图像。
按Ctrl+Alt+T，会复制出新图像，对新图像进行变换。
按住Ctrl拖曳控制手柄，可以使图像任意变形。
按住Alt拖曳控制手柄，可以使图像对称变形。
按住Ctrl+Shift组合键，拖曳变换框的中间控制手柄，可以使图像斜切变形。
按住Ctrl+Shift+Alt组合键，拖曳变换框的4个控制手柄，可以使图像透视变形。
按住Ctrl+Shift+T组合键，可以再次应用上一次使用过的变换命令。
3.3.5课堂案例——制作照片浏览
3.4裁切和变换图像
3.4.1图像的裁切
在实际的设计制作工作中，经常有一些图片的构图和比例不符合设计要求，这就需要将这些图片进行裁切。
使用裁切工具可以在图像或图层中剪裁所选定的区域。
选择“图像>裁切”菜单命令，可以将选区中的图像裁切成单独的图片。
3.4.2图像画布的变换
图像像素的长宽比将对整个图像起作用。
选择“图像>像素长宽比”命令的下拉菜单，可以对整个图像的长宽比例进行编辑。
图像
升级会员 