课题项目七行为、模板与库
课时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)添加行为。确定添加行为的位置(以某个图像元素为例),单击“添加行为”按钮,