制作页面动态效果.doc

《制作页面动态效果.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第五单元制作“家乡山水”网页任务三制作页面动态效果一、提出任务1．任务目标为“家乡山水”网页添加动态效果。2.解决的问题通过为网页元素添加动态效果，学习在网页中添加层行为以及修改删除层行为操作。3.本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在网页中添加热点、设置热点属性，添加层、设置层属性。二、教学目标1.知识目标⑴了解行为的原理。⑵掌握“行为”面板的使用。⑶为页面的热点添加“显示-隐藏元素”行为。⑷为页面的热点添加“设置容器的文本”行为。⑸掌握修改添加的行为的方法。⑹掌握删除添加的行为的方法。2.能力目标通过完成本任务使学生掌握在网页中添加、修

2、改以及删除层的行为，学会制作动态效果网页。3.情感目标培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。三、教学分析与准备1.教学重点⑴为页面的热点添加“显示-隐藏元素”行为。⑵为页面的热点添加“设置容器的文本”行为。(3)修改层行为。(4)删除层行为。2．教学难点层行为的原理。3.教学方法任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。4.课时安排4课时。5.教学环境多媒体网络教室。四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段教学内容备注组织课堂复习提问集中学生注意力，准备

3、上课。通过提问考察学生对添加层、使用层的掌握情况和上节课作业的完成情况。1．总结层的添加与操作的方法。学生回答，教师任务流程导入任务分析任务完成任务2．谈谈自己对层及热点的理解，其他同学可以进行评论。为网页添加好层、设置好热点以后，就可以为热点添加行为了，本任务就是在上一任务完成的热点上添加层行为，为网页创建动态效果。提出任务：为网页创建动态效果。任务二已完成“家乡山水”页面层的添加，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其行为。1．为“金华山景区”热点添加“显示-隐藏元素”行为。在“文件”面板中双击“travel.html”文件，打开

4、“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏元素”选项，弹出“显示-隐藏元素”对话框，设置“div“apDiv2””（“金华山景区”图像所在层）和“div“apDiv8””（显示文本的AP元素）为“显示”，其他div设置为“隐藏”，其他元素保持默认，单击“确定”按钮。在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”至此，为“金华山景区”热点添加了一个行为，预览

5、“家乡山水”页面时，鼠标移上“金华山景区”热点，层“apDiv2”和“apDiv8”显示，其他层都隐藏。2.为“金华山景区”热点添加“设置容器的文本”行为。选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”→“设置容器的文本”选项，弹出“设置容器的文本”对话框，在“层”中选择层“div“apDiv8””，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。在“行为”面板的事件栏中，选择“onMouseOver”。3.为其他热点设置行为。给予提示、补充归纳。教师引导学生动手完成任务。完成的给予鼓

6、励，完不成的一定要给予其提示使用与上面相同的方法，参照教材表5-1为其他热点设置“显示-隐藏元素”行为。注意在设置某一景区热点的行为时，将该景区图像所在层和用于显示文本的“apDiv8”层设置为“显示”，其他层设置为“隐藏”。使用与上面相同的方法，参照教材表5-7为相应热点添加“设置容器的文本”行为，输入热点相对应的景区介绍文字。至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。思考：单元格设置背景图像和插入图像有什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？4．知识讲解：行为和事件类型。行为是Dreamweaver8预置的

7、JavaScript程序库。每个行为由一个动作和一个事件组成。其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等。可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本身等。⑴常用事件有：事件说明onClick鼠标单击时触发onDblClick鼠标双击时触发onMouseDown按下鼠标左键时触发onMouseUp鼠标左键按下后松开时触发onMouseOver当鼠标指针移上某对象时触发onMouseMove当鼠标移动时触发onMouseOu

8、t当鼠标离开某对象时触发onKeyPr