资源简介

任务三 制作页面动态效果
一、提出任务
1．任务目标
为“家乡山水”网页添加动态效果。
2. 解决的问题
通过为网页元素添加动态效果，学习在网页中添加层行为以及修改删除层行为操作。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中添加热点、设置热点属性，添加层、设置层属性。
二、教学目标
1. 知识目标
⑴ 了解行为的原理。
⑵ 掌握“行为”面板的使用。
⑶ 为页面的热点添加“显示-隐藏层”行为。
⑷ 为页面的热点添加“设置层文本”行为。
⑸ 掌握修改添加的行为的方法。
⑹ 掌握删除添加的行为的方法。
2. 能力目标
通过完成本任务使学生掌握在网页中添加、修改以及删除层的行为，学会制作动态效果网页。
3. 情感目标
培养学生耐心、踏实的学习态度；给学生以成功的体验，提高学习网页知识的积极性。
三、教学分析与准备
1. 教学重点
⑴ 为页面的热点添加“显示-隐藏层”行为。
⑵ 为页面的热点添加“设置层文本”行为。
(3) 修改层行为。
(4) 删除层行为。
2．教学难点
层行为的原理。
3. 教学方法
任务引领学习、任务驱动学习、协作学习和探究拓展学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2学时；举一反三占2学时。）
教学环节及手段 教师活动 学生活动
组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 知识小结 举一反三 任务目标 启发思路 分组完成任务 学生自评或互评 教师点评总结 布置作业 集中学生注意力，准备上课。 通过提问考察学生对添加层、使用层的掌握情况和上节课作业的完成情况。 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警告框，可以为用户提供信息而不能让用户选择。 打开浏览器窗口：可以在一个新的窗口中打开URL，可以指定新窗口的大小、特性和名称。 播放声音：可以在网页中播放声音，例如，当鼠标滑过某图像时可以播放一段音乐；或者当页面载入时播放音乐。 改变属性：可以通过改变图像、层、表单等的属性来实现动态效果，例如，层的背景颜色或图像的宽或高。具体可以更改哪个属性由当前选用的浏览器来决定，IE4.0中可以通过此行为更改的属性比IE3.0多得多。 设置文本：可用于设置层文本、框架文本、状态栏文本和表单元素中的文本域文本。 预先载入图像：用于将不立即显示在网页中的图像预先载入浏览器缓存中，防止当图像显示时由于下载而导致延迟。 通过完成本任务学习了： 1．为页面中的元素添加“显示-隐藏层”行为。 2．为页面中的热点添加“显示层文本”。 将本单元“举一反三”文件夹中的“pra5-3”文件夹拷贝到D盘根目录，为其中的两个网页“practice5-8.html”、“practice5-9.html”添加“打开浏览器窗口”行为，设置事件为“onLoad”，使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。 注意选择正确的行为和事件。 学生分组完成任务，教师巡视指导，指出问题，纠正学生不良操作习惯。 每组学生代表点评本组及其他组作品的优点和缺点，并说明本组那些方面需提高。 总结学生点评结果，补充不足。 1．创建网页“practice5-10.html”，插入本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”。 2．创建网页“practice5-11.html”，使用表格、层及行为创建如图JYFS5-6所示菜单，鼠标移到菜单选项时显示下拉列表，移出时下拉列表隐藏，目录结构参照表JYFS5-1。 图JYFS5-6 表JYSF5-1 目录结构下拉菜单“首页”无“作品收藏”“dreamweaver”/“flash”/“photoshop”“个人日志”“工作日志”/“学习日志”/“读书日志”“游山玩水”“山水风光”/“他乡风俗”“留言板”无“论坛”无
学生回答，教师给予提示、补充归纳。 教师引导学生动手完成任务。完成的给予鼓励，完不成的一定要给予其提示 教师讲授 学生、教师一起总结

展开更多......

收起↑