網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第7章 響應(yīng)式設(shè)計(jì)與Bootstrap_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第7章 響應(yīng)式設(shè)計(jì)與Bootstrap_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第7章 響應(yīng)式設(shè)計(jì)與Bootstrap_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第7章 響應(yīng)式設(shè)計(jì)與Bootstrap_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML5 CSS3 JavaScript）（第5版）（微課版） 教案 第7章 響應(yīng)式設(shè)計(jì)與Bootstrap_第5頁(yè)
已閱讀5頁(yè)，還剩1頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第7章響應(yīng)式設(shè)計(jì)與Bootstrap（4學(xué)時(shí)）本章內(nèi)容：什么是響應(yīng)式設(shè)計(jì)使用媒體查詢中華美食網(wǎng)站的響應(yīng)式設(shè)計(jì)Bootstrap的安裝與使用Bootstrap網(wǎng)格與布局Bootstrap格式設(shè)置Bootstrap組件1、什么是響應(yīng)式設(shè)計(jì)響應(yīng)式設(shè)計(jì)是一種網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)的方法，旨在使網(wǎng)頁(yè)能夠適應(yīng)不同的屏幕尺寸和設(shè)備類型，以提供一致的用戶體驗(yàn)。響應(yīng)式設(shè)計(jì)的目標(biāo)是使網(wǎng)頁(yè)在桌面電腦、平板電腦和手機(jī)等各種設(shè)備上都能夠自動(dòng)調(diào)整布局、字體大小、圖像大小和導(dǎo)航等元素，以適應(yīng)不同的屏幕大小和分辨率。（任意打開一些網(wǎng)站，查看是否是響應(yīng)式設(shè)計(jì)。讓學(xué)生在手機(jī)上打開網(wǎng)站，看是否是響應(yīng)式設(shè)計(jì)。）響應(yīng)式設(shè)計(jì)的核心原則包括：（1）流體網(wǎng)格布局：使用相對(duì)比例的流體網(wǎng)格布局來創(chuàng)建網(wǎng)頁(yè)的布局。（2）媒體查詢：使用媒體查詢來根據(jù)設(shè)備特性和視口屬性應(yīng)用不同的樣式。（3）彈性圖片和媒體：確保網(wǎng)頁(yè)中的圖片和媒體元素能夠自適應(yīng)不同屏幕尺寸和分辨率。（4）移動(dòng)優(yōu)先設(shè)計(jì)：采用移動(dòng)優(yōu)先設(shè)計(jì)的方法，首先針對(duì)移動(dòng)設(shè)備進(jìn)行設(shè)計(jì)和優(yōu)化，然后再逐步增加和調(diào)整布局和功能以適應(yīng)更大的屏幕尺寸。視口設(shè)置視口是指用戶在瀏覽器中實(shí)際可見的區(qū)域。一般而言，不同設(shè)備（如桌面電腦、平板電腦和手機(jī)等）的視口大小會(huì)有所不同。為了確保網(wǎng)頁(yè)在不同設(shè)備上能夠適應(yīng)和呈現(xiàn)良好，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)，可以使用視口屬性來設(shè)置和控制視口的行為。<head><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"></head>其中，通過設(shè)置width=device-width，視口的寬度將與設(shè)備的寬度相匹配；initial-scale=1.0表示網(wǎng)頁(yè)的初始縮放比例為1.0，即不縮放；maximum-scale=1.0和user-scalable=no則禁止了用戶手動(dòng)縮放網(wǎng)頁(yè)。在絕大多數(shù)情況下，在響應(yīng)式設(shè)計(jì)時(shí)使用以下視口設(shè)計(jì)即可：<metaname="viewport"content="width=device-width,initial-scale=1.0">2、使用媒體查詢什么是媒體查詢媒體查詢（MediaQueries）是一種CSS3的功能，用于根據(jù)設(shè)備的特性或用戶代理（通常指瀏覽器）的特性來應(yīng)用不同的CSS樣式。它允許開發(fā)者根據(jù)屏幕尺寸、設(shè)備類型、分辨率、方向等條件來針對(duì)不同的設(shè)備或環(huán)境應(yīng)用特定的樣式，因此在響應(yīng)式設(shè)計(jì)中有非常重要的作用。媒體查詢通過在CSS中使用@media規(guī)則來定義，其中包含一個(gè)或多個(gè)條件和對(duì)應(yīng)的樣式規(guī)則。當(dāng)媒體查詢條件滿足時(shí)，其中定義的樣式規(guī)則將生效。例如：@media(max-width:768px){body{font-size:14px;}}在這個(gè)例子中，@media(max-width:768px)表示當(dāng)視口寬度小于等于768px時(shí)，其中定義的樣式規(guī)則將生效。在這種情況下，body元素的字體大小將被設(shè)置為14px。設(shè)置媒體查詢媒體查詢以@media開頭，表示這是一條媒體查詢語(yǔ)句。@media后接一個(gè)或多個(gè)表達(dá)式，如果表達(dá)式為真，則應(yīng)用樣式。媒體查詢的語(yǔ)法如下（教材248）：@media媒體類型邏輯操作符(媒體特性){/*CSS樣式*/}例如，以下代碼設(shè)置了3條媒體查詢，會(huì)在不同屏幕寬度時(shí)顯示不同的背景顏色。<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>移動(dòng)優(yōu)先設(shè)計(jì)實(shí)例<html><head><title>移動(dòng)優(yōu)先設(shè)計(jì)示例</title><style>body{text-align:center;}/*移動(dòng)設(shè)備樣式*/body{background-color:lightblue;font-size:16px;}@media(min-width:768px){/*平板電腦和臺(tái)式機(jī)樣式*/body{background-color:lightgreen;font-size:20px;}}@media(min-width:1024px){/*大屏幕樣式*/body{background-color:lightyellow;font-size:24px;}}</style></head><body><h1>移動(dòng)優(yōu)先設(shè)計(jì)示例</h1><p>根據(jù)不同屏幕尺寸顯示不同樣式。</p></body></html>響應(yīng)式網(wǎng)頁(yè)布局實(shí)例<html><head><title>響應(yīng)式網(wǎng)頁(yè)布局示例</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區(qū)域命名*/}nava{/*設(shè)置導(dǎo)航條鏈接樣式*/color:white;padding:5px20px;text-decoration:none;text-align:center;}nava:hover{/*更改鼠標(biāo)懸停時(shí)的顏色*/background-color:#ddd;color:black;}aside{/*Sidebar樣式*/background-color:lightgreen;padding:20px;grid-area:aside;/*為grid區(qū)域命名*/}main{/*Main樣式*/background-color:beige;padding:20px;grid-area:main;/*為grid區(qū)域命名*/}footer{/*Footer樣式*/background-color:lightgray;padding:10px;text-align:center;grid-area:footer;/*為grid區(qū)域命名*/}.responsive-image{/*響應(yīng)式圖片樣式*/max-width:60%;/*自動(dòng)調(diào)整寬度以適應(yīng)屏幕，可改為100%*/height:auto;}/*移動(dòng)設(shè)備樣式（默認(rèn)樣式）*/body{display:grid;/*使用grid布局*/grid-template-areas:/*設(shè)置布局樣式*/"header""nav""aside""main""footer";grid-template-rows:auto50pxauto1frauto;/*5行*/grid-template-columns:1fr;/*1列*/min-height:100vh;/*頁(yè)面最小高度為視口高度的100%，即頁(yè)面永遠(yuǎn)充滿屏幕*/}/*媒體查詢*/@media(min-width:769px){/*平板電腦和臺(tái)式機(jī)樣式*/body{grid-template-areas:/*設(shè)置布局樣式*/"headerheader""navnav""asidemain""footerfooter";grid-template-rows:auto50px1frauto;/*4行*/grid-template-columns:30%1fr;/*2列*/}.responsive-image{max-width:100%;/*自動(dòng)調(diào)整寬度以適應(yīng)屏幕*/height:auto;}}@media(min-width:1025px){/*大屏幕樣式，注意布局樣式和圖片樣式繼承平板電腦和臺(tái)式機(jī)樣式*/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>主體內(nèi)容</h2><p>Loremipsumdolorsitamet,consecteturadipiscingelit.Nullaconsecteturaliquammi,egetaliquetante.Donecrutrumliberorisus,agravidaorcialiquetat.Sedutscelerisquejusto.Nullafacilisi.Nullamlobortislaciniaipsum,inaliquetnibhplaceratat.Maecenasbibendumexenim,noninterdumnislvariusid.</p></main><footer><h2>底部</h2></footer></body></html>3、中華美食網(wǎng)站的響應(yīng)式設(shè)計(jì)打開之前制作的中華美食網(wǎng)站，按照教材247-252頁(yè)進(jìn)行操作（注意沒有3級(jí)頁(yè)面的響應(yīng)式設(shè)計(jì)，需要自行設(shè)計(jì)與實(shí)現(xiàn)）4、Bootstrap的安裝與使用下載（簡(jiǎn)單講解bootstrap網(wǎng)站上的不同版本如何下載和使用，強(qiáng)調(diào)如果按教材

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論