Bootstrap响应式Web开发（第2版）第2章 移动Web开发基础 教学设计.doc

第1章PHP开篇

PAGE16

《Bootstrap响应式Web开发（第2版）》

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第2章移动Web开发基础

计划课时

9课时

教学引入

随着移动设备和互联网的快速发展，移动Web开发技术应运而生，并成为当下非常流行的技术之一。移动Web开发的目标是构建适应不同设备和屏幕尺寸的Web应用，以提供更好的用户体验。本章将对移动Web开发基础进行详细讲解。

教学目标

使学生了解屏幕分辨率，能够说出屏幕分辨率的概念

使学生了解设备像素比，能够说出设备像素比的计算方式

使学生了解视口，能够说出视口的设置方式

使学生掌握CSS样式初始化的使用方法，能够使用Normalize.css初始化默认样式

使学生掌握CSS变量的使用方法，能够使用CSS变量减少冗余的样式代码

使学生掌握Less常用语法的使用方法，能够定义Less变量和使用嵌套语法来简化代码

使学生掌握Sass常用语法的使用方法，能够定义Sass变量和使用嵌套语法来简化代码

使学生掌握WebStorage的使用方法，能够对数据进行存储、获取、删除等操作

使学生掌握音频和视频的使用方法，能够实现对音频和视频的播放、暂停、进度和音量控制等操作

使学生掌握移动端touch事件的使用方法，能够实现touch事件

教学重点

CSS样式初始化

定义CSS变量

在JavaScript中操作CSS变量

localStorage

sessionStorage

video对象和audio对象

教学难点

localStorage

模拟移动端单击事件

教学方式

课堂教学以PPT讲授为主，并结合多媒体进行教学

教

学

过

程

第一课时

（屏幕分辨率、设备像素比、视口、CSS样式初始化）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过直接引入的方式导入新课

随着移动设备的广泛普及以及设备多样性的增加，开发人员面临着一项重要的任务，就是需要为移动应用适配各种屏幕尺寸和分辨率，以确保移动应用在不同设备中都能够提供出色的用户体验。在移动Web开发中，深刻理解屏幕分辨率和设备像素比的概念是不可或缺的。

为了使网页在智能手机上有更好的浏览体验，浏览器允许开发人员通过meta标签对视口（Viewport）进行配置。

不同浏览器对HTML元素的默认样式存在差异，这可能导致同一页面在不同浏览器下的显示效果不一致，甚至样式混乱。为解决这个问题，开发者可以进行CSS样式初始化。

本节课将详细讲解屏幕分辨率、设备像素比、视口、CSS样式初始化。

三、新课讲解

知识点1-屏幕分辨率

教师通过PPT的方式讲解屏幕分辨率。

什么是屏幕分辨率。

在屏幕尺寸相同的情况下，高分辨率屏幕和低分辨率屏幕显示的画面的区别。

解决一些早期软件在高分辨率屏幕上显示过小的问题。

物理分辨率和物理像素。

逻辑分辨率和逻辑像素。

查询设备的逻辑分辨率的方法。

知识点2-设备像素比

教师通过PPT的方式讲解设备像素比。

什么是设备像素比。

查询设备像素比的方法。

知识点3-视口

教师通过PPT结合实际操作的方式讲解视口。

什么是视口。

配置视口的作用。

使用meta标签配置视口的语法格式。

content属性的常用参数。

通过示例代码讲解在创建HTML5文档结构时自动生成配置视口的meta标签。

通过案例的形式讲解如何使用meta标签设置视口，并对比网页设置视口前后的区别。

知识点4-CSS样式初始化

教师通过PPT结合实际操作的方式讲解CSS样式初始化。

什么是Normalize.css。

Normalize.css的作用。

Normalize.css的特点。

讲解如何下载和使用Normalize.css。

通过案例的形式讲解如何使用Normalize.css进行CSS样式初始化。

四、归纳总结

教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。

五、布置作业

教师通过高校教辅平台（）布置本节课作业以及下节课的预习作业。

第二课时

（定义CSS变量、读取CSS变量的值、CSS变量值的类型、在JavaScript中设置CSS变量）

一、复习巩固

教师通过上节课作业的完成情况，对学生吸收不好的知识点进行再次巩固讲解。

二、通过直接引入的方式导入新课

当CSS样式在多个地方重复使用时，需要被多次定义，这样增加了样式的维护难度。为了解决这个问题，CSS引入了CSS变量。CSS变量允许开发者在CSS中声