网页电子教案（131-140）.doc

2014－2015学年度第一学期《网页制作》课程电子教案
授课课题：商品展示动画素材 授课教师：蒋红艳 NO： 66-67
授课班级
14春微机、14春商务
授课日期

授课类型
讲授、演示
学 时 数
4
教学目标
在flash中制作数码商店商品展示动画素材
教学内容
商品展示动画
重点难点
对齐面板的使用、图层2对象的放置
教学方法
演示、讲解
学习方法
观察、实训
教学过程设计
备注（时间分配、个性修改等）
教学步骤
及
主要内容

一、 范例展示

二、任务分析
1、动画类型：渐变动画；
2、渐变动画的制作方法：两个关键帧，中间创建补间；
3、一张图片好做动画，一组图片如何做渐变动画？
4、一组图片如何在舞台上快速的调整好位置？
5、如何做到舞台不留白？图片不断循环滚动？

三、教师演示
1、复习渐变动画的制作；
2、新建文件：宽180高800，背景浅蓝色；
3、导入素材图片到库中；
4、从库中拖数码图片至舞台上，用对齐面板进行调整排列；
5、把排列好的图片进行组合；
6、图层1：第1帧，把图片组与舞台水平中齐，顶端对齐；第300帧，图片组与舞台水平中齐，移至舞台上方；两关键帧之间创建传统补间；
7、图层2：第1帧，复制图片组，使之紧挨着图层1图片后面放置；第300帧，图片组与舞台顶对齐；两关键帧之间创建传统补间；

课堂练习
制作数码商店商品展示动画

小结与作业

课堂小结

本课作业

本课教学后记（课堂设计理念，实际教学效果及改进设想）

教研组长签字： 年 月 日

2014－2015学年度第一学期《网页制作》课程电子教案
授课课题：店铺介绍 授课教师：蒋红艳 NO： 68-70-
授课班级
14春微机、14春商务
授课日期

授课类型
讲授、演示
学 时 数
6
教学目标
1、 在网页中插入flash动画；
2、 绘制局部布局表格；
3、 添加网页元素；
4、 设置CSS样式
教学内容
店铺介绍
重点难点
1、 绘制布局表格；
2、 设置CSS样式
教学方法
演示、讲解
学习方法
观察、实训
教学过程设计
备注（时间分配、个性修改等）
教学步骤
及
主要内容

一、范例展示

二、任务分析
1、生成网页文件jieshao.html；
2、绘制布局；
3、添加网页元素；
4、设置样式；
5、创建链接。

三、演示操作
1、复制样式页，重命名为jieshao.html；
2、在商品分类图片下方插入商品分类动画；
3、绘制主信息区布局：插入2行1列宽500像素的表格，让表格中对齐；
4、设置表格第1行300像素，插入图片，给图片加边框，设置居中对齐；
5、在第2行添加店铺介绍文字，对文字进行段落调整，新建CSS样式，对文字行高进行调整；
6、创建菜单链接。

四、学生实训，教师巡回指导；

五、作业点评、保存

课堂练习

小结与作业

课堂小结

本课作业

本课教学后记（课堂设计理念，实际教学效果及改进设想）

教研组长签字： 年 月 日