移动网站开发jQuery-Mobile实践教程-教案-教学设计

《移动网站开发jQueryMobile项目教程》教案课程教学单元设计项目名称：项目1——认识jQuery授课教师：授课班级：单元总学时：8教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：理解jQuery的加载机制了解jQuery基本选择器掌握jQuery改变CSS样式方法掌握jQuery事件处理方法能力目标：能够加载jQuery函数库能够认识和使用jQuery选择器操作页面元素能够使用jQuery改变CSS样式能够进行jQuery处理页面事件教学内容任务1引用jQuery函数库任务2使用jQuery改变CSS样式任务3使用jQuery进行事件处理重点：jQuery工作原理难点：jQuery事件处理课外拓展仿照注册页面制作登录页面。要求：（1）点击登录按钮时，首先检验用户名和密码是否为空，如果为空在文本框后面添加文字提示，如果不为空再提交表单。（2）当用户名文本框失去焦点事件发生时，检验用户名内容是否在{“jack”,”tom”,”lucy”}对象数组中，如果在数组中，则在用户名文本框后提示用户“该用户已经登录”。教学过程设计任务1引用jQuery函数库（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入复习javascript的引入文件的方法。演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery库引入的两种方法。分析jQuery入口函数的使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件。两种方法引用jQuery库。调试入口函数。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery引入jQuery库入口函数归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务2使用jQuery改变CSS样式（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何进行DOM操作？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery选择器的概念。分析jQuery选择器的用法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。通过标签、类、id和位置选择器选取元素，并通过css方法设置样式观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery选择器使用jQuery选择器用css函数改变样式归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务3使用jQuery进行事件处理（学时数：4）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何进行处理事件？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析网页中常见事件。分析jQuery常见事件处理函数。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。认识常用的点击、失去焦点、改变选择等事件熟悉jQuery的事件处理函数用法。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery事件函数使用jQuery事件函数练习常用事件处理案例。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习项目名称：项目2——认识jQueryMobile授课教师：授课班级：单元总学时：4教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：理解jQueryMobile的加载机制熟悉jQueryMobile基本属性能力目标：能够加载jQueryMobile函数库能够认识和使用jQueryMobile基本属性设计页面教学内容任务1下载安装OperaMobileEmulator移动设备模拟器任务2加载jQueryMobile函数库任务3第一个jQueryMobile页面重点：jQueryMobile理解难点：jQueryMobile属性课外拓展实现外部链接实现过渡效果教学过程设计任务1下载安装OperaMobileEmulator移动设备模拟器任务2加载jQueryMobile函数库（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入移动页面如何在电脑上浏览？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析模拟器。分析jQueryMobile函数库。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组下载安装模拟器。两种方法引用函数库。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结重新认识OperaMobileEmulator移动设备模拟器引用jQueryMobile函数库归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务3第一个jQueryMobile页面（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQueryMobble页面在制作手机页面上有什么优势？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQueryMobile的data-role属性。分析页面内链接跳转的表示方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组引用函数库。输入代码。在模拟器中看结果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQueryMobile使用jQueryMobile库建立jQueryMobile页面归纳总结教师讲授教师：总结学生：思考总结课外拓展实现外部链接（2）实现过渡效果项目名称：项目3——jQueryMobile页面制作授课教师：授课班级：单元总学时：14教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：理解jQueryMobile的页面结构掌握jQueryMobile的页面跳转方式了解jQueryMobile的外部链接方式掌握jQueryMobile的页面缓存和预加载技术掌握jQueryMobile的页面布局方法能力目标：能够进行页面间的跳转能够通过外部链接的方式实现页面的相互切换效果能够使用jQueryMobile的页面缓存和预加载技术能够对jQueryMobile的页面进行布局。教学内容任务1设计页面任务2页面跳转任务3返回操作任务4弹出对话框任务5页面缓存任务6使用锚记任务7添加按钮任务8制作导航栏任务9制作尾部栏任务10页面布局任务11可折叠区块使用重点：jQueryMobile的页面制作方法难点：<div>标签中属性值的设置课外拓展为自己的学校制作一个网站，最少包含四个页面。教学过程设计任务1设计页面（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQueryMobile的许多功能效果都是基于HTML5的新增标签和属性，一次页面必须符合HTML5的文档规范。演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQueryMobile页面的基本结构模型。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。在<div>标签中添加data-role属性，设置该属性的值为page。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQueryMobile页面的基本结构模型。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务2页面跳转（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加页面？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery页面跳转方式。分析使用外部链接方式的优势。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。分别使用两种方式实现页面跳转。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery页面跳转方式使用jQuery页面跳转方式归纳总结教师讲授教师：总结学生：思考总结课外拓展将跳转到外链接页面改为同一页面内跳转，并比较两者的区别。任务3返回操作（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何实现页面跳转？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery的2种后退方式。分析jQuery实现后退的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。通过设置data-add-back-btn属性值为true实现返回操作。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评。实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery后退方式。使用jQuery后退方式。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试使用任务分析中的第二种方法实现页面返回效果，并找出两种方法展示效果上的区别。任务4弹出对话框（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加返回按钮？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析添加返回按钮的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。使用data-rel=”popup”类型的链接打开一个弹出层。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery弹出对话框的方法使用jQuery弹出对话框的方法归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试设置data-rel的属性值为”dialog”，找出其与data-rel=”popup”时的区别。任务5页面缓存（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQueryMobile通过页面缓存和预加载技术提高移动终端的访问速度。演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析页面缓存的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。通过设置data-dom-cache的值为true，将page2和page3缓存到页面中。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery页面缓存的方法。使用jQuery页面缓存的方法。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务6使用锚记（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何进行处理事件？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析网页中添加锚记的方法。分析网页中添加锚记的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。要创建命名锚记，然后再链接命名锚记。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加锚记的方法。使用jQuery添加锚记的方法。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务7添加按钮（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加按钮？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析添加按钮的两种方式。分析添加按钮的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。使用超级链接的方式添加按钮。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加按钮的方式。使用jQuery添加按钮的方式。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试使用任务分析中的代码<inputtype=”submit”value=”提交按钮”>为页面添加按钮。任务8制作导航栏（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何制作导航栏？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析网页中常见导航栏。分析jQuery常见data-icon属性值。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置data-role属性值为navbar。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery导航栏的制作。使用jQuery中data-role属性值。归纳总结教师讲授教师：总结学生：思考总结课外拓展在页眉栏中添加标题，为每个链接页面添加返回按钮，使页面迁移更流畅。任务9制作尾部栏（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何制作导航栏？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析网页中常见的尾部栏。分析jQuery中data-role属性值。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置data-role属性值为controlgroup。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery导航栏的制作。使用jQuery中data-role属性值。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务10页面布局（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何进行分栏？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery分栏布局设置。分析jQuery分栏布局设置的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置分栏布局的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery分栏布局设置使用jQuery分栏布局的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试制作一个两栏页面，并给其中加入图片。任务11可折叠区块使用（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何制作可折叠区块？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery可折叠区块设置。分析jQuery可折叠区块的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。使用可折叠区块的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评。实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery可折叠区块设置。使用jQuery可折叠区块的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试再添加2个data-role属性值为collapsible的折叠块，分别为学校概况、招生就业。项目名称：项目4——jQueryMobile组件应用授课教师：授课班级：单元总学时：14教学条件Dreamweaver、JBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：掌握按钮组件的设置方法理解表单组件的意义掌握单选按钮和复选框的设置方法掌握格式化列表的方法掌握制作自定义菜单的方法能力目标：能够使用按钮组件能够使用表单组件能够设置单选按钮和复选框能够制作自定义菜单。能够制作列表，并可以给列表添加图标和计数器。教学内容任务1添加按钮组组件任务2认识表单组件任务3滑块任务4开关按钮任务5使用单选按钮制作投票页面任务6使用复选框制作调查问卷任务7使用自定义菜单任务8分组列表任务9图标设置与计数器任务10格式化列表任务11列表过滤重点：jQueryMobile组件的应用难点：各组件的设置方法课外拓展为第三章制作的学校网站中添加按钮组件、表单组件、使用自定义菜单、分组列表、图标设置与计数器、格式化列表等。教学过程设计任务1添加按钮组组件（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQueryMobile提供许多常用组件，例如按钮组件。演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQueryMobile按钮组组件的添加方式。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。在div中设置如下代码即可定义按钮组。<divdata-role=”controlgroup”>*设置按钮*</div>观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery按钮组组件的添加方式。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试添加按钮数量，并通过改变data-type属性值来设置水平按钮组。任务2认识表单组件（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加文本输入组件？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery添加表单组件的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。添加文本输入组件。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加文本输入组件的方式使用jQuery添加文本输入组件的代码归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试为页面添加不同类型的文本输入组件。任务3滑块（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何实现页面跳转？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析滑块的组成。分析实现滑块的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。在<input>标签中设置type属性值为range来实现滑块。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评。实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解滑块的组成。使用实现滑块的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习。任务4开关按钮（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加开关按钮？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析添加开关按钮的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。在<select>标签中设置data-role属性值为slider，将下面列表中的两个选项设置为翻转切换开关。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加开关按钮的方法使用jQuery添加开关按钮的方法归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习。任务5使用单选按钮制作投票页面（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入单选按钮是在若干个选项中只能选择一个选项。演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析添加单选按钮的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置单选按钮代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加单选按钮的方法。使用jQuery添加单选按钮的方法。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试增加单选按钮选项，并添加取消按钮。任务6使用复选框制作调查问卷（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加复选框？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析网页中添加复选框的方法。分析网页中添加复选框的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置复选框代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery添加复选框的方法。使用jQuery添加复选框的方法。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试将复选框添加选项。注意id的设置，要求唯一性。任务7使用自定义菜单（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何自定义菜单？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析自定义菜单的设置方法。分析自定义菜单的设置代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。添加自定义菜单代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解自定义菜单的设置方法。使用自定义菜单的设置方法。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试在自定义菜单中加入文本“选择年份”、“选择月份”和“选择日期”。任务8分组列表（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何制作分组列表？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析分组列表的设置方法。分析分组列表的设置代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置分组列表的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解分组列表的设置方法。使用分组列表的设置代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试使用<ol>有序列表制作分组列表，并找出其与无序列表的区别。任务9图标设计与计数器（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何添加图标和计数器？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析添加图标和计数器的方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置图标和计数器的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解添加图标和计数器的方法。使用添加图标和计数器的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试将计数器的数字换成简短的文字，如“new”。任务10格式化列表（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何格式化列表？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery格式化列表的方法。分析jQuery格式化列表的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。设置格式化列表的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery格式化列表的方法。使用jQuery格式化列表的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试制作音乐播放列表，并对其进行格式化。任务11列表过滤（学时数：1）主要步骤教学内容教学方法教学手段师生活动新课引入jQuery如何进行列表过滤？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQuery实现列表过滤的方法。分析jQuery实现列表过滤的代码。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery库。使用实现列表过滤的代码。观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评。实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解jQuery实现列表过滤的方法。使用jQuery实现列表过滤的代码。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习。项目名称：项目5——jQueryMobile样式设置授课教师：授课班级：单元总学时：10教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：掌握jQueryMobile默认主题样式了解修改主题样式的方法掌握自定义主题样式的设置方法能力目标：能够使用默认主题设置页面样式能够修改主题样式能够自定义主题样式教学内容任务1设置默认主题样式任务2修改主题样式任务3自定义主题样式重点：掌握主题的使用原理难点：自定义主题课外拓展实践5种主题样式自定义主题设计页面。教学过程设计任务1设置默认主题样式（学时数：4）主要步骤教学内容教学方法教学手段师生活动新课引入什么是主题？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析jQueryMobile主题面向对象机制。分析jQueryMobile主题样式使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。实现两种主题并比较。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解主题正确使用主题样式归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并创建新的页面。任务2修改主题样式（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入主题中样式如何修改？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析主题的使用原理。分析样式修改。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和jQueryMobile库。找到主题样式文件并修改观察效果。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解主题机制找到主题样式文件修改样式归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习任务3自定义主题样式（学时数：4）主要步骤教学内容教学方法教学手段师生活动新课引入jQueryMobie能否自定义新的主题？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析主题预留类。分析自定义主题的实现。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和jQueryMobile库。自定义主题。使用自定义主题。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解主题预留类使用预留类定义主题使用主题。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并自己拓展练习。项目名称：项目6——jQueryMobile事件处理授课教师：授课班级：单元总学时：12教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：(1)熟悉移动页面的基本事件名称和用法(2)了解事件相关的参数(3)掌握jQueryMobile常用技巧能力目标：(1)能够使用页面事件实现滑动、切换等特效(2)能够通过设置参数实现特效(3)能够运用jQueryMobile常用技巧简化页面制作教学内容任务1页面事件——页面切换任务2触摸事件——滑动屏幕浏览相册任务3屏幕滚动事件——切换背景任务4翻转事件——依据手持方向翻转屏幕任务5jQueryMobile常用技巧实战重点：掌握主题的使用原理难点：自定义主题课外拓展（1）使用data-fullscreen属性实现全屏显示页面时悬浮显示工具栏操作。（）利用jQuery改变属性方法removeClass()和addClass()方法改变文档的样式，实现页面文字颜色、大小的随机切换效果。任务1页面事件——页面切换（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入页面在打开、加载完成和切换时能否进行特效处理？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析页面显示/隐藏事件\加载事件和切换事件。分析事件的相关使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。编写页面切换事件和和事件响应代码。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解三种页面事件正确掌握页面事件的使用方法归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并创建新的页面。任务2触摸事件——滑动屏幕浏览相册（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入手机最常用的滑动动作对应什么事件？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析屏幕触摸和滑动等事件。分析事件的名称和使用方法。分析滑动相册的相关原理。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。使用左滑和右滑事件编写代码。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结（1）屏幕事件。（2）屏幕事件使用方法。（3）滑动相册制作。归纳总结教师讲授教师：总结学生：思考总结课外拓展完成页面并创建新的页面。任务3屏幕滚动事件——切换背景（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入屏幕滚动时能否添加特效？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析页面滚动事件。分析滚动事件的使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。编写屏幕滚动切换背景特效。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解屏幕滚动事件scrollstart和scrollstop正确使用事件来改变样式。归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并创建新的页面。任务4翻转事件——依据手持方向翻转屏幕（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入根据手持方向翻转屏幕很常见，如何实现呢？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析触发事件orientationchange。分析事件的相关属性orientation。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。编写orientationchange事件和和事件响应。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解事件orientationchange正确使用事件的相关属性orientation归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并创建新的页面。任务5jQueryMobile常用技巧实战（学时数：4）主要步骤教学内容教学方法教学手段师生活动新课引入开发过程中有没有捷径？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析<li>标签中添加data-icon属性。分析data-position属性removeClass方法和addClass方法演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析各小组建立html文件，引用jQuery和QueryMobile库。使用小技巧编写相关页面。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结（1）data-icon属性。（2）data-position属性（3）removeClass方法和addClass方法归纳总结教师讲授教师：总结学生：思考总结课外拓展（1）使用data-fullscreen属性实现全屏显示页面时悬浮显示工具栏操作。（2）利用jQuery改变属性方法removeClass()和addClass()方法改变文档的样式，实现页面文字颜色、大小的随机切换效果。项目名称：项目7——jQueryMobile插件使用授课教师：授课班级：单元总学时：10教学条件Dreamweaver、HBuilder等网页编辑软件、一体化教室、多媒体演示软件等教学素材参考书、视频教学目标设计知识目标：了解插件的作用掌握jQueryMobile中五种常用插件能力目标：能够利用网络找到合适插件能够使用插件快速制作页面教学内容任务1使用ActionSheet插件实现弹出窗口效果任务2使用mmenu插件制作侧边菜单效果任务3使用Mobiscroll插件选择时间和日期任务4使用Camera插件实现滚动幻灯片效果任务5使用Swipebox插件实现图片扩大效果重点：掌握插件的使用方法难点：理解插件参数课外拓展巩固练习教学过程设计任务1使用ActionSheet插件实现弹出窗口效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入如何实现弹出对话框效果？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析ActionSheet插件的原理和用法。分析弹窗的设置。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析下载ActionSheet插件库。各小组建立html文件，引用jQuery和QueryMobile库及插件库。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解ActionSheet插件正确使用ActionSheet插件归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，并创建新的页面。任务2使用mmenu插件制作侧边菜单效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入如何实现侧边菜单效果？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析mmenu插件的原理和用法。分析侧边菜单的设置。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析下载mmenu插件库。各小组建立html文件，引用jQuery和QueryMobile库及插件库。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解mmenu插件正确使用mmenu插件归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试使用图片替换“菜单”。任务3使用Mobiscroll插件选择时间和日期（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入如何设置日期和时间模块？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析Mobiscroll插件的原理和用法。分析时间日期的设置。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析下载Mobiscroll插件库。各小组建立html文件，引用jQuery和QueryMobile库及插件库。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解Mobiscroll插件正确使用Mobiscroll插件归纳总结教师讲授教师：总结学生：思考总结课外拓展尝试更改JavaScript代码脚本，改变Mobiscroll插件效果。任务4使用Camera插件实现滚动幻灯片效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入如何实现图片轮播特效？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析Camera插件的原理和用法。分析轮播特效插件的使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析下载Camera插件库。各小组建立html文件，引用jQuery和QueryMobile库及插件库。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解Camera插件正确使用Camera插件归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，自定义页面。任务5使用Swipebox插件实现图片扩大效果（学时数：2）主要步骤教学内容教学方法教学手段师生活动新课引入如何实现图片缩放特效？演示提问多媒体教师：讲解演示学生：观察思考任务分析实践任务分析分析Swipebox插件的原理和用法。分析Swipebox插件的使用方法。演示多媒体教学视频教师：讲解演示学生：观察思考理论目标分析分析知识目标分析技能目标讲授多媒体教学视频教师：讲解演示学生：观察思考课堂实践实践目标分析下载Swipebox插件库。各小组建立html文件，引用jQuery和QueryMobile库及插件库。调试页面。演示讲授多媒体系统开发环境课程资源教师：讲解演示学生：观察思考学生实践由一名学生在教师机上完成实践任务其它学生在学生机上完成实践任务实践目标完成后由学生分组对实践目标进行点评实践练习课堂实践任务单教师：巡视指导学生：实践操作查阅资料教师点评教师指出学生实践过程中可能出错和已经出错的知识点，对学生点评不完善的地方进行补充评析，对普遍存在的问题进行重点评析，加深印象，强化记忆。点评教师点评教师：点评学生：整理笔记课堂小结理解Swipebox插件正确使用Swipebox插件归纳总结教师讲授教师：总结学生：思考总结课外拓展巩固练习，自定义页面。项目名称：项目8——移动建站实例：店铺APP制作授课教师：授课班级：单元总