课题
网页交互与特效（一）
课时
2课时（90 min）
教学目标
知识技能目标：
（1） 熟悉行为、动作与事件的基础知识
（2） 能够使用Dreamweaver CC添加行为
思政育人目标：
（1）了解我国古代优秀画作，体会画家的匠心精神，培养钻研精神。
（2）了解我国古代计算方法，增强民族自豪感。
教学重难点
教学重点：行为、动作与事件的基础知识
教学难点：使用Dreamweaver CC添加行为
html自动弹出公告代码
教学方法
情景模拟法、问答法、讨论法、练习法
教学用具
电脑、投影仪、多媒体课件、教材
教学设计
第1节课：课前任务→ 考勤（2 min）→ 问题导入（10 min）→传授新知（33 min）
第2节课：任务实施（25 min）→ 实践探索（15 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程
主要教学内容及步骤
设计意图
第一节课
课前任务
⏹【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解网页的事件和行为
⏹【学生】按照教师要求完成课前任务
通过课前的预热，让学生了解所学软件，激发学生的学习欲望
考勤
（2 min）
⏹【教师】使用文旌课堂APP进行签到
⏹【学生】按照老师要求签到
培养学生的组织纪律性，掌握学生的出勤情况
问题导入
（10 min）
⏹【教师】提出以下问题：
阅读教材，说一说网页中的行为是什么？
⏹【学生】思考、举手发言
行为是网页设计与制作中不可缺少的重要组成部分，通过为网页添加行为可以实现用户与网页间的动态交互。
通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容
传授新知
（33 min）
⏹【教师】通过学生的发言，引入新的知识点，介绍行为、事件和动作
一、行为，事件与动作
【教师】提出以下问题：
什么是行为、事件与动作？
【学生】阅读、思考、举手发言
行为是Dreamweaver CC内置的JavaScript程序库，由事件和动作组成。行为是指某个事件被触发时浏览器执行的相应动作。
事件是触发交互效果的条件，可以附加在网页元素上，如鼠标指针移到网页元素上、单击网页元素等。
动作是一段预先编写好的JavaScript代码，可用于完成最终的交互效果，如打开浏览器窗口、交换图像、弹出信息、恢复交换图像等。
（详见教材）
二、添加行为
【教师】根据教材步骤演示使用Dreamweaver CC如何添加行为
Dreamweaver CC中含有一些内置行为，通过“行为”面板进行可视化操作，可以帮助网页制作人员快速地为网页添加行为。将鼠标指针置于想要添加行为的目标元素中，打开“行为”面板，单击“添加行为”按钮 ，在展开的列表中选择“打开浏览器窗口”选项。
然后打开“打开浏览器窗口”对话框，在“要显示的URL”文本框中输入地址或单击“浏览”按钮直接选择资源文件；接着在“窗口宽度”与“窗口高度”文本框中输入浏览器窗口的宽度与高度（不输入时默认为原窗口）；最后单击“确定”按钮。
（详见教材）
【学生】观察、记录、理解
【教师】展示事件的下拉列表，帮助学习理解
onClick是打开浏览器窗口行为默认的触发事件，如果想要重新设置触发事件，可单击行为中事件右侧的下拉按钮，在展开的下拉列表中选择新的事件选项。
（详见教材）
【教师】展示行为的下拉列表，帮助学习理解
（1）交换图像。交换图像动作触发后，鼠标指针经过图像时，原图像会变成另一张图像。
（2）弹出信息。弹出信息动作触发后，将在页面中显示一个带有确定按钮的信息对话框，起到显示指定信息的作用。
（3）恢复交换图像。恢复交换图像动作触发后，鼠标指针离开图像时，另一张图像会恢复为原图像。
（详见教材）
【课堂互动】教师提出以下问题：
改变属性动作有哪些局限性？
【学生】聆听、思考、举手回答
【教师】对学生的回答进行总结
改变属性动作只能应用在设置了id属性的元素上，并且使用可视化操作设置该动作时，只能设置div、p等几个元素。
【教师】演示使用Dreamweaver CC在网页中添加“交换图像”行为
（1）在Dreamweaver CC中打开本书配套素材“项目八”→“ex1.html”网页文档，按“F12”键进行预览，可见页面中只有一个正常显示的图像元素。
（2）将鼠标指针置于网页代码的图像元素中，打开“行为”面板，单击“添加行为”按钮，在展开的列表中选择“交换图像”选项。
（3）打开“交换图像”对话框，单击“浏览”按钮；打开“选择图像源文件”对话框，在其中选择本书配套素材“项目八”→“img”→“p2.jpg”文件；最后单击“确定”按钮。
（4）此时“行为”面板中自动添加两条行为，如图8-9所示。同时，网页代码也会自动更新。
（详见教材）
【学生】观察、记录、理解
【课堂互动】教师提出以下问题：
我们都听说过《清明上河图》，那你能说一说你对它有哪些了解呢？
【学生】聆听、思考、举手回答
【教师】对学生的回答进行总结
《清明上河图》由北宋画家张择端创作，描绘了清明时节北宋都城汴京（今河南开封）东角子门内外和汴河两岸的热闹繁华景象。
⏹【学生】聆听、思考、记忆
通过讲解、提问、演示等教学方式，让学生了解行为、事件和动作
第二节课
任务实施
（25 min）
⏹【教师】演示使用Dreamweaver CC制作“传承经典网”主页公告的操作，并对其进行分析
（1）继续在项目七任务一任务实施中创建的文档中操作，或用本书配套素材“项目八”→“任务一”→“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件，并打开“index.html”网页文档。
（2）将鼠标指针置于<main>→<div class="sheet_1">→<div class="news">→<div class="news_con">标签所在行，打开“行为”面板，单击“添加行为”按钮，在展开的列表中选择“弹出信息”选项；打开“弹出信息”对话框，在“消息”文本框中输入“网站维护中，请稍后再试。”；最后单击“确定”按钮。
（3）“行为”面板新增一条行为，单击该行为中事件右侧的下拉按钮，在展开的下拉列表中选择“onClick”选项，重新设置该行为的事件，如图8-12所示。此时，网页代码会自动更新。
（详见教材）
⏹【学生】观察、记录、理解，上机操作
⏹【教师】巡堂指导，及时解决学生的问题
通过任务实施，让学生们主动参与学习，熟悉使用Dreamweaver CC添加行为和动作的步骤
实践探索
（15min）
⏹【教师】组织学生搜集资料，保存网页，通过练习熟悉使用Dreamweaver CC为网页添加事件和行为
⏹【学生】自主学习、理解、上机操作
⏹【教师】巡堂指导，及时解决学生的问题
通过实践探索，使学生进一步巩固所学知识，了解更多关于事件、行为的知识
课堂小结
（3 min）
⏹【教师】简要总结本节课的要点
本节课学习了事件、行为和动作的相关知识，并通过实践练习了使用Dreamweaver CC为网页添加事件和行为的方法。希望大家在课下多加练习，熟练掌握利用Dreamweaver CC为网页添加事件和行为的操作。
⏹【学生】总结回顾知识点
总结知识点，巩固印象
作业布置
（2 min）
⏹【教师】布置课后作业
（1）完成相关课后习题。
（2）查阅资料，保存网页，分析其中存在的事件和行为。
⏹【学生】完成课后任务
延展知识面，巩固所学知识
教学反思
本节课效果不错。实践表明，学生的学习兴趣是自主学习的原动力。教学中，教师应积极地为学生创设一种情趣盎然的学习气氛，使学生受到陶冶、感染和激励，从而主动学习。在课堂上教师应大胆地让学生进行自由讨论、交流，赞扬学生一些独特看法，让学生真切地感受到学习是快乐的。这样自主学习的劲头就更足了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。