第1章 第5节 设置网页的动画效果 教案
文档属性
| 名称 | 第1章 第5节 设置网页的动画效果 教案 |  | |
| 格式 | zip | ||
| 文件大小 | 119.0KB | ||
| 资源类型 | 教案 | ||
| 版本资源 | 河北大学版 | ||
| 科目 | 信息技术（信息科技） | ||
| 更新时间 | 2020-09-15 15:22:44 | ||
图片预览
文档简介
第5节 设置网页的动画效果 教案
教学目标
1知识与能力目标:
通过本节的学习,使学生能熟练掌握:使用滚动字幕、鼠标悬停和网页过渡等功能为网页中的部分对象和网页的整体切换添加动画效果。2·1·c·n·j·y
2过程与方法目标:
通过任务驱动,引导学生根据教师所演示的操作来完成任务,培养学生的自主学习能力;通过分组协作设置有个性的动画效果,培养学生的协作学习、探究学习的能力以及创新精神。 21·世纪*教育网
3情感态度与价值观目标:
鼓励学生大胆演示、展示作品,培养学生自我表现的能力;通过对网页动画效果的合理、灵活的运用,培养学生的审美情趣、学习兴趣和信息素养。
学情分析
知识和能力方面:通过前面几节课的学习学生已经熟悉了frontpage编辑环境,掌握了创建网站、编辑网页和网页布局及超级链接等操作,这节课的知识对于学生来说比较容易上手。但是学生之间存在一定的差异,所以在教学中我适当地采取分层教学,对于基础较好的学生我将放手让他们自学,而对于能力较弱的学生,让他们在同学和老师的引导、示范讲解下完成任务。 www-2-1-cnjy-com
生理和心理方面:初二的学生对于制作动画效果的兴趣比较浓厚,但是青少年好动,注意力容易分散,所以在教学中我一方面运用直观的范例,引发学生的兴趣,使他们的注意力始终集中在课堂上;另一方面要创造条件和机会,让学生发表见解,发挥学生学习的主动性。21*cnjy*com
重点难点
【教学重点】
通过观看范例、教师演示引导和学生自主完成任务来让学生学会使用滚动字幕、鼠标悬停和网页过渡等功能为网页中的部分对象和网页的整体切换添加动画效果。【来源：21cnj*y.co*m】
【教学难点】
操作过程并不复杂,但是对动画效果的合理、灵活运用以及创新比较困难。在这方面可以通过欣赏实例让学生初步了解动画在网页中的应用,在了解的基础上再进行创新。【出处：21教育名师】
教学过程
教学活动
活动1
【导入】
一、观看实际示例,导入新课：
1、展示一份网站的欢迎界面。
2、提问:
(1)同学们你觉得这样的欢迎界面怎么样?
(2)同学们你想不想自己动手设计这样的一个带有动画的欢迎界面?
(3)今天我们一起来学习在网页中设置动画。
活动2
【讲授】新课教学
二、网页动画介绍。
Frontpage提供了滚动字幕、动态HTML效果、网页过渡等具有动态效果的功能,其中在我们上述示例中所展示的就是滚动字幕、鼠标悬停、网页过渡的效果:21世纪教育网版权所有
滚动字幕:一行文字在屏幕上滚动。
鼠标悬停:当光标移动到图片上时,变成另外一幅图片,光标移开后恢复原样。这就是动态HTML效果中的一种。21cnjy.com
网页过渡:进入网页(网站)和离开网页(网站)的动画。
本节课我们也主要来学习上述这些操作。
三、准备操作。
1、启动frontpage 2003软件。
2、学生自主建立网站,网站名称为春雨工程。(注意:网站名称和网页名称用英文或汉语拼音,比如spring-rain、chunyugongcheng、cygc等)www.21-cn-jy.com
3、新建一个网页,命名为welcome.html。
4、双击welcome.html页面,进入编辑界面。
以上部分由学生自主完成,主要目的是检测学生前面所学知识的掌握情况。
四、教师演示部分
1、鼠标悬停操作过程。
(1)在网页中插入一张图片,进行简单的格式设置,放置到页面中央位置。
(2)单击“视图”——“工具栏”——“DHTML效果”选项,打开DHTML效果对话框。
(3)选中图片,在“选择一种事件”下拉列表中选择“鼠标悬停”,在“选择一种效果”下拉列表中选择“交换图片”,在“选择设置”里面选择一张图片。
(4)如果效果不满意,可以删除效果,重新设置。
(5)设置完成后,通过预览查看效果。
本部分主要学习鼠标悬停的操作过程,对于其他效果,学生可以在完成任务时自己进行拓展练习,教师可以给予辅导。【来源：21·世纪·教育·网】
2、滚动字幕操作过程。
(1)在图片下方单击鼠标,执行“插入”——“Web组件”命令,选择“动态效果”类型中的“字幕”,打开“字幕属性”对话框。2-1-c-n-j-y
(2)在文本输入框中输入“欢迎光临大水泉中学春雨工程网站,单击图片进入主页!”。
(3)在“背景颜色”的选项框中,选择一种颜色,也可以不添加背景。
(4)“方向”、“表现方式”、“重复”等选项可以根据自己想要的效果进行设置,在这里我们选择默认即可。21·cn·jy·com
(5)单击“样式”按钮,打开“修改样式”对话框。
(6)单击“格式”按钮,选择“字体”选项卡,打开“字体”对话框。
(7)在“字体”对话框中,选择“绿色”,“加粗”字型,字体为“华文新魏”,字号为“24pt”。单击确定。【版权所有：21教育】
(8)预览滚动字幕的效果。
本部分进行滚动字幕的操作学习,学生可以根据自己的设计进行设置,不一定非要和教师的设置数据一致。鼓励学生进行创新。21教育名师原创作品
3、网页过渡效果设置。
(1)给图片进行超级链接设置,链接到主页“index.html”。
(2)双击index.html,在主页上输入“返回欢迎界面”文字,并超级链接到welcome.html页面。(本部分可以让学生练习前面学过的超级链接知识)
(3)双击welcome.html,执行“格式”——“网页过渡”命令。
(4)在事件下拉列表中选择相应事件,在“过渡效果”选项框中选择相应的过渡效果。
(5)预览效果。
本部分学习网页过渡的效果,所以需要和主页有一个互动,才能让效果更加明显。
活动3
【练习】学生练习
要求如下:先模仿教师演示步骤进行操作,教师进行辅导。然后利用教师所发素材图片中的另两幅图片,做一个名为study的网站的欢迎界面或者主页,鼓励学生按照自己的意愿进行设置,使其效果准确美观,并可以添加更多要素使整个页面更加协调,功能更加完善。21教育网
教学目标
1知识与能力目标:
通过本节的学习,使学生能熟练掌握:使用滚动字幕、鼠标悬停和网页过渡等功能为网页中的部分对象和网页的整体切换添加动画效果。2·1·c·n·j·y
2过程与方法目标:
通过任务驱动,引导学生根据教师所演示的操作来完成任务,培养学生的自主学习能力;通过分组协作设置有个性的动画效果,培养学生的协作学习、探究学习的能力以及创新精神。 21·世纪*教育网
3情感态度与价值观目标:
鼓励学生大胆演示、展示作品,培养学生自我表现的能力;通过对网页动画效果的合理、灵活的运用,培养学生的审美情趣、学习兴趣和信息素养。
学情分析
知识和能力方面:通过前面几节课的学习学生已经熟悉了frontpage编辑环境,掌握了创建网站、编辑网页和网页布局及超级链接等操作,这节课的知识对于学生来说比较容易上手。但是学生之间存在一定的差异,所以在教学中我适当地采取分层教学,对于基础较好的学生我将放手让他们自学,而对于能力较弱的学生,让他们在同学和老师的引导、示范讲解下完成任务。 www-2-1-cnjy-com
生理和心理方面:初二的学生对于制作动画效果的兴趣比较浓厚,但是青少年好动,注意力容易分散,所以在教学中我一方面运用直观的范例,引发学生的兴趣,使他们的注意力始终集中在课堂上;另一方面要创造条件和机会,让学生发表见解,发挥学生学习的主动性。21*cnjy*com
重点难点
【教学重点】
通过观看范例、教师演示引导和学生自主完成任务来让学生学会使用滚动字幕、鼠标悬停和网页过渡等功能为网页中的部分对象和网页的整体切换添加动画效果。【来源：21cnj*y.co*m】
【教学难点】
操作过程并不复杂,但是对动画效果的合理、灵活运用以及创新比较困难。在这方面可以通过欣赏实例让学生初步了解动画在网页中的应用,在了解的基础上再进行创新。【出处：21教育名师】
教学过程
教学活动
活动1
【导入】
一、观看实际示例,导入新课：
1、展示一份网站的欢迎界面。
2、提问:
(1)同学们你觉得这样的欢迎界面怎么样?
(2)同学们你想不想自己动手设计这样的一个带有动画的欢迎界面?
(3)今天我们一起来学习在网页中设置动画。
活动2
【讲授】新课教学
二、网页动画介绍。
Frontpage提供了滚动字幕、动态HTML效果、网页过渡等具有动态效果的功能,其中在我们上述示例中所展示的就是滚动字幕、鼠标悬停、网页过渡的效果:21世纪教育网版权所有
滚动字幕:一行文字在屏幕上滚动。
鼠标悬停:当光标移动到图片上时,变成另外一幅图片,光标移开后恢复原样。这就是动态HTML效果中的一种。21cnjy.com
网页过渡:进入网页(网站)和离开网页(网站)的动画。
本节课我们也主要来学习上述这些操作。
三、准备操作。
1、启动frontpage 2003软件。
2、学生自主建立网站,网站名称为春雨工程。(注意:网站名称和网页名称用英文或汉语拼音,比如spring-rain、chunyugongcheng、cygc等)www.21-cn-jy.com
3、新建一个网页,命名为welcome.html。
4、双击welcome.html页面,进入编辑界面。
以上部分由学生自主完成,主要目的是检测学生前面所学知识的掌握情况。
四、教师演示部分
1、鼠标悬停操作过程。
(1)在网页中插入一张图片,进行简单的格式设置,放置到页面中央位置。
(2)单击“视图”——“工具栏”——“DHTML效果”选项,打开DHTML效果对话框。
(3)选中图片,在“选择一种事件”下拉列表中选择“鼠标悬停”,在“选择一种效果”下拉列表中选择“交换图片”,在“选择设置”里面选择一张图片。
(4)如果效果不满意,可以删除效果,重新设置。
(5)设置完成后,通过预览查看效果。
本部分主要学习鼠标悬停的操作过程,对于其他效果,学生可以在完成任务时自己进行拓展练习,教师可以给予辅导。【来源：21·世纪·教育·网】
2、滚动字幕操作过程。
(1)在图片下方单击鼠标,执行“插入”——“Web组件”命令,选择“动态效果”类型中的“字幕”,打开“字幕属性”对话框。2-1-c-n-j-y
(2)在文本输入框中输入“欢迎光临大水泉中学春雨工程网站,单击图片进入主页!”。
(3)在“背景颜色”的选项框中,选择一种颜色,也可以不添加背景。
(4)“方向”、“表现方式”、“重复”等选项可以根据自己想要的效果进行设置,在这里我们选择默认即可。21·cn·jy·com
(5)单击“样式”按钮,打开“修改样式”对话框。
(6)单击“格式”按钮,选择“字体”选项卡,打开“字体”对话框。
(7)在“字体”对话框中,选择“绿色”,“加粗”字型,字体为“华文新魏”,字号为“24pt”。单击确定。【版权所有：21教育】
(8)预览滚动字幕的效果。
本部分进行滚动字幕的操作学习,学生可以根据自己的设计进行设置,不一定非要和教师的设置数据一致。鼓励学生进行创新。21教育名师原创作品
3、网页过渡效果设置。
(1)给图片进行超级链接设置,链接到主页“index.html”。
(2)双击index.html,在主页上输入“返回欢迎界面”文字,并超级链接到welcome.html页面。(本部分可以让学生练习前面学过的超级链接知识)
(3)双击welcome.html,执行“格式”——“网页过渡”命令。
(4)在事件下拉列表中选择相应事件,在“过渡效果”选项框中选择相应的过渡效果。
(5)预览效果。
本部分学习网页过渡的效果,所以需要和主页有一个互动,才能让效果更加明显。
活动3
【练习】学生练习
要求如下:先模仿教师演示步骤进行操作,教师进行辅导。然后利用教师所发素材图片中的另两幅图片,做一个名为study的网站的欢迎界面或者主页,鼓励学生按照自己的意愿进行设置,使其效果准确美观,并可以添加更多要素使整个页面更加协调,功能更加完善。21教育网