《中文版Dreamweaver网页制作案例教程[2021版]》教案 项目七 行为、模板与库.pdfVIP

课题项目七行为、模板与库

课时8课时（360min）、

知识技能目标：

（1）熟悉在网页中添加行为的方法

（2）熟悉使用模板与库制作网页的方法

教学目标（3）能够使用Dreamweaver2021在网页中添加行为

（4）能够使用Dreamweaver2021提供的模板与库功能制作网页

素质目标：

总结知识点中的生活智慧，应用到工作和学习中。

教学重点：在网页中添加行为的方法，使用模板与库制作网页的方法

教学重难点

教学难点：在网页中添加行为，使用模板与库制作网页

教学方法案例分析法、问答法、讨论法、讲授法

教学用电脑、投影仪、多媒体课件、教材

教学过程主要教学内容及步骤

【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过APP或其他学习软件，完成课

前任务

课前任务

请大家预习本节课内容，了解行为、模板与库的知识。

【学生】完成课前任务

【教师】使用APP进行签到

考勤

【学生】班干部报请假人员及原因

【教师】组织学生扫码观看“JavaScript概述”视频，并讨论以下问题：

（1）JavaScript与HTML5和CSS3有何不同？

（2）JavaScript的特点有哪些？

互动导入

【学生】思考、讨论、举手回答

【教师】总结学生的回答

【教师】通过学生的回答，引入新知，讲解行为、事件与动作，添加行为，JavaScript基础知识等

内容

一、行为、事件与动作

制作网页时，可以为网页中的元素（如图像、超链接等）添加行为，以增强网页的交互性。行为

是Dreamweaver2021内置的JavaScript程序库，由事件和动作组成。

事件是触发交互效果的特定操作，如鼠标指针移到网页元素上、单击网页元素等。

传授新知

动作是一段预先编写好的JavaScript代码，用于完成具体的交互效果，如打开浏览器窗口、交换图

像、弹出信息、恢复交换图像等。

行为就是当某个事件被触发时浏览器执行相应的动作。例如，为某个图像设置交换图像行为，并指

定事件为onMouseOver（鼠标指针移动到某元素时触发），那么只要访问者在浏览器中将鼠标指针移

动到该图像上面，浏览器就会执行交换图像的动作，将原图像切换为另一张图像。1

二、添加行为

使用Dreamweaver2021的“行为”面板可以可视化地添加行为，具体操作方法如下。

【教师】利用多媒体展示“打开‘行为’面板”图片（详见教材），并进行讲解

（1）打开“行为”面板。在Dreamweaver2021中选择“窗口”/“行为”选项，打开“行为”面

板。

【小贴士】

将鼠标指针移动至“行为”面板顶部，按住鼠标左键将该面板拖动至界面右侧的面板组中，待面板

组出现蓝色边框时松开鼠标左键，可以将“行为”面板放置于面板组中。

【教师】利用多媒体展示“选择行为选项”图片（详见教材），并进行讲解

（2）添加行为。确定添加行为的位置（以某个图像元素为例），单击“添加行为”按钮，