12.2.4-12.2.6 jQuery UI小部件(中）（教案）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

《网页设计与制作（Dreamweaver CC)》教案 课 题 12.2.4-12.2.6 jQuery UI小部件(中） 课 型 理论 课 时 2 授课班级 授课时间 授课教师 教材分析 该章节主要介绍了jQuery UI小部件中的进度条、对话框和自动填充三个重要控件的插入与编辑方法，包括它们的属性设置和实际应用。这些内容在《网页设计与制作（Dreamweaver CC）》教材中占据重要地位，不仅丰富了学生的网页设计工具箱，而且增强了网页的交互性和用户体验。通过学习和掌握这些控件，学生能够设计出更加生动、实用的网页界面，为后续学习高级网页交互效果奠定基础，对学生的网页设计能力提升具有显著的促进作用。 学情分析 学生在学习该节内容前，已经掌握了jQuery UI小部件的基本概念，以及折叠面板、选项卡、日期选择器等小部件的使用。然而，对于进度条、对话框、自动填充等小部件的掌握尚不熟练。本节内容将进一步加深学生对jQuery UI小部件的理解和应用能力，特别是这些小部件在提升用户体验方面的价值。这些知识点不仅有助于学生当前网页设计与制作技能的提升，而且为后续学习更复杂的网页交互效果打下坚实的基础。因此，该章节对于学生学好《网页设计与制作（Dreamweaver CC）》这门课程具有重要意义。 学习目标 知识目标： 掌握jQuery UI小部件（进度条、对话框、自动填充）的基本概念。 理解jQuery UI小部件的组成部分，包括结构、样式和行为。 技能目标： 能够利用Dreamweaver插入jQuery UI小部件（进度条、对话框、自动填充）。 能够设置和编辑jQuery UI小部件的属性，以满足网页设计的需要。 情感目标： 培养学生的团队协作能力，在学习过程中相互交流，共同促进 学习重难点 重点： 1.jQuery UI小部件的基本概念与种类。 2.进度条、对话框、自动填充的插入方法。 3.进度条、对话框、自动填充的属性设置。 难点： 1.jQuery UI小部件的结构、样式和行为的区分与理解。 2.进度条、对话框、自动填充面板的编辑操作。 教学方法 案例分析、讲授法、小组讨论法 课前准备 1.查找相应网站资料，课堂演示使用。 2.学生课前预习。 教学媒体 电子课件、多媒体视频 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 课程导入： 在前一节课程中，我们一起学习了三个常用的jQuery UI小部件，分别是折叠面板、选项卡、日期选择器。本节课我们继续学习另外三个小部件 【知识点复习】 12.2.4 进度条 (1) 插入进度条 (2) 编辑进度条属性 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 问题导入 2. 接收并查看本节课堂任务书。 3. 想一想 4. 了解学习目标，带着目标进行学习。 1.以提问的方式导入课程，让学生带着问题有针对性的进行学习。 2.通过任务实施，调动学生积极性。 活动二： 调动思维 探究新知 12.2.5 对话框 (1) 插入对话框 (2) 编辑对话框属性 (3) 编辑对话框内容 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 教师讲解与演示 2. 知识拓展 1. 了解学生现有知识储备。 2. 巩固练习。 活动三： 调动思维 探究新知 12.2.6 自动填充 (1) 插入自动填充 (2) 编辑Autocomplete 属性 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 想一想 2. 问题思考 3. 归纳总结 1. 引导学生主动思考，发散思维，参与课堂。 2. 培养学生发现问题，解决问题的能力。 3. 了解相关知识。 活动四： 巩固练习 素质提升 【辩一辩】 jQuery UI小部件中进度条与对话框在提升用户体验方面的价值对比。 【练一练】 1.jQuery UI进度条的主要功能 2.在Dreamweaver中，如何插入并编辑一个jQuery UI对话框的标题和位置？ 置对话框的标题，使用“Position”属性来设置对话框的位置。 3.jQuery UI自动填充控件的“Source”属性有什么作用？ 1. 教师讲解 2. 学生思考 3. 辩一辩 4. 练一练 知识检测与巩固 课堂小结 作业布置 课堂小结 作业布置 复习本节课内容，预习下节课内容。 板书设计 进度条 对话框 自动填充 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $$