第16课让网页有声有色VIP免费

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