内容正文:
《网页设计与制作(Dreamweaver CC)》教案
课 题
12.2.7-12.2.10 jQuery UI小部件(下)
课 型
理论
课 时
2
授课班级
授课时间
授课教师
教材分析
该章节主要介绍了jQuery UI中的滑块、按钮及按钮组、复选框按钮组及单选按钮组等小部件的使用方法和属性设置,这些都是在网页设计中增强用户交互体验的重要元素。这一章节在《网页设计与制作(Dreamweaver CC)》一书中占据着举足轻重的地位,它不仅是对之前学习的jQuery UI基础知识的拓展,更是后续进行高级网页设计与制作的必备技能。通过学习本章,学生能够掌握更多实用的jQuery UI控件,为创建更加丰富和互动的网页提供有力支持,从而有效提升学生的网页设计能力和竞争力。
学情分析
学生在学习该节内容前,已经掌握了Dreamweaver CC的基本操作及部分jQuery UI小部件的使用,如进度条、对话框和自动填充等。然而,对于更复杂的jQuery UI控件,如滑块、按钮组及复选框按钮组等,学生可能尚不熟悉。本节课的知识点不仅是对之前学习的延续和深化,也是后续进行高级网页设计与制作的重要基础。通过掌握这些控件的使用,学生能够进一步丰富网页的交互性和用户体验,这对于他们学好这门课程、提升网页设计综合能力具有至关重要的作用。
学习目标
知识目标:
掌握jQuery UI小部件中滑块、按钮及按钮组、复选框按钮组及单选按钮组的使用方法。
了解如何编辑jQuery UI小部件的属性以满足网页设计需求。
技能目标:
能够熟练地在网页中插入并配置jQuery UI小部件。
能够解决jQuery UI小部件在网页中可能遇到的常见问题。
情感目标:
培养学生对网页设计中用户体验重要性的认识。
激发学生对网页设计创新的兴趣和热情。
学习重难点
重点:
1.jQuery UI小部件的插入方法。
2.jQuery UI小部件的属性设置与编辑
难点:
1.如何合理选择和使用jQuery UI小部件以优化用户体验。
2.避免jQuery UI小部件的过度使用,保持网页的简洁性和加载速度。
教学方法
案例分析、讲授法、小组讨论法
课前准备
1.查找相应网站资料,课堂演示使用。
2.学生课前预习。
教学媒体
电子课件、多媒体视频
教学过程
教学环节
教师活动设计
学生活动设计
设计意图
活动一:
创设情境
讲解知识点
新课导入
在前一节课程中,我们一起学习了三个常用的jQuery UI小部件,分别是进度条、对话框、自动填充、本节课我们继续学习另外四个小部件
【知识点复习】
【想一想】
如何使用Dreamweaver CC插入HTML表单?
12.2.7. 滑块
1. 插入 Slider
2. 编辑Slider 属性
1. 引导学生认真听讲,明确本节课的学习内容。
2. 展示本讲学习目标。
1. 知识点讲解
2. 接收并查看本节课堂任务书。
3. 了解学习目标,带着目标进行学习。
4. 知识拓展
5. 想一想
1.内容讲解的形式方式导入课程,让学生有针对性的进行学习。
2.通过任务实施,调动学生积极性。
活动二:
调动思维
探究新知
12.2.8 按钮及按钮组
1. 插入Button或Buttonset
2. 编 辑Button/Buttonset属性
12.2. 9 复选框按钮组及单选按钮组
3. 插入复选框按钮组或单选按钮组
4. 编辑复选框按钮组及单选按钮组属性
1. 教师操作演示
2. 学生听讲解并思考
1. 内容讲解
2. 知识拓展
1. 了解学生现有知识储备。
2. 巩固练习。
活动三:
调动思维
探究新知
【想一想】
制作好的jQuery UI小部件如何保存?
12.2.10 保存含有“jQuery UI”小部件的页面
1. 教师操作演示
2. 学生听讲解并思考
1. 想一想
2. 问题思考
3. 实操练习
1. 引导学生主动思考,发散思维,参与课堂。
2. 培养学生发现问题,解决问题的能力。
3. 了解相关知识。
4. 理实一体化让学生参与实践并归纳总结。
活动四:
巩固练习
素质提升
【辩一辩】
jQuery UI小部件在网页设计中的必要性与过度使用的利弊
【考一考】
1.什么是jQuery UI滑块(Slider)控件?
2.在Dreamweaver中保存含有“jQuery UI”小部件的页面时,为什么会弹出“复制相关文件”对话框?
1. 教师讲解
2. 注意事项
3. 辩一辩
4. 考一考
知识检测与巩固
课堂小结
作业布置
课堂小结
作业布置
复习本节课内容,预习下节课内容。
板书设计
滑块
按钮及按钮组
复选框按钮组及单选按钮组
保存含有“jQuery UI”小部件的页面
教学反思
原创精品资源学科网独家享有版权,侵权必究!
学科网(北京)股份有限公司
$$