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

千锋教育Bootstrap基石出入门教学设计课程名称Bootstrap基础入门________________授课年级___________________________________授课学期___________________________________教师姓名___________________________________2022年10月26日计划学课程名称第章响应式网页设计学时14时四媒体查询判断条件Land关键字的作用1and关键字在媒体查询语句中的作用和逻辑与操作符在中的作用and JavaScript类似，只有关键字两侧的条件同时被满足时，才会匹配媒体查询规则,应用and对应样式关键字可用于合并多个媒体属性或合并媒体属性与媒体类型and关键字的应用范围2and•符合单一条件•同时满足两种条件•两种条件满足一种即可关键字的应用示例3and当屏幕宽度小于或等于像素或使用至少英寸宽的纸张的打印设备时，4206显示背景颜色为黄色具体代码见教材div

2.not关键字的作用1not关键字用于对媒体查询语句进行取反操作，类似于中的逻辑非not JavaScript运算符可用于排除指定设备的样式not关键字的注意事项2not使用关键字需注意not关键字不能在单个条件前使用；•not关键字应位于媒体查询语句的开头•not是对整个媒体查询语句进行取反，并非仅对某一个媒体属性取反•not关键字的应用示例2not单色屏幕设备不会应用相关样式，除单色屏幕外的所有设备会应用相CSS关样式具体代码见教材CSS

3.only关键字的作用10nly媒体查询提供的关键字是为兼容低版本的浏览器而存在的，用于向那only些不支持媒体查询却需要读取媒体类型的设备隐藏媒体查询语句用法与关键字类似，该关键字必须位于声明的开头not关键字的应用示例2only展示早期浏览器隐藏媒体查询语句具体代码见教材早期浏览器将上述示例看作因为媒体类型不包含所以媒media=only:nly,体查询语句中的样式会被忽略css四媒体属性.媒体属性的概念1媒体属性是媒体查询语句的重要组成部分媒体属性是新增的属性，CSS3大多数媒体属性均带有和此类前缀，通过前缀表达“小于等于”和“min-”“max-”“大于等于”的意义，避免应用和字符与标签发生冲突需要注意，媒体HTML属性必须用括号包起来，否则不会生效.媒体属性及说明2最大窗口高度1max-height最大窗口宽度2max-width每种色彩的字节数，整数3color设备屏幕的输出高度4device-height设备屏幕的输出宽度5device-width渲染界面的高度6height渲染界面的宽度7width单色帧缓冲器中每像素字节8monochrome分辨率9resolution媒体类型的扫描方式10scan横屏或竖屏11orientation

三、知识巩回顾上课前的学习目标，对本节课知识点进行总结1使用第一章课后作业2第三学时（上机练习）

一、目标学生根据教材中的示例代码和教师的演示进行上机练习，以此练习媒体查询设置方式、方法，媒体查询判断条件等在本节课中学生应完成案例练习并将代码提交给教师

二、上机任务一分

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

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

1.媒体查询方式练习（分）21（）通过文件或样式表完成媒体查询的使用方式练习1CSS style（）通过标签引入完成媒体查询的使用方式练习2link.媒体查询判断条件练习（分）

31.5（）完成关键字的应用示例的练习1and（）完成关键字的应用示例的练习2not（）完成关键字的应用示例的练习30nly.媒体查询案例练习（分）41（）完成案例练习一一响应式图片的设计1

三、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成绩4中第四学时（上机练习-商品销售首页设计）

一、项目介绍四书五经是中国儒家的经典书籍，对中国在政治、思想、学术、文化诸方面都产生了重大而深远的影响本实例将以“四书五经”为主题制作一个简单的书籍销售首页

二、任务目标学生根据教材中的页面结构分析简图、示例代码以及教师的演示进行上机练习，以此实现商品销售首页的设计商品首页主要由头部导航栏、主体部分的商品卡片构成在本节课中学生应完成实战案例并将代码提交给教师

三、上机任务一分

5.导航栏设计（分）11（）设计一个包含菜单折叠按钮、网站、导航菜单栏以及登录按1LOGO钮的导航栏.卡片设计（分）21（）设计一个包含图片，卡片介绍信息及功能按钮的商品卡片

1.响应式设计（分）33（）当屏幕宽度小于等于时，商品卡片保持单列布局1375Px（）当屏幕宽度在至之间时，商品卡片保持双列布局2375Px760Px（）当屏幕宽度在至之间时，商品卡片保持三列布局3760Px UOOpx

四、教师评分教师根据学生对上机任务的完成度给予评分，满分为分，并纳入平时成绩5中习题教材第章习题1本章主要介绍响应式原理、响应式网页的优点和缺点、布局视口、视觉视口、理内容分析想视口、媒体查询的设置方式、媒体查询使用方法、媒体类型、媒体查询判断条件、媒体属性等【知识目标】了解响应式原理

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

2.理解布局视口的概念

3.理解视觉视口的概念

4.理解理想视口的概念

5.【技能目标】掌握媒体查询的设置方式

1.教学目标与掌握媒体查询使用方法

2.教学要求掌握媒体类型

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

4.掌握媒体属性

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

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

7.【思政育人目标】培养学生的时代精神，不断随着技术发展积极学习新技术

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

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

3.教学重点掌握媒体查询的设置方式、掌握媒体查询使用方法教学难点案例练习——媒体查询、实战-商品销售首页设计教字力式课堂讲解配合演示学时，上机演练学时ppt22第一学时什么是响应式设计、Viewport

一、提出需求，导入学习任务思考响应式网页设计的学习应该从何入手1•响应式网页是一种网络页面设计布局，其理念是页面的设计与开发可根据用户行为以及设备环境，如系统平台、屏幕尺寸、屏幕定向等进行相应的响应和调整本节课程可通过链接进入官网为学生演示响应式网页的变VSCode化性，进而引出思政目标，培养学生的时代精神，不断学习新技术，不断变化本节课将介绍响应式网页设计的基础知识，为后续的学习打下基础明确学习方向2了解响应式原理了解响应式网页的优点和缺点理解布局视口的概念教理解视觉视口的概念学理解理想视口的概念过

二、知识讲解一什么是响应式设计程响应式原理L响应式原理1响应式简称是一套应用程序用户界面Responsive webdesign,RWD界面可自动响应不同设备窗口或屏幕尺寸并且在内容UserInterface,screensize,和布局的渲染方面表现良好响应式设计与自适应布局的区别2响应式设计与自适应布局是两个完全不同的概念，采用响应式设计开发界面，需要检测设备的视口分辨率，针对不同设备在客户端做代码处理，展现不同的布局和内容自适应需要开发多套界面，根据视口分辨率的不同判断当前访问的设备是端、平板还是手机，从而向服务层发起请求，返回不同的页面PC.响应式设计的步骤2设置＞标签1vmeta通过媒介查询设置样式2字体设置3APP第三方框架

4.响应式网页的优点和缺点3响应式网页的优点1•开发成本低•数据同步更新•兼容当前及未来设备•维护成本低响应式网页的缺点2•旧版浏览器不支持•加载速度慢•设计局限性•开发时间较长•用户流量浪费二Viewport视口的概念L在端，视口仅表示浏览器的可视区域，视口宽度与浏览器窗口宽度保持PC一致在移动端，视口与移动端浏览器宽度并不关联，移动端视口较为复杂，主要涉及三个视口布局视口、视觉视口和理想视口.布局视口2Layout Viewport布局视口的概念1布局视口指的是网页的宽度，一般移动设备的浏览器都默认添加一个元标签用于设置布局视口viewport布局视口的弊端2根据设备类型的不同，布局视口的默认宽度可能是、或768px980px1024px,在移动设备中这些固定宽度并不适用当在移动设备的浏览器中展示端的网PC页内容时，由于移动设备屏幕较小，网页在移动端中不能像在PC端那样完美地进行展示，这也是布局视口存在的问题布局视口示意图3布局视口布局视口如图所示

1.1图布局视口

1.

1.视觉视口2Visual Viewport视觉视口的概念1视觉视口字面就是用户当前所看到的区域端与移动端的视觉视口2PC在端中，浏览器窗口可随意改变大小，我们可直观的看到窗口发生的变PC化在移动端中，大部分手机、平板的浏览器并不支持改变浏览器的宽高，所以视觉视口就是其屏幕大小，视觉视口宽度和设备屏幕宽度保持一致视觉视口示意图3视觉视口如图所示

1.

2.视觉视口2Visual Viewport视觉视口的概念1视觉视口字面就是用户当前所看到的区域端与移动端的视觉视口32PC在端中，浏览器窗口可随意改变大小，我们可直观的看到窗口发生的变PC化在移动端中，大部分手机、平板的浏览器并不支持改变浏览器的宽高，所以视觉视口就是其屏幕大小，视觉视口宽度和设备屏幕宽度保持一致视觉视口示意图3视觉视口如图所示L2视觉视口I0J图视觉视口

1.

2.理想视口4ideal Viewport理想视口的概念1布局视口的默认宽度并不是一个理想宽度，于是浏览器厂商引入理想视口这个概念理想视口实现页面在设备中的最佳呈现，理想视口是布局视口的一个理想尺寸理想视口的优势2显示在理想视口中的网页拥有最理想的浏览、阅读宽度，用户无需对页面进行缩放便可完美地浏览整个页面视觉视口示意图3理想视口如图所示

1.3理想视口Q图理想视口

1.

3.布局视口的理想的宽度4布局视口的理想的宽度指的是以像素为单位计算的宽度，即屏幕的逻CSS辑像素宽度，与设备的物理像素宽度并无关联一个设备的逻辑像素在不同像素密度的设备屏幕上占据着相同的空间.设置布局视口与理想视口宽度保持一致5n11n nmeta name=viewport content=width=device-width在上述设置中，规定视口宽度为屏幕宽度，初始缩放比例为初始视觉视1,口就是理想视口标签的主要目的是实现布局视口的宽度与理想视口的meta宽度一致简单理解就是设备屏幕有多宽，布局视口就多宽.元标签属性及说明61设置布局视口的宽度，可指定固定值，如也可指定特殊width600值，如为设备的宽度，单位为像素device-width2与相对应，设置布局视口的高度该属性可设置为数值height width或单位为像素device-height,3设置页面的初始缩放比例，即页面第一次加载时的缩放initial-scale比例4设置允许用户缩放页面的最小比例minimum-scale5设置允许用户缩放页面的最大比例maximum-scale6设置用户是否可以手动缩放表示可以手动缩放，user-scalable:yes no表示禁止手动缩放

三、知识巩固（）回顾上课前的学习目标，对本节课知识点进行总结1（）使用第一章课后作业2第二学时（媒体查询）（）对上节课布置的作业以及学生提出的问题进行答疑解惑1（）回顾上节课内容，引出本节课主题2（）明确学习方向3掌握媒体查询的设置方式掌握查询使用方法掌握媒体类型掌握媒体查询判断条件掌握媒体属性

二、知识讲解媒体查询的核心L根据终端设备的特征来设置样式是媒体查询的核心，媒体查询可为使CSS用不同设备的用户提供最佳的操作和交互体验.媒体查询的组成2媒体查询语句主要由三个部分组成，分别是媒体类型、判断条件和媒体属性.媒体查询的语法具体如下3媒体类型判断条件（媒体属性）｛样式；｝media css.媒体查询语句应用4屏幕宽度在以上，应用样式768px CSS1O屏幕宽度在以上，应用样式480px CSS2o具体代码见教材二媒体查询使用方法应用媒体查询技术，可使一个页面能够在不同设备中显示不同的样式外观使用媒体查询首先要在＜＞标签中添加＜＞标签head meta.添力口＜＞标签1111€12＜metaname=nviewport11content=nwidth=device-widthn,initial-scale=lz＞maxinum-scale=l.0,user-scalable=nnon.媒体查询的种使用方式22在文件或内部样式表中使用关键字判断当前设备的屏1CSS stylemedia幕宽度，选择加载对应的具体代码见教材CSS通过标签引入，使用属性判断当前设备宽度，根据设备信息2link media加载对应文件具体代码见教材CSS三媒体类型.媒体类型的概念1媒体类型是中一个极为重要的属性，通过媒体类型指定运mediatype CSS用的对象，为不同类型的设备指定特定样式，从而实现更丰富、更灵活的界面.常用媒体类型及说明2所有设备1all盲文2braille盲文打印3embossed手持设备4handheld文档打印或打印预览模式5print设置单元项目演示，比如投影仪6projection彩色屏幕，最常用的类型，一般和屏幕大小表达式联合使用7screen语音朗诵，用于屏幕阅读软件8speech固定字母间距的网格的媒体，比如电传打字机9tty电视10tv。