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

PAGE10

PAGE10

PAGE11

PAGE11

课题

项目七行为、模板与库

课时

8课时（360min）、

教学目标

知识技能目标：

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

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

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

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

素质目标：

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

教学重难点

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

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

教学方法

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

教学用具

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

教学过程

主要教学内容及步骤

课前任务

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

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

【学生】完成课前任务

考勤

【教师】使用APP进行签到

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

互动导入

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

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

（2）JavaScript的特点有哪些？

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

【教师】总结学生的回答

传授新知

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

一、行为、事件与动作

制作网页时，可以为网页中的元素（如图像、超链接等）添加行为，以增强网页的交互性。行为是Dreamweaver2021内置的JavaScript程序库，由事件和动作组成。

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

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

行为就是当某个事件被触发时浏览器执行相应的动作。例如，为某个图像设置交换图像行为，并指定事件为onMouseOver（鼠标指针移动到某元素时触发），那么只要访问者在浏览器中将鼠标指针移动到该图像上面，浏览器就会执行交换图像的动作，将原图像切换为另一张图像。

二、添加行为

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

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

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

【小贴士】

将鼠标指针移动至“行为”面板顶部，按住鼠标左键将该面板拖动至界面右侧的面板组中，待面板组出现蓝色边框时松开鼠标左键，可以将“行为”面板放置于面板组中。

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

（2） 添加行为。确定添加行为的位置（以某个图像元素为例），单击“添加行为”按钮，在展开的下拉列表中选择行为选项。

常用的行为有交换图像、弹出信息、恢复交换图像、打开浏览器窗口、显示-隐藏元素等。

①交换图像。……（详见教材）

②弹出信息。……（详见教材）

③恢复交换图像。……（详见教材）

④打开浏览器窗口。……（详见教材）

⑤显示-隐藏元素。……（详见教材）

【教师】利用多媒体展示“‘打开浏览器窗口’对话框”图片（详见教材），并进行讲解

（3） 设置行为。以设置打开浏览器窗口行为为例，首先选择“打开浏览器窗口”选项，打开“打开浏览器窗口”对话框；然后在“要显示的URL”编辑框中输入地址或单击“浏览”按钮直接选择资源文件；接着在“窗口宽度”与“窗口高度”编辑框中输入浏览器窗口的宽度与高度（不输入时默认为原窗口大小），并勾选需要的属性复选框；最后单击“确定”按钮。

【教师】利用多媒体展示“‘打开浏览器窗口’对话框”和“打开浏览器窗口行为的代码”图片（详见教材），并进行讲解

此时，“行为”面板中新增一个行为，左侧表示事件，右侧表示动作。同时，网页代码也会自动更新。

【教师】利用多媒体展示“‘事件’下拉列表”图片（详见教材），并进行讲解

其中，onClick是为图像元素添加的打开浏览器窗口行为中默认的事件（为不同元素添加的不同行为中默认的事件可能不同）。如果想要重新设置事件，可单击事件下拉按钮，在展开的下拉列表中选择其他事件选项。

【教师】利用多媒体展示“常用事件及其说明”表格（详见教材），并进行讲解

常用事件及其说明如表所示。带有“A”的事件是指将JavaScript代码封装到超链接中，部分元素无法设置此类事件。

三、JavaScript基础知识

JavaScript是