Bootstrap響應(yīng)式Web開發(fā)（第2版）-教學(xué)大綱

《Bootstrap響應(yīng)式Web開發(fā)（第2版）》課程教學(xué)大綱（課程英文名稱）課程編號：學(xué)分：學(xué)分課時：56（其中：講課40時上機16課時）先修課程：計算機基礎(chǔ)、HTML、CSS、JavaScript適用專業(yè)：信息技術(shù)及其計算機相關(guān)專業(yè)一、課程的性質(zhì)與目標(biāo)Bootstrap響應(yīng)式Web開發(fā)是一門面向Web前端開發(fā)人員的課程，內(nèi)容包括初識Bootstrap、移動Web開發(fā)基礎(chǔ)、移動Web屏幕適配、Bootstrap開發(fā)基礎(chǔ)、Bootstrap常用樣式、Bootstrap表單、Bootstrap常用組件和一個基于Bootstrap的在線學(xué)習(xí)平臺的項目實戰(zhàn)。本課程秉承立德樹人理念，在案例中融入了思政元素。通過本課程的學(xué)習(xí)，不僅可以讓學(xué)生掌握移動Web和Bootstrap的核心知識，還可以培養(yǎng)學(xué)生的家國情懷、責(zé)任擔(dān)當(dāng)和敬業(yè)精神。二、課程設(shè)計思路和教學(xué)要求課程設(shè)計理念：通過學(xué)習(xí)本課程，使學(xué)生掌握如何將移動Web和Bootstrap應(yīng)用于項目開發(fā)。按照學(xué)習(xí)的難易程度及先后順序安排具體的內(nèi)容，可以有效地將學(xué)生所學(xué)的內(nèi)容串聯(lián)起來，從而培養(yǎng)學(xué)生分析問題和解決問題的能力。課程設(shè)計思路：本課程根據(jù)知識點難易的先后順序進(jìn)行講解，并結(jié)合示例代碼幫助學(xué)生進(jìn)行理解。通過案例的演示，幫助學(xué)生學(xué)以致用，將基礎(chǔ)知識轉(zhuǎn)化為解決實際問題的能力。學(xué)完移動Web和Bootstrap的基礎(chǔ)知識后，通過一個項目實戰(zhàn)將所學(xué)內(nèi)容串聯(lián)起來，培養(yǎng)學(xué)生分析和解決問題的能力。操作系統(tǒng)：Windows7或更高版本開發(fā)工具：VisualStudioCode編輯器、Chrome瀏覽器三、課程的主要內(nèi)容及基本要求第1章初識Bootstrap學(xué)習(xí)單元初識Bootstrap課時5課時學(xué)習(xí)目標(biāo)了解Bootstrap的概念，能夠說出什么是Bootstrap熟悉Bootstrap的特點，能夠歸納Bootstrap的特點熟悉Bootstrap的組成，能夠歸納Bootstrap的組成部分了解PC端瀏覽器，能夠列舉常見的PC端瀏覽器了解移動端瀏覽器，能夠列舉常見的移動端瀏覽器掌握VisualStudioCode編輯器的下載和安裝方法，能夠獨立完成VisualStudioCode編輯器的下載和安裝掌握中文擴展包的安裝，能夠在VisualStudioCode編輯器中安裝中文擴展包掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5文檔了解移動Web開發(fā)的主流方案，能夠說出兩種主流的移動Web開發(fā)方案學(xué)習(xí)內(nèi)容知識點掌握程度重點難點Bootstrap概述了解Bootstrap的特點熟悉Bootstrap的組成熟悉PC端瀏覽器了解移動端瀏覽器了解下載和安裝VisualStudioCode編輯器掌握√安裝中文擴展包掌握使用VisualStudioCode編輯器掌握√單獨制作移動端頁面了解制作響應(yīng)式頁面了解第2章移動Web開發(fā)基礎(chǔ)學(xué)習(xí)單元移動Web開發(fā)基礎(chǔ)課時9課時學(xué)習(xí)目標(biāo)了解屏幕分辨率，能夠說出屏幕分辨率的概念了解設(shè)備像素比，能夠說出設(shè)備像素比的計算方式了解視口，能夠說出視口的設(shè)置方式掌握CSS樣式初始化的使用方法，能夠使用Normalize.css初始化默認(rèn)樣式掌握CSS變量的使用方法，能夠使用CSS變量減少冗余的樣式代碼掌握Less常用語法的使用方法，能夠定義Less變量和使用嵌套語法來簡化代碼掌握Sass常用語法的使用方法，能夠定義Sass變量和使用嵌套語法來簡化代碼掌握WebStorage的使用方法，能夠?qū)?shù)據(jù)進(jìn)行存儲、獲取、刪除等操作掌握音頻和視頻的使用方法，能夠?qū)崿F(xiàn)對音頻和視頻的播放、暫停、進(jìn)度和音量控制等操作掌握移動端touch事件的使用方法，能夠?qū)崿F(xiàn)touch事件學(xué)習(xí)內(nèi)容知識點掌握程度重點難點屏幕分辨率了解設(shè)備像素比了解視口了解CSS樣式初始化掌握√定義CSS變量掌握√讀取CSS變量的值掌握CSS變量值的類型掌握在JavaScript中設(shè)置CSS變量掌握√Less掌握Sass掌握WebStorage概述熟悉localStorage掌握√√sessionStorage掌握√<video>標(biāo)簽掌握<audio>標(biāo)簽掌握video對象和audio對象掌握√touch事件概述掌握TouchEvent對象熟悉模擬移動端單擊事件掌握√第3章移動Web屏幕適配學(xué)習(xí)單元移動Web屏幕適配課時7課時學(xué)習(xí)目標(biāo)掌握媒體查詢的使用方法，能夠根據(jù)視口寬度等條件調(diào)整頁面的布局和樣式掌握流式布局的使用方法，能夠使用流式布局實現(xiàn)網(wǎng)頁寬度自適應(yīng)掌握彈性盒布局的使用方法，能夠使用彈性盒布局的相關(guān)屬性創(chuàng)建響應(yīng)式布局掌握rem單位的使用方法，能夠根據(jù)根元素的字號使用rem單位設(shè)置元素的大小掌握vw單位和vh單位的使用方法，能夠根據(jù)視口的變化使用vw單位和vh單位自動設(shè)置元素的大小掌握字體圖標(biāo)的使用方法，能夠在網(wǎng)頁中使用各種字體圖標(biāo)掌握二倍圖的使用方法，能夠靈活使用二倍圖在高分辨率的設(shè)備中實現(xiàn)更清晰的圖像掌握SVG的使用方法，能夠完成SVG圖像的定義和顯示學(xué)習(xí)內(nèi)容知識點掌握程度重點難點媒體查詢掌握√流式布局掌握彈性盒布局掌握√√rem單位掌握√vw單位和vh單位掌握√什么是字體圖標(biāo)熟悉下載字體圖標(biāo)掌握使用字體圖標(biāo)掌握二倍圖掌握什么是SVG熟悉SVG的基本使用方法掌握√第4章Bootstrap開發(fā)基礎(chǔ)學(xué)習(xí)單元Bootstrap開發(fā)基礎(chǔ)課時6課時學(xué)習(xí)目標(biāo)掌握Bootstrap的下載和引入，能夠獨立完成Bootstrap的下載和引入掌握Bootstrap布局容器的使用方法，能夠運用容器類創(chuàng)建不同特征的布局容器掌握Bootstrap柵格系統(tǒng)的使用方法，能夠運用柵格系統(tǒng)創(chuàng)建頁面布局掌握Bootstrap工具類的使用方法，能夠運用工具類根據(jù)不同的設(shè)備自動應(yīng)用特定的樣式學(xué)習(xí)內(nèi)容知識點掌握程度重點難點下載Bootstrap掌握引入Bootstrap掌握初識Bootstrap布局容器熟悉Bootstrap布局容器的使用方法掌握√初識Bootstrap柵格系統(tǒng)了解Bootstrap柵格系統(tǒng)的使用方法掌握√√顯示方式工具類掌握√邊距工具類掌握√彈性盒布局工具類掌握√√第5章Bootstrap常用樣式學(xué)習(xí)單元Bootstrap常用樣式課時5課時學(xué)習(xí)目標(biāo)掌握標(biāo)題樣式的使用方法，能夠靈活設(shè)置標(biāo)題的樣式掌握文本樣式的使用方法，能夠?qū)崿F(xiàn)強調(diào)文本和引用文本效果，以及設(shè)置文本的顏色和格式掌握列表樣式的使用方法，能夠去除默認(rèn)列表樣式，以及實現(xiàn)列表項一行顯示的效果掌握圖文樣式的使用方法，能夠設(shè)置圖像展示方式、圖像對齊方式和圖文組合方式掌握表格樣式的使用方法，能夠設(shè)置表格的背景色和邊框等掌握輔助樣式的使用方法，能夠為元素設(shè)置背景樣式和邊框樣式學(xué)習(xí)內(nèi)容知識點掌握程度重點難點標(biāo)題樣式掌握強調(diào)文本掌握引用文本掌握文本顏色掌握√文本格式掌握√列表樣式掌握圖像展示方式掌握圖像對齊方式掌握圖文組合方式掌握表格樣式掌握√背景樣式掌握邊框樣式掌握√第6章Bootstrap表單學(xué)習(xí)單元Bootstrap表單課時6課時學(xué)習(xí)目標(biāo)掌握表單控件樣式的使用方法，能夠靈活設(shè)置文本框、下拉列表、單選按鈕、復(fù)選框和輸入組的樣式掌握表單布局方式的使用方法，能夠?qū)崿F(xiàn)行內(nèi)表單布局、水平表單布局和響應(yīng)式表單布局效果掌握表單驗證的使用方法，能夠?qū)Ρ韱沃械臄?shù)據(jù)進(jìn)行驗證學(xué)習(xí)內(nèi)容知識點掌握程度重點難點文本框掌握下拉列表掌握√單選按鈕和復(fù)選框掌握輸入組掌握√行內(nèi)表單布局掌握水平表單布局掌握響應(yīng)式表單布局掌握表單驗證掌握√√第7章Bootstrap常用組件學(xué)習(xí)單元Bootstrap常用組件課時8課時學(xué)習(xí)目標(biāo)了解組件的概念，能夠說出Bootstrap組件的優(yōu)勢掌握Bootstrap組件的基本使用方法，能夠通過查閱官方文檔的方式學(xué)習(xí)Bootstrap組件掌握按鈕組件的使用方法，能夠創(chuàng)建基礎(chǔ)樣式按鈕、輪廓樣式按鈕、尺寸樣式按鈕、狀態(tài)樣式按鈕和組合樣式按鈕掌握導(dǎo)航組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航、標(biāo)簽式導(dǎo)航、膠囊式導(dǎo)航和面包屑導(dǎo)航掌握導(dǎo)航欄組件的使用方法，能夠創(chuàng)建基礎(chǔ)導(dǎo)航欄和帶有折疊按鈕的導(dǎo)航欄掌握下拉菜單組件的使用方法，能夠創(chuàng)建下拉菜單按鈕和下拉菜單導(dǎo)航欄掌握卡片組件的使用方法，能夠創(chuàng)建基礎(chǔ)卡片、圖文卡片和背景圖卡片掌握輪播組件的使用方法，能夠創(chuàng)建基礎(chǔ)輪播圖掌握提示組件的使用方法，能夠創(chuàng)建工具提示框、彈出提示框和警告框掌握模態(tài)框組件的使用方法，能夠創(chuàng)建模態(tài)框?qū)W習(xí)內(nèi)容知識點掌握程度重點難點組件概述了解Bootstrap組件的基本使用方法掌握基礎(chǔ)樣式按鈕掌握√輪廓樣式按鈕掌握尺寸樣式按鈕掌握狀態(tài)樣式按鈕掌握組合樣式按鈕掌握基礎(chǔ)導(dǎo)航掌握標(biāo)簽式導(dǎo)航掌握√膠囊式導(dǎo)航掌握√面包屑導(dǎo)航掌握基礎(chǔ)導(dǎo)航欄掌握帶有折疊按鈕的導(dǎo)航欄掌握√√下拉菜單按鈕掌握下拉菜單導(dǎo)航欄掌握√基礎(chǔ)卡片掌握圖文卡片掌握√背景圖卡片掌握輪播圖功能分析了解基礎(chǔ)輪播圖掌握√工具提示框掌握√彈出提示框掌握√警告框掌握模態(tài)框組件掌握√√第8章項目實戰(zhàn)——基于Bootstrap的在線學(xué)習(xí)平臺學(xué)習(xí)單元項目實戰(zhàn)——基于Bootstrap的在線學(xué)習(xí)平臺課時10課時學(xué)習(xí)目標(biāo)熟悉項目目錄結(jié)構(gòu)，能夠歸納各個目錄和文件的作用掌握導(dǎo)航欄模塊的開發(fā)，能夠獨立完成導(dǎo)航欄模塊的代碼編寫掌握輪播圖模塊的開發(fā)，能夠獨立完成輪播圖模塊的代碼編寫掌握視頻教程模塊的開發(fā)，能夠獨立完成視頻教程模塊的代碼編寫掌握學(xué)習(xí)路線模塊的開發(fā)，能夠獨立完成學(xué)習(xí)路線模塊的代碼編寫掌握熱門學(xué)習(xí)工具模塊的開發(fā)，能夠獨立完成熱門學(xué)習(xí)工具模塊的代碼編寫掌握版權(quán)模塊的開發(fā)，能夠獨立完成版權(quán)模塊的代碼編寫學(xué)習(xí)內(nèi)容知識點掌握程度重點難點項目展示熟悉項目分析熟悉項目目錄結(jié)構(gòu)熟悉導(dǎo)航欄模塊效果展示了解導(dǎo)航欄模塊結(jié)構(gòu)分析了解導(dǎo)航欄模塊代碼實現(xiàn)掌握√輪播圖模塊效果展示了解輪播圖模塊結(jié)構(gòu)分析了解輪播圖模塊代碼實現(xiàn)掌握√視頻教程模塊效果展示了解視頻教程模塊結(jié)構(gòu)分析了解視頻教程模塊代碼實現(xiàn)掌握√學(xué)習(xí)路線模塊效果展示了解學(xué)習(xí)路線模塊結(jié)構(gòu)分析了解學(xué)習(xí)路線模塊代碼實現(xiàn)掌握√熱門學(xué)習(xí)工具模塊效果展示了解熱門學(xué)習(xí)工具模塊結(jié)構(gòu)分析了解熱門學(xué)習(xí)工具模塊代碼實現(xiàn)掌握√版權(quán)模塊效果展示了解版權(quán)模塊結(jié)構(gòu)分析了解版權(quán)模塊代碼實現(xiàn)掌握√四、課時分配章目講課上機合計第1章初識Bootstrap415第2章移動Web開發(fā)基礎(chǔ)639第3章移動Web屏幕適配527第4章Bootstrap開發(fā)基礎(chǔ)426第5章Bootstrap常用樣式415第6章Bootstrap表單426第7章Bootstrap常用組件628第8章項目實戰(zhàn)——基于Bootstrap的在線學(xué)習(xí)平臺7310合計401656五、考核模式與成績評定辦法本課程為考試課程，期末考試采用百分制的閉卷考試模式。學(xué)生的考試成績由平時成績（30%）和期末考試（70%）組成，其中，平時成績包括出勤（5%）、作業(yè)（5%）、上機成績（20%）。六、選用教材和主要參考書本