53制作页面动态效果

1第五单元制作“家乡山水”网页任务三制作页面动态效果一、提出任务1．任务目标为“家乡山水”网页添加动态效果。2.解决的问题通过为网页元素添加动态效果，学习在网页中添加层行为以及修改删除层行为操作。3.本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：在网页中添加热点、设置热点属性，添加层、设置层属性。二、教学目标1.知识目标⑴了解行为的原理。⑵掌握“行为”面板的使用。⑶为页面的热点添加“显示-隐藏元素”行为。⑷为页面的热点添加“设置容器的文本”行为。⑸掌握修改添加的行为的方法。⑹掌握删除添加的行为的方法。2.能力目标通过完成本任务使学生掌握在网页中添加、修改以及删除层的行为，学会制作动态效果网页。3.情感目标培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。三、教学分析与准备1.教学重点⑴为页面的热点添加“显示-隐藏元素”行为。⑵为页面的热点添加“设置容器的文本”行为。(3)修改层行为。(4)删除层行为。2．教学难点层行为的原理。3.教学方法任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。4.课时安排4课时。5.教学环境多媒体网络教室。四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）教学环节及手段教学内容备注组织课堂复习提问集中学生注意力，准备上课。通过提问考察学生对添加层、使用层的掌握情况和上节课作业的完成情况。1．总结层的添加与操作的方法。学生回答，教师2任务流程导入任务分析任务完成任务2．谈谈自己对层及热点的理解，其他同学可以进行评论。为网页添加好层、设置好热点以后，就可以为热点添加行为了，本任务就是在上一任务完成的热点上添加层行为，为网页创建动态效果。提出任务：为网页创建动态效果。任务二已完成“家乡山水”页面层的添加，页面布局部分已经完成，本任务需要将准备好的内容添加进去，并设置其行为。1．为“金华山景区”热点添加“显示-隐藏元素”行为。在“文件”面板中双击“travel.html”文件，打开“家乡山水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键盘的Shift+F4键打开“行为”面板。选中景区地图“map.jpg”中覆盖“金华山景区”的热点，单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择“显示-隐藏元素”选项，弹出“显示-隐藏元素”对话框，设置“div“apDiv2””（“金华山景区”图像所在层）和“div“apDiv8””（显示文本的AP元素）为“显示”，其他div设置为“隐藏”，其他元素保持默认，单击“确定”按钮。在“行为”面板的事件栏中，选择该行为的事件为“onMouseOver”至此，为“金华山景区”热点添加了一个行为，预览“家乡山水”页面时，鼠标移上“金华山景区”热点，层“apDiv2”和“apDiv8”显示，其他层都隐藏。2.为“金华山景区”热点添加“设置容器的文本”行为。选中“金华山景区”热点，在“行为”面板中，选择“添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文本”→“设置容器的文本”选项，弹出“设置容器的文本”对话框，在“层”中选择层“div“apDiv8””，在“新建HTML”中输入对该景区的简单介绍，然后单击“确定”按钮。在“行为”面板的事件栏中，选择“onMouseOver”。3.为其他热点设置行为。使用与上面相同的方法，参照教材表5-1为其他热点设置“显示-隐藏元素”行为。注意在设置某一景给予提示、补充归纳。教师引导学生动手完成任务。完成的给予鼓励，完不成的一定要给予其提示3区热点的行为时，将该景区图像所在层和用于显示文本的“apDiv8”层设置为“显示”，其他层设置为“隐藏”。使用与上面相同的方法，参照教材表5-7为相应热点添加“设置容器的文本”行为，输入热点相对应的景区介绍文字。至此，“家乡山水”栏目的制作全部完成，保存并预览检查效果。思考：单元格设置背景图像和插入图像有什么区别呢？你能区别开吗？单元格背景图像的大小对单元格的显示又什么影响呢？4．知识讲解：行为和事件类型。行为是Dreamweaver8预置的JavaScript程序库。每个行为由一个动作和一个事件组成。其中，事件是指行为发生的条件，即触发动态效果的原因，如鼠标指向、单击等；动作是指事件发生后所作出的反应，即最终完成的动态效果，比如交换图像、弹出信息、播放声音等。可以添加行为的对象有图像、热点、超级链接文本、多媒体文件或者网页本身等。⑴常用事件有：事件说明onClick鼠标单击时触发onDblClick鼠标双击时触发onMouseDown按下鼠标左键时触发onMouseUp鼠标左键按下后松开时触发onMouseOver当鼠标指针移上某对象时触发onMouseMove当鼠标移动时触发onMouseOut当鼠标离开某对象时触发onKeyPress当键盘上某个键按下并且放开时触发onKeyDown当键盘上某个键按下时触发onKeyUp当键盘上某个键松开时触发⑵常用行为有：交换图像：通过更改“img”标签的“src”属性将一个图像和另一个图像进行交换。恢复交换图像：将最后一组交换的图像恢复为它们以前的源文件。每次将“交换图像”动作附加到某个对象时都会自动添加该动作；如果在附加“交换图像”时选择了“恢复”选项，就不再需要手动选择“恢复交换图像”动作。弹出信息：可显示一个带有用户指定信息的JavaScript警告框，可以为用户提供信息而不能让用户选择。教师讲授4知识小结举一反三任务目标启发思路分组完成任务学生自评或互评教师点评总结布置作业打开浏览器窗口：可以在一个新的窗口中打开URL，可以指定新窗口的大小、特性和名称。播放声音：可以在网页中播放声音，例如，当鼠标滑过某图像时可以播放一段音乐；或者当页面载入时播放音乐。改变属性：可以通过改变图像、AP元素、表单等目标元素的某个属性来实现动态效果，例如，AP元素的背景颜色或图像的宽或高。具体可以更改哪个属性由当前选用的浏览器来决定。需要注意的是此行为只能影响具有唯一ID的元素。设置文本：可用于设置层文本、框架文本、状态栏文本和表单元素中的文本域文本。预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。通过完成本任务学习了：1．为页面中的元素添加“显示-隐藏元素”行为。2．为页面中的热点添加“显示容器的文本”。将本单元“举一反三”文件夹中的“pra5-4”文件夹复制到D盘根目录，为其中的两个网页“practice5-6.html”、“practice5-7.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。注意选择正确的行为和事件。学生分组完成任务，教师巡视指导，指出问题，纠正学生不良操作习惯。每组学生代表点评本组及其他组作品的优点和缺点，并说明本组那些方面需提高。总结学生点评结果，补充不足。1.创建网页“practice5-8.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-4.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。2.创建网页“practice5-9.html”，使用表格、AP元素及行为创建如图JYFS5-4所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照表JYFS5-1。（提示：应用显示-隐藏元素行为完学生、教师一起总结5成）图JYFS5-6表JYSF5-1目录结构下拉菜单“首页”无“作品收藏”“dreamweaver”/“flash”/“photoshop”“个人日志”“工作日志”/“学习日志”/“读书日志”“游山玩水”“山水风光”/“他乡风俗”“留言板”无“论坛”无