admin 管理员组

文章数量: 1184232


2024年3月7日发(作者：安卓软件自主开发)

《移动网站开发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） 在

标签中添加data-role属性，设置该属性的值为page。

学生实践

（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） 在

全部评论 0
暂无评论