模块5 任务12“走近非遗民俗荟”-行为的使用

PAGE\#000MERGEFORMAT001PAGE78计算机应用基础教学参考书（Windows7+Office2010）（第2版）书模块5高级应用任务12“零食食代”——行为的使用教案1．教学整体设计教学单元名称网页交互设计课时2学时所属章节任务12“零食食代”——行为的使用任务描述通过“零食食代——行为的使用”任务，理解Dreamweaver中行为的概念与组成（事件+动作），掌握行为面板操作及常用行为（弹出信息、交换图像、效果动画、拖动AP元素、调用JavaScript关闭窗口）的添加方法；能够为网页元素绑定合适的触发事件，实现网页交互特效，建立网页交互设计思维，激发专业学习兴趣。任务分析在本任务中，需要完成以下操作：1.新建站点renwu12，打开index.html网页；2.打开行为面板（Shift+F4），选中body标签添加“弹出信息”行为，事件设为onLoad；3.为页面Banner图片添加“交换图像”行为，事件onMouseOver/onMouseOut；4.为图片添加blind百叶窗、shake抖动效果，事件onClick；5.制作可拖动AP元素（DIV+绝对定位），并调用JavaScript实现关闭窗口；6.理解行为=事件+动作，掌握常用动作与事件含义。教学重点：行为的概念（事件与动作）；行为面板的使用；弹出信息、交换图像、效果、拖动AP元素行为实操。教学难点：区分事件和动作；合理选择绑定事件；AP元素拖动效果的设置。教学目标知识目标1.理解Dreamweaver中行为的概念与组成（事件+动作）；2.熟悉行为面板操作方法；3.掌握常用行为动作与常见触发事件含义。能力目标1.会打开行为面板，能够添加、编辑、删除、调整行为顺序；2.掌握弹出信息、交换图像、添加动画效果、拖动AP元素、调用JavaScript实现关闭窗口等实操；3.能够为网页元素绑定合适的触发事件。素养目标理解网页交互效果底层原理，体会事件与动作的逻辑关系，培养网页交互设计思维。考核方式过程考核：知识学习与技能掌握情况（30%）小组协作、积极参与讨论与分享任务成果（40%）终结考核：教师评价+小组互评+学生自评（30%）教学环境机房计算机配置如下：软件环境—Windows10、Dreamweaver2021、Edge浏览器、多媒体课件；网络环境——机房可访问互联网；素材资源——renwu12项目素材。

2．教学实施过程教学环节教学内容教师活动学生活动教学策略课程思政导入任务回顾普通静态网页效果，提问：网页如何实现弹窗、鼠标滑过换图、抖动动画、拖动图层等交互特效？引出Dreamweaver的“行为”，展示“零食食代”案例效果图，引出本节课任务12。展示案例效果，抛出问题，讲解行为就是DW内置JavaScript库，明确本课学习任务。观察案例交互效果，明确本节课学习目标。情境导入法、问题驱动法以“零食食代”等生活化案例引入，引导学生关注身边的网页交互，体会信息技术服务生活的价值，激发专业学习兴趣。知识讲授与操作演示任务一：弹出信息行为1.启动Dreamweaver2021，新建站点“零食食代”，站点文件夹选择renwu12，打开index.html；2.窗口→行为（Shift+F4）打开行为面板，选中body标签；3.添加行为→弹出信息，输入提示文本“建议使用2560*1440分辨率浏览本网页！”，确定；4.事件设为onLoad，Ctrl+S保存，F12预览页面加载弹出提示框。任务二：交换图像行为1.选中页面Banner图片；2.添加行为→交换图像，浏览选择替换图片banner2.jpg；3.勾选【鼠标滑开时恢复图像】，自动生成交换/恢复行为；4.事件默认onMouseOver、onMouseOut，保存F12测试：鼠标滑过切换图片，离开恢复原图。任务三：添加blind、shake效果1.选中“热门食品”栏目第一张图片，添加行为→效果→blind，参数：持续时间3000ms、可见性hide、方向up，事件onClick；2.选中“最新关注”栏目第一张图片，添加行为→效果→shake，参数：持续时间1000ms、方向left，事件onClick；3.保存F12，点击图片查看百叶窗、抖动动画。任务四：拖动AP元素、调用JS关闭窗口1.插入DIV，ID命名q1，新建CSS规则，定位absolute、宽高100px，div内插入hd.jpg；2.选中body，添加行为【拖动AP元素】，AP元素选divq1，事件onLoad，F12测试拖动图层；3.页面底部输入文本“关闭窗口”，选中文本，添加行为：调用JavaScript，输入window.close()，事件onClick；4.保存F12，点击文字关闭窗口。1.完整演示站点建立、行为面板调出，讲解onLoad页面加载事件，提醒确认选中body标签；2.演示交换图像操作，讲解onMouseOver/onMouseOut含义与恢复选项作用；3.讲解blind、shake效果参数与onClick单击事件，提示多图批量添加要点；4.演示DIV+绝对定位AP元素，讲解调用JavaScript动作，提醒部分浏览器拦截关闭窗口。机房巡回纠错。1.跟随实操，完成弹出信息行为，预览页面弹窗效果；2.上机实操，完成banner交换图像，测试鼠标滑入滑出效果；3.给图片添加两种动画效果，点击测试动画；4.完成可拖动图片AP元素与关闭窗口交互，预览全部交互效果。演示法、讲解法、任务驱动法通过行为实操，体会事件与动作的逻辑关系，培养严谨规范的操作习惯与网页交互设计思维。任务五：行为概念、创建与编辑1.行为：Dreamweaver预置的JavaScript程序库；2.行为组成：事件（触发条件）+动作（执行效果），事件如单击、页面加载、鼠标滑过，动作即触发后执行的特效；3.行为创建：选中元素→打开行为面板→添加动作设置参数→选择事件；4.行为编辑：修改参数、调整行为顺序、删除行为。任务六：常用动作与事件1.常用动作：弹出信息、交换图像、拖动AP元素、各类效果（blind、shake、fade等）、调用JavaScript、检查表单、显示隐藏元素；2.重点事件：onLoad页面加载；onClick鼠标单击；onMouseOver鼠标移入；onMouseOut鼠标移出；onDblClick双击。1.重点拆解事件、动作两个核心概念，结合本节课案例对应讲解；2.结合实操案例，对照讲解动作、事件对照表。1.记笔记，理解事件与动作的逻辑关系；2.认识各类动作、事件，理解不同事件适用场景。讲解法、对比教学法理解行为底层原理，体会标准化、逻辑化思维，培养精益求精的工匠精神。练习技能1.实操练习：新建站点renwu12，制作网页——①页面加载（onLoad）弹出提示信息；②一张图片实现鼠标滑过（onMouseOver）交换图像、离开恢复；③给图片添加shake抖动（onClick）效果；④制作可拖动AP元素，添加“关闭窗口”文字并调用JavaScript关闭窗口；2.小组互助排查：事件选择错误、未选中正确元素、行为顺序错误、AP元素未设绝对定位等；3.拓展练习：尝试为同一图片添加多种效果，对比不同事件触发的交互差异。1.布置课堂实操任务，明确完成标准；2.机房巡回指导，重点处理事件与动作不匹配、行为无效等共性错误；3.收集高频错误，集中演示纠错。1.独立上机完成各类交互行为添加与预览；2.遇到行为无效等问题，自主检查选中元素与事件设置；3.小组互助，交流调试技巧。任务驱动法、异质分组合作学习法通过交互效果制作，培养规范操作、问题解决能力与团队协作意识。展示作品1.作品提交规范：提交index.html及站点文件或预览截图，命名格式：姓名_任务12_行为；2.评价维度：能完成弹出信息、交换图像、动画效果、拖动AP元素、调用JS关闭窗口等交互行为；能正确说明事件与动作；3.学生自查交互效果，提交电子教室作业区。1.明确提交格式与质量评价标准；2.检查学生行为绑定规范性；3.挑选典型作品用于课堂点评。1.对照标准自查交互效果；2.规范命名，完成作业提交。实践教学法、自我评价法强化规范提交、有始有终的作业习惯，养成按标准做事的职业素养。评价总结1.课堂作品点评，梳理高频错误：①未选中正确元素导致行为无效；②事件与动作不匹配；③AP元素未设绝对定位无法拖动；2.知识点回顾：行为=事件+动作；常用动作（弹出信息、交换图像、效果、拖动AP元素、调用JS）；常用事件（onLoad、onClick、onMouseOver、onMouseOut）。1.点评典型作品，梳理实操共性错误；2.提问引导学生回顾核心概念；3.布置课后作业。1.对照点评反思操作不足；2.巩固行为概念，查漏补缺。作品点评法、归纳总结法网页交互是网页设计的重要能力，打好基础才能做出优质交互页面，培养重视基础、持续精进的意识。课后任务课后