Bootstrap响应式Web开发（第2版）第3章 移动Web屏幕适配 教学设计.doc

第1章PHP开篇

PAGE16

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

教学设计

课程名称：

授课年级：

授课学期：

教师姓名：

年月

课题名称

第3章移动Web屏幕适配

计划课时

7课时

教学引入

在移动Web开发中，屏幕适配的目的是在不同设备的屏幕中展现最佳布局，提供更好的用户体验。开发者需要综合考虑页面在不同屏幕中的布局。其中常用的移动Web屏幕适配技术包括媒体查询、流式布局、弹性盒布局、rem单位、vw单位、vh单位、字体图标、二倍图和SVG。本章将对移动Web屏幕适配技术进行详细讲解。

教学目标

使学生掌握媒体查询的使用方法，能够根据视口宽度等条件调整页面的布局和样式

使学生掌握流式布局的使用方法，能够使用流式布局实现网页宽度自适应

使学生掌握弹性盒布局的使用方法，能够使用弹性盒布局的相关属性创建响应式布局

使学生掌握rem单位的使用方法，能够根据根元素的字号使用rem单位设置元素的大小

使学生掌握vw单位和vh单位的使用方法，能够根据视口的变化使用vw单位和vh单位自动设置元素的大小

使学生掌握字体图标的使用方法，能够在网页中使用各种字体图标

使学生掌握二倍图的使用方法，能够灵活使用二倍图在高分辨率的设备中实现更清晰的图像

使学生掌握SVG的使用方法，能够完成SVG图像的定义和显示

教学重点

媒体查询

弹性盒布局

rem单位

vw单位和vh单位

教学难点

弹性盒布局

SVG的基本使用方法

教学方式

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

教

学

过

程

第一、二课时

（媒体查询、流式布局、弹性盒布局）

一、复习巩固

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

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

媒体查询（MediaQueries）是一个CSS3中的技术，它可以根据不同的媒体类型或视口大小应用不同的样式。

在实现响应式网页布局时，为了确保网页在不同屏幕尺寸的设备中都能获得最佳的用户体验，往往采用宽度适配方案，即通过设置网页的宽度来适应不同屏幕尺寸的设备。这种方案通常使用弹性盒布局和流式布局来实现。本节课将详细讲解媒体查询、流式布局和弹性盒布局。

三、新课讲解

知识点1-媒体查询

教师通过PPT结合实际操作的方式讲解媒体查询。

什么是媒体查询。

媒体查询的代码的书写位置。

定义媒体查询的语法格式。

讲解媒体查询的语法格式中的每个组成部分。

通过示例代码演示媒体查询。

通过案例的形式讲解如何使用媒体查询实现网页左侧列表区域隐藏的效果。

知识点2-流式布局

教师通过PPT结合实际操作的方式讲解流式布局。

什么是流式布局。

流式布局的实现方法。

通过示例代码演示流式布局的使用。

通过案例的形式讲解如何使用流式布局实现一个底部标签栏。

知识点3-弹性盒布局

教师通过PPT结合实际操作的方式讲解弹性盒布局。

什么是弹性盒布局。

弹性盒布局的主要组成部分。

Flex容器。

Flex元素。

Flex容器内有两根轴。

主轴。

交叉轴。

弹性盒布局的使用步骤。

通过示例代码演示弹性盒布局的使用。

Flex容器的常用属性。

flex-direction属性。

flex-wrap属性。

justify-content属性。

align-items属性。

Flex元素的常用属性。

order属性。

flex-grow属性。

flex-shrink属性。

flex-basis属性。

flex属性。

通过案例的形式讲解如何使用弹性盒布局实现一个顶部导航栏。

四、归纳总结

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

五、布置作业

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

第三课时

（rem单位、vw单位和vh单位）

一、复习巩固

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

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

在进行屏幕适配时，除了宽度适配方案外，宽高等比适配方案也是一种常用的方法。宽高等比适配方案通过保持元素的宽高比例来适应不同屏幕尺寸的设备。这种方案使用CSS技术实现，通过使用相对单位（如rem、vw、vh）来设置元素的宽度，并根据宽度计算出相应的高度，以保持元素的宽高比例不变。这样可以确保在不同设备中元素不会变形或失真，从而提供一致的视觉体验。本节课将详细讲解rem单位、vw单位、vh单位。

三、新课讲解

知识点1-rem单位

教师通过PPT结合实际操作的方式讲解rem单位。

rem单位的计算方式。

通