网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap_第1页
网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap_第2页
网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap_第3页
网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap_第4页
网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 第7章 响应式设计与Bootstrap_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章响应式设计与Bootstrap（4学时）本章内容：什么是响应式设计使用媒体查询中华美食网站的响应式设计Bootstrap的安装与使用Bootstrap网格与布局Bootstrap格式设置Bootstrap组件1、什么是响应式设计响应式设计是一种网页设计和开发的方法，旨在使网页能够适应不同的屏幕尺寸和设备类型，以提供一致的用户体验。响应式设计的目标是使网页在桌面电脑、平板电脑和手机等各种设备上都能够自动调整布局、字体大小、图像大小和导航等元素，以适应不同的屏幕大小和分辨率。（任意打开一些网站，查看是否是响应式设计。让学生在手机上打开网站，看是否是响应式设计。）响应式设计的核心原则包括：（1）流体网格布局：使用相对比例的流体网格布局来创建网页的布局。（2）媒体查询：使用媒体查询来根据设备特性和视口属性应用不同的样式。（3）弹性图片和媒体：确保网页中的图片和媒体元素能够自适应不同屏幕尺寸和分辨率。（4）移动优先设计：采用移动优先设计的方法，首先针对移动设备进行设计和优化，然后再逐步增加和调整布局和功能以适应更大的屏幕尺寸。视口设置视口是指用户在浏览器中实际可见的区域。一般而言，不同设备（如桌面电脑、平板电脑和手机等）的视口大小会有所不同。为了确保网页在不同设备上能够适应和呈现良好，实现响应式设计，可以使用视口属性来设置和控制视口的行为。<head><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"></head>其中，通过设置width=device-width，视口的宽度将与设备的宽度相匹配；initial-scale=1.0表示网页的初始缩放比例为1.0，即不缩放；maximum-scale=1.0和user-scalable=no则禁止了用户手动缩放网页。在绝大多数情况下，在响应式设计时使用以下视口设计即可：<metaname="viewport"content="width=device-width,initial-scale=1.0">2、使用媒体查询什么是媒体查询媒体查询（MediaQueries）是一种CSS3的功能，用于根据设备的特性或用户代理（通常指浏览器）的特性来应用不同的CSS样式。它允许开发者根据屏幕尺寸、设备类型、分辨率、方向等条件来针对不同的设备或环境应用特定的样式，因此在响应式设计中有非常重要的作用。媒体查询通过在CSS中使用@media规则来定义，其中包含一个或多个条件和对应的样式规则。当媒体查询条件满足时，其中定义的样式规则将生效。例如：@media(max-width:768px){body{font-size:14px;}}在这个例子中，@media(max-width:768px)表示当视口宽度小于等于768px时，其中定义的样式规则将生效。在这种情况下，body元素的字体大小将被设置为14px。设置媒体查询媒体查询以@media开头，表示这是一条媒体查询语句。@media后接一个或多个表达式，如果表达式为真，则应用样式。媒体查询的语法如下（教材248）：@media媒体类型逻辑操作符(媒体特性){/*CSS样式*/}例如，以下代码设置了3条媒体查询，会在不同屏幕宽度时显示不同的背景颜色。<html><head><title>媒体查询示例</title><style>body{text-align:center;}@media(max-width:600px){body{background-color:red;}}@media(min-width:601px)and(max-width:1024px){body{background-color:green;}}@media(min-width:1025px){body{background-color:blue;}}</style></head><body><h1>媒体查询示例</h1><p>屏幕尺寸不同，背景颜色也不同。</p></body></html>移动优先设计实例<html><head><title>移动优先设计示例</title><style>body{text-align:center;}/*移动设备样式*/body{background-color:lightblue;font-size:16px;}@media(min-width:768px){/*平板电脑和台式机样式*/body{background-color:lightgreen;font-size:20px;}}@media(min-width:1024px){/*大屏幕样式*/body{background-color:lightyellow;font-size:24px;}}</style></head><body><h1>移动优先设计示例</h1><p>根据不同屏幕尺寸显示不同样式。</p></body></html>响应式网页布局实例<html><head><title>响应式网页布局示例</title><metacharset="UTF-8"><!--避免中文乱码问题--><style>header{/*Header样式*/background-color:lightblue;padding:10px;text-align:center;grid-area:header;}nav{/*Navigation样式*/background-color:lightgray;display:flex;/*使用flex布局*/padding:10px;margin:0;grid-area:nav;/*为grid区域命名*/}nava{/*设置导航条链接样式*/color:white;padding:5px20px;text-decoration:none;text-align:center;}nava:hover{/*更改鼠标悬停时的颜色*/background-color:#ddd;color:black;}aside{/*Sidebar样式*/background-color:lightgreen;padding:20px;grid-area:aside;/*为grid区域命名*/}main{/*Main样式*/background-color:beige;padding:20px;grid-area:main;/*为grid区域命名*/}footer{/*Footer样式*/background-color:lightgray;padding:10px;text-align:center;grid-area:footer;/*为grid区域命名*/}.responsive-image{/*响应式图片样式*/max-width:60%;/*自动调整宽度以适应屏幕，可改为100%*/height:auto;}/*移动设备样式（默认样式）*/body{display:grid;/*使用grid布局*/grid-template-areas:/*设置布局样式*/"header""nav""aside""main""footer";grid-template-rows:auto50pxauto1frauto;/*5行*/grid-template-columns:1fr;/*1列*/min-height:100vh;/*页面最小高度为视口高度的100%，即页面永远充满屏幕*/}/*媒体查询*/@media(min-width:769px){/*平板电脑和台式机样式*/body{grid-template-areas:/*设置布局样式*/"headerheader""navnav""asidemain""footerfooter";grid-template-rows:auto50px1frauto;/*4行*/grid-template-columns:30%1fr;/*2列*/}.responsive-image{max-width:100%;/*自动调整宽度以适应屏幕*/height:auto;}}@media(min-width:1025px){/*大屏幕样式，注意布局样式和图片样式继承平板电脑和台式机样式*/body{width:80%;margin:0auto;}}</style></head><body><header><h1>头部</h1></header><nav><ahref="#">Link1</a><ahref="#">Link2</a><ahref="#">Link3</a></nav><aside><h2>边栏</h2><p><imgsrc="占位图片.png"class="responsive-image"></p></aside><main><h2>主体内容</h2><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Nullaconsecteturaliquammi,egetaliquetante.Donecrutrumliberorisus,agravidaorcialiquetat.Sedutscelerisquejusto.Nullafacilisi.Nullamlobortislaciniaipsum,inaliquetnibhplaceratat.Maecenasbibendumexenim,noninterdumnislvariusid.</p></main><footer><h2>底部</h2></footer></body></html>3、中华美食网站的响应式设计打开之前制作的中华美食网站，按照教材247-252页进行操作（注意没有3级页面的响应式设计，需要自行设计与实现）4、Bootstrap的安装与使用下载（简单讲解bootstrap网站上的不同版本如何下载和使用，强调如果按教材

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论