Bootstrap響應式Web開發(fā)（第2版）第1章 初識Bootstrap 教學設計

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