Bootstrap基础入门-第01章 教学设计

千等教育

Bootstrap基石出入门

教学设计

课程名称：Bootstrap基砒入门_________

授课年级：__________________________________

授课学期：__________________________________

教师成名：__________________________________

2022年10月26日

计划

课程名称第1章响应式网页设计4学时

学时

本章主要介绍响应式原理、响应式网页的优点和缺点、布局视口、视觉视口、

内容分析理想视口、媒体查询的设置方式、媒体查询使用方法、媒体类型、媒体查询判

断条件、媒体属性等。

【知识目标】

1.了解响应式原理

2.了解响应式网页的优点和缺点

3.理解布局视口的概念

4.理解视觉视口的概念

5.理解理想视口的概念

【技能目标】

1.掌握媒体查询的设置方式

教学目标

2.掌握媒体查询使用方法

与

3.掌握媒体类型

教学要求

4.掌握媒体查询判断条件

5.掌握媒体属性

6.实现媒体查询案例练习

7.完成一个响应式网页的设计

【思政育人目标】

1.培养学生的时代精神，不断随着技术发展积极学习新技术。

2.引导学生在学习中健全职业道德的规范。

3.引导学生创新思维和探索的科学精神。

教学重点掌握媒体查询的设置方式、掌握媒体查询使用方法

教学难点案例练习一媒体查询、实战--商品销售首页设计

教学方式课堂讲解配合ppt演示2学时，上机演练2学时

第一学时

（什么是响应式设计、Viewport）

一、提出需求，导入学习任务

（1）思考响应式网页设计的学习应该从何入手。

•响应式网页是一种网络页面设计布局，其理念是页面的设计与开发

可根据用户行为以及设备环境，如系统平台、屏幕尺寸、屏幕定向等进行相应

的响应和调整。本节课程可通过链接进入VSCode官网为学生演示响应式网页

的变化性，进而引出思政目标，培养学生的时代精神，不断学习新技术，不断

变化。本节课将介绍响应式网页设计的基础知识，为后续的学习打卜基础。

（2）明确学习方向。

>了解响应式原理

>了解响应式网页的优点和缺点

皿>理解布局视口的概念

教

>理解视觉视口的概念

学

>理解理想视口的概念

过二、知识讲解

程（一）什么是响应式设计

1.响应式原理

（1）响应式原理

响应式（Responsivewebdesign,简称RWD）是一套应用程序用户界面

（UserInterface）,界面可自动响应不同设备窗口或屏幕尺寸（screensize）,

并且在内容和布局的渲染方面表现良好。

（2）响应式设计与自适应布局的区别

响应式设计与自适应布局是两个完全不同的概念，采用响应式设计开发

界面，需要检测设备的视口分辨率，针对不同设备在客户端做代码处理，展现

不同的布局和内容。

自适应需要开发多套界面，根据视口分辨率的不同判断当前访问的设备

是PC端、平板还是手机，从而向服务层发起请求，返回不同的页面。

2.响应式设计的步骤

（1）设置vmeta＞标签。

（2）通过媒介查询设置样式。

（3）字体设置APP

（4）第三方框架

3.响应式网页的优点和缺点

（1）响应式网页的优点

・开发成本低

•数据同步更新

•兼容当前及未来设备

•维护成本低

（2）响应式网页的缺点

•旧版浏览器不支持

•加载速度慢

•设计局限性

•开发时间较长

・用户流量浪费

（二）Viewport

L视口的概念

在PC端，视口仅表示浏览器的可视区域，视口宽度与浏览器窗口宽度保

持一致。在移动端，视口与移动端浏览器宽度并不关联，移动端视口较为复

杂，主要涉及三个视口：布局视口、视觉视口和理想视口。

2.布局视口（LayoutViewport）

（1）布局视口的概念

布局视』指的是网页的宽度，一般移动设备的浏览器都默认添加一个

viewport元标签用于设置布局视口。

（2）布局视口的弊端

根据设备类型的不同，布局视口的默认宽度可能是768px、980px或

1024px,在移动设备中这些固定宽度并不适用。当在移动设备的浏览器中展示

PC端的网页内容时，由于移动设备屏幕较小，网页在移动端中不能像在PC

端那样完美地进行展示，这也是布局视口存在的问题。

(3)布局视口示意图

布局视口如图1.1所示。

QJ布局视口

图1.1布局桃口

2.视觉视口(VisualViewport)

(1)视觉视口的概念

视觉视口字面就是用户当前所看到的区域。

(2)PC端与移动端的视觉视口

在PC端中，浏览器窗口可随意改变大小，我们可直观的看到窗II发生的

变化。

在移动端中，大部分手机、平板的浏览器并不支持改变浏览器的宽高，所

以视觉视口就是其屏幕大小，视觉视口宽度和设备屏幕宽度保持一致。

(3)视觉视口示意图

视觉视口如图1.2所示。

2.视觉视口(VisualViewport)

(1)视觉视口的概念

视觉视口字面就是用户当前所看到的区域。

(2)PC端与移动端的视觉视口

在PC端中，浏览器窗口可随意改变大小，我们可直观的看到窗口发生的

变化。

在移动端中，大部分手机、平板的浏览器并不支持改变浏览器的宽高，所

以视觉视口就是其屏幕大小，视觉视口宽度和设备屏幕宽度保持一致。

（3）视觉视口示意图

视觉视口如图1.2所示。

图L2视觉枕口

3.理想视口（idealViewport）

（1）理想视口的概念

布局视口的默认宽度并不是一个理想宽度，于是浏览器厂商引入理想视

口这个概念。理想视口实现页面在设备中的最佳呈现，理想视口是布局视口的

一个理想尺寸。

（2）理想视口的优势

显示在理想视口中的网页拥有最理想的浏览、阅读宽度，用户无需对页面

进行缩放便可完美地浏览整个页面。

（3）视觉视口示意图

理想视口如图1.3所示

理想视口

图1.3理想视口

4.布局视口的理想的宽度

布局视口的理想的宽度指的是以CSS像素为单位计算的宽度，即屏幕的

逻辑像素宽度，与设备的物理像素宽度并无关联.一个设备的逻辑像素•在不同

像素密度的设备屏幕上占据着相同的空间。

5.设置布局视口与理想视口宽度保持一致

<metaname=nviewport"content="width=device-width">

在.上述设置中，规定视口宽度为屏幕宽度，初始缩放比例为1,初始视觉

视II就是理想视II。标签的主要目的是实现布局视口的宽度与理想视

口的宽度一致。简单理解就是设备屏辖有多宽，布局视口就多宽。

6.元标签属性及说明

（1）width：设置布局视口的宽度，可指定固定值，如600。也可指定特

殊值，如device-width为设备的宽度，单位为像素。

（2）height：与width相对应，设置布局视口的高度。该属性可设置为数

值或device-height,单位为像素。

（3）initial-scale：设置页面的初始缩放比例，即页面笫一次加载时的缩

放比例。

（4）minimum-scale：设置允许用户缩放页面的最小比例。

（5）maximum-scale：设置允许用户缩放页面的最大比例。

（6）user-scalable:设置用户是否可以手动缩放。yes表示可以手动缩放，

no表示禁止手动缩放。

三、知识巩固

（1〕I可顾上课前的学习目标，对本节课知识点进行总结。

（2〕使用第一章课后作业。

第二学时

（媒体查询）

一、回顾上节课内容

（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。

（2）回顾上节课内容，引出本节课主题。

（3）明确学习方向。

>掌握媒体查询的设置方式。

>掌握查询使用方法。

>掌握媒体类型。

>掌握媒体查询判断条件

>掌握媒体属性

二、知识讲解

（-）媒体查询的设置方式

L媒体查询的核心

根据终端设备的特征来设置CSS样式是媒体查询的核心，媒体查询可为

使用不同设备的用户提供最佳的操作和交互体验。

2.媒体查询的组成

媒体查询语句主要由三个部分组成，分别是媒体类型、判断条件和媒体属

性。

3.媒体查询的语法具体如下。

media媒体类型判断条件（媒体属性）｛css样式；）

4.媒体查询语句应用

屏幕宽度在768px以上，应用〈CSS样式l>o

屏幕宽度在480px以上，应用〈CSS样式2>o

具体代码见教材。

(二)媒体查询使用方法

应用媒体查询技术，可使一个页面能够在不同设备中显示不同的样式外

观。使用媒体查询首先要在＜head＞标签中添加vmeta＞标签。

1.添加＜meta＞标签

＜metaname=nviewport'*content=,,width=device-width",initial-

scale=l,

maxinum-scale=l.0,user-scalable="no"＞

2.媒体查询的2种使用方式

(1)在CSS文件或style内部样式表中使用media关键字判断当前设备

的屏幕宽度，选择加载对应的CSS。具体代码见教材。

(2)通过link标签引入，使用media属性判断当前设备宽度，根据设备

信息加载对应CSS文件。具体代码见教材。

(三)媒体类型

L媒体类型的概念

媒体类型(mediatype)是CSS中一个极为重要的属性，通过媒体类型指

定运用的对象，为不同类型的设备指定特定样式，从而实现更丰富、更灵活的

界面。

2.常用媒体类型及说明

(1)al.：所有设备。

(2)braille：盲文。

(3)embossed：盲文打印。

(4)handheld：手持设备。

(5)print：文档打印或打印预览模式。

(6)projec(ion：设置单元项目演示，比如投影仪。

(7)screen：彩色屏幕，最常用的类型，一般和屏幕大小表达式联合使

用。

(8)speech：语音朗诵，用于屏幕阅读软件。

(9)tty：固定字母间距的网格的媒体，比如电传打字机。

(10)tv：电视。

（四）媒体查询判断条件

Land

（1）and关键字的作用

and关键字在媒体查询语句中的作用和逻辑与操作符在JavaScript中的作

用类似，只有and关键字两侧的条件同时被满足时，才会匹配媒体杳询规则，

应用对应样式。and关键字可用于合并多个媒体属性或合并媒体属性与媒体类

型。

（2）and关键字的应用范围

•符合单一条件。

•同时满足两种条件。

•两种条件满足一种即可。

（3）and关犍字的应用示例

当屏幕宽度小于或等于420像素或使用至少6英寸宽的纸张的打印设备

时，显示div背景颜色为黄色。具体代码见教材。

2.not

（1）not关键字的作用

not关键字用于对媒体查询语句进行取反操作，类似于JavaScript中的逻

辑非运算符。not可用于排除指定设备的样式。

（2）nol关键字的注意事项

使用nol关键字需注意：

•not关键字不能在单个条件前使用；

•not关键字应位于媒体查询语句的开头。

•not是对整个媒体查询语句进行取反，并非仅对某一个媒体属性取

反。

（2）nol关键字的应用示例

单色屏幕设备不会应用相关CSS样式，除单色屏幕外的所有设备会应用

相关CSS样式。具体代码见教材。

3.only

（1）only关键字的作用

媒体查询提供的only关键字是为兼容低版本的浏览器而存在的.用于向

那些不支持媒体查询却需要读取媒体类型的设备隐藏媒体查询语句。

用法与not关键字类似，该关键字必须位于声明的开头。

(2)0nly关键字的应用示例

展示早期浏览器隐藏媒体查询语句。具体代码见教材。

早期浏览器将上述示例看作media="only”，因为媒体类型不包含。nly,所

以媒体查询语句中的css样式会被忽略。

(四)媒体属性

1.媒体属性的概念

媒体属性是媒体查询语句的重要组成部分。媒体属性是CSS3新增的属

性，大多数媒体属性均带有“min-”和“max-”此类前缀，通过前缀表达“小

于等于”和“大于等于”的意义，避免应用“v”和字符与HTML标签

发生冲突。需要注意，媒体属性必须用括号()包起来，否则不会生效。

2.媒体属性及说明

(1)max-height：最大窗口高度。

(2)max-width：最大窗口宽度。

(3)color：每种色彩的字节数,整数。

(4)device-height；设备屏幕的输出高度。

(5)device-width：设备屏幕的输出宽度。

(6)height：渲染界面的高度。

(7)width：渲染界面的宽度。

(8)monochrome：单色帧缓冲器中每像素字节。

(9)resolution：分辨率。

(10)scan：媒体类型的扫描方式。

(11)orientation：横屏或竖屏。

三、知识巩固

(1)回顾上课前的学习目标，对在节课知识点进行总结。

(2〕使用第一章课后作业。

第三学时

（上机练习）

一、目标

学生根据教材中的示例代码和教师的演示进行上机练习，以此练习媒

体查询设置方式、方法，媒体查询判断条件等。在本节课中学生应完成案例练

习并将代码提交给教师。

二、上机任务一4分

1.媒体查询设置方式（0.5分）

（I）完成媒体查询语句的应用练习

2.媒体查询方式练习（1分）

（1）通过CSS文件或style样式表完成媒体查询的使用方式练习

（2）通过link标签引入完成媒体查询的使用方式练习

3.媒体查询判断条件练习（L5分）

（1）完成and关键字的应用示例的练习

（2）完成not关键字的应用示例的练习

（3）完成0nly关键字的应用示例的练习

4.媒体查询案例练习（1分）

（1）完成案例练习一一响应式图片的设计

三、教师评分

教师根据学生对上机任务的完成