fillStyle:"lightblue",
x:150,y:80,
width:100,
height:100
})
})
课堂
实训
综合实例：旅游信息网前台页面设计
旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。
总结
评价
通过学习，学生能够掌握HTML5基础、jQuery与HTML5编程API接口等功能。
知识目标：
1.了解HTML5的基础、新特性以及浏览器对其的支持
2.掌握使用HTML5+jQuery编程
3.掌握使用Web Storage编程
素质目标：
1.培养学生信息搜集能力
2.培养学生团结合作、互帮互助的能力
教学内容
1.任务描述
2.任务展示与实现
（1）使用HTML5+jQuery实现文件上传进度条的显示
本节课主要运用案例教学法，通过对jQuery与HTML5编程的深入理解，掌握jQuery与HTML5编程的特点及优势，深入探讨jQuery与HTML5的编程方法，通过实例的方法加强对jQuery与HTML5编程的掌握，达到能够独立熟练运用jQuery与HTML5编程来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。
课程
说明
【课前说明】
本章主要介绍了HTML5的基础、HTML5的新特性、浏览器对HTML5的支持、在网站开发中综合使用jQuery +HTML5等知识点。其中重点介绍了在网站开发中综合使用jQuery +HTML5，包括文件上传、Canvas绘图、图片选择等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
第11章jQuery在HTML5中的应用
课程名称
jQuery网页特效设计基础教程
项目名称
jQuery在HTML5中的应用
任务名称
jQuery在HTML5中的应用
课时
5
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1.具备使用HTML5+jQuery编程的能力
2.具备使用Web Storage编程的能力
（2）在页面中添加<canvas>元素，具体代码如下：
<canvas width="300" height="200"></canvas>
（3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形。具体代码如下：
$(function(){
$("canvas").drawRect({
课程
内容
描述
一、HTML5基础
HTML5是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。
1．兼容性
2．实用性和用户优先
3．化繁为简
二、jQuery与HTML5编程
通过多个案例绍在jQuery程序中调用HTML5的API来完成一些常见功能。
案例：
1.使用jCanvas插件绘制一个浅蓝色的正方形（实例位置：源码\第11章\11-2）。
（1）创建index.html，引入jquery文件和jCanvas插件文件。代码如下：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jcanvas.min.js"></script>
（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盘中的素材位置、打开授课计划、教案等），吸引学生注意力。