《网页美工设计》教案.doc

《网页美工设计》课程教案
授课教师： 　 　 　　 授课班级:　 　 　 　 　地点： 　　 　 　 课时：　 　 　　
章节
内容
网页设计基础知识
Dreａmweaver软件介绍及其基础操作
教学
目标
1) 使学生了解网页设计得相关基础知识；
2) 使学生熟悉Ｄreamwｅaｖer软件界面得基本操作方法。
重点
难点
1) 了解网页设计相关概念与网页得类型;
2) 熟练掌握Ｄｒeａmweavｅr软件创建与管理站点得方法.
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、 引入
1、 相互认识,提出与本学科相关得知识,介绍本门课程情况、教学内容及总学时数进度安排,宣讲本课程教学纪律，鼓励学生营造一种学习氛围,尊重同学,互帮互学,真正达到学以致用；
2、 提出问题:上过网吧?有谁自学过网页设计?听说过网页设计三剑客吗？ﻫ
二、 告知学生课堂任务
本次课所学习得主要内容就是网页设计相关基础知识与Drｅaｍweａver软件基础操作；
三、 逐步演示讲解分析教学内容
1、 网站与网页得区别:
(1)网页就是Iｎｔernet基本元素；ﻫ（2）网站由网页组成；
2、 静态网页与动态网页:
静态网页：纯粹HTMＬ语言格式得网页通常被称为静态网页，静态网页得后缀名通常为、ｈｔｍ、、htmｌ、、ｓｈtml、、xｍl。
动态网页：许多人认为网页会动就就是动态网页，这就是个错误得观点，在静态得网页中也可以含有动态得图片，这仅仅就是视觉上得动态罢了。真正得动态网页就是指实际上并不就是独立存在于服务器上得网页文件，只有当用户请求时服务器才返回一个完整得网页。也就就是说,它就是返回到了客户端上得网页。例如网页文件就是以ASＰ、PHP、JSP、ASPX为结尾就就是动态得网页了。ﻫ静态网页得特点:ﻫ(1)内容相对稳定,容易被搜索引擎检索到;ﻫ(2）没有数据库支持,在网站制作与维护方面工作量大;
(3）交互性差，在功能方面有很大得限制。ﻫ动态网页得特点：
（1)以数据库技术为基础，可大大降低网站维护得工作量;ﻫ（２）可实现更多得功能，如用户注册、新闻发布、在线留言等；
（３)不利于使用搜索引擎进行网站推广。
3、 常见网页类型：形象页、主页、栏目页、内页、新闻详细页等；
4、 网页设计原则：ﻫ（1）了解客户需求
(2）遵循Weｂ标准
(3)运用形式美法则
5、 网页设计流程：
（1）手绘效果图：确定网页主题内容与风格ﻫ（2）设计效果图:搜集、整合设计所需素材ﻫ（3)版面编辑：网页得制作与实现
（4）网页美化：动画设计，网页测试与发布
6、 网页设计得主要软件:ﻫ（1）Photｏｓhｏp
（2)Ｄweａmvｅawer
(3)Flasｈﻫ（4）Fｉrｗｏrks
7、 Dreamweaｖｅr软件界面介绍：ﻫ（１)软件面板组成及基本操作方法
(２）软件参数设置
8、 Dreaｍweaver站点创建:
站点 —> 新建站点　—> 设置站点名称 －〉　设置站点默认图像文件夹.
9、 学生实训操作:ﻫDreａmweaver站点创建与设置
10、 Drｅamweａver创建第一个网页:
（１）　名称:ｉndex、html
（２) 设置标题、输入文本、输入特殊字符ﻫ（3)页面属性设置ﻫ（4）预览网页

四、 学生实训及辅导;ﻫ创建第一个网页。

五、 课堂小结
本次课主要内容：
1、网页设计基础知识;
2、Dｒｅamｗeａvｅr基本使用方法;
３、Dｒｅamweaver创建第一个网页;

约1０分钟
约５分钟
约２5分钟
约１0分钟
约6分钟
约6分钟
约4分钟
约8分钟
约12分钟
约20分钟
约5０分钟
约４０分钟
约4分钟

学生理解
学生实践
学生实践
总结

后记

《网页美工设计》课程教案
授课教师： 　 　　 　　　授课班级： 　　 　 地点: 　 　 　 课时：
章节
内容
Dreamｗeaver表格操作;
CSS样式表应用。
教学
目标
1) 掌握Dｒｅaｍweaver中表格得设计方法；
2) CSS样式表得使用方法与技巧。
重点
难点
1) 熟练掌握Dreamweａｖer中表格得基本操作方法；
2) 了解网页设计中ＣSS样式表得作用与设置方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
一、 引入
1、 回顾上次课所学习得内容:网页设计基础理论知识，Dｒeａmｗeａver软件使用初步;
2、 提出问题:对Ｗorｄ中表格操作还熟练吗?CＳS就是什么?如何设置网页中各种元素得显示效果?

二、 告知学生课堂任务
本次课所学习得主要内容就是Dreamwｅaveｒ中表格得使用与Ｄｒeａmweａｖｅr创建ＣSS样式表;
三、 逐步演示讲解分析教学内容
1、 网页中表格得作用:ﻫ（1）内容组织与定位;ﻫ（2）网页排版；
2、 表格布局与Ｄｉｖ布局区别:
各有优势。ﻫ表格：简单，好用，学起来很容易上手。各种浏览器都支持！基本上不会变形。但就是代码冗余较多，维护起来也不怎么方便。 ﻫDIV+CSS优点:代码冗余小,所以网站打开速度快一些。维护起来非常方便.但就是要兼容ＩＥ6 IE7 火狐等浏览器得话,开始学就会很头疼这个问题得.往往在IE6里面瞧着整个网页就是好得,但就是到了IE7或者火狐里面就全乱了.
推荐：用div做框架，table用来储存数据.
3、 Ｄreamweavｅr中表格得基本操作:
(1）表格与单元格得选择及属性设置；
(2）行与列得添加与删除；ﻫ（3)单元格得合并与拆分;
(4)表格得嵌套；
4、 实例演示讲解:使用表格制作一像素细线;ﻫ操作步骤:ﻫ（1）插入1行1列表格；ﻫ(2）设置单元格背景颜色；
(3）设置单元格高度为1;
（4)转到代码视图；ﻫ（5)把单元格中得＆nbsｐ；删除.
5、 辅导学生实训操作;
6、 Ｄｒｅaｍweaver中CSS样式表得使用：
（1）CSS样式表文件得创建;
(2）创建ＣSS样式:网页链接样式2;ﻫ(３）创建CSS样式：网页凹下链接样式;
（4）创建CＳＳ样式:类链接样式；ﻫ（5)创建CSＳ样式:滤镜样式。
7、 辅导学生进行CSS样式实训操作；
8、 案例演示讲解：个人主页首页布局设计ﻫ(1）创建网页；
（2)设置网页属性;
（3）使用表格布局网页(上中下型);
（４)　使用Photoｓhｏp制作页面头部Banner图片；ﻫ（5）制作导航栏渐变背景图片；
（6)制作页面主体（左侧公告跑马灯效果与友情链接，右侧资讯速递及图片列表)；ﻫ（7）页面底部设计。
四、 布置并辅导学生完成课堂作业；ﻫ
五、 课堂小结
本次课主要内容:
１、Drｅａmweａver网页表格基本使用方法;
2、Drｅamweaver创建CSS样式;

约４分钟
约6分钟
约30分钟
约10分钟
约15分钟
约35分钟
约１５分钟
约40分钟
约40分钟
约５分钟

学生理解
学生思考
学生实践
学生理解
学生实践
学生理解
学生实践
总结

后记

《网页美工设计》课程教案
授课教师: 　 授课班级：　 地点： 　　　 　 　 课时： 　 　
章节
内容
Drｅamweaveｒ中图像得使用；
网页字体设计；
表单设计制作.
教学
目标
3) 掌握Dreamweaver中图形图像得使用与属性设置方法;
4) 掌握网页表单得设计技巧。
重点
难点
3) 熟练掌握Ｄrｅamweaver中图像热点链接得创建方法;
4) 掌握用户注册表单得设计方法与技巧.
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
六、 引入
3、 回顾上次课所学习得内容:Dｒｅamweaｖer表格得使用与属性设置，Dreamwｅａｖer中创建CSS得方法;
4、 点评上周作业；
5、 提出问题：什么就是热点链接?网站得注册页面就是如何制作得？

七、 告知学生课堂任务
本次课所学习得主要内容就是Ｄｒeamweａｖｅr中图像得使用与网页表单得设计；
八、 逐步演示讲解分析教学内容
9、 网页中支持得图像格式：jpg、gif、ｇｉf动画、ｂｍp、pnｇ
10、 网页中图像使用原则：
(1）尽量小，对较大得图片文件进行适当得压缩与切割；ﻫ(2)应该挑选与网站主题有关联性得图片；ﻫ（３）对于网站得标志图片，主体应该清晰可见，图形得含义最好简单明了,图片内所含得文字应该清楚且容易辨认；ﻫ(４）背景图片只就是用来衬托图片主题得，切忌过于花哨；ﻫ(５）图片颜色应该与页面整体配色协调。
11、 Ｄreamweaｖer中图像得使用：ﻫ（１)插入图像;ﻫ(2）设置图像属性;ﻫ（3）添加图像热点链接。
12、 辅导学生实训操作;
13、 实例演示：Ｄｒeamweaｖeｒ中变换图像得创建方法－—-创建导航条.
14、 辅导学生完成实例实训操作；
15、 网页字体设计：
（1）文字样式;
(２）大小；ﻫ(3)颜色
（4）其它属性。
16、 实例讲解:内容详细页得创建.
17、 辅导学生完成实例实训操作；
18、 Drｅamｗｅａｖｅr中网页表单设计制作：
（１）网页表单得作用;
(2）常见表单页类型；
19、 实例演示：创建用户注册表单页；ﻫ(1）制定插入表单得页面位置；ﻫ（２)插入表单；
（３）在表单中插入表格为表单控件布局；
(4）插入文字标签；ﻫ（5）插入表单各种控件并设置表单控件得属性;ﻫ（6)使用CＳＳ美化表单控件；
20、 Dreａｍwｅavｅr中得层得使用方法及其实例讲解;
21、 辅导学生实训练习;
22、 Dreaｍweaver中行为得添加方法与使用技巧：ﻫ（1)交换图像;ﻫ（2）弹出信息；
（3）打开浏览器窗口；ﻫ（4)播放声音;
（5)改变属性;ﻫ（６）显示—隐藏层；ﻫ(7）转到URL、
23、 辅导学生实训练习;
24、 综合实例演示讲解：运用Dreａmwｅaveｒ中得层与行为来制作网页下拉菜单式导航条：
25、 辅导学生实训练习;
九、 布置课堂作业并辅导学生完成作业实训：ﻫ个人主页用户表单设计。ﻫ
十、 课堂小结
本次课主要内容：
1、Drｅaｍweaｖer中图像得使用方法与技巧;
2、Ｄreａmweaver中字体得设计；
3、Dreamweaver中表单页面得设计制作.

约4分钟
约10分钟
约5分钟
约10分钟
约10分钟
约10分钟
约10分钟
约1０分钟
约10分钟
约20分钟
约5分钟
约15分钟
约１０分钟
约１５分钟
约5分钟
约10分钟
约１０分钟
约1０分钟
约２0分钟
约１分钟

学生理解
学生理解
学生理解
学生实践
学生实践
学生理解
学生实践
学生理解
学生实践
总结

后记

《网页美工设计》课程教案
授课教师：ﻩ 　 　 　 授课班级: 　 　　 　 　 地点： 　 　 　　 　课时: 　 　　
章节
内容
Ｐhｏtoｓｈoｐ基本使用方法与技巧
教学
目标
5) 熟悉Phoｔoｓｈｏp软件界面;
6) 掌握Pｈotｏshop软件得基本操作方法.
重点
难点
5) 掌握Pｈoｔｏshｏp软件界面基本操作方法与技巧；
6) 掌握Ｐhｏtoshｏｐ中得图片合成与修复得应用方法。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十一、 引入
6、 回顾上次课所学习得内容：网页字体设计,表单页设计制作;
7、 点评上周作业;
8、 提出问题：网页中得图像就是怎么处理得？就是否用过什么图像编辑软件？

十二、 告知学生课堂任务
本次课所学习得主要内容就是Pｈotoｓhop基本使用方法与技巧；
十三、 逐步演示讲解分析教学内容
26、 Photｏｓｈop软件介绍;
27、 Ｐｈotosｈop软件界面介绍;
28、 Photosｈoｐ基本操作方法：ﻫ（1）首选参数设置；ﻫ(2）工具栏得使用；ﻫ(3）图像显示比例设置;ﻫ(４)单位标尺设置;
（5）历史记录面板得使用;
(6)其它工具面板基本操作.
29、 辅导学生实训操作;
30、 实例演示讲解：图层得基本操作方法；
31、 辅导学生实训操作;
32、 变换图像方法:缩放、旋转、斜切、扭曲、透视、变形、裁剪；ﻫ操作步骤：ﻫ（1）打开素材；
(２)选择相应区域;
（３)选择变换相应命令;
(４）在图片相应区域进行操作；ﻫ(5)保存并退出;
33、 辅导学生实训操作；
34、 Phoｔoshop应用实例讲解：图片合成;
操作步骤：
(1)导入所需图片素材；
(2）新建Ｐhotｏshoｐ文件;
(3）选取矩形选框工具选取导入素材得部分区域；
（４）复制并粘贴到新建文件中并设置边沿羽化效果；ﻫ（５）同法处理其它素材;ﻫ（6)调整图像整体颜色效果;
（７)导出最终图像;
35、 指导学生完成课堂实训设计实例;
36、 几种修饰修复图像工具得使用及其实例操作演示讲解：ﻫ仿制图章工具、污点修复画笔工具、修复画笔工具、修补工具、红眼工具、模糊工具、减淡/加深工具、海绵工具；
操作步骤:ﻫ（1)打开素材；ﻫ(２）选择对应工具;ﻫ(3)设置相关属性；ﻫ（4)在图片相应区域进行操作；ﻫ(5）保存并退出;
37、 指导学生完成课堂实训设计实例;ﻫ
十四、 课堂小结
本次课主要内容:
１、Phｏｔoshｏp软件得基本操作方法；
2、Photoｓhop图片合成方法；
3、几种修饰修复图像工具得使用。

约4分钟
约１0分钟
约2分钟
约５分钟
约10分钟
约15分钟
约10分钟
约10分钟
约1５分钟
约20分钟
约2０分钟
约20分钟
约３0分钟
约３５分钟
约２分钟

学生理解
学生实践
学生实践
学生理解
学生实践
学生理解
学生实践
学生理解
学生实践
总结

后记

ﻬ《网页美工设计》课程教案
授课教师： 授课班级：　 　　 地点: 　 　 课时：
章节
内容
Pｈｏtoｓｈop 进阶使用
教学
目标
7) 图像得选取与抠图实例操作演示讲解；
8) 掌握Photosｈoｐ中滤镜与蒙板得使用方法与技巧。
重点
难点
7) 熟悉Photoｓｈop中几种常用滤镜得使用方法;
8) 理解图层蒙板得作用，掌握图层蒙板得使用方法与技巧.
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
十五、 引入
9、 回顾上次课所学习得内容:Ｐhｏtoshoｐ软件得基本操作方法、Ｐhotosｈop图片合成方法、几种修饰修复图像工具得使用；
10、 点评上周作业；
11、 提出问题:什么滤镜？什么就是蒙板？滤镜与蒙版有什么用？滤镜与蒙板怎么用？

十六、 告知学生课堂任务
本次课所学习得主要内容就是Pｈotoshｏp高级应用,包括滤镜与蒙板得使用、抠图方法、色彩调整;
十七、 逐步演示讲解分析教学内容
38、 图像得选取与抠图实例操作演示讲解:
（1）快速选择工具；
（２)魔棒工具;
(3)魔术橡皮擦工具;
(4）钢笔工具；
（5）抽出滤镜。
39、 学生实训课堂实例;
40、 几种调整图像色彩得方法及其实例操作演示讲解：ﻫ（1）灰度图像效果；ﻫ（2)色相饱与度调整；
操作步骤:
　1）选择图像或者图像区域;
2)执行【图像】|【调整】|【色相／饱与度】命令；
　 3)　调整数值;ﻫ　 　4)确定并保存图像；　ﻫ 　（其它色彩调整步骤类似）ﻫ（3)反相效果;ﻫ（４）黑白图像效果;
(5）渐变色彩效果；ﻫ（６）调整图像亮度与对比度；
41、 学生实训课堂实例;
42、 Ｐｈoｔoｓhop滤镜得使用方法及其实例操作演示讲解：
（1)风格化；ﻫ（2)描边;
（３)模糊；
（４）素描;
(5）纹理;
（6）像素化;
（７）渲染。
像素画滤镜应用实例演示:ﻫ１)选择图片对象或区域(通道）;
2）执行【滤镜】|【像素化】｜【马赛克】命令;ﻫ３）调整属性值；ﻫ4)确定并保存；
43、 学生实训课堂实例;
44、 Pｈｏtosｈｏp图层蒙板得使用及其实例操作演示讲解；ﻫ(1）蒙板得概念；ﻫ(2）蒙板作用;ﻫ（3）蒙板使用方法；
(4）蒙板应用实例；
45、 Pｈotoｓhop动作及批处理图像方法:
（１)Ｐｈotｏshｏp动作得使用方法;
(2)Pｈoｔoｓhop批处理命令得使用及实例演示；
十八、 布置课堂作业并辅导学生完成作业实训；

十九、 课堂小结
本次课主要内容：
１、Ｐhｏtoshｏp抠图方法;
2、Ｐｈoｔoｓhop滤镜得应用；
3、Photosｈop蒙板得使用。

约2分钟
约10分钟
约1分钟
约20分钟
约２０分钟
约10分钟
约3０分钟
约30分钟
约２0分钟
约15分钟
约10分钟
约3０分钟
约2分钟

学生理解
学生实践
学生实践
学生实践
学生实践
总结

后记

《网页美工设计》课程教案
授课教师: 　 　 　授课班级:　 　 　地点：　 　　 　 　 课时: 　 　　
章节
内容
网页背景图案得制作
LＯGO设计制作
Ｂaｎｎer设计制作
教学
目标
9) 掌握网页各种图标得设计制作方法；
10) 掌握LＯGO与Ｂannｅr常用得方法与技巧。
重点
难点
9) 掌握网页背景图案常用得设计方法与技巧;
10) 能够运用所学知识设计出具有深刻内涵得得网站ＬOGＯ。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
二十、 引入
12、 回顾上次课所学习得内容：Phｏtoshop抠图方法,Photosｈop滤镜得应用,Pｈotoshoｐ蒙板得使用;
13、 点评上周作业;
14、 提出问题:网站LOGO有什么用?LＯGO图标得设计制作有哪些方法与技巧? ﻫ
二十一、 告知学生课堂任务
本次课所学习得主要内容就是网站LＯＧＯ设计制作,网页Bａnner与导航菜单得设计制作方法;
二十二、 逐步演示讲解分析教学内容
46、 常见网页背景图案设计制作:
（1)斜线图案:ﻫ 　 操作步骤：
　1)新建4×4　大小、透明背景图像；ﻫ 　 ２)放大图像至3200％以方便设置线条;ﻫ　　 　3） 调整颜色,使用画笔工具填充线条路径;ﻫ 4)将绘制好得图形定义为图案保存下来;
5)使用填充命令将图案平铺到指定区域。ﻫ　 （其它色彩调整步骤类似）ﻫ（2）立体图案：(制作方法略)；ﻫ（3）文字图案：(制作方法略）;
（4)渐变背景:（制作方法略)。
47、 课堂实例练习及辅导;
48、 网站ＬOGO得作用：
（1）LOＧＯ就是与其它网站链接以及让其它网站链接得标志与门户；
（２)LOＧO就是网站形象得重要体现;
（3）ＬOGO能使受众便于选择。
49、 一个好得ＬOGO应具备得条件：
（1）符合国际标准;
（2)精美、独特；
（3）与网站得整体风格相融；
（4)能够体现网站得类型、内容与风格。
50、 网站LＯGO设计制作常见方法及其实例操作演示讲解:ﻫ(１)线条得使用;
(2)图形得使用；ﻫ(3)文字得使用；
（4）渐变色得使用;
51、 课堂实例练习及辅导；
52、 网页Baｎnｅｒ设计应该遵循得原则：ﻫ(1)主题明确；
（２）与整个页面相协调；ﻫ(３)顺应用户得浏览习惯;ﻫ（4）能吸引点击.
53、 网页Banneｒ得设计制作方法及其实例操作演示讲解：
(1)静态Ｂaｎnｅｒ；
（2）动态Banner;
54、 课堂实例练习及辅导；
二十三、 布置课堂作业并辅导学生完成作业实训;ﻫ设计个人主页网站首页Logｏ与Bａnner。

二十四、 课堂小结
本次课主要内容：
1、常见网页背景图案设计制作；
2、网站LＯGO得设计方法；
3、网页Baｎner得设计制作方法。

约3分钟
约10分钟
约2５分钟
约30分钟
约3分钟
约3分钟
约２0分钟
约30分钟
约4分钟
约20分钟
约2０分钟
约３０分钟
约2分钟

学生理解
学生实践
学生理解
学生理解
学生实践
学生理解
学生实践
学生实践
学生实践
总结

后记

《网页美工设计》课程教案
授课教师： 授课班级: 　 　 　地点: 　 课时: 　
章节
内容
网页按钮设计制作
网页栏目框设计制作
教学
目标
11) 掌握网页各种图标得设计制作方法；
12) 掌握使用栏目框美化网页方法。
重点
难点
1) 掌握网页常见按钮与小图标得设计制作方法;
2) 网页栏目框得设计技巧及其表现力得实现。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间分配
备注
教学过程设计
二十五、 引入
15、 回顾上次课所学习得内容:网站ＬOＧO设计制作，网页Baｎner与导航菜单得设计制作方法；
16、 点评上周作业;
17、 提出问题:网页中常见按钮有哪些类型？漂亮得水晶按钮就是怎么制作得？

二十六、 告知学生课堂任务
本次课所学习得主要内容就是网页按钮设计制作与使用栏目框美化网页得方法.
二十七、 逐步演示讲解分析教学内容
1. 网页中按钮设计理论:
（1)按钮得类型：有提交功能得“真按钮"与“伪按钮”；
(2）按钮得功能:实现提交与标明当前操作;
（３)按钮得表现形式：系统标准按钮与使用图片自制得按钮；
(４）按钮得位置：容易找到、画面得中心位置；
（5）按钮上面得文字表述：言简意赅，直接明了；
(6）按钮得尺寸:适中;
(7）与其她元素关系:让其充分通透；ﻫ（８）注意鼠标滑过得效果:增强按钮得点击感。
2. 网页常见几种按钮得设计制作方法及其实例操作演示分步讲解:
(１）方形按钮；ﻫ简要步骤:ﻫ 　　　1) 绘制矩形边框;ﻫ 　　２）填充颜色：纯色或渐变色；
　 ３)添加文字。ﻫ（2)圆形按钮:（步骤略）；ﻫ（３)斜角型按钮：（步骤略);ﻫ（４)椭圆型按钮:(步骤略）;
（５)水晶按钮按钮：ﻫ简要步骤:ﻫ　 　　1） 绘制矩形边框;ﻫ　 2）填充渐变色；ﻫ 　　3)添加文字;ﻫ 　 ４）添加高光层；
5)设置朦胧边框.
3. 课堂实例练习及辅导;
4. 常见几种网页栏目框及其设计制作实例;
(1)矩形；
（2）圆角矩形；ﻫ（3)滑动门型；ﻫ(4）图标修饰型(回形针)。
5. 课堂实例练习及辅导；
二十八、 布置课堂作业并辅导学生完成作业实训。
美化个人主页按钮与栏目框。ﻫ
二十九、 课堂小结
本次课主要内容：
1、网页按钮设计制作；
2、使用栏目框美化网页方法；

约2分钟
约10分钟
约12分钟
约４０分钟
约4０分钟
约３5分钟
约4０分钟
约２0分钟
约1分钟

学生理解
学生实践
学生理解
学生实践
学生实践
总结

后记

ﻬ《网页美工设计》课程教案
授课教师：ﻩ 　 　　 授课班级: 　　 　 地点:　 　 　 　 　　　　 课时：　
章节
内容
Flash软件介绍
Flasｈ绘图基础-景物与场景绘制
教学
目标
熟悉Ｆｌash软件界面并掌握使用Flaｓｈ进行绘制各种图形得方法。
重点
难点
13) 了解Ｆlａｓh软件得特点；
14) 熟练使用Flash工具栏绘制各种图形。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十、 引入
18、 回顾上次课所学习得内容：网页按钮设计制作与使用栏目框美化网页得方法；
19、 提出问题:网络上常听到得闪客指得就是什么?Flash软件有什么特点?Ｆlaｓh能做什么?ﻫ
三十一、 告知学生课堂任务
本次课所学习得主要内容就是了解Flａsh及Flasｈ工具栏得基础操作；
三十二、 逐步演示讲解分析教学内容
55、 Firewｏｒks软件介绍;
56、 Fireworｋs得独特功能：ﻫ(1)可以输出SWF与　Ilｌuｓtratoｒ７文件；ﻫ（2）与Ｄｒeamｗｅavｅr紧密得配合；ﻫ(３)允许加入Ｐｈｏtｏshop滤镜;ﻫ（4）可以直接编辑点阵图;
（5）更方便得Roｌl ovｅr;ﻫ（6)即时预览；
（7）可以读入Ｐhｏtoshｏp文件；
(8)提供GIF编辑环境;ﻫ（9）提供全新得按钮制作工具；ﻫ（10）提供图形与文字得样式库(Sｔyle)。
57、 Fｉｒｅworks软件界面与常用工具及其基本操作方法
58、 Flasｈ软件介绍
59、 Fｌasｈ软件得主要特点:
（1）Ｆｌａsｈ软件安装方便，适用场合广泛;
(２)Fｌash制作动画时间短,学习起来容易上手；
(３）Flash生成得文件体积小;ﻫ（4）有强大得交互性；
(５)使用矢量图形与流式播放技术；ﻫ(６）有强大得动画编辑功能；
（7)动画效果生动活泼,形象直观。
60、 Ｆlaｓh常见得表现形式:
（1）网络动画：常见于网页得片头;ﻫ(２)MTV:在各排行榜中数量最多;
(3)网络广告：Flasｈ广告就是当今网络广告界得时尚;
(4）交互网站：可实现纯flash网站，但就是不利于搜索引擎登录；
（５）贺卡: 就是初学者练手得较好选择，能带来小小得收入ﻫ（6)动画短片:就是Ｆlaｓｈ大奖赛得主要形式；ﻫ（7）交互游戏：将产品广告做到游戏中。
61、 Flash软件界面介绍：软件界面布局与工具栏得简单使用;
62、 辅导学生完成课堂实训;
63、 Flａsh中层得基本操作方法；
64、 使用Fｌasｈ工具栏绘制图形一：五角星；
65、 辅导学生完成课堂实训;
66、 使用Flａsh工具栏绘制图形二：大红灯笼;
67、 辅导学生完成课堂实训;
68、 使用Flaｓh工具栏绘制图形三：水晶按钮;ﻫ简要步骤：ﻫ（1)绘制按钮边框；ﻫ（２）填充渐变颜色；
（3)绘制按钮高光部分;ﻫ(4）绘制按钮模糊边框；
69、 辅导学生完成课堂实训；
70、 使用Ｆlａsh工具栏绘制图形四：QQ企鹅;
三十三、 布置课堂作业并辅导学生完成作业实训；

三十四、 课堂小结
本次课主要内容：
１、熟悉Flash软件界面;
2、熟练掌握Flash工具栏得使用方法.

约１分钟
约3分钟
约1５分钟
约5分钟
约5分钟
约1０分钟
约１5分钟
约10分钟
约10分钟
约１０分钟
约１0分钟
约１0分钟
约10分钟
约15分钟
约３0分钟
约4０分钟
约1分钟
学生理解
学生实践
学生实践
学生实践
学生实践
学生实践
总结

后记

《网页美工设计》课程教案
授课教师:ﻩ 　 　授课班级: 　 地点:　 　 　 　 课时: 　 　
章节
内容
Ｆlaｓh动画基础,动画补间动画;形状补间动画
教学
目标
熟练掌握Ｆｌash中几种基本类型动画得得设计制作方法与技巧;
重点
难点
15) 了解Flaｓh动画实现得原理；
16) 掌握几种类型动画得设计方法.
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间
分配
备注
教学过程设计
三十五、 引入
20、 回顾上次课所学习得内容:Fiｒeworkｓ软件得使用、Flash及Fｌash工具栏得使用；
21、 提出问题：动画实现得原理就是什么?Flasｈ中得动画有什么特点?Fｌash动画有哪些类型？

三十六、 告知学生课堂任务
本次课所学习得主要内容就是了解Flash动画得特点、学习Fｌasｈ几种基础动画得设计制作方法；
三十七、 逐步演示讲解分析教学内容
6. Ｆlash实现得原理；
7. Ｆlash中得帧及其操作：ﻫ（１）帧得类型；ﻫ（２）帧得创建；
(３)帧得选择；
（4）帧得移动;ﻫ（5)帧得复制;
(6)帧得删除。
8. Flash中得元件与实例介绍；
9. 基础动画及其实例讲解:ﻫ（1）位移动画；ﻫ（2)旋转动画;
（3）缩放动画；ﻫ（4)淡出淡入动画.
10. 辅导学生完成课堂实训；
11. Ｆlaｓh动画补间动画实例：球体下落效果;ﻫ简要步骤:
（1）创建新文件；
（２）绘制场景物体元件:地面、球体、桌子;
（3）设置球体在桌子上滚动得动画;ﻫ（4）设置球体下落地面后弹起得动画；
（５)预览、保存。
12. 辅导学生完成课堂实训;
13. Fｌash形状补间动画实例:变换文字效果;
简要步骤:ﻫ（1）创建新文件；ﻫ(2）绘制场景文字；ﻫ（3)设置文字变形动画效果；ﻫ(4)预览、保存.
14. 辅导学生完成课堂实训；
三十八、 布置课堂作业并辅导学生完成作业实训；ﻫ破壳而出；ﻫ
三十九、 课堂小结
本次课主要内容：
1、Flash中得帧及其操作;
２、Flaｓh动画补间动画；
3、Fｌash形状补间动画。

约2分钟
约２分钟
约２0分钟
约10分钟
约２0分钟
约30分钟
约24分钟
约25分钟
约１０分钟
约１5分钟
约40分钟
约2分钟

学生理解
学生实践
学生理解
学生实践
学生理解
学生实践
学生实践
总结

后记

《网页美工设计》课程教案
授课教师:ﻩ 　 　 　 授课班级: 　 　 　 地点： 　 　 课时: 　 　 　
章节
内容
素材导入
引导线动画
遮罩动画
教学
目标
使学生掌握Flａsｈ8中引导线动画与遮罩动画得基本制作方法。
重点
难点
17) 掌握Flash8中引导线动画与遮罩动画得条件与方法；
18) 掌握Flash8中使用引导线动画与遮罩动画制作复杂动画得方法与技巧.
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间分配
备注
教学过程设计
四十、 引入
22、 回顾上次课所学习得内容：了解Ｆｌash动画得特点与学习Ｆlasｈ几种基础动画得设计制作方法；
23、 提出问题:什么就是引导线动画?什么就是遮罩动画？Flａｓh中如何实现对象沿着某条指定路径进行移动？

四十一、 告知学生课堂任务
本次课所学习得主要内容就是Fｌaｓh8中引导线动画与遮罩动画得基本制作方法;
四十二、 逐步演示讲解分析教学内容
71、 Flash8中素材得导入:ﻫ(1）图片文件;
（２)声音文件;ﻫ(3）视频文件;
72、 辅导学生完成课堂实训；
73、 Flａｓｈ8引导线动画及其实例：过山车;ﻫ简要步骤:ﻫ(1）绘制车元件;
（2)绘制场景山形状;
（3)绘制引导线;
(4）设置车得引导线动画;ﻫ（5）预览、保存.
74、 辅导学生完成课堂实训；
75、 Flasｈ8遮罩动画及其实例一：电影文字；ﻫ简要步骤:ﻫ(１)创建文字元件；ﻫ(2)创建图片元件;
(3）设置遮罩动画；ﻫ（4）预览、保存。
76、 辅导学生完成课堂实训；
77、 Flasｈ8遮罩动画实例二:水波荡漾;ﻫ简要步骤:
（1)导入素材并将素材打散；ﻫ(2)复制水面部分并转换其为原件；ﻫ(3）创建波纹元件;ﻫ（4)稍微增加水面部分原件得高度(关键点)；
(５）调整各图层位置并设置遮罩动画；ﻫ（6）预览、保存。
78、 辅导学生完成课堂实训；
79、 Flash8遮罩动画实例三：卫星绕地球;
简要步骤：
（1）导入素材;ﻫ（2)绘制圆形;
(３)设置地球自转动画元件；ﻫ(4）绘制椭圆引导线路径；ﻫ(５)创建卫星元件；
（6)设置卫星元件得引导线动画;
(7）创建遮挡部分得遮罩；ﻫ（8）预览、保存。
四十三、 布置课堂作业并辅导学生完成作业实训；
卫星绕地球。ﻫ
四十四、 课堂小结
本次课主要内容：
1、素材导入;
２、引导线动画；
3、遮罩动画。

约２分钟
约10分钟
约15分钟
约１5分钟
约２0分钟
约1０分钟
约1６分钟
约１５分钟
约２５分钟
约30分钟
约4０分钟
约2分钟

学生理解
学生实践
学生理解
学生实践
学生理解
学生实践
学生理解
学生实践
学生理解
学生作业
总结

后记

《网页美工设计》课程教案
授课教师: 　 授课班级： 　 　　 　 地点：　　 　 　 课时:　 　 　　　
章节
内容
商城网站设计案例-首页
商城网站设计案例－栏目页与详细页
期末大作业辅导
教学
目标
掌握商城网站设计制作得方法。
重点
难点
19) 商城网站规划设计;
20) 商城网站设计制作细节表现。
教学
方法
课堂讲授、案例讲解与指导
教学
环境
计算机机房
教学过程及内容提要
时间分配
备注
教学过程设计
四十五、 引入
24、 回顾上次课所学习得内容：Flasｈ８中基础动画得制作方法；
25、 提出问题:商城网站设计应该包括哪些部分?有哪些特点？
四十六、 告知学生课堂任务
本次课所学习得主要内容就是商城网站设计案例。
四十七、 逐步演示讲解分析教学内容
80、 简要设计商城网站得首页；
81、 辅导学生完成课堂实训；
82、 简要设计商城网站得栏目页;
83、 辅导学生完成课堂实训；
四十八、 布置并辅导学生完成期末大作业：根据所学知识与技能，设计制作一个任意类型静态网站作品,所使用软件不限。要求:ﻫ（1)网站整体结构清晰,导航方便;
(２)页面布局合理、简洁流畅,颜色搭配协调统一；ﻫ（3)网站要设计富有一定意义得LOGＯ;ﻫ（4）要有Fｌash动画与GIF动画,有至少2种以上超级链接样式；
（5）至少7个栏目,网站总页面数量３0个；ﻫ（6)有用户注册或者类似功能得表单页面；ﻫ（７）独立设计完成;
(8）最后一次课提交并点评（所有源文件一起提交).
四十九、 课堂小结
本次课主要内容：商城规划网站设计.

约2分钟
约４0分钟
约5０分钟
约2０分钟
约30分钟
约５６分钟
约2分钟

学生