河大版八年级全册第5节 设置网页的动画效果教案设计

这是一份河大版八年级全册第5节 设置网页的动画效果教案设计，共5页。教案主要包含了合作学习，拓展思维等内容，欢迎下载使用。

课题名
《设置网页的动画效果》
教学目标
1.知识与技能
(1)学会在主页插入滚动字幕“欢迎光临！”；
(2)学会设置网页中图片的动态HTML(DHTML)效果；
(3)学会插入FrntPage提供的组件和动画效果设置的方法，学习设置网页过渡效果；
(4)学习添加视频的方法。
2.过程与方法
(1)通过教师演示让学生更直观掌握FrntPage设置滚动字幕和图片的动态HTML(DHTML)效果的方法；
(2)让学生通过练习巩固，小组合作，学习设置网页的动画效果。
3.情感态度价值观
培养学生学习网站建设的兴趣，鼓励学生认真思考，学习设置网页的动画效果的操作方法，灵活运用，培养创新能力。
教学重点
FrntPage插入滚动字幕和设置网页的动画效果的方法。
教学难点
掌握FrntPage提供的组件和动态效果设置的方法。
教学准备
教师准备：ppt，FrntPage2003。“中国茶文化”网站。
学生准备：自己前几节课设计的“中国茶文化”网站。
教学过程
新课导入
PPT展示。
打开中国教育网络电视台“”网站，体会网站的动画效果。
揭示课题，为自己创建的网站设置动画效果。
二、合作学习、自主探究
学习任务：
(1)在主页上插入一个以灰色为底色，褐色文字“欢迎光临!”的滚动字幕。
(2)当鼠标指向主页图片时，换为“茶树”图片，鼠标离开图片时，显示原图片。
任务分析：
在FrntPage中，利用插入图片的方法，可以直接插入gif动画，我们也可以利用“插入”→“图片”→“flash 影片”命令，插入Flash 动画。包含这些动画的网页被浏览时，这些动画就显示其动画效果。如果在“网页属性”对话框中的“高级”选项卡中选择“启用超链接翻转效果”，则当鼠标指向该网页的“超链接”时，就有翻转的效果。除此之外，FrntPage还提供了滚动字幕、悬停按钮、横幅广告管理器、动态 HTML效果、网页过渡等具有动态效果的功能。下面就来介绍这些方法的具体效果。
(1)滚动字幕：一行文字在屏幕上滚动。
(2)悬停按钮：当光标移动到该按钮上时，它的颜色或背景会发生改变，而光标移开时又能恢复原样的按钮。
(3)横幅广告管理器：将一系列的图像按照设置好的顺序和时间间隔在屏幕上显示出来。
(4)动态HTML(DHTML)效果：对网页中选定的文本或图片，进行各种动画效果的设置。它可以让一幅图片从网页中飞出去，也可以产生让文本逐字移出网页的效果。
任务中当鼠标指向图片时，图片换为另一张图片的效果就是利用动态 HTML 效果来实现的。驱动换图片的方式叫鼠标悬停方式。
操作指南：
(1)打开"chaweb”站点中的“index.htm”网页文件。
(2)插入字幕。
1将光标移到标题下面的一行,执行“插入”“Web组件”命令选择动态效果”类型中的“字幕”,打开“字幕属性”对话框。
②在“文本”输入框中输入“欢迎光临!"。
③在“背景颜色”的选项框中,选择“灰色”。
④“方向”、“表现方式”、“重复”等选项为默认值。
⑤单击“样式”按钮,打开“修改样式”对话框。
⑥单击“格式”按钮，选择“字体”选项卡，打开“字体”对话框。
⑦在“字体”对话框中，选择“褐色”、“加粗”字型。
⑧分别单击“确定”按钮后,插入灰底褐色的“欢迎光临!”的滚动字幕。
⑨预览滚动字幕的效果。
(3)设置图片的动态效果
①选择图片。
②执行“工具”→“自定义”命令，在“自定义”对话框中,选择“命令”选项卡，单击“类别”列表中的“格式”,在右侧“命令”列表中选择“动态HTML效果”，拖动鼠标，将其拖动到“格式”菜单中，释放鼠标，执行“格式”→“动态HTML效果"命令。
③打开"DHTML效果”对话框。
④单击“选择一种事件”下拉按钮，选择“鼠标悬停”选项。
⑤单击“应用”下拉按钮，选择“交换图片”选项。
⑥单击“效果”下拉按钮，选择“选择图片”选项，在打开的“选择图片”对话框中选择图片。单击“确定”按钮。
⑦预览网页，鼠标指向图片，查看是否换为另一张图片。
(4)保存文件。
任务小结：
通过学习插入滚动字幕和设置交换图片的动画效果，应掌握插入 FrntPage提供的组件和动态效果设置的方法。
组件是插入网页的一个对象，而动态效果的设置是对网页中原有的文字、图片进行动画效果的设置。所以、插入组件时，要先确定光标的位置。设置动态效果，要先选定文字或图片。
无论是插入动态组件，还是进行动态效果的设置，都可以增强网页的吸引力和表现力，但也不要滥用。有时使用滚动字幕可以收到很好的网页浏览效果，但有时在页面上一直有滚动字幕不停地移动，也会让浏览者厌烦。
学生在老师操作演示的基础上自主练习，熟练掌握插入 FrntPage提供的组件和动态效果设置的方法，按照操作指南完成自己创建的网站的动态效果。
教师巡堂指导，小组同学间互助合作，不明白的问题讨论交流。
各组推举代表展示交流。
三、拓展思维、巩固认知
1.修改组件的属性
用鼠标双击组件,打开对应的组件属性对话框,进行重新设置。
2.删除“动态效果”
要删除已设置好的动画效果，则选中动画效果后，打开DHTML效果工具栏单击“删除效果“按钮即可。
3.设置网页过渡效果
(1)执行“格式”→“网页过渡”命令，打开“网页过渡”对话框。
(2)在“事件”下拉列表框中选择相应的事件，在“过渡效果”选项框中选择相应的过渡效果,单击“确定”按钮。
4.添加视频
(1)在网页视图模式下，将插入点放置到要插入视频的位置。
(2)执行“插入”→“图片”→“视频”命令。
(3)浏览到该视频文件并选定，然后保存到网站文件夹。
学生在老师讲解后拓展练习,尝试添加视频操作，因为与插入图片方法一样，教师不做过多讲解，让学生自己探究尝试。教师巡视指导。小组合作探究。
布置作业
(1)查找“帮助”窗口中有关插入“悬停按钮”和“横幅广告管理器”动态组件的方法。
(2)在个人网站中设置动画效果。
板书设计
设置网页的动画效果
插入gif动画
插入Flash动画
FrntPage提供的组件和动态效果（本节运用）：
滚动字幕
动态HTML(DHTML)效果
教学反思
通过本节教学，使学生掌握网页的动画效果设置，使自己的网站更生动有趣，增强网页的吸引力和表现力，但是也要让学生认识到无论是插入动态组件，还是进行动态效果的设置，都不要滥用。有时使用滚动字幕可以收到很好的网页浏览效果，但有时在页面上一直有滚动字幕不停地移动，也会让浏览者厌烦。学生尝试自主探究，会多种动态效果的设置，同时也要会删除不需要的效果。对于添加视频的操作，课堂不做重点讲解，因为与插入图片方法类似，只是作为学生探究的一个点。教师设置教学目标，提出问题，把握操作要领，进行示范操作，学生模仿操作，教师巡回辅导，最后由学生独立完成任务，从而激发学生的学习兴趣，培养学生发现问题和解决问题的能力。本次教学采用的教学方式是：以理论学习为基础，以教师设疑、引导、示范为出发点，以动手操作为核心，以完成目标任务为归宿，采用任务驱动式教学法，启发、引导教学法。学生都能圆满完成任务。