Bootstrap響應(yīng)式Web開發(fā)(第2版)第1章 初識(shí)Bootstrap 教學(xué)設(shè)計(jì)_第1頁
Bootstrap響應(yīng)式Web開發(fā)(第2版)第1章 初識(shí)Bootstrap 教學(xué)設(shè)計(jì)_第2頁
Bootstrap響應(yīng)式Web開發(fā)(第2版)第1章 初識(shí)Bootstrap 教學(xué)設(shè)計(jì)_第3頁
Bootstrap響應(yīng)式Web開發(fā)(第2版)第1章 初識(shí)Bootstrap 教學(xué)設(shè)計(jì)_第4頁
Bootstrap響應(yīng)式Web開發(fā)(第2版)第1章 初識(shí)Bootstrap 教學(xué)設(shè)計(jì)_第5頁
已閱讀5頁,還剩1頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論