Dreamweaver制作网页的动态效果

Dreamweaver制作网页的动态效果

学习任务：

1. 为热点添加“显示－隐藏”层

2. 设置层文本

3. 行为面板的使用以及行为的添加、修改和删除等基本操作方法

能力目标

通过设置“家乡山水”网页，能够使学生设置出网页的动态效果。

情感目标

培养学生自主学习与探索的精神，学会在体验与探索中找出问题的答案；

提高学生的操作技能和灵活应用知识的能力。

学习方法：小组协作、自主探究、展示交流、任务驱动法

学习环境：多媒体网络教室、微机室、网页素材

学习过程：

一、预习展示：

阅读课本138至136页的内容，完成预习题并展示

1.网页中的热点能否设置“显示－隐藏”行为？

2.热点层能否设置文本？如何设置？

3.如何使用“设置层文本”？

二、合作探究，完成学习任务

（一）明确任务

教师用网页的方式展示本节课的学习任务，让学生明确本节课学习目标和任务。

（二）基础任务

任务一：为热点添加“显示――隐藏层”行为

操作步骤：

1．在“文件”面板中双击“travel.html—选择窗口―行为”

2．用“添加行为”下拉菜单中的“显示－隐藏层”设置

练习任务：

为“金华山景区”热点添加一个行为，使鼠标移上此热点时，右侧显示此景区的图像和简介。

想一想、试一试：

在层中能不能输入文字或者插入动画或视频？

综合练习：

在Layer8层中输入“鼠标指向地图中景区，将显示相应景区的简介内容，单击将打开景区介绍页面详细介绍景区内容”作为提示语。

任务二：为热点添加“设置层文本”行为

操作步骤：

1．打开行为面板，选择“添加行为”按钮

2．在层文本对话框中输入对景区的简单介绍

练习任务：

测试景区的简单介绍是否设置正确。

任务三：为其他热点设置行为

练习任务：

1．根据141页，表5－7的文本，设置文本内容

2．测试效果

体验与探索：

1．创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”。

2.．创建网页“practice5-6html”，利用层的可重叠性，制作阴影效果的文字。

三、达标测评

1.将本单元“举一反三”文件夹中的“pra5-3”文件夹复制到D盘根目录，为其中的两个网页“practice5-8.html”、“practice5-9.html”添加“打开浏览器窗口”行为，设置事件为“onload”使浏览任一网页时，两个网页在两个浏览器窗口中同时打开。

2.创建网页“practice5-10.html”，插入文本单元素材“举一反三”文件夹中的图像“practice5-2.jpg”，为图像添加“弹出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外明”.。

四、归纳总结：

1．使用什么方法在热点中添加文本？所添加的数据类型有哪些？

2．如何设置下拉列表的隐藏？

五、课后反思

1.分组讨论，每组派代表说出自己这节课的收获。

①知识：

②技能：

2.收获体验：

3.存在的问题：

4.想对老师说的话：

2