Bootstrap響應(yīng)式Web開發(fā)（第2版）第3章 移動Web屏幕適配 教學(xué)設(shè)計

第1章PHP開篇PAGE16《Bootstrap響應(yīng)式Web開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第3章移動Web屏幕適配計劃課時7課時教學(xué)引入在移動Web開發(fā)中，屏幕適配的目的是在不同設(shè)備的屏幕中展現(xiàn)最佳布局，提供更好的用戶體驗。開發(fā)者需要綜合考慮頁面在不同屏幕中的布局。其中常用的移動Web屏幕適配技術(shù)包括媒體查詢、流式布局、彈性盒布局、rem單位、vw單位、vh單位、字體圖標(biāo)、二倍圖和SVG。本章將對移動Web屏幕適配技術(shù)進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)使學(xué)生掌握媒體查詢的使用方法，能夠根據(jù)視口寬度等條件調(diào)整頁面的布局和樣式使學(xué)生掌握流式布局的使用方法，能夠使用流式布局實現(xiàn)網(wǎng)頁寬度自適應(yīng)使學(xué)生掌握彈性盒布局的使用方法，能夠使用彈性盒布局的相關(guān)屬性創(chuàng)建響應(yīng)式布局使學(xué)生掌握rem單位的使用方法，能夠根據(jù)根元素的字號使用rem單位設(shè)置元素的大小使學(xué)生掌握vw單位和vh單位的使用方法，能夠根據(jù)視口的變化使用vw單位和vh單位自動設(shè)置元素的大小使學(xué)生掌握字體圖標(biāo)的使用方法，能夠在網(wǎng)頁中使用各種字體圖標(biāo)使學(xué)生掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率的設(shè)備中實現(xiàn)更清晰的圖像使學(xué)生掌握SVG的使用方法，能夠完成SVG圖像的定義和顯示教學(xué)重點媒體查詢彈性盒布局rem單位vw單位和vh單位教學(xué)難點彈性盒布局SVG的基本使用方法教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一、二課時（媒體查詢、流式布局、彈性盒布局）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課媒體查詢（MediaQueries）是一個CSS3中的技術(shù)，它可以根據(jù)不同的媒體類型或視口大小應(yīng)用不同的樣式。在實現(xiàn)響應(yīng)式網(wǎng)頁布局時，為了確保網(wǎng)頁在不同屏幕尺寸的設(shè)備中都能獲得最佳的用戶體驗，往往采用寬度適配方案，即通過設(shè)置網(wǎng)頁的寬度來適應(yīng)不同屏幕尺寸的設(shè)備。這種方案通常使用彈性盒布局和流式布局來實現(xiàn)。本節(jié)課將詳細(xì)講解媒體查詢、流式布局和彈性盒布局。三、新課講解知識點1-媒體查詢教師通過PPT結(jié)合實際操作的方式講解媒體查詢。什么是媒體查詢。媒體查詢的代碼的書寫位置。定義媒體查詢的語法格式。講解媒體查詢的語法格式中的每個組成部分。通過示例代碼演示媒體查詢。通過案例的形式講解如何使用媒體查詢實現(xiàn)網(wǎng)頁左側(cè)列表區(qū)域隱藏的效果。知識點2-流式布局教師通過PPT結(jié)合實際操作的方式講解流式布局。什么是流式布局。流式布局的實現(xiàn)方法。通過示例代碼演示流式布局的使用。通過案例的形式講解如何使用流式布局實現(xiàn)一個底部標(biāo)簽欄。知識點3-彈性盒布局教師通過PPT結(jié)合實際操作的方式講解彈性盒布局。什么是彈性盒布局。彈性盒布局的主要組成部分。Flex容器。Flex元素。Flex容器內(nèi)有兩根軸。主軸。交叉軸。彈性盒布局的使用步驟。通過示例代碼演示彈性盒布局的使用。Flex容器的常用屬性。flex-direction屬性。flex-wrap屬性。justify-content屬性。align-items屬性。Flex元素的常用屬性。order屬性。flex-grow屬性。flex-shrink屬性。flex-basis屬性。flex屬性。通過案例的形式講解如何使用彈性盒布局實現(xiàn)一個頂部導(dǎo)航欄。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三課時（rem單位、vw單位和vh單位）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在進(jìn)行屏幕適配時，除了寬度適配方案外，寬高等比適配方案也是一種常用的方法。寬高等比適配方案通過保持元素的寬高比例來適應(yīng)不同屏幕尺寸的設(shè)備。這種方案使用CSS技術(shù)實現(xiàn)，通過使用相對單位（如rem、vw、vh）來設(shè)置元素的寬度，并根據(jù)寬度計算出相應(yīng)的高度，以保持元素的寬高比例不變。這樣可以確保在不同設(shè)備中元素不會變形或失真，從而提供一致的視覺體驗。本節(jié)課將詳細(xì)講解rem單位、vw單位、vh單位。三、新課講解知識點1-rem單位教師通過PPT結(jié)合實際操作的方式講解rem單位。rem單位的計算方式。通過示例代碼演示rem單位的基本使用。通過案例的形式演示如何使用媒體查詢。知識點2-vw單位和vh單位教師通過PPT結(jié)合實際操作的方式講解vw單位和vh單位。vw和vh單位的計算方式。不建議同時使用vw和vh單位的原因。通過案例的形式講解如何使用vw單位。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第四課時（什么是字體圖標(biāo)、下載字體圖標(biāo)、使用字體圖標(biāo)）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在網(wǎng)頁制作中，經(jīng)常需要在網(wǎng)頁中添加許多圖標(biāo)，以增加頁面的美觀性。由于網(wǎng)頁在移動端屏幕中會因設(shè)備像素比而產(chǎn)生縮放，如果使用PNG、JPG等格式的圖標(biāo)，在網(wǎng)頁縮放時可能會變得模糊，此時可以使用字體圖標(biāo)，因為字體圖標(biāo)屬于矢量圖，在網(wǎng)頁縮放時不會模糊。本節(jié)課將詳細(xì)講解字體圖標(biāo)。三、新課講解知識點1-什么是字體圖標(biāo)教師通過PPT的方式講解什么是字體圖標(biāo)。什么是字體圖標(biāo)。使用字體圖標(biāo)的優(yōu)點。知識點2-下載字體圖標(biāo)教師通過PPT結(jié)合實際操作的方式講解下載字體圖標(biāo)。通過iconfont圖標(biāo)庫下載字體圖標(biāo)的具體步驟。知識點3-使用字體圖標(biāo)教師通過PPT結(jié)合實際操作的方式講解使用字體圖標(biāo)。在網(wǎng)頁中使用字體圖標(biāo)的方法。圖標(biāo)容器需要設(shè)置兩個類。 .iconfont。.icon-*圖標(biāo)類。通過示例代碼演示字體圖標(biāo)的使用。通過案例的形式講解如何使用字體圖標(biāo)。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第五課時（二倍圖、什么是SVG、SVG的基本使用方法）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接的方式導(dǎo)入新課在移動Web開發(fā)中，為了確保網(wǎng)頁中的圖像在不同屏幕尺寸的設(shè)備中都能夠完美呈現(xiàn)，需要解決設(shè)備像素比大于1時帶來的圖像模糊問題。當(dāng)設(shè)備像素比大于1時，網(wǎng)頁在這些設(shè)備上會被放大顯示，如果網(wǎng)頁中圖像的分辨率過低，會導(dǎo)致圖像模糊。為了提高圖像的清晰度和品質(zhì)，我們可以使用二倍圖。在編寫響應(yīng)式頁面時，開發(fā)者需要確保圖像能夠適應(yīng)不同設(shè)備的屏幕大小，同時不會因為放大或縮小而失真或降低質(zhì)量。在這種情況下，矢量圖成為一種有效的解決方案。使用SVG可以很方便地創(chuàng)建矢量圖。本節(jié)課將詳細(xì)講解二倍圖、SVG。三、新課講解知識點1-二倍圖教師通過PPT結(jié)合實際操作的方式講解二倍圖。什么是二倍圖。實現(xiàn)<img>標(biāo)簽圖像的二倍圖。實現(xiàn)背景圖像的二倍圖。通過案例的形式演示如何使用二倍圖。知識點2-什么是SVG教師通過PPT的方式講解什么是SVG。什么是SVG。什么是SVG圖像。與標(biāo)量圖像（如JPEG、PNG）相比，SVG圖像具有很多優(yōu)勢。知識點3-SVG的基本使用方法教師通過PPT結(jié)合實際操作的方式講解SVG的基本使用方法。嵌入SVG圖像的方法。直接在HTML文件中使用<svg>標(biāo)簽定義SVG代碼。將SVG圖像保存為獨立的“.svg”文件，然后在HTML文件中使用<img>標(biāo)簽引用該文件。SVG圖像使用<svg>標(biāo)簽來定義。<svg>標(biāo)簽的語法格式。<svg>標(biāo)簽內(nèi)部常用的標(biāo)簽。<circle>標(biāo)簽的常用屬性。通過案例的形式講解如何使用<svg>和<circle>標(biāo)簽。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第六課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進(jìn)行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機1：（考察知識點為：媒體查詢、流式布局、彈性盒布局）形式：單獨完成具體要求：創(chuàng)建media.html文件。在該文件中編寫代碼，實現(xiàn)網(wǎng)頁分為左右2個區(qū)域，分別是左側(cè)列表區(qū)域和右側(cè)內(nèi)容區(qū)域，當(dāng)視口寬度小于等于768px時隱藏左側(cè)列表區(qū)域。創(chuàng)建TabBar.html文件。在該文件中編寫代碼，使用流式布局實現(xiàn)一個底部標(biāo)簽欄。創(chuàng)建NavBar.html文件。在該文件中編寫代碼，使用彈性盒布局實現(xiàn)一個頂部導(dǎo)航欄。上機2：（考察知識點為：rem單位）形式：單獨完成具體要求：按照任務(wù)需求實現(xiàn)指定的任務(wù)。創(chuàng)建changeFontSize.html文件。利用媒體查詢來根據(jù)不同視口寬度動態(tài)改變根元素的字號，使其等于視口寬度的1/10，然后使用rem單位設(shè)置頁面中的元素的寬高，從而實現(xiàn)等比例縮放效果。第七課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進(jìn)行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機1：（考察知識點為：下載字體圖標(biāo)、使用字體圖標(biāo)）形式：單獨完成具體要求：根據(jù)需求下載所需的字體圖標(biāo)。例如，下載圖標(biāo)庫頁面中的第1行的9個字體圖標(biāo)，下載后解