12.1 使 用“jQuery UI”小部件布局页面（教案）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

《网页设计与制作（Dreamweaver CC)》教案 课 题 12.1 使用“jQuery UI”小部件布局页面 课 型 理实一体化 课 时 2 授课班级 授课时间 授课教师 教材分析 该章节《网页设计与制作（Dreamweaver CC）》中的“实战演练”部分，主要围绕创建“网上书店服务调查”表单展开，详细讲解了表单元素的创建方法、属性设置以及表单的布局与美化。此章节在网页设计中占据重要地位，它不仅是网页交互功能实现的基础，也是提升用户体验的关键环节。通过学习，学生能够掌握表单制作的核心技能，为后续开发功能丰富、用户友好的网页界面打下坚实基础。同时，该章节的实践操作性强，有助于培养学生的动手能力和解决实际问题的能力。 学情分析 在学习“网页设计与制作（Dreamweaver CC）”的该章节前，学生已初步掌握了网页设计的基础知识，但对于如何在实际项目中应用这些知识进行表单设计和制作仍缺乏实践经验。该章节重点介绍了创建多种表单元素的方法、表单对象属性的设置以及表单的提交方式，这些都是学生在后续进行网页设计和开发时不可或缺的技能。通过本章的学习，学生将能够掌握表单设计的核心要点，提升用户体验，为后续深入学习网页交互设计和高级功能打下坚实的基础。因此，该章节对于学生学好这门课程具有至关重要的作用。 学习目标 知识目标： 掌握Dreamweaver CC的基础操作 熟悉网页设计与制作的基本流程 技能目标： 能够独立使用Dreamweaver CC进行网页设计 能够解决网页设计过程中遇到的实际问题 情感目标： 培养学生对于网页设计的兴趣和热情 提升学生的审美情趣和创新能力 学习重难点 重点： 1.创建多种表单元素的方法 2.表单对象属性的设置 3.表单的提交方法 难点： 1.表单元素的合理选择与布局 2.表单及表单对象属性的准确设置 3.优化表单设计以提升用户体验 教学方法 案例分析、讲授法、小组讨论法 课前准备 1.查找相应网站资料，课堂演示使用。 2.学生课前预习。 教学媒体 电子课件、多媒体视频 教学过程 教学环节 教师活动设计 学生活动设计 设计意图 活动一： 创设情境 生成问题 1. 课程导入 jQuery UI是一把钥匙，它将引领你探索如何轻松构建美观且功能强大的用户界面，让你的网页焕发新生。 12.1.1 案例综述 “jQuery UI”小部件增加了页面的布局形式，简化并增强了表单的表现形式，使用户体验到桌面系统的交互感受。 效果如下图所示。 【注意事项】 学习和使用jQuery UI需要关注前置条件、组件选择、样式引用、版本兼容性、文档与示例、自定义与扩展、性能优化以及安全性等方面的问题。通过遵循这些注意事项，可以更好地利用jQuery UI来丰富网页的交互性和用户体验。 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 问题导入 2. 接收并查看本节课堂任务书。 3. 了解学习目标，带着目标进行学习。 1.以提问的方式导入课程，让学生带着问题有针对性的进行学习。 2.通过任务实施，调动学生积极性。 活动二： 调动思维 探究新知 12.1.2 案例分析 1　 页面头部 2　 主信息区 3　 右侧栏 4　 页尾部分 2.引导学生带着问题去课本寻找答案，明确本节课的学习内容。 3.展示本讲学习目标。 1. 教师讲解演示 2. 学生认真听讲并思考案例分析步骤 1. 了解学生现有知识储备。 2. 巩固练习。 活动三： 调动思维 探究新知 12.1.3 实现步骤 1. 制作前的准备 2. 页面头部信息的修改 3. 页面信息区制作 4. 版权信息区制作 1. 想一想 2. 问题思考 3. 知识拓展 1. 引导学生主动思考，发散思维，参与课堂。 2. 培养学生发现问题，解决问题的能力。 3. 了解相关知识。 4. 仔细观看教师操作演示流程 活动四： 巩固练习 素质提升 【做一做】 请根据案例分析，实现步骤流程，使用“jQuery UI”小部件布局吊儿郎当页面。 1. 观看教师操作演练 2. 做一做 实际操作演练，绝知此事要躬行 课堂小结 作业布置 课堂小结 作业布置 复习本节课内容，预习下节课内容。 板书设计 12.1.1 案例综述 12.1.2 案例分析 12.1.3 实现步骤 教学反思 原创精品资源学科网独家享有版权，侵权必究！ 学科网（北京）股份有限公司 $$