Bootstrap響應(yīng)式Web開發(fā)（第2版）第1章 初識Bootstrap 教學(xué)設(shè)計

第1章PHP開篇PAGE16《Bootstrap響應(yīng)式Web開發(fā)（第2版）》教學(xué)設(shè)計課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第1章初識Bootstrap計劃課時5課時教學(xué)引入近年來，隨著移動互聯(lián)網(wǎng)的持續(xù)發(fā)展，不斷涌現(xiàn)出各種移動設(shè)備，這些設(shè)備的屏幕尺寸多種多樣，而網(wǎng)頁需要根據(jù)用戶使用的具體設(shè)備進(jìn)行適配，以確保用戶可以具有最佳的瀏覽體驗。為了解決網(wǎng)頁在不同設(shè)備中的適配問題，Bootstrap應(yīng)運而生。為了使讀者對Bootstrap有一個初步的認(rèn)識，本章將對Bootstrap、瀏覽器、VisualStudioCode編輯器、移動Web開發(fā)的主流方案等內(nèi)容進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)使學(xué)生了解Bootstrap的概念，能夠說出什么是Bootstrap使學(xué)生熟悉Bootstrap的特點，能夠歸納Bootstrap的特點使學(xué)生熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分使學(xué)生了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器使學(xué)生了解移動端瀏覽器，能夠列舉常見的移動端瀏覽器使學(xué)生掌握VisualStudioCode編輯器的下載和安裝，能夠獨立完成VisualStudioCode編輯器的下載和安裝使學(xué)生掌握中文擴展包的安裝，能夠在VisualStudioCode編輯器中安裝中文擴展包使學(xué)生掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5文檔使學(xué)生了解移動Web開發(fā)的主流方案，能夠說出兩種主流的移動Web開發(fā)方案教學(xué)重點下載和安裝VisualStudioCode編輯器使用VisualStudioCode編輯器教學(xué)難點無教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時（Bootstrap概述、Bootstrap的特點、Bootstrap的組成）一、通過直接引入的方式導(dǎo)入新課Bootstrap是一款開源的前端UI框架，用于構(gòu)建響應(yīng)式、移動設(shè)備優(yōu)先的項目，因其學(xué)習(xí)成本低、上手容易等優(yōu)勢，深受開發(fā)者的歡迎。本節(jié)課將詳細(xì)講解Bootstrap概述、Bootstrap的特點和Bootstrap的組成。二、新課講解知識點1-Bootstrap概述教師通過PPT的方式講解Bootstrap概述。什么是Bootstrap。Bootstrap發(fā)展經(jīng)歷的5個大版本。1.x版本。2.x版本。3.x版本。4.x版本。5.x版本。知識點2-Bootstrap的特點教師通過PPT的方式講解Bootstrap的特點。Bootstrap的特點。移動設(shè)備優(yōu)先。瀏覽器支持。學(xué)習(xí)成本低、容易上手。響應(yīng)式設(shè)計。快速開發(fā)。方便定制。知識點3-Bootstrap的組成教師通過PPT的方式講解Bootstrap的組成。Bootstrap的組成。CSS樣式。布局組件。JavaScript插件。圖標(biāo)庫。三、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。四、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第二課時（PC端瀏覽器、移動端瀏覽器）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課瀏覽器（WebBrowser）是一種用于檢索、展示以及傳遞萬維網(wǎng)信息資源的應(yīng)用程序，它是互聯(lián)網(wǎng)時代的產(chǎn)物，可以用來顯示網(wǎng)頁、圖像、影音及其他內(nèi)容，以便用戶與網(wǎng)頁進(jìn)行交互。按照設(shè)備類型劃分，可以將瀏覽器分為PC端瀏覽器和移動端瀏覽器兩大類。本節(jié)課將詳細(xì)講解PC端瀏覽器和移動端瀏覽器。三、新課講解知識點1-PC端瀏覽器教師通過PPT的方式講解PC端瀏覽器。什么是PC端瀏覽器。常見的PC端瀏覽器。Chrome瀏覽器。InternetExplorer（簡稱IE）瀏覽器。Edge瀏覽器。Firefox瀏覽器。Safari瀏覽器。Chrome瀏覽器的主要優(yōu)勢。高速瀏覽。安全性。擴展生態(tài)系統(tǒng)?？缙脚_同步。 開發(fā)者工具。知識點2-移動端瀏覽器教師通過PPT的方式講解移動端瀏覽器。什么是移動端瀏覽器。什么是移動設(shè)備。常見的移動設(shè)備。手機。平板電腦?？纱┐髟O(shè)備，如智能手表和智能眼鏡等。常見的移動端瀏覽器。Android瀏覽器。Safari瀏覽器。UC瀏覽器。QQ瀏覽器。百度瀏覽器。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三課時（下載和安裝VisualStudioCode編輯器、安裝中文擴展包、使用VisualStudioCode編輯器）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在使用Bootstrap開發(fā)項目之前，選擇一個合適的編輯器是很重要的。本書基于VisualStudioCode編輯器來編寫代碼和管理項目文件。為了幫助讀者更好的了解VisualStudioCode編輯器，本節(jié)課將詳細(xì)講解VisualStudioCode編輯器。三、新課講解知識點1-下載和安裝VisualStudioCode編輯器教師通過PPT結(jié)合實際操作的方式講解下載和安裝VisualStudioCode編輯器。什么是VisualStudioCode編輯器。VisualStudioCode編輯器的特點。輕巧極速。功能強大。支持跨平臺。界面的設(shè)計比較人性化。豐富的擴展性。 多語言支持。下載和安裝VisualStudioCode編輯器。知識點2-安裝中文擴展包教師通過PPT結(jié)合實際操作的方式講解安裝中文擴展包。中文擴展包的作用。中文擴展包的安裝步驟。知識點3-使用VisualStudioCode編輯器教師通過PPT結(jié)合實際操作的方式講解使用VisualStudioCode編輯器。使用VisualStudioCode編輯器開發(fā)項目的步驟。通過代碼演示如何使用VisualStudioCode編輯器。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第四課時（單獨制作移動端頁面、制作響應(yīng)式頁面）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在學(xué)習(xí)Bootstrap之前，了解主流的移動Web開發(fā)方案很重要。市場上有兩種主流方案，第一種方案是制作單獨的移動端頁面，第二種方案是制作響應(yīng)式頁面來兼容PC設(shè)備和移動設(shè)備。Bootstrap屬于第二種方案。本節(jié)課將詳細(xì)講解移動Web開發(fā)的主流方案。三、新課講解知識點1-單獨制作移動端頁面教師通過PPT的方式講解單獨制作移動端頁面。制作獨立的移動端頁面的通常做法。列舉常見的單獨制作移動端頁面的網(wǎng)站。單獨制作移動端頁面的方案的優(yōu)點。單獨制作移動端頁面的方案的缺點。知識點2-制作響應(yīng)式頁面教師通過PPT的方式講解制作響應(yīng)式頁面。什么是響應(yīng)式頁面。以華為官方網(wǎng)站為例，通過調(diào)整瀏覽器窗口大小來演示頁面的響應(yīng)式效果。響應(yīng)式頁面的特點?？梢钥缙脚_便于搜索引擎收錄節(jié)約成本四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第五課時（上機練習(xí)）上機練習(xí)主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進(jìn)行練習(xí)，通過上機練習(xí)可以考察同學(xué)對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：下載和安裝VisualStudioCode編輯器、安裝中文擴展包、使用