《Bootstrap响应式Web开发》-教学设计

《Bootstrap响应式Web开发》教学设计课程名称：授课年级：授课学期：教师姓名：课题名称第1章初识Bootstrap计划学时3学时教学引入Bootstrap是一款非常优秀的Web前端框架，其灵活性和可扩展性加速了响应式页面开发的进程。Bootstrap遵循移动优先的原则，在开源之后迅速受到开发人员的追捧，推动了响应式技术的发展。为了让读者对Bootstrap有一个初步的认识，本章将会对Boostrap的基本概念、浏览器、编辑器、移动Web开发等内容进行详细讲解。教学目标使学生掌握Bootstrap的概念、特点及组成使学生了解PC端浏览器和移动端浏览器的区别使学生熟悉VisualStudioCode编辑器的使用使学生熟悉移动Web开发的主流方案教学重点什么是BootstrapBootstrap的特点及组成浏览器与VisualStudioCode编辑器教学难点移动Web开发的主流方案教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（什么是Bootstrap、Bootstrap的特点、Bootstrap的组成）一、创设情景，导入新课（1）教师通过讲解Bootstrap的相关信息，从而引出Bootstrap的功能。Bootstrap是由Twitter公司的设计师MarkOtto（马克奥托）和JacobThornton（雅各布·桑顿）合作开发的开源框架，于2011年8月在GitHub上发布，一经推出就颇受欢迎常用于开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建响应式Web页面。二、新课讲解知识点1-什么是Bootstrap教师首先通过PPT的方式什么是Bootstrap。Bootstrap框架基于HTML、CSS和JavaScript语言编写，它具有简单、灵活的特性。知识点2-Bootstrap的特点教师主要讲解Bootstrap的特点，具体如下。响应式设计：Bootstrap框架为用户提供了一套响应式的移动设备优先的流式栅格系统，拥有完备的框架结构，项目开发方便、快捷，提高了开发效率。移动设备优先：随着移动设备的使用者越来越多，自Bootstrap3开始，框架设计理念发生了改变，转为以移动设备优先为目标，Bootstrap3默认样式对移动设备提供了友好支持。浏览器支持：目前主流浏览器都支持Bootstrap框架，包括IE、Firefox、Chrome、Safari等。Bootstrap4兼容IE10+和iOS7+。低成本、易上手：学习Bootstrap框架，只需要读者具备HTML、CSS和JavaScript的基础知识，门槛不高。Bootstrap框架拥有完善的文档，在开发中便于查找，使用起来比较方便。Bootstrap还具有强大的扩展性，能够很好地与现实中的Web开发项目相结合。CSS预编译：CSS预编译的工作原理是，提供了便捷的语法和特性以供开发者编写源码，然后使用专门的编译工具将源码转化为CSS语法。Bootstrap4中使用Sass（一种CSS扩展语言）进行CSS编写和预编译，减少冗余代码，使得CSS样式代码更容易维护和扩展。框架成熟：Bootstrap框架不断适应Web技术的发展，框架发展比较成熟，在原有的基础上，进行更新迭代和完善，并在大量的项目中充分使用和测试。丰富的组件库：Bootstrap框架提供了功能强大的组件与插件，如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。知识点3-Bootstrap的组成教师进一步讲解Bootstrap的组成，具体如下。基本结构：Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。CSS样式库：Bootstrap自带了全局的CSS样式，并预先定义了基本的HTML元素样式、可扩展的class，以及一个先进的栅格布局系统。Bootstrap的全局样式在Normalize.css（一款用来重置浏览器默认样式的样式库）的基础上，进行了一些改良，目的是让其更符合Bootstrap的设计思想。布局组件：Bootstrap包含了丰富的组件库，提供了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。插件：Bootstrap提供了一些基于jQuery（一个用于简化JavaScript编程的库）构建的可选插件，用于实现某些功能，如分页、文件选择、日期选择等。三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（浏览器、VisualStudioCode编辑器）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课如果要想开发Web项目需要安装浏览器和VisualStudioCode编辑器开发工具。三、新课讲解知识点1-浏览器教师首先讲解什么是浏览器以及分类。浏览器（WebBrowser）是一种用于展示万维网信息资源的应用程序，它是Internet时代的产物，可以用来显示网页、图片、影音及其他内容等，以便用户与网页进行交互。具体分类如下。按照设备类型来划分，主要包括PC端浏览器和移动端浏览器按照浏览器的内核来划分，主要包括Blink、WebKit和Trident等PC端浏览器主要包括Google（谷歌）公司的Chrome浏览器、Mozilla公司的Firefox浏览器、苹果公司的Safari浏览器、微软公司的InternetExplorer（简称IE）和Edge浏览器等移动端浏览器主要包括Android系统内置的AndroidBrowser、iOS系统内置的MobileSafari，以及一些国产的浏览器如UC浏览器、QQ浏览器、百度浏览器等。教师讲解Chrome浏览器的优势。Chrome浏览器的内核是基于开源引擎Blink（Blink由WebKit衍生而来），其目的是提升浏览器的稳定性，并创建出简单高效的用户界面，优势如下。市场占有率高，兼容性好。界面简洁、简单易用。基于强大的JavaScript

V8引擎，速度很快。可通过扩展插件增强功能，便于开发人员使用。内置防止网络钓鱼及恶意软件功能，更加安全。跨平台，支持PC端的Windows、Linux和Mac系统，以及移动端的Android和iOS系统。知识点2-VisualStudioCode编辑器教师讲解什么是VisualStudioCode以及优势。VisualStudioCode（简称VSCode）是由微软公司推出的一款免费、开源的代码编辑器，一经推出后迅速受到开发者的欢迎和青睐。作为前端开发人员来说，一个强大的编辑器可以使开发变得简单、便捷、高效。本书选择使用VSCode编辑器作为开发工具。VisualStudioCode的优势如下。轻巧极速，占用系统资源较少。具备语法高亮显示、智能代码补全、自定义快捷键和代码匹配等功能。跨平台。不同的开发人员为了工作需要，会选择不同平台来进行项目开发，这在一定程度上限制了编辑器的使用范围。VSCode编辑器不仅是跨平台的（支持Mac、Windows和Linux），而且使用起来也非常简单。主题界面的设计比较人性化。例如，可以快速查找文件并直接进行开发，可以通过分屏显示代码，可以自定义主题颜色（默认为黑色），也可以快速查看最近打开的项目文件和查看项目文件结构。提供丰富的插件。VSCode提供了插件扩展功能，用户根据需要自行下载和安装插件，只需在安装配置成功后，重新启动编辑器，就可以使用此插件提供的功能。（4）教师演示VisualStudioCode的下载安装和使用。四、归纳总结（1）教师回顾本节课所讲的内容，并安排学生自行安装VisualStudioCode编辑器。（2）通过提问的方式加强学生对浏览器和VisualStudioCode编辑器的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（移动Web开发的主流方案）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课我们知道移动端页面与PC端页面开发存在区别，在移动Web项目开发时，首先要了解移动Web开发的主流方案的概念；然后，根据项目需求选择合适的方案进行移动端项目的开发。三、新课讲解知识点1-移动Web开发的主流方案教师首先讲解移动Web主流方案主要包括哪些。Bootstrap是基于移动端的发展而诞生的，它利用响应式Web开发技术，实现了一个页面同时兼容PC端和移动端。目前市场上主流的移动端开发方案有两种，具体如下。一种是单独制作移动端页面一种是制作响应式页面同时兼容PC端和移动端教师讲解什么是单独制作移动端页面。单独制作移动端页面，通常的做法是不改变原有的PC端页面，然后针对移动端单独开发出一套特定的版本。通常在网站的域名中使用二级域名“m”（含义为mobile）来表示移动端网站。例如，在移动端浏览器中访问网址/，即可打开淘宝网的移动端页面。教师讲解单独制作移动端页面的方案的优点。单独制作移动端页面这个方案优点在于，可以充分考虑到平台的优势和局限性，从而创建良好的用户体验设计，并且网页在移动设备上加载更快。教师讲解在单独制作移动端页面网站会产生多个URL的现象。由于单独制作移动端网站会产生多个URL（PC端一套URL，移动端一套URL），因此重定向移动网站需要花费一些时间。需要对搜索引擎做一些处理，维护成本会增加。需要针对不同的屏幕尺寸去分别制作一个网站，这样访问不同的网址会产生不同的页面效果，工作量比较大。教师讲解什么是响应式页面。响应式页面指的是同一页面在不同屏幕尺寸下实现不同的布局，从而使一个页面兼容不同的终端。在网站开发时，只须加入响应式设计就可以兼容这些终端，就不必单独制作移动端页面了。教师进一步讲解响应式页面的优势可以跨平台：响应式开发具有跨平台的优势，能够快捷地解决多终端设备的显示适配问题，只须开发一套网站就可以在多个平台使用，给用户带来风格一致的视觉体验。便于搜索引擎收录：响应式网站制作完成之后，无论在移动端设备还是PC端上访问的都是同一个链接地址，这样就减少了权重的分散，让网站对搜索引擎更加友好。节约成本：响应式网站可以兼容多个终端，开发者不需要为各个终端编写不同的代码。并且响应式网站可以实现只用一个后台来进行管理，多个终端的数据保持同步，这样在制作的时候就可以减少专职程序开发人员的配备。对于开发者而言，减少了大量重复的工作，提高了工作的效率；对于公司而言，节省了人员开支，降低了开发成本。四、归纳总结（1）教师回顾本节课所讲的内容，并自行安排学生在浏览器中打开三星官方网站，通过调节浏览器窗口大小的方式，查看网页的响应式效果。（2）通过提问的方式加强学生对移动Web开发主流方案的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。教学后记课题名称第2章移动Web开发基础（上）计划学时6课时教学引入在熟悉了Bootstrap框架和移动Web开发的基本概念后，本章将对移动Web开发的基础知识进行详解。本章内容主要包括视口、移动端Web页面的样式的编写、分辨率、设备像素比、二倍图和SVG矢量图等。其中，移动端页面的显示效果与移动端设备的视口有关，在移动端页面可以通过<meta>标签设置理想视口。在开发时还需要注意移动端设备的屏幕分辨率适配问题，以及图片的显示问题。教学目标使学生掌握视口的基本概念和使用方法使学生掌握移动Web页面的样式编写方法使学生理解分辨率和设备像素比的概念使学生掌握二倍图的使用方法使学生掌握SVG矢量图的使用方法教学重点什么是视口利用<meta>标签设置视口移动Web页面的样式编写方法二倍图的使用方法教学难点分辨率和设备像素比SVG标签和样式教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（什么是视口、利用<meta>标签设置视口）一、创设情景，导入新课（1）教师通过讲解视口的功能，从而引出视口这个概念。手机的屏幕尺寸多种多样，不同手机屏幕的分辨率、宽高比例都有可能不同。同一张图片在不同手机上的显示效果会存在差异。因此，我们需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上的显示效果一致。（2）通过视口的介绍，引出视口的使用方法。二、新课讲解知识点1-什么是视口教师首先讲解什么是视口以及视口的分类。视口简单来说就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着3种视口，分别是布局视口（layoutviewport）、视觉视口（visualviewport）和理想视口（idealviewport），具体如下。布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。视觉视口：视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。理想视口：理想视口是指对设备来讲最理想的视口尺寸。采用理想视口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。教师通过案例演示如何利用Chrome浏览器模拟手机屏幕。创建HTML文件，定义div标签和img标签。其中，img标签引入的图片素材picture1.jpg文件通过浏览器打开，在浏览器显示的页面中，单击鼠标右键，然后在弹出菜单中选择“检查”命令启动开发者工具（也可以直接按F12快捷键）。单击开发者工具面板左上角的第2个按钮，进入到移动端设备调试功能。将鼠标指针放在Elements面板中的html标签上，会看到浏览器显示了当前页面的宽度为980px。知识点2-利用<meta>标签设置视口教师通过案例演示如何利用<meta>标签设置视口。在传统的PC端网页开发中，并没有使用过<meta>标签来设置视口，此时浏览器会按照默认的布局视口宽度来显示网页。如果我们希望自己开发的网页在浏览器中以理想视口的形式呈现，就需要利用<meta>标签设置视口。在<meta>标签中，将name属性设为viewport，即可设置视口。示例代码为<metaname="viewport"content="width=device-width">。在利用Chrome浏览器模拟手机屏幕编写的HTML文件中添加<meta>标签。通过浏览器打开，会看到浏览器显示了当前页面的宽度为当前设备的宽度。（4）教师讲解视口的常用设置。在使用<meta>标签设置视口时，可以在content属性中添加一些参数，其格式为“参数名=参数值”，多个参数用“;”分开。<metaname="viewport"content="width=device-width">代码中width就是参数名，device-width是参数值。具体参数如下。width：设置视口宽度，可以设为正整数（像素）或特殊值device-widthheight：设置视口高度，可以设为正整数（像素）或特殊值device-heightinitial-scale：初始缩放比，取值范围为0.0~10.0maximum-scale：最大缩放比，取值范围为0.0~10.0minimum-scale：最小缩放比，取值范围为0.0~10.0user-scalable：用户是否可以缩放，其值为yes或no三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（移动Web页面的样式编写、设置移动端的特殊样式）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在移动端Web开发中，为了确保不同浏览器的默认样式统一，通常会对样式进行初始化，也就是在页面中定义一些初始样式，用来覆盖浏览器的默认样式。如使用Normalize.css样式库初始化默认样式；使用box-sizing属性设置CSS3盒子模型；设置移动端的特殊样式。三、新课讲解知识点1-移动Web页面的样式编写教师首先讲解Normalize.css的特点以及下载使用在Normalize.css官方网站可以获取文件的下载单击页面中的“Downloadv8.0.1”按钮，即可获取Normalize.css源代码单击鼠标右键，然后在弹出的菜单中选择“另存为”，即可将Normalize.css保存到本地Normalize.css的特点如下。保留有用的浏览器默认样式，而不是完全去掉它们保证各浏览器样式的一致性采用模块化开发，方便后期维护拥有详细的文档（2）教师讲解如何使用Normalize.css初始化页面的默认样式。创建HTML文件，定义<link>标签引入normalize.css文件，其中，href属性的值为normalize.css文件的路径地址；定义<div>标签在页面中显示“成功引入Normalize.css”的提示信息。在浏览器中打开，查看页面运行结果。body元素的margin被修改为0，说明Normalize.css已经引入成功并生效了。（3）教师通过案例演示content-box与border-box的区别，具体如下。在CSS3中，设置box-sizing属性的值以及含义，具体如下。将box-sizing设为content-box（默认值）时，表示传统盒子；计算方式：盒子的宽度=CSS中设置的width+border+padding将box-sizing设为border-box时，表示CSS3盒子；计算方式：盒子的宽度=CSS中设置的width；border-box方式的优点在于，盒子的大小是固定的，不会受到边框和内边距的影响，也不会影响到页面中其他盒子的结构。为了让读者更好地理解，下面通过案例演示content-box和border-box的区别，具体如下。创建HTML文件，为第1个div设置样式content-box，为第2个div设置样式border-box。在浏览器中打开，查看页面运行结果。虽然content-box和border-box在CSS中设置的宽高都是100px，但因为box-sizing不同，content-box会被外边距和边框撑大，而border-box不会被撑大。知识点2-设置移动端的特殊样式教师通过案例演示如何设置移动端的特殊样式。在实际开发中，移动Web页面的设计风格更接近App（手机应用），而不是传统的网页。为了有更好的用户体验，我们可以给移动Web页面设置一些特殊样式，具体如下。设置-webkit-tap-highlight-color的值为transparent表示去除超链接按下时默认的高亮效果（设为透明）设置-webkit-appearance的值为none表示去除按钮的原生样式设置-webkit-touch-callout的值为none表示禁止长按页面时弹出菜单设置-webkit-user-select的值为none表示禁止文本被手动选择为了让大家更好地理解，下面通过案例演示。创建HTML文件，设置a标签样式中的-webkit-tap-highlight-color的值为transparent，表示当单击这个超链接时，清除单击高亮效果；设置按钮样式中的-webkit-appearance的值为none，用来去除按钮的原生样式。在浏览器中打开，查看页面运行结果。按钮的默认样式已经被取消；当用户单击超链接时，不会显示超链接的背景颜色；读者可以尝试移除特殊样式，对比添加和移除后的区别。四、归纳总结（1）教师回顾本节课所讲的内容，并安排学生自行编写代码实现案例效果。（2）通过提问的方式加强学生对移动端页面样式编写相关知识的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（分辨率和设备像素比、什么是二倍图、背景图片的缩放、实现背景图片的二倍图）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在移动端Web开发的过程中，除了要使用<meta>标签设置理想视口之外，还需要解决移动端页面中图片的显示问题。图片的显示是否清晰与屏幕分辨率、图像分辨率和设备像素比有关，另外还可以通过使用二倍图的方式来提高图片的清晰度。三、新课讲解知识点1-分辨率和设备像素比教师首先讲解分辨率以及设备像素比的概念。屏幕分辨率：屏幕分辨率是指一个屏幕上可以显示多少信息，通常以像素为单位来衡量。图像分辨率：在同一台设备上，图片的像素点和屏幕的像素点通常是一一对应的。图片的分辨率越高，图片越清晰；图片的分辨率越低，图片越模糊。设备像素比：在高分辨率屏幕中，CSS使用的像素单位和屏幕显示的像素并不是一对一的，将屏幕像素除以CSS像素得到的就是设备像素比。知识点2-什么是二倍图教师讲解二倍图的概念以及使用。在实际开发中，当一个50×50像素（CSS像素）的图片直接放到iPhone6/7/8设备中显示时，图片会被放大，变成原来的两倍（iPhone6/7/8的设备像素比为2），即100×100。为了让读者更好地理解二倍图，下面通过案例演示插入图片二倍图效果。创建HTML文件。使用img标签分别引入50×50的图片和100×100的图片。并手动设置100*100图片的宽度和高度为50px；在浏览器中打开，观察iPhone6/7/8中的显示效果。二倍图在页面中显示的效果更加清晰。知识点3-背景图片的缩放教师讲解background-size的属性以及使用方法。background-size设置的宽度和高度可以是像素或百分比。除此以外，background-size还可以用其他的属性值来实现不同的缩放效果，具体如下。cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域接下来通过案例演示background-size的使用方法，具体实现步骤如下。创建HTML文件，定义div标签,设置background属性的值为url(images/dog.jpg)，表示使用给定的图片作为背景，no-repeat表示不重复在浏览器中打开，查看初始页面结果在div标签的样式代码中添加background-size:200px。刷新浏览器页面，查看运行效果。将background-size的值修改为50%。刷新浏览器页面，查看运行效果。将background-size的值修改为cover。刷新浏览器页面，查看运行效果。将background-size的值修改为contain。刷新浏览器页面，查看运行效果。知识点4-实现背景图片的二倍图教师讲解如何实现背景图片的二倍图效果。创建HTML文件。引入背景图片，该图片的实际大小为100×100。设置背景图片的宽度和高度皆为50px。在浏览器中打开，查看背景图片二倍图效果。四、归纳总结（1）教师回顾本节课所讲的内容，并安排学生自行编写代码实现案例效果。（2）通过提问的方式加强学生对二倍图效果的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第四课时（什么是SVG、SVG标签和样式、从外部弓|入SVG文件）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课图片是网页中重要的组成部分，基于像素处理的图片，当放大时会失真，变得模糊。SVG矢量图可以解决图片放大失真的问题。三、新课讲解知识点1-什么是SVG教师首先讲解什么是SVG以及SVG的优势。可缩放矢量图形（ScalableVectorGraphics，SVG）是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）。在2003年1月，SVG1.1被确立为W3C（万维网联盟）标准。与其他图像格式相比，使用SVG的优势如下。SVG可被非常多的工具读取和修改（如记事本）SVG与JPEG和GIF图像比起来，尺寸更小，且可压缩性更强SVG矢量图形是可伸缩的，可在任何的分辨率下被高质量地打印，可在图像质量不下降的情况下被放大SVG图像中的文本是可选的，同时也是可搜索的（很适合制作地图）SVG是开放的标准SVG文件是用XML编写的知识点2-SVG标签和样式教师讲解常用的内部标签以及属性。<svg>标签常用属性属性，具体如下。width：用来控制SVG视图的宽度height：用来控制SVG视图的高度viewBox：定义用户视野的位置及大小在<svg>标签的内部，可以使用SVG提供的一些预定义的标签来绘制图形，具体如下。<rect>矩形标签<circle>圆形标签<ellipse>椭圆形标签<line>线段标签<polyline>折线标签<polygon>多边形标签<path>路径标签<text>文字标签<tspan>类似<span>，用在<text>内部单独设置样式教师讲解常用的内部标签样式。fill属性值为String，表示定义填充颜色以及文字颜色fill-opacity属性值为0~1之间的浮点数，表示定义填充颜色的透明度stroke属性值为String，表示定义描边的颜色stroke-width属性值为大于0的浮点数，表示定义描边的宽度stroke-opacity属性值为0~1之间的浮点数，表示定义描边的颜色的透明度opacity属性值为0~1之间的浮点数，表示定义整个图形元素的透明度transform属性值为translate(x,y)、scale(x,y)、rotate(angle,[cx,cy])、skewX(angel)skewY(angel)，分别表示平移、缩放、旋转和倾斜知识点3-从外部弓|入SVG文件教师通过案例演示使用SVG的直接绘制圆形。通过<circle>标签定义了圆形直接绘制圆形创建HTML文件，定义<circle>标签，该标签的cx和cy属性用来定义圆中心的x和y坐标，如果忽略这两个属性，那么圆点会被设置为(0,0)；r属性用来定义圆的半径；fill属性用来设置填充颜色为#ddd。通过浏览器访问测试，查看运行结果。成功绘制了圆形矢量图。SVG代码不仅可以直接写在HTML中，还可以单独保存为一个“.svg”文件，然后在HTML文件中引入外部SVG文件。下面通过案例演示。创建circle.svg文件，进行XML声明，其中standalone属性用来规定此SVG文档是“独立的”还是含有对外部文件的引用，no表示该SVG文档会引用一个外部文件（即DTD文件）。外部的SVG的DTD文件是W3C提供的svg11.dtd，表示含有所有允许的SVG元素。为<svg>标签添加了version（SVG版本）和xmlns（XML命名空间）属性，用来在XML文档中使用。创建HTML文件，使用<img>标签引入了circle.svg文件。通过浏览器访问，查看运行结果。四、归纳总结（1）教师回顾本节课所讲的内容，并安排学生自行编写代码实现案例效果。（2）通过提问的方式加强学生对SVG矢量图的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第五、六课时（上机练习）上机练习主要针对本章中需要重点掌握的知识点，以及在程序中容易出错的内容进行练习，通过上机练习可以考察同学对知识点的掌握情况，对代码的熟练程度。教学后记课题名称第3章移动Web开发基础（下）计划学时6课时教学引入HTML5是HTML当前最新的版本，是新一代Web相关技术的总称。在HTML5中提供了很多新的特性，如文件读取、网络存储等。另外，目前多数移动端设备都使用触屏操作，使得用户逐渐摆脱了键盘和鼠标操作的束缚，人机交互更加方便。本章将针对HTML5常用API以及移动Web开发常用事件和插件进行详细讲解。教学目标使学生掌握HTML5新增API的使用使学生掌握移动端常用事件的使用使学生掌握移动端常用插件的使用教学重点检测网络连接、全屏操作、文件读取拖曳、Web存储、播放视频和音频教学难点利用Fastclick处理点透事件模拟移动端单击事件地理定位教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程第一课时（检测网络连接、全屏操作、文件读取）一、创设情景，导入新课（1）教师通过讲解HTML5API的新特性，从而引出HTML5API这个概念。针对移动Web开发的需求，HTML5提供了很多新的特性。在这些特性中，除了基本的语义化标签外，还提供了一些移动Web开发的API功能。例如，检查网络状态、全屏操作和文件读取等。（2）通过HTML5API的介绍，引出检查网络状态和全屏操作等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>表单元素的文件域<inputtype="file">来实现文件的上传，语法为<inputtype="file"multiple>。FileReader对象的常用方法和事件，具体如下。FileReader对象的常用方法如下。readAsBinaryString参数为file表示将文件读取为二进制编码readAsText参数为file,[ending]表示将文件读取为文本readAsDataURL参数file表示将文件读取为DataURLabort参数为(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属性。创建test.txt文件，将编码设为UTF-8。在浏览器中测试，选择test.txt文件，查看运行结果。接下来，通过案例实现显示图片的缩略图效果。具体实现步骤如下。创建HTML文件，定义img元素用来显示读取的图片内容；获取input元素绑定onchange事件，当图片发生改变时将读取的结果this.result赋值给img的src属性。在浏览器中进行测试，选择一张图片后，查看运行结果。三、归纳总结教师回顾本节课所讲的内容，并通过测试题的方式引导学生解答问题并给予指导。四、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第二课时（地理定位、拖曳、Web存储、播放视频和音频）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课除了前面讲到检查网络状态和全屏操作等功能之外，HTML5API还提供了地理定位、拖曳、Web存储、视频和音频的播放等API来帮助开发者进行移动端开发。三、新课讲解知识点1-地理定位教师首先讲解地理定位的API特性以及使用方法。navigator.geolocation对象提供了getCurrentPosition(successCallback,errorCallback)方法来获取当前地理位置。其中，会在successCallback回调函数中传入包含coords和timestamp两个属性的position对象。coords是一个coordinates对象，该coordinates对象包含当前位置的一些信息，具体如下。latitude十进制表示的纬度坐标longitude十进制表示的经度坐标accuracy当前经纬度信息的精度（单位米）altitude海拔高度（单位米）altitudeAccuracy当前海拔高度的精度heading当前设备的朝向（以弧度为单位），从正北开始计算接下来通过案例来演示如何调用getCurrentPosition()来获取当前位置。具体实现步骤如下。创建HTML文件，实现页面结构使用if语句判断当前设备是否支持地理定位通过浏览器访问测试，单击“试一下”按钮后，会提示是否允许当前页面获取您的位置。单击“允许”按钮后，页面中显示“位置信息不可用”，这是因为在PC端的Chrome浏览器中无法直接获取用户的位置。手动设置一个虚拟的位置。单击开发者工具右上角的“︙”按钮，选择“Moretools”-“Sensors”，然后在Geolocation对应的下拉菜单中选择“Shanghai”。查看获取定位后的结果。教师通过案例演示如何调用百度全景地图插件。进入百度地图开放平台官网，选择导航栏中的“开发文档”下的“Web开发”，找到“JavaScriptAPI”选项。单击“JavaScriptAPI”后，进入新的浏览器页面。单击上一步页面中的“JavaScriptAPIv2.0”一项，进入新的浏览器页面。单击上一步页面中的“DEMO演示”按钮，进入新的浏览器页面。创建HTML文件，我们可以直接复制上一步页面中间一栏的源代码粘贴到项目中，将“您的密钥”替换成自己申请的密钥。在浏览器中进行测试，查看运行结果。页面中弹出了百度未授权使用地图API的提示。在百度地图开放平台中申请密钥，在密钥申请成功后，选择合适的密钥复制即可。将复制出来的密钥，粘贴到代码中的“您的密钥”位置。然后保存代码，刷新浏览器，查看运行结果。教师通过案例演示如何拾取自己想要的坐标点。打开百度地图开放平台官网，选择导航栏中的“开发文档”下的“开发者工具”，找到“坐标拾取器”选项。单击“坐标拾取器”后，进入页面后，我们可以在页面顶部的搜索框进行关键字搜索，或者也可以直接在地图上进行坐标选择。接下来，我们通过案例的形式来学习如何完成地图名片的制作，具体实现步骤如下。打开百度地图开放平台官网，选择导航栏中的“开发文档”下的“开发者工具”，找到“地图名片”选项单击“地图名片”后，进入地图名片页面单击“开始制作”按钮，进入名片制作页面。读者可以根据自己的实际需求填写相关的信息，然后单击“提交”按钮单击“提交”按钮后，进入设置地图页面。在该页面中可以选择要显示的内容和图片区域的大小，以及生成代码等单击“复制”按钮，即可将生成的地图名片代码复制下来创建HTML文件，编写HTML结构代码，把复制的地图名片代码粘贴到HTML文件中。在浏览器中进行测试，查看运行结果。知识点2-拖曳教师讲解拖曳API特性以及使用方法。HTML5为我们提供了更好用的接口或者事件，在很大程度上简化了页面中拖曳交互的实现难度。在HTML5中提供了拖曳元素和目标元素相关的事件，具体如下。ondragstart表示当拖曳开始时触发ondrag表示作用于整个拖曳过程ondragend表示当拖曳结束时触发 ondrag事件表示在拖曳元素被拖动过程中会触发的事件。具体如下。ondragenter表示当源对象进入目标元素时触发ondragover表示当源对象悬停在目标元素上方时触发ondragleave表示当源对象离开目标元素时触发ondrop表示当源对象在目标元素上方释放鼠标时触发 接下来通过案例来演示源对象在目标元素中的拖动效果。具体实现步骤如下。创建HTML文件，定义3个div盒子作为目标元素，元素id值分别是div1、div2和div3。在div1盒子中，放置了4个p元素作为源对象，这些元素的id值分别为p1、p2、p3和p4在浏览器中进行测试，查看运行结果编写JavaScript代码。使用事件委托的方式，给源对象的父盒子添加事件。在拖曳操作时使用dataTransfer对象的setData()方法可以为一个给定的类型设置数据。传递的是id值，属于字符串形式，所以使用text/html类型。在浏览器中访问，查看源控制台查看运行结果。当拖动id为p3的元素时，控制台中会打印出该元素的id值，以及源对象开始被拖动、拖曳过程中和拖曳结束时的一系列监听。继续编写代码，设置目标元素的释放效果。使用dataTransfer对象的getData()方法，获取之前使用setData()方法存入的id值；并使用appendChild()方法将其追加到event.target目标对象中。在用浏览器中刷新，然后进行拖曳操作，查看源对象进入目标元素的事件过程，并在控制台查看运行结果。知识点3-Web存储教师讲解Web存储API的特性以及浏览器兼容性。HTML5规范提出了网络存储的相关解决的方案，即WebStorage（Web存储）和本地数据库WebSQLDatabase。WebStorageAPI中包含两个关键的对象，分别是window.sessionStorage对象和window.localStorage对象。前者用于区域存储，后者用于本地存储。WebStorage具有以下特点。数据的设置和读取比较方便。容量较大，sessionStorage大约为5MB，localStorage大约为20MB。只能存储字符串，若想要存储JSON对象，则可以使用window.JSON.stringify()或者parse()进行序列化和反序列化编码。目前，主流的PC端Web浏览器都在一定的程度上支持HTML5的WebStorage，具体如下。IE8+Firefox2.0+Chrome4.0+Safari4.0+Opera11.5+移动设备浏览器对WebStorage的支持情况，具体如下。iOSSafari3.2+AndroidBrowser2.1+OperaMobile12+OperaMini不支持教师讲解WebStorage提供的属性和方法以及优势。WebStorage接口中提供了一些方法和属性，具体如下。key(n)：该方法用于返回存储对象中第n个key的名称setItem(key,

value)：该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值getItem(key)：该方法接收一个键名作为参数，返回键名对应的值removeItem(key)：该方法删除键名为key的存储内容clear()：该方法清空所有存储内容length：该属性返回Storage存储对象中包含的item的数量WebStorage除了在移动平台上具有良好的兼容性外，它还具有以下优势。减少网络流量的使用。使用WebStorage，一旦数据保存在本地后，就可以避免再次向服务器请求数据。因此减少了不必要的数据请求，同时也减少了数据在浏览器和服务器间不必要地来回传递。能够快速显示数据。使用WebStorage性能好，因为从本地读数据比通过网络从服务器获得数据速度要快很多，可以即时获得本地数据。再加上网页本身也可以有缓存，因此如果整个页面和数据都在本地，则可以立即显示。可以临时存储数据。在很多时候，数据只需要在用户浏览一组页面期间使用，而关闭窗口后数据就可以丢弃。这种情况使用sessionStorage非常方便。教师通过案例来演示sessionStorage的使用方法。创建HTML文件。定义输入框用于用户输入信息；设置了3个按钮，并分别添加了不同的id值编写JavaScript代码，调用sessionStorage的setItem()、getItem()和removeItem()方法，用于设置数据、获取数据和删除数据。在浏览器中进行测试，查看运行结果。在文本框中输入“admin”，然后单击“设置数据”按钮，这时数据将被存储到sessionStorage中。单击“获取数据”按钮，查看数据是否设置成功。如果成功会显示在弹出框中，弹出框中显示“admin”。单击“删除数据”按钮，可以删除该数据。删除后再次单击获取数据的按钮，弹出框中显示为null，则表示删除成功。知识点4-播放视频和音频教师讲解视频API的特性以及使用方法。<video>标签用来定义视频播放器，<video>标签的基本语法为<videosrc="视频文件路径"controls></video>。src属性用于设置视频文件的路径，也可以为该标签设置width和height值controls属性用于为视频提供播放控件当使用<video>标签时，我们还需要注意视频文件的格式问题。<video>标签支持以下3种视频格式。具体如下。Ogg：带有Theora视频编码和Vorbis音频编码的Ogg文件MPEG4：带有H.264视频编码和AAC音频编码的MPEG4文件WebM：带有VP8视频编码和Vorbis音频编码的WebM文件在了解<video>视频文件的格式后，下面我们来看一下不同浏览器对视频文件类型的支持情况，具体如下。Ogg不支持IE9、Safari3.0，支持Firefox4.0Opera10.6Chrome6.0MPEG4支持IE9、Opera10.6WebM支持Safari3.0、Firefox4.0、Opera10.6HTML5中提供了<source>标签，用于指定多个备用的不同格式的文件路径，语法为<videocontrols><sourcesrc="视频文件地址"type="video/格式"><sourcesrc="视频文件地址"type="video/格式"></video>，下面通过一个案例来演示<video>标签的使用方法。创建HTML文件，给<video>标签添加controls属性，该属性用于设置或返回浏览器默认显示的标准的音视频控件。在浏览器中访问，查看运行结果。教师带领学生实现视频播放界面在不同浏览器上显示相同的效果。创建HTML文件，定义视频播放器<video>；定义视频播放控件，包括播放/暂停、播放进度、当前播放时间/播放总时长和全屏/取消全屏功能。在浏览器中进行测试，查看视频加载效果。在加载完成后显示视频。显示视频后，计算出视频播放的总时长。实现播放和暂停效果。实现单击按钮切换视频的播放和暂停状态，同时完成按钮的图标切换。实现进度条显示效果。当目前的播放位置发生改变时会触发ontimeupdate事件更新视频进度条。实现视频全屏显示效果。实现单击按钮切换视频的全屏和取消全屏效果，同时完成全屏和取消全屏按钮的图标切换。实现视频播放完成后的重置操作。当视频播放结束后需要把当前的播放时长清零。同时需要把播放按钮改为播放状态。实现单击进度条视频跳转效果。当改变播放位置时更新视频的播放进度，并同步修改.line进度条的显示。教师讲解音频API的特性以及浏览器兼容性。HTML5中提供了<audio>标签用来定义Web上的声音文件或音频流，语法为<audiosrc="音频文件路径"controls></audio>。当前<audio>标签支持以下3种格式，具体如下。Vorbis：类似AAC（AdvancedAudioCoding，高级音频编码）的另一种免费、开源的音频编码，是用于替代MP3的下一代音频压缩技术MP3：一种音频压缩技术，其全称是动态影像专家压缩标准音频层面3（MovingPictureExpertsGroupAudioLayerIII），简称为MP3。它被设计用来大幅度地降低音频数据量WAV：录音时用的标准的Windows文件格式，文件的扩展名为WAV，数据本身的格式为PCM或压缩型，属于无损音乐格式的一种浏览器对音频格式的支持情况，具体如下。Vorbis支持Firefox4.0Opera10.6Chrome6.0MP3支持IE9Chrome6.0Safari3.0WAV支持Firefox4.0Opera10.6Safari3.0四、归纳总结（1）教师回顾本节课所讲的内容，并安排学生自行编写代码实现案例效果。（2）通过提问的方式加强学生对地理定位、Web存储等API相关技术的认识。五、布置作业教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。第三课时（Touch事件概述、Touch事件实现轮播图效果、模拟移动端单击事件、Fastclick插件的使用、利用Fastclick处理点透事件）一、复习巩固教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。二、通过需求引入的方式导入新课在移动端Web开发的过程中，为了给元素添加交互效果，经常会使用移动端常用事件来实现。如单击鼠标实现元素的显示隐藏效果。三、新课讲解知识点1-Touch事件概述教师首先讲解Touch事件的概念。Touch事件是移动端常用事件中最为典型的事件，其含义为“触摸”。Touch事件是一组事件，也是多数触屏操作事件的总称，具体如下。touchstart：当手指触摸屏幕时触发touchmove：当手指在屏幕上移动时触发touchend：当手指离开屏幕时触发touchcancel：当系统取消Touch事件的时候触发（如来电、弹出信息等）教师讲解TouchEvent对象的概念以及属性。Touch触摸事件发生后会产生TouchEvent对象，该对象包含了3个用于跟踪触摸的属性，用于返回不同的触摸点集合，具体如下。touches表示当前屏幕上所有触摸点的列表targetTouches表示当前对象上所有触摸点的列表changedTouches表示返回在上一次触摸和此触摸之间状态发生变化的所有触摸对象的列表触摸点集合中每个Touch对象代表一个触点，具体如下。clientX：触摸目标在视口中的x坐标clientY：触摸目标在视口中的y坐标identifier：标识触摸的唯一IDpageX：触摸目标在页面中的x坐标pageY：触摸目标在页面中的y坐标screenX：触摸目标在屏幕中的x坐标screenY：触摸目标在屏幕中的y坐标target：触目的DOM节点目标知识点2-Touch事件实现轮播图效果教师讲解演示如何利用touchstart、touchmove和touchend事件来实现移动端轮播图效果。创建HTML文件，在li标签中添加了多个用于轮播的图片。编写CSS样式，设置bannerImg的定位为相对定位。在浏览器中查看运行效果。编写JavaScript代码，动态设置页面结构，用于获取轮播图结构。编写JavaScript代码，设置默认图片的偏移，默认应该显示索引1的图片；记录当前手指的起始位置；添加touchstart触摸开始事件，并记录当前手指的起始位置startX。为图片添加触摸滑动事件，添加touchmove触摸滑动事件；记录手指在滑动过程中的位置moveX；计算出坐标之间的差异值distanceX；实现元素的偏移left值。为图片添加触摸结束事件，添加touchend触摸结束事件；获取当前滑动的距离distanceX。在浏览器中滑动轮播图时，会出现滑动到最后一张图片时出现空白区域的问题。解决的方式如下。添加了webkitTransitionEnd事件，该事件用于监听当前元素的过渡效果执行完毕判断如果滑动到最后一张(count-1)，那么就回到索引1如果滑动到了第一张(0)，那么就回到索引count-2图片在滑动的时候不能全部展示出来，首尾两张图片不显示，解决方式如下。获取图片列表中的第一张图片，并添加到列表结束位置获取图片列表中的最后一张图片，并插入到列表开始位置在浏览器中就可以实现手动轮播图的效果知识点3-模拟移动端单击事件教师讲解如何利用touchstart事件和touchend事件处理移动端单击事件。单击事件只有一个手指去触发屏幕。触发屏幕的时间差异必须小于某一个值，并且不能有长距离的活动。确保没有滑动操作，如果有抖动必须保证抖动的距离在指定范围内。具体实现步骤如下。创建HTML文件，定义一个红色的圆形盒子。编写JavaScript代码，为元素添加触摸开始事件，记录手指开始触摸的时间startTime，记录当前手指的坐标startX和startY；判断当前屏幕上有几个手指，如果有多个手指则退出程序。为元素添加触摸结束事件，判断当前系统时间与手指开始触摸屏幕的时间差异，这里假设差异值超过100ms退出程序；假如设坐标差值不能超过特定值5，小于这个差异值就可以得出是单击操作。知识点4-Fastclick插件的使用教师讲解Fastclick插件的下载安装。Fastclick插件是由

FTLabs

开发的JavaScript库，它简单易用，上手比较快，解决了click事件在移动端触发时有大约300ms延时的问题。具体使用步骤如下。通过官网下载fastclick.js至本地，然后在HTML网页中使用<script>标签引