第五单元任务三.docVIP

第五单元 制作“家乡山水”网页 任务三 制作页面动态效果 一、提出任务 1．任务目标 ⑸ 掌握修改添加的行为的方法。 ⑹ 掌握删除添加的行为的方法。 2. 能力目标 通过完成本任务使学生掌握在网页中添加、修改以及删除层的行为，学会制作动态效果网页。 3. 情感目标 培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。 三、教学分析与准备 1. 教学重点 ⑴ 为页面的热点添加“显示-隐藏层”行为。 ⑵ 为页面的热点添加“设置层文本”行为。 (3) 修改层行为。 (4) 删除层行为。 2．教学难点 课时 5. 教学环境 完成任务 知识小结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过提问考察学生对添加层、使用层的掌握情况和上节课作业的完成情况。 1．总结层的添加与操作的方法。 2．谈谈自己对层及热点的理解，其他同学可以进行评论。 为网页添加好层、设置好热点以后，就可以为热点添加行为了，本任务就是在上一任务完成的热点上添加层行为，为网页创建动态效果。 提出任务：为网页创建动态效果。 任务二已完成“家乡山水”页面层的添加，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其行为。 1．为“金华山景区”热点添加“显示-隐藏层”行为。 在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。 选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层“Layer2”（“金华山景区”图像所在层）和层“Layer8”（显示文本的层）为“显示”，其他层全部设置为“隐藏”，单击“确定”按钮。 在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver” 至此，为“金华山景区”热点添加了一个行为，预览“家乡山水”页面时，鼠标移上“金华山景区”热点，层“Layer2”和“Layer8”显示，其他层都隐藏。 2. 为“金华山景区”热点添加“设置层文本”行为。 选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”→“设置层文本”选项，弹出“设置层文本”对话框，在“层”中选择层“Layer8”，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。 在“行为”面板的事件栏中，选择“onMouseOver”。 3. 为其他热点设置行为。 使用与上面相同的方法，参照教材表5-1为其他热点设置“显示-隐藏层”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“Layer8”层设置为“显示”，其他层设置为“隐藏”。 使用与上面相同的方法，参照教材表5-7为相应热点添加“设置层文本”行为，输入热点相对应的景区介绍文字。 至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。 思考：单元格设置背景图像和插入图像又什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？ 4．知识讲解：行为和事件类型。 行为是Dreamweaver 8预置的JavaScript程序库。每个行为由一个动作和一个事件组成。其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等。 可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本身等。 ⑴ 常用事件有： 事件 说明 onClick 鼠标单击时触发 onDblClick 鼠标双击时触发 onMouseDown 按下鼠标左键时触发 onMouseUp 鼠标左键按下后松开时触发 onMouseOver 当鼠标指针移上某对象时触发 onMouseMove 当鼠标移动时触发 onMouseOut 当鼠标离开某对象时触发 onKeyPress 当键盘上某个键按下并且放开时触发 onKeyDown 当键盘上某个键按下时触发 onKeyUp 当键盘上某个键松开时触发 ⑵ 常用行为有： 交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。 恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作。 弹出信息：可显示一个带有用户指定信息的JavaScript警告框，可以为用户提供信息而不能让用户选择。 打开浏览器窗口：可以在一个