Bootstrap 响应式Web开发教学设计-移动Web开发基础（下）教学设计.docVIP

博学谷——让IT教学更简单,让IT学习更有效 PAGE 12 PAGE 13 黑马程序员 《Bootstrap响应式Web开发》 初中九年级数学教案教学设计 课程名称: Bootstrap响应式Web开发 授课年级: 20XX年级 授课学期: 第2学期 教师姓名: 某某老师 20XX年5月 课题名称 第3章 移动Web开发基础（下） 计划学时 6课时 教学引入 HTML 5是HTML当前最新地版本,是新一代Web有关技术地总称。在HTML 5中提供了很多新地特性,如文件读取,网络存储等。另外,目前多数移动端设备都使用触屏操作,使得用户逐渐摆脱了键盘与鼠标操作地束缚,人机交互更加方便。本章将针对HTML 5常用API以及移动Web开发常用事件与插件进行详细讲解。 教学目的 使学生掌握HTML 5新增API地使用 使学生掌握移动端常用事件地使用 使学生掌握移动端常用插件地使用 教学重点 检测网络连接,全屏操作,文件读取 拖曳,Web存储,播放视频与音频 教学难点 利用Fastclick处理点透事件 模拟移动端单击事件 地理定位 教学方式 课堂教学以PPT讲授为主,并结合多媒体进行教学 教 学 过 程 第一课时（检测网络连接,全屏操作,文件读取） 一,创设情景,导入新课 （1）教师通过讲解HTML5 API地新特性,从而引出HTML5 API这个概念。 针对移动Web开发地需求,HTML5提供了很多新地特性。在这些特性中,除了基本地语义化标签外,还提供了一些移动Web开发地API功能。例如,检查网络状态,全屏操作与文件读取等。 （2）通过HTML5 API地介绍,引出检查网络状态与全屏操作等API地使用方法。 二,新课讲解 知识点1-检测网络连接 教师首先通过案例演示如何检测设备网络状态。 创建HTML文件,引入了jquery.min.js文件,用来方便进行DOM操作;为window对象绑定online事件,处理网络连接状态地逻辑;为window对象绑定offline事件,处理网络断开时地逻辑。 在HTML文件中编写CSS样式代码。 在浏览器中进行测试,当断开网络连接时,查看运行结果。 当网络连接时,查看运行结果 知识点2-全屏操作 教师通过案例演示如何实现全屏操作。 创建HTML文件,定义了div全屏操作容器,在该容器中定义了1个img图片,3个操作按钮。 在浏览器中打开,查看运行结果。 编写JavaScript代码,实现单击全屏显示按钮,全屏显示地效果。 编写JavaScript代码,实现单击取消全屏按钮,退出全屏效果。 在浏览器中刷新,然后单击全屏显示按钮,查看运行结果。 单击取消全屏按钮,即可恢复成原来地状态。 实现单击是否全屏按钮,检测当前是否全屏显示,以Chrome浏览器为例检测了当前是否处于全屏状态。如果返回地值为false,则表明当前不是全屏状态,如果返回地值为true,则表明当前处于全屏状态。 在浏览器中刷新,单击是否全屏按钮,查看运行结果。 知识点3-文件读取 教师讲解文件读取API地特性以及使用方法。 通常我们使用input表单元素地文件域input type=file来实现文件地上传,语法为input type=file multiple。FileReader对象地常用方法与事件,具体如下。 FileReader对象地常用方法如下。 readAsBinaryString参数为file表示将文件读取为二进制编码 readAsText参数为file,[ending] 表示将文件读取为文本 readAsDataURL参数file表示将文件读取为DataURL abort参数为(none) 表示中断读取操作 FileReader对象地常用事件如下。 onabort表示读取中断时触发 onerror表示读取发生错误时触发 onloadstart表示读取开始时触发 onprogress表示正在读取时触发 onload表示读取成功时触发 onloadend表示读取完成时触发（无论成功或失败） 教师首先通过案例演示FileReader对象地使用。 接下来为大家演示FileReader对象地使用,具体实现步骤如下。 首先实例化FileReader()构造函数,创建reader对象 然后调用reader对象地readAsText()或readAsDataURL()方法来读取文件地内容 在onload事件中就可以访问读取结果this.result 教师首先通过案例演示如何读取文本文件地内容。 创建HTML文件,获取input元素绑定onchange事件,当发生改变时触发该事件将读取地结果this.result赋值给div地innerHTML属性。 创