《网页美工设计》教案#(精选.)
牛肉炖萝卜的做法-老火靓汤
word.
《网页美工设计》
课程教案
授课教师:
授课班级: 地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
网页设计基础知识
Dreamweaver软件介绍及其基础操作
1) 使学生了解网页设计的相关基础知识;
2) 使学生熟悉Dreamweaver软件界面的基本操作方法。
1)
了解网页设计相关概念和网页的类型;
2)
熟练掌握Dreamweaver软件创建和管理站点的方法。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
一、 引入
1、 相互认识,提出与本
学科相关的知识,介绍本门课程情况、教学内
容及总学时数进度安排,宣讲本课程教学纪律,鼓励学生营
造一种
学习氛围,尊重同学,互帮互学,真正达到学以致用;
时间
分配
约10分钟
约5分钟
约25分钟
备注
教
学
过
程
设
计
2、 提出问题:上过网吧?有谁自学过网页设计?听说过网页设计三剑
客吗?
二、 告知学生课堂任务
本次课所学习的主要内容是网页设计相关基础知识和
Dreamweaver软件基础操作;
学生理解
三、
逐步演示讲解分析教学内容
1、 网站和网页的区别:
word.
word.
(1)网页是Internet基本元素;
(2)网站由网页组成;
2、 静态网页和动态网页:
静态网页:纯粹HTML语
言格式的网页通常被称为静态网页,静
态网页的后缀名通常为.htm、.html、.shtml、.
xml。
动态网页:许多人认为网页会动就是动态网页,这是个错误的观点,
在静态的网页中
也可以含有动态的图片,这仅仅是视觉上的动态罢
了。真正的动态网页是指实际上并不是独立存在于服务
器上的网页
文件,只有当用户请求时服务器才返回一个完整的网页。也就是说,
它是返回到了客
户端上的网页。例如网页文件是以ASP、PHP、JSP、
ASPX为结尾就是动态的网页了。
静态网页的特点:
(1)内容相对稳定,容易被搜索引擎检索到;
(2)没有数据库支持,在网站制作和维护方面工作量大;
(3)交互性差,在功能方面有很大的限制。
动态网页的特点:
(1)以数据库技术为基础,可大大降低网站维护的工作量;
(2)可实现更多的功能,如用户注册、新闻发布、在线留言等;
(3)不利于使用搜索引擎进行网站推广。
3、
常见网页类型:形象页、主页、栏目页、内页、新闻详细页等;
4、 网页设计原则:
(1)了解客户需求
(2)遵循Web标准
word.
约10分钟
约6分钟
约6分钟
约4分钟
约8分钟
约12分钟
约20分钟
约50分钟
约40分钟
约4分钟
学生实践
学生实践
总结
word.
(3)运用形式美法则
5、 网页设计流程:
(1)手绘效果图:确定网页主题内容和风格
(2)设计效果图:搜集、整合设计所需素材
(3)版面编辑:网页的制作与实现
(4)网页美化:动画设计,网页测试和发布
6、 网页设计的主要软件:
(1)Photoshop
(2)Dweamveawer
(3)Flash
(4)Firworks
7、 Dreamweaver软件界面介绍:
(1)软件面板组成及基本操作方法
(2)软件参数设置
8、 Dreamweaver站点创建:
站点 ->
新建站点 -> 设置站点名称 -> 设置站点默认图像文件
夹。
9、 学生实训操作:
Dreamweaver站点创建与设置
10、 Dreamweaver创建第一个网页:
(1) 名称:
(2) 设置标题、输入文本、输入特殊字符
(3)页面属性设置
word.
word.
(4)预览网页
四、
学生实训及辅导;
创建第一个网页。
五、 课堂小结
本次课主要内容:
1、网页设计基础知识;
2、Dreamweaver基本使用方法;
3、Dreamweaver创建第一个网页;
后
记
word.
word.
《网页美工设计》
课程教案
授课教师:
授课班级: 地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Dreamweaver表格操作;
CSS样式表应用。
1) 掌握Dreamweaver中表格的设计方法;
2)
CSS样式表的使用方法和技巧。
1) 熟练掌握Dreamweaver中表格的基本操作方法;
2) 了解网页设计中CSS样式表的作用和设置方法。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
一、
1、
引入
回顾上次课所学习的内容:网页设计基础理论知识,
时间
分配
约4分钟
约6分钟
约30分钟
备注
Dreamweaver软件使用初步;
2、 提出问题:对Wor
d中表格操作还熟练吗?CSS是什么?如何
教
学
过
程
设
计
设置网页中各种元素的显示效果?
二、 告知学生课堂任务
学生理解
本次课所学习的主要内容是Drea
mweaver中表格的使用和
Dreamweaver创建CSS样式表;
三、
1、
逐步演示讲解分析教学内容
网页中表格的作用:
(1)内容组织和定位;
word.
word.
(2)网页排版;
2、 表格布局和Div布局区别:
各有优势。
表格
:简单,好用,学起来很容易上手。各种浏览器都支持!基本
上不会变形。但是代码冗余较多,维护起来
也不怎么方便。
DIV+CSS优点:代码冗余小,所以网站打开速度快一些。维护起
来非
常方便。但是要兼容IE6 IE7 火狐等浏览器的话,开始学就会
很头疼这个问题的。往往在IE6
里面看着整个网页是好的,但是到
了IE7或者火狐里面就全乱了。
推荐:用div做框架,table用来储存数据。
3、
Dreamweaver中表格的基本操作:
(1)表格和单元格的选择及属性设置;
(2)行和列的添加和删除;
(3)单元格的合并和拆分;
(4)表格的嵌套;
4、 实例演示讲解:使用表格制作一像素细线;
操作步骤:
(1)插入1行1列表格;
(2)设置单元格背景颜色;
(3)设置单元格高度为1;
(4)转到代码视图;
(5)把单元格中的 删除。
5、 辅导学生实训操作;
word.
约10分钟
约15分钟
约35分钟
约15分钟
约40分钟
约40分钟
约5分钟
学生思考
学生实践
学生理解
学生实践
学生理解
学生实践
总结
word.
6、
Dreamweaver中CSS样式表的使用:
(1)CSS样式表文件的创建;
(2)创建CSS样式:网页链接样式2;
(3)创建CSS样式:网页凹下链接样式;
(4)创建CSS样式:类链接样式;
(5)创建CSS样式:滤镜样式。
7、
8、
辅导学生进行CSS样式实训操作;
案例演示讲解:个人主页首页布局设计
(1)创建网页;
(2)设置网页属性;
(3)使用表格布局网页(上中下型);
(4) 使用Photoshop制作页面头部Banner图片;
(5)制作导航栏渐变背景图片;
(6)制作页面主体(左侧公告跑马灯效果和友情链接,右侧资讯
速递及图片列表);
(7)页面底部设计。
四、
五、 课堂小结
布置并辅导学生完成课堂作业;
本次课主要内容:
1、Dreamweaver网页表格基本使用方法;
2、Dreamweaver创建CSS样式;
word.
word.
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级: 地点:
课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Dreamweaver中图像的使用;
网页字体设计;
表单设计制作。
3) 掌握Dreamweaver中图形图像的使用和属性设置方法;
4)
掌握网页表单的设计技巧。
3) 熟练掌握Dreamweaver中图像热点链接的创建方法;
4) 掌握用户注册表单的设计方法和技巧。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
六、
3、
引入
回顾上次课所学习的内容:Dreamweaver表格的使用和属性
时间
分配
约4分钟
约10分钟
约5分钟
约10分钟
约10分钟
约10分钟
约10分钟
备注
设置,Dreamweaver中创建CSS的方法;
教
学
过
程
设
计
4、
5、
七、
点评上周作业;
提出问题:什么是热点链接?网站的注册页面是如何制作的?
学生理解
学生理解
学生理解
学生实践
学生实践
告知学生课堂任务
本次课所学习的主要内容是Dreamweaver中图像的使用和网页
表单的设计;
八、
9、
逐步演示讲解分析教学内容
网页中支持的图像格式:jpg、gif、gif动画、bmp、png
word.
word.
10、 网页中图像使用原则:
约10分钟
约10分钟
约20分钟
约5分钟
约15分钟
约10分钟
约15分钟
约5分钟
约10分钟
约10分钟
约10分钟
约20分钟
约1分钟
学生理解
学生实践
学生理解
学生实践
总结
(1)尽量小,对较大的图片文件进行适当的压缩和切割;
(2)应该挑选与网站主题有关联性的图片;
(3)对于网站的标志图片,主体应该清晰可见
,图形的含义最好简单
明了,图片内所含的文字应该清楚且容易辨认;
(4)背景图片只是用来衬托图片主题的,切忌过于花哨;
(5)图片颜色应该与页面整体配色协调。
11、 Dreamweaver中图像的使用:
(1)插入图像;
(2)设置图像属性;
(3)添加图像热点链接。
12、
13、
辅导学生实训操作;
实例演示:Dreamweaver中变换图像的创建方法---创建导航
条。
14、
15、
辅导学生完成实例实训操作;
网页字体设计:
(1)文字样式;
(2)大小;
(3)颜色
(4)其它属性。
16、
17、
18、
实例讲解:内容详细页的创建。
辅导学生完成实例实训操作;
Dreamweaver中网页表单设计制作:
word.
word.
(1)网页表单的作用;
(2)常见表单页类型;
19、 实例演示:创建用户注册表单页;
(1)制定插入表单的页面位置;
(2)插入表单;
(3)在表单中插入表格为表单控件布局;
(4)插入文字标签;
(5)插入表单各种控件并设置表单控件的属性;
(6)使用CSS美化表单控件;
20、
21、
22、
Dreamweaver中的层的使用方法及其实例讲解;
辅导学生实训练习;
Dreamweaver中行为的添加方法和使用技巧:
(1)交换图像;
(2)弹出信息;
(3)打开浏览器窗口;
(4)播放声音;
(5)改变属性;
(6)显示-隐藏层;
(7)转到URL.
23、
24、
辅导学生实训练习;
综合实例演示讲解:运用Dreamweaver中的层和行为来制作
网页下拉菜单式导航条:
25、 辅导学生实训练习;
word.
word.
九、 布置课堂作业并辅导学生完成作业实训:
个人主页用户表单设计。
十、 课堂小结
本次课主要内容:
1、Dreamweaver中图像的使用方法和技巧;
2、Dreamweaver中字体的设计;
3、Dreamweaver中表单页面的设计制作。
后
记
《网页美工设计》
课程教案
授课教师:
授课班级: 地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Photoshop基本使用方法和技巧
5)
熟悉Photoshop软件界面;
6) 掌握Photoshop软件的基本操作方法。
5) 掌握Photoshop软件界面基本操作方法和技巧;
6)
掌握Photoshop中的图片合成和修复的应用方法。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
时间
分配
备注
word.
word.
十一、 引入
6、
7、
8、
回顾上次课所学习的内容:网页字体设计,表单页设计制作;
点评上周作业;
提出问题:网页中的图像是怎么处理的?是否用过什么图像编
约4分钟
约10分钟
约2分钟
约5分钟
约10分钟
约15分钟
约10分钟
约10分钟
约15分钟
约20分钟
约20分钟
约20分钟
约30分钟
word.
学生理解
学生实践
学生实践
学生理解
学生实践
学生理解
学生实践
学生理解
辑软件?
十二、 告知学生课堂任务
本次课所学习的主要内容是Photoshop基本使用方法和技巧;
教
学
十三、 逐步演示讲解分析教学内容
过
26、
Photoshop软件介绍;
Photoshop软件界面介绍;
Photoshop基本操作方法:
程
27、
设
28、
计
(1)首选参数设置;
(2)工具栏的使用;
(3)图像显示比例设置;
(4)单位标尺设置;
(5)历史记录面板的使用;
(6)其它工具面板基本操作。
29、
30、
31、
辅导学生实训操作;
实例演示讲解:图层的基本操作方法;
辅导学生实训操作;
word.
32、
变换图像方法:缩放、旋转、斜切、扭曲、透视、变形、裁剪;
约35分钟
约2分钟
学生实践
总结
操作步骤:
(1)打开素材;
(2)选择相应区域;
(3)选择变换相应命令;
(4)在图片相应区域进行操作;
(5)保存并退出;
33、
34、
辅导学生实训操作;
Photoshop应用实例讲解:图片合成;
操作步骤:
(1)导入所需图片素材;
(2)新建Photoshop文件;
(3)选取矩形选框工具选取导入素材的部分区域;
(4)复制并粘贴到新建文件中并设置边沿羽化效果;
(5)同法处理其它素材;
(6)调整图像整体颜色效果;
(7)导出最终图像;
35、
36、
指导学生完成课堂实训设计实例;
几种修饰修复图像工具的使用及其实例操作演示讲解: <
br>仿制图章工具、污点修复画笔工具、修复画笔工具、修补工具、红
眼工具、模糊工具、减淡加深工
具、海绵工具;
操作步骤:
(1)打开素材;
word.
word.
(2)选择对应工具;
(3)设置相关属性;
(4)在图片相应区域进行操作;
(5)保存并退出;
37、
十四、 课堂小结
本次课主要内容:
1、Photoshop软件的基本操作方法;
2、Photoshop图片合成方法;
3、几种修饰修复图像工具的使用。
指导学生完成课堂实训设计实例;
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Photoshop 进阶使用
7) 图像的选取和抠图实例操作演示讲解;
8) 掌握Photoshop中滤镜和蒙板的使用方法和技巧。
7)
熟悉Photoshop中几种常用滤镜的使用方法;
8)
理解图层蒙板的作用,掌握图层蒙板的使用方法和技巧。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
十五、 引入
9、
回顾上次课所学习的内容:Photoshop软件的基本操作方法、
时间
分配
约2分钟
约10分钟
约1分钟
约20分钟
约20分钟
约10分钟
备注
Photoshop图片合成方法、几种修饰修复图像工具的使用;
教
学
过
程
设
计
10、 点评上周作业;
11、 提出问题:什么滤镜?什么是蒙板?滤镜和蒙版有什么用?滤
镜和蒙板怎么用?
十六、 告知学生课堂任务
本次课所学习的主要内容是Photoshop高级应
用,包括滤镜和蒙
板的使用、抠图方法、色彩调整;
十七、
逐步演示讲解分析教学内容
学生理解
学生实践
word.
word.
38、
图像的选取和抠图实例操作演示讲解:
约30分钟
约30分钟
约20分钟
约15分钟
约10分钟
约30分钟
约2分钟
学生实践
学生实践
学生实践
总结
(1)快速选择工具;
(2)魔棒工具;
(3)魔术橡皮擦工具;
(4)钢笔工具;
(5)抽出滤镜。
39、
40、
学生实训课堂实例;
几种调整图像色彩的方法及其实例操作演示讲解:
(1)灰度图像效果;
(2)色相饱和度调整;
操作步骤:
1)选择图像或者图像区域;
2)执行【图像】|【调整】|【色相饱和度】命令;
3) 调整数值;
4)确定并保存图像;
(其它色彩调整步骤类似)
(3)反相效果;
(4)黑白图像效果;
(5)渐变色彩效果;
(6)调整图像亮度和对比度;
41、
42、
学生实训课堂实例;
Photoshop滤镜的使用方法及其实例操作演示讲解:
(1)风格化;
word.
word.
(2)描边;
(3)模糊;
(4)素描;
(5)纹理;
(6)像素化;
(7)渲染。
像素画滤镜应用实例演示:
1)选择图片对象或区域(通道);
2)执行【滤镜】|【像素化】|【马赛克】命令;
3)调整属性值;
4)确定并保存;
43、
44、
学生实训课堂实例;
Photoshop图层蒙板的使用及其实例操作演示讲解;
(1)蒙板的概念;
(2)蒙板作用;
(3)蒙板使用方法;
(4)蒙板应用实例;
45、
Photoshop动作及批处理图像方法:
(1)Photoshop动作的使用方法;
(2)Photoshop批处理命令的使用及实例演示;
十八、
布置课堂作业并辅导学生完成作业实训;
word.
word.
十九、 课堂小结
本次课主要内容:
1、Photoshop抠图方法;
2、Photoshop滤镜的应用;
3、Photoshop蒙板的使用。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
网页背景图案的制作
LOGO设计制作
Banner设计制作
9) 掌握网页各种图标的设计制作方法;
10)
掌握LOGO和Banner常用的方法和技巧。
9) 掌握网页背景图案常用的设计方法和技巧;
10) 能够运用所学知识设计出具有深刻内涵的的网站LOGO。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
二十、 引入
12、 回顾上次课所学习的内容:Photoshop抠图方法,Photo
shop
滤镜的应用,Photoshop蒙板的使用;
时间
分配
约3分钟
约10分钟
约25分钟
约30分钟
约3分钟
备注
教
学
过
程
设
计
13、 点评上周作业;
14、 提出问题:网站LOGO有什么用?LOGO图标的设计制作有
哪些方法和技巧?
二十一、告知学生课堂任务
本次课所学习的主要内容是网站LOGO设计制作,网
页Banner
和导航菜单的设计制作方法;
二十二、逐步演示讲解分析教学内容
学生理解
学生实践
学生理解
word.
word.
46、 常见网页背景图案设计制作:
约3分钟
约20分钟
约30分钟
约4分钟
约20分钟
约20分钟
约30分钟
约2分钟
学生理解
学生实践
学生理解
学生实践
学生实践
学生实践
总结
(1)斜线图案:
操作步骤:
1)新建4×4
大小、透明背景图像;
2)放大图像至3200%以方便设置线条;
3)
调整颜色,使用画笔工具填充线条路径;
4)将绘制好的图形定义为图案保存下来;
5)使用填充命令将图案平铺到指定区域。
(其它色彩调整步骤类似)
(2)立体图案:(制作方法略);
(3)文字图案:(制作方法略);
(4)渐变背景:(制作方法略)。
47、
48、
课堂实例练习及辅导;
网站LOGO的作用:
(1)LOGO是与其它网站链接以及让其它网站链接的标志和门户;
(2)LOGO是网站形象的重要体现;
(3)LOGO能使受众便于选择。
49、 一个好的LOGO应具备的条件:
(1)符合国际标准;
(2)精美、独特;
(3)与网站的整体风格相融;
(4)能够体现网站的类型、内容和风格。
50、
网站LOGO设计制作常见方法及其实例操作演示讲解:
word.
word.
(1)线条的使用;
(2)图形的使用;
(3)文字的使用;
(4)渐变色的使用;
51、
52、
课堂实例练习及辅导;
网页Banner设计应该遵循的原则:
(1)主题明确;
(2)与整个页面相协调;
(3)顺应用户的浏览习惯;
(4)能吸引点击。
53、 网页Banner的设计制作方法及其实例操作演示讲解:
(1)静态Banner;
(2)动态Banner;
54、
二十三、布置课堂作业并辅导学生完成作业实训;
设计个人主页网站首页Logo和Banner。
二十四、课堂小结
本次课主要内容:
1、常见网页背景图案设计制作;
2、网站LOGO的设计方法;
3、网页Banner的设计制作方法。
word.
课堂实例练习及辅导;
word.
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
网页按钮设计制作
网页栏目框设计制作
11)
掌握网页各种图标的设计制作方法;
12) 掌握使用栏目框美化网页方法。
1)
掌握网页常见按钮和小图标的设计制作方法;
2) 网页栏目框的设计技巧及其表现力的实现。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
二十五、引入
15、
回顾上次课所学习的内容:网站LOGO设计制作,网页Banner
和导航菜单的设计制作方法;
16、 点评上周作业;
时间分
配
约2分钟
约10分钟
约12分钟
约40分钟
备注
教
学
过
程
设
计
17、
提出问题:网页中常见按钮有哪些类型?漂亮的水晶按钮是怎
么制作的?
二十六、告知学生课堂任务
本次课所学习的主要内容是网页按钮设计制作和使用栏目框美化
网页的方法。
二十七、逐步演示讲解分析教学内容
1. 网页中按钮设计理论:
学生理解
word.
word.
(1)按钮的类型:有提交功能的“真按钮”和“伪按钮”;
(2)按钮的功能:实现提交和标明当前操作;
(3)按钮的表现形式:系统标准按钮和使用图片自制的按钮;
(4)按钮的位置:容易找到、画面的中心位置;
(5)按钮上面的文字表述:言简意赅,直接明了;
(6)按钮的尺寸:适中;
(7)与其他元素关系:让其充分通透;
(8)注意鼠标滑过的效果:增强按钮的点击感。
2. 网页常见几种按钮的设计制作方法及其实例操作演示分步讲解:
(1)方形按钮;
简要步骤:
1) 绘制矩形边框;
2)填充颜色:纯色或渐变色;
3)添加文字。
(2)圆形按钮:(步骤略);
(3)斜角型按钮:(步骤略);
(4)椭圆型按钮:(步骤略);
(5)水晶按钮按钮:
简要步骤:
1) 绘制矩形边框;
2)填充渐变色;
3)添加文字;
4)添加高光层;
word.
约40分钟
约35分钟
约40分钟
约20分钟
约1分钟
学生实践
学生理解
学生实践
学生实践
总结
word.
5)设置朦胧边框。
3.
课堂实例练习及辅导;
4. 常见几种网页栏目框及其设计制作实例;
(1)矩形;
(2)圆角矩形;
(3)滑动门型;
(4)图标修饰型(回形针)。
5. 课堂实例练习及辅导;
二十八、布置课堂作业并辅导学生完成作业实训。
美化个人主页按钮和栏目框。
二十九、课堂小结
本次课主要内容:
1、网页按钮设计制作;
2、使用栏目框美化网页方法;
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Flash软件介绍
Flash绘图基础—景物和场景绘制
熟悉Flash软件界面并掌握使用Flash进行绘制各种图形的方法。
13)
了解Flash软件的特点;
14) 熟练使用Flash工具栏绘制各种图形。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
三十、 引入
18、
回顾上次课所学习的内容:网页按钮设计制作和使用栏目框美
化网页的方法;
时间
分配
约1分钟
约3分钟
约15分钟
约5分钟
备注
教
学
过
程
设
计
19、
提出问题:网络上常听到的闪客指的是什么?Flash软件有什
么特点?Flash能做什么?
三十一、告知学生课堂任务
本次课所学习的主要内容是了解Flash及Flash工具栏的基础操
作;
三十二、逐步演示讲解分析教学内容
55、 Fireworks软件介绍;
学生理解
学生实践
word.
word.
56、 Fireworks的独特功能:
约5分钟
约10分钟
约15分钟
约10分钟
约10分钟
约10分钟
约10分钟
约10分钟
约10分钟
约15分钟
约30分钟
约40分钟
约1分钟
学生实践
学生实践
学生实践
学生实践
总结
(1)可以输出SWF和
Illustrator7文件;
(2)与Dreamweaver紧密的配合;
(3)允许加入Photoshop滤镜;
(4)可以直接编辑点阵图;
(5)更方便的Roll over;
(6)即时预览;
(7)可以读入Photoshop文件;
(8)提供GIF编辑环境;
(9)提供全新的按钮制作工具;
(10)提供图形与文字的样式库(Style)。
57、
58、
59、
Fireworks软件界面和常用工具及其基本操作方法
Flash软件介绍
Flash软件的主要特点:
(1)Flash软件安装方便,适用场合广泛;
(2)Flash制作动画时间短,学习起来容易上手;
(3)Flash生成的文件体积小;
(4)有强大的交互性;
(5)使用矢量图形和流式播放技术;
(6)有强大的动画编辑功能;
(7)动画效果生动活泼,形象直观。
60、 Flash常见的表现形式:
(1)网络动画:常见于网页的片头;
word.
word.
(2)MTV:在各排行榜中数量最多;
(3)网络广告:Flash广告是当今网络广告界的时尚;
(4)交互网站:可实现纯flash网站,但是不利于搜索引擎登录;
(5)贺卡:
是初学者练手的较好选择,能带来小小的收入
(6)动画短片:是Flash大奖赛的主要形式;
(7)交互游戏:将产品广告做到游戏中。
61、
62、
63、
64、
65、
66、
67、
68、
Flash软件界面介绍:软件界面布局和工具栏的简单使用;
辅导学生完成课堂实训;
Flash中层的基本操作方法;
使用Flash工具栏绘制图形一:五角星;
辅导学生完成课堂实训;
使用Flash工具栏绘制图形二:大红灯笼;
辅导学生完成课堂实训;
使用Flash工具栏绘制图形三:水晶按钮;
简要步骤:
(1)绘制按钮边框;
(2)填充渐变颜色;
(3)绘制按钮高光部分;
(4)绘制按钮模糊边框;
69、
70、
三十三、布置课堂作业并辅导学生完成作业实训;
word.
辅导学生完成课堂实训;
使用Flash工具栏绘制图形四:QQ企鹅;
word.
三十四、课堂小结
本次课主要内容:
1、熟悉Flash软件界面;
2、熟练掌握Flash工具栏的使用方法。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
Flash动画基础,动画补间动画;形状补间动画
熟练掌握Flash中几种基本类型动画的的设计制作方法和技巧;
15)
了解Flash动画实现的原理;
16) 掌握几种类型动画的设计方法。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
三十五、引入
20、
回顾上次课所学习的内容:Fireworks软件的使用、Flash及
Flash工具栏的使用;
时间
分配
约2分钟
约2分钟
约20分钟
约10分钟
约20分钟
约30分钟
备注
教
学
过
程
设
计
21、
提出问题:动画实现的原理是什么?Flash中的动画有什么特
点?Flash动画有哪些类型?
三十六、告知学生课堂任务
本次课所学习的主要内容是了解Flash动画的特点
、学习Flash
几种基础动画的设计制作方法;
三十七、逐步演示讲解分析教学内容
6. Flash实现的原理;
学生理解
学生实践
word.
word.
7. Flash中的帧及其操作:
(1)帧的类型;
(2)帧的创建;
(3)帧的选择;
(4)帧的移动;
(5)帧的复制;
(6)帧的删除。
8. Flash中的元件和实例介绍;
9.
基础动画及其实例讲解:
(1)位移动画;
(2)旋转动画;
(3)缩放动画;
(4)淡出淡入动画。
10. 辅导学生完成课堂实训;
11.
Flash动画补间动画实例:球体下落效果;
简要步骤:
(1)创建新文件;
(2)绘制场景物体元件:地面、球体、桌子;
(3)设置球体在桌子上滚动的动画;
(4)设置球体下落地面后弹起的动画;
(5)预览、保存。
12.
辅导学生完成课堂实训;
13. Flash形状补间动画实例:变换文字效果;
word.
约24分钟
约25分钟
约10分钟
约15分钟
约40分钟
约2分钟
学生理解
学生实践
学生理解
学生实践
学生实践
总结
word.
简要步骤:
(1)创建新文件;
(2)绘制场景文字;
(3)设置文字变形动画效果;
(4)预览、保存。
14. 辅导学生完成课堂实训;
三十八、布置课堂作业并辅导学生完成作业实训;
破壳而出;
三十九、课堂小结
本次课主要内容:
1、Flash中的帧及其操作;
2、Flash动画补间动画;
3、Flash形状补间动画。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
素材导入
引导线动画
遮罩动画
使学生掌握Flash8中引导线动画和遮罩动画的基本制作方法。
17)
掌握Flash8中引导线动画和遮罩动画的条件和方法;
18)
掌握Flash8中使用引导线动画和遮罩动画制作复杂动画的方法和技巧。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
四十、 引入
22、
回顾上次课所学习的内容:了解Flash动画的特点和学习Flash
几种基础动画的设计制作方法;
时间分
配
约2分钟
约10分钟
约15分钟
约15分钟
约20分钟
约10分钟
备注
教
学
过
程
设
计
23、 提出问题:什么是引导线
动画?什么是遮罩动画?Flash中如
何实现对象沿着某条指定路径进行移动?
四十一、告知学生课堂任务
本次课所学习的主要内容是Flash8中引导线动画和遮罩动画的基
本制作方法;
四十二、逐步演示讲解分析教学内容
71、 Flash8中素材的导入:
学生理解
学生实践
学生理解
学生实践
学生理解
word.
word.
(1)图片文件;
(2)声音文件;
(3)视频文件;
72、
73、
辅导学生完成课堂实训;
Flash8引导线动画及其实例:过山车;
约16分钟
约15分钟
约25分钟
约30分钟
约40分钟
约2分钟
学生实践
学生理解
学生实践
学生理解
学生作业
总结
简要步骤:
(1)绘制车元件;
(2)绘制场景山形状;
(3)绘制引导线;
(4)设置车的引导线动画;
(5)预览、保存。
74、
75、
辅导学生完成课堂实训;
Flash8遮罩动画及其实例一:电影文字;
简要步骤:
(1)创建文字元件;
(2)创建图片元件;
(3)设置遮罩动画;
(4)预览、保存。
76、
77、
辅导学生完成课堂实训;
Flash8遮罩动画实例二:水波荡漾;
简要步骤:
(1)导入素材并将素材打散;
(2)复制水面部分并转换其为原件;
word.
word.
(3)创建波纹元件;
(4)稍微增加水面部分原件的高度(关键点);
(5)调整各图层位置并设置遮罩动画;
(6)预览、保存。
78、
79、
辅导学生完成课堂实训;
Flash8遮罩动画实例三:卫星绕地球;
简要步骤:
(1)导入素材;
(2)绘制圆形;
(3)设置地球自转动画元件;
(4)绘制椭圆引导线路径;
(5)创建卫星元件;
(6)设置卫星元件的引导线动画;
(7)创建遮挡部分的遮罩;
(8)预览、保存。
四十三、布置课堂作业并辅导学生完成作业实训;
卫星绕地球。
四十四、课堂小结
本次课主要内容:
1、素材导入;
2、引导线动画;
word.
word.
3、遮罩动画。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
商城网站设计案例-首页
商城网站设计案例-栏目页和详细页
期末大作业辅导
掌握商城网站设计制作的方法。
19) 商城网站规划设计;
20) 商城网站设计制作细节表现。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
四十五、引入
24、
回顾上次课所学习的内容:Flash8中基础动画的制作方法;
25、
提出问题:商城网站设计应该包括哪些部分?有哪些特点?
时间分
配
约2分钟
约40分钟
约50分钟
约20分钟
约30分钟
约56分钟
约2分钟
备注
教
四十六、告知学生课堂任务
学生理解
学生实践
学生理解
学生实践
学生实践
总结
学
本次课所学习的主要内容是商城网站设计案例。
过
四十七、逐步演示讲解分析教学内容
程
80、
简要设计商城网站的首页;
辅导学生完成课堂实训;
简要设计商城网站的栏目页;
辅导学生完成课堂实训;
设
81、
计
82、
83、
四十八、布置并辅导学生完成期末大作业:根据所学知识和技能,设计
制作一个任意类型静态网
站作品,所使用软件不限。要求:
word.
word.
(1)网站整体结构清晰,导航方便;
(2)页面布局合理、简洁流畅,颜色搭配协调统一;
(3)网站要设计富有一定意义的LOGO;
(4)要有Flash动画和GIF动画,有至少2种以上超级链接样式;
(5)至少7个栏目,网站总页面数量30个;
(6)有用户注册或者类似功能的表单页面;
(7)独立设计完成;
(8)最后一次课提交并点评(所有源文件一起提交)。
四十九、课堂小结
本次课主要内容:商城规划网站设计。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
企业网站设计案例
掌握企业网站设计制作的方法。
21)
企业网站规划设计;
22) 企业网站设计制作细节表现。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
五十、 引入
26、
回顾上次课所学习的内容:Flash8中基础动画的制作方法;
27、
提出问题:企业网站设计应该包括哪些部分?有哪些特点?
时间分
配
约2分钟
约40分钟
约50分钟
约30分钟
约60分钟
约3分钟
备注
教
五十一、告知学生课堂任务
学生理解
学生实践
学生理解
学生实践
总结
学
本次课所学习的主要内容是企业网站设计案例。
过
五十二、逐步演示讲解分析教学内容
程
84、
简要设计企业网站的首页:
设
(1)考虑网站的内容和布局;
计
(2)决定网站主体色彩;
(3)设计网站Logo;
(4)设计网站导航条;
(5)设计页面各模块;
word.
word.
(6)设计页面底部。
85、
86、
辅导学生完成课堂实训;
简要设计企业网站的栏目页;
五十三、辅导学生完成课堂实训;
五十四、课堂小结
本次课主要内容:规划设计企业网站。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
购物网站设计案例
掌握购物网站设计制作的方法。
23)
购物网站规划设计;
24) 购物网站设计制作细节表现。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
五十五、引入
28、
回顾上次课所学习的内容:企业网站规划设计;
29、
提出问题:购物网站设计应该包括哪些部分?有哪些特点?
时间分
配
约2分钟
约40分钟
约50分钟
约30分钟
约60分钟
约3分钟
备注
教
五十六、告知学生课堂任务
学生理解
学生实践
学生理解
学生实践
总结
学
本次课所学习的主要内容是购物网站设计案例。
过
五十七、逐步演示讲解分析教学内容
程
87、
简要设计购物网站的首页:
设
(1)考虑网站的内容和布局;
计
(2)决定网站主体色彩;
(3)设计网站Logo;
(4)设计网站导航条;
(5)设计页面各模块;
word.
word.
(6)设计页面底部。
88、
89、
辅导学生完成课堂实训;
简要设计购物网站的栏目页;
五十八、辅导学生完成课堂实训;
五十九、课堂小结
本次课主要内容:购物网站设计。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
游戏网站设计案例
掌握游戏网站设计制作的方法。
25)
游戏网站规划设计;
26) 游戏网站设计制作细节表现。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
六十、 引入
30、
回顾上次课所学习的内容:购物网站规划设计;
31、
提出问题:游戏网站设计应该包括哪些部分?有哪些特点?
时间分
配
约2分钟
约40分钟
约40分钟
约30分钟
约60分钟
约10分钟
约3分钟
备注
学生理解
学生实践
学生理解
学生实践
总结
教
学
过
程
设
六十一、告知学生课堂任务
本次课所学习的主要内容是游戏网站设计案例。
六十二、逐步演示讲解分析教学内容
90、
91、
简要设计游戏网站的首页;
辅导学生完成课堂实训;
简要设计游戏网站的栏目页;
辅导学生完成课堂实训;
计
92、
93、
六十三、布置并辅导学生完成期末大作业:根据所学知识和技能,设计
制作一
个任意类型静态网站作品,所使用软件不限。要求:
(1)网站整体结构清晰,导航方便,
word.
word.
(2)页面布局合理、简洁流畅,颜色搭配协调统一;
(3)网站要设计富有一定意义的LOGO;
(4)要有Flash动画和GIF动画,有至少2种以上超级链接样式;
(5)至少7个栏目,网站总页面数量30个;
(6)有用户注册或者类似功能的表单页面;
(7)独立设计完成;
(8)最后一次课提交并点评(所有源文件一起提交)。
六十四、课堂小结
本次课主要内容:游戏网站设计。
后
记
word.
word.
《网页美工设计》
课程教案
授课教师: 授课班级:
地点: 课时:
期末大作业辅导
站点上传测试
总结本课程内容
期末大作业点评
章节
内容
教学
目标
重点
难点
教学
方法
教学
环境
指导学生完成期末设计作业,点评学生期末作业的优点和不足。
27)
辅导学生完成期末大作业;
28) 点评学生学习这门课程所取得的成绩和不足。
课堂讲授、案例讲解与指导
计算机机房
教学过程及内容提要
六十五、引入
32、 回顾上次课所学习的内容:商城网站设计案例;
时间分
配
约2分钟
约8分钟
约45分钟
约5分钟
备注
教
学
过
程
设
33、
提出问题:网站设计制作完成后如何发布到网上?
六十六、告知学生课堂任务
本次课所学习的主要内容是期末大作业辅导和期末作业点评。
六十七、网页上传测试演示;
六十八、辅导学生完成期末大作业
约140分钟 学生完成
期末作业
课程总结
课程结束
计
六十九、对学生的期末大作业进行点评;
七十、 总结本课程学习内容及成果;
七十一、宣布本课程结束,致谢。
word.
word.
后
记
最新文件 仅供参考 已改成word文本 。 方便更改
word.