jQuery网页特效设计基础教程（慕课版）（第2版）-教案 第11、12章 jQuery在HTML5中的应用、 综合实战——使用jQuery实现携程网站特效.docx
PAGE1
PAGE
第11章jQuery在HTML5中的应用
课程名称
jQuery网页特效设计基础教程
项目名称
jQuery在HTML5中的应用
任务名称
jQuery在HTML5中的应用
课时
5
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
知识目标
1.了解HTML5的新特性。
2.了解浏览器对HTML5的支持。
3.掌握jQuery与HTML编程的常用功能。
能力目标
1.能够熟练使用HTML5能力。
2.能够熟练使用jQuery与HTML5的编程能力。
素质目标
1.培养学生综合应用的能力。
2.培养学生知识学习的能力。
教学内容
1.任务描述
2.任务展示与实现
（1）使用HTML5+jQuery实现文件上传进度条的显示
（2）使用HTML5+jQuery实现图片旋转效果
（3）使用jQuery插件在HTML5中实现声音播放
（4）学生动手操作
3.教师讲解本任务涉及的知识点
4.任务小结
教学重点
1.HTML5的基础知识
2.如何在网站开发中综合使用jQuery+HTML5
3.编写jQuery代码
教学难点
1.如何在网站开发中综合使用jQuery+HTML5
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．综合实例：旅游信息网前台页面设计
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
本章主要介绍了HTML5的基础、HTML5的新特性、浏览器对HTML5的支持、在网站开发中综合使用jQuery+HTML5等知识点。其中重点介绍了在网站开发中综合使用jQuery+HTML5，包括文件上传、Canvas绘图、图片选择等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
课程
内容
描述
一、HTML5基础
HTML5是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。
1．兼容性
2．实用性和用户优先
3．化繁为简?
二、jQuery与HTML5编程
通过多个案例绍在jQuery程序中调用HTML5的API来完成一些常见功能。
案例：
1.使用jCanvas插件绘制一个浅蓝色的正方形（实例位置：源码\第11章\11-2）。
（1）创建index.html，引入jquery文件和jCanvas插件文件。代码如下：
scripttype=text/javascriptsrc=../js/jquery-3.6.4.min.js/script
scripttype=text/javascriptsrc=../js/jcanvas.min.js/script
（2）在页面中添加canvas元素，具体代码如下：
canvaswidth=300height=200/canvas
（3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形。具体代码如下：
$(function(){
$(canvas).drawRect({
fillStyle:lightblue,
x:150,y:80,
width:100,
height:100
})
})
课堂
实训
综合实例：旅游信息网前台页面设计
旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。
总结
评价
通过学习，学生能够掌握HTML5基础、jQuery与HTML5编程API接口等功能。
本节课主要运用案例教学法，通过对jQuery与HTML5编程的深入理解，掌握jQuery与HTML5编程的特点及优势，深入探讨jQuery与HTML5的编程方法，通过实例的方法加强对jQuery与HTML5编程的掌握，达到能够独立熟练运用jQuery与HTML5编程来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。
第12章综合实战——使用jQuery实现携程网站特效
课程名称
jQuery网页特效设计基础教程
项目名称
综合实战——使用jQuery实现携程网站特