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