《第16课 让网页有声有色》由会员分享，可在线阅读，更多相关《第16课 让网页有声有色（4页珍藏版）》请在金锄头文库上搜索。
1、第十六课 让网页有声有色一、教学目标：知识目标：掌握添加滚动字幕、DHTML动态效果的方法。水平目标：通过本节的学习，学生能合理使用动态字幕、DHTML动态效果等来增强网页的表现力。情感目标：通过对实际问题的解决，学生实行探索、尝试性学习时，培养他们的团队合作精神，提升学生的审美情趣。二、教学重难点：教学重点：掌握添加滚动字幕、DHTML动态效果的方法。教学难点：滚动字幕及DHTML动态效果的灵活使用。三、教学准备：1. 进一步完善“七巧板之家”的网页。2. 用Photoshop软件将“彩色七巧板”图片处理成黑白图效果，并保存到主页所在文件夹下的images文件夹中。四、教学过程：（一）导入新
2、课（1）复习旧知，展示动态网页，学生观察比较。1. 安海镇庄头小学首页2. 中华少儿网首页3. 迪士尼网站首页（2）提出问题“什么样的网页吸引人？”，导入新课。（二）新课教学：在网页中添加字幕滚动字幕俗称“跑马灯”：是在网页中循环连续地移动的文字，适宜于在网页中显示时效性强的新闻或欢迎等消息。出示范例：中华少儿网首页。（1）添加字幕1.教师讲解演示：演示在网页中空白处插入滚动字幕“欢迎光临七巧板爱好者之家，请多指教！”的操作，讲解制作滚动字幕的基本步骤：插入水平线。光标定位。利用“插入/Web组件/字幕”命令来插入滚动字幕。2.学生自主完成字幕的添加。（2）讨论与尝试：如何把现成的文本“中国古
3、老的智力游戏七巧板”制作成滚动字幕？学生活动：对问题思考后实行自主探索实践，然后完成任务。（3）设置字幕属性学生自主探究完成：设置字幕的字体、字号、颜色、边框、背景等。1. 让已经完成的学生起来当小老师。2. 教师巡视，并请不同方法的学生上台演示，分享方法。（4）教师小结：1字幕的插入方法。2字体格式的设置与底色边框等的设置方法。：为网页添加DHTML动态效果在一些网页上，当把鼠标放到某张图像上时，图像会变成另外的一张图像，这样的效果能够用DHTML动态效果来实现。（1）初步介绍DHTML动态效果的含义（2）演示添加DHTML效果设置 DHTML 的一般步骤是：先设置激发动态效果的事件，再设置
4、动态的类型，最后设置动态的具体效果。 教师讲解演示操作步骤，学生观察：1. 单击“视图/工具栏/DHTML 效果”，打开“DHTML 效果”工具栏。2. 在网页编辑窗口中，选择要设置DHTML 效果的“彩色七巧板”图像。3. 设置激发动态发生的事件：在工具栏的下拉列表中选择“鼠标悬停”。4. 设置动态的类型：在“应用”下拉列表中选择要使用的动态类型为“交换图片”。5. 设置动态的具体效果：在第三个下拉列表框中单击“选择图片” ，选择“黑白七巧板”图像文件，并单击“确定”按钮。学生自主完成DHTML动态效果的添加。试一试（1）学生合作探究，完成的学生起来当小老师。编辑“七巧板”主页，实现如下效果：浏览网页时，当鼠标指针悬停在“鲁班锁”或“九连环”或“华龙道”文字上，文字变成加粗、倾斜、红色。（2）学生演示方法。（三）课堂小结对本节的知识点进行小结，重点指出应该注意的问题，并对学生的表现进行肯定。五、板书设计：让网页动起来添加字幕：插入 /Web组件/字幕添加DHTML动态效果：视图/工具栏/DHTML 效果
