- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
第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中声
您可能关注的文档
- Bootstrap响应式Web开发(第2版)第1章 初识Bootstrap 教学设计.doc
- Bootstrap响应式Web开发(第2版)第3章 移动Web屏幕适配 教学设计.doc
- 第2章 移动Web开发基础.pptx
- Bootstrap响应式Web开发(第2版)-课件 第3章 移动Web屏幕适配.pptx
- Bootstrap响应式Web开发(第2版)-课件 第1章 初识Bootstrap.pptx
- Bootstrap响应式Web开发(第2版)-课件 第4章 Bootstrap开发基础.pptx
- Bootstrap响应式Web开发(第2版)-课件 第5章 Bootstrap常用样式.pptx
- Bootstrap响应式Web开发(第2版)-课件 第6章 Bootstrap表单.pptx
- Bootstrap响应式Web开发(第2版)-课件 第7章 Bootstrap常用组件.pptx
- Bootstrap响应式Web开发(第2版)-课件 第8章 项目实战——基于Bootstrap的在线学习平台.pptx
文档评论(0)