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

《网页设计与制作（Dreamweaver CC)》教案 课 题 12.2.1-12.2.3 jQuery UI小部件(上） 课 型 理论 课 时 2 授课班级 授课时间 授课教师 教材分析 该章节《12.2.1-12.2.3 jQuery UI小部件（上）》是《网页设计与制作（DreamweaverCC）》教材中的重要部分，主要介绍了jQuery UI小部件中的折叠面板、选项卡和日期选择器的概念、作用及在Dreamweaver中的插入与设置方法。这些内容在网页设计中占据核心地位，因为它们能够极大地丰富网页的交互性和用户体验。通过学习，学生不仅能够掌握如何将桌面体验元素融入Web页面，还能为后续学习更复杂的网页交互效果打下基础。此外，该章节还强调了jQuery UI小部件的组成部分和属性设置，有助于学生深入理解并掌握网页设计中前端技术的实际应用。 学情分析 在学情分析方面，学生在学习该节内容前，可能对jQuery UI小部件的概念和用途有一定的了解，但可能缺乏实际操作和深入理解的经验。该章节知识点，包括折叠面板、选项卡和日期选择器等jQuery UI小部件的插入、属性设置和编辑，对学生当前学习网页设计与制作具有重要影响，能够提升他们的网页交互设计能力和用户体验。同时，这些知识点也是后续学习更高级网页开发技术的基础。因此，学好这一章节对于学生全面掌握《网页设计与制作（Dreamweaver CC）》这门课程至关重要。 学习目标 知识目标： 掌握jQuery UI小部件（折叠面板、选项卡、日期选择器）的基本概念。 理解jQuery UI小部件的组成部分，包括结构、样式和行为。 技能目标： 能够利用Dreamweaver插入jQuery UI小部件（折叠面板、选项卡、日期选择器）。 能够设置和编辑jQuery UI小部件的属性，以满足网页设计的需要。 情感目标： 培养学生的创新思维和审美能力，通过jQuery UI小部件的使用提升网页的交互性和用户体验。 学习重难点 重点： 1.jQuery UI小部件的基本概念与种类。 2.折叠面板、选项卡、日期选择器的插入方法。 3.折叠面板、选项卡、日期选择器的属性设置。 难点： 1.jQuery UI小部件的结构、样式和行为的区分与理解。 2.折叠面板、选项卡面板的编辑操作。 教学方法 案例分析、讲授法、小组讨论法 课前准备 1.查找相应网站资料，课堂演示使用。 2.学生课前预习。 教学媒体 电子课件、多媒体视频 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 课程导入： jQuery UI小部件是以 DHTML 和 JavaScript等语言编写的小型 Web 应用程序，可以在网页内插入和执行。 12.2.1 折叠面板 (1) 插入Accordion 面板 (2) 设置Accordion面板属性 (3) 编辑Accordion 面板 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 问题导入 2. 接收并查看本节课堂任务书。 3. 想一想 4. 了解学习目标，带着目标进行学习。 1.以提问的方式导入课程，让学生带着问题有针对性的进行学习。 2.通过任务实施，调动学生积极性。 活动二： 调动思维 探究新知 12.2.2选项卡 (1) 插入选项卡面板 (2) 设置选项卡面板属性 (3) 编辑选项卡面板 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 教师讲解与演示 2. 知识拓展 1. 了解学生现有知识储备。 2. 巩固练习。 活动三： 调动思维 探究新知 12.2.3 日期选择器 (1) 插入日期面板 (2) 设置日期面板属性 (3) 编辑日期面板 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 想一想 2. 问题思考 3. 归纳总结 1. 引导学生主动思考，发散思维，参与课堂。 2. 培养学生发现问题，解决问题的能力。 3. 了解相关知识。 活动四： 巩固练习 素质提升 12.2 jQuery UI小部件 1. 教师讲解 2. 学生思考 3. 辩一辩 4. 练一练 知识检测与巩固 课堂小结 作业布置 课堂小结 作业布置 复习本节课内容，预习下节课内容。 板书设计 折叠面板 选项卡 日期选择器 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $$