第7课 让网页动起来

第7课 让网页动起来
教学目标：1、在网页中添加字幕。
2、在网页中添加DHTML动态效果。
教学重点：运用滚动字幕、悬停按钮美化自己的网页。
教学难点：发扬探索精神，自主探究学习
教学过程：
一、作品展示，导入课题：
师（提问）：在前面我们大家的共同探讨中大家是否已经对制作一个网页有了一个具体的思路呢？
生（回答）：略
师：大家看一看教师的这个网页中有哪些元素是大家所没有接触过的？
生：运动的字！（欢迎参观我的校园）；那些显示的图片！；那些颜色可以改变的按钮！
师：这些元素的增加，大家感觉怎么样？
生：很漂亮；有动感
生：老师，这些都是怎么加上去的呀？
二、新课教学
1、在网页中添加字幕。
师：网页中常常有一些滚动的文字，我们称之为“字幕”。在网页中添加字幕，如同在网页中插入图片。
教师操作演示：（1）打开主页；
（2）将光标移到网页的末尾，执行“插入”-“水平线”命令，插入一条水平线；
（3）将插入点光标定位在水平线的下一行；
（4）执行“插入”-“组件”-“字幕”命令，打开“字幕属性”对话框，在“文本”框中输入“欢迎光临笨笨熊之家，请多指教！”，单击“确定”按钮；
（5）保存后，预览网页，观察字幕效果。
字幕的字体、字号、颜色、背景等设置操作与WORD的一样。
学生动手操作练习。
2、在网页中添加DHTML动态效果。
师：所谓DHTML动态效果，就是访问者在浏览网页的文字或图片时，随着单击鼠标或鼠标悬停或加载网页等事件发生，文字或图片就会相应地按设定的效果变化；事件消失，文字或图片恢复原样。
教学操作演示：（1）用图像处理工具将一张图片处理成黑白图效果，并存到主页所在文件夹下的images文件夹中；
（2）打开做好的主页，选中图片；
（3）单击“格式”下拉菜单中的“动态HTML效果”命令，打开“DHTML效果”工具栏；
（4）在“DHTML效果”工具栏的“开启”下拉框中，选择“鼠标悬停”事件；
（5）在“应用”下拉框中，选择“交换图片”；
（6）在“选择设置”下拉框中，单击“选择图片……”弹出“图片”对话框；在“图片”对话框中，选择要交换的图片文件，单击“确定”；
（7）保存后，预览网页效果。
学生动手操作练习。
二、试一试。
编辑“七巧板”主页，实现如下效果：浏览网页时，当鼠标指针悬停在“鲁班锁”或“九连环”或“华容道”文字上，文字变成加粗、倾斜、红色。
教学反思