響應(yīng)式Web應(yīng)用前端開(kāi)發(fā)教程 授課計(jì)劃表

1、XXXXXXXXX 學(xué)院學(xué)期 授課計(jì) 劃2022年/2023年第1學(xué)期課程名稱課程類別適用專業(yè)任課教師教師所屬系部教研室主任簽名院 長(zhǎng)簽名教研室通過(guò)日期：2022年8月 日學(xué)期授課計(jì)劃編訂說(shuō)明課程標(biāo)準(zhǔn)名稱、 批準(zhǔn)單位及時(shí) 間本學(xué)期主要講 授的內(nèi)容（授課 內(nèi)容起止章節(jié)）模塊一工程準(zhǔn)備階段第一章技術(shù)簡(jiǎn)介第二章Bootstrap4技術(shù)資料第三章jQuery技術(shù)資料模塊二Bootstrap靜態(tài)網(wǎng)站制作第四章客戶界面響應(yīng)式頁(yè)面制作第五章管理員界面響應(yīng)式頁(yè)面制作模塊三jQuery交互效果優(yōu)化第六章導(dǎo)航的完善與優(yōu)化第七章用戶數(shù)據(jù)交互的完善與優(yōu)化模塊四動(dòng)態(tài)網(wǎng)站搭建第八章ajax前后端數(shù)據(jù)異步交互采用教材名稱、

2、 作者及版本響應(yīng)式Web前端開(kāi)發(fā)教程（活頁(yè)式），主編馮艷玲，擬由電子工業(yè)出版社出 版教學(xué)參考資料Bootstrap4 官方網(wǎng)站 . com/ jQuery 官方網(wǎng)站 . com/ Mock, js 官方網(wǎng)站 . com/教學(xué)資源及網(wǎng) 絡(luò)教學(xué)資源教 學(xué) 時(shí) 數(shù)本 學(xué) 期 授 課 時(shí) 數(shù)班次本學(xué)期教學(xué)周數(shù)本學(xué)期周學(xué)時(shí)數(shù)本學(xué)期計(jì)劃教學(xué)時(shí)數(shù)預(yù)計(jì)假日缺課時(shí)數(shù)本學(xué)期實(shí)際教學(xué)時(shí)數(shù)總時(shí)數(shù)其 中講授實(shí)臉小 結(jié) 課測(cè)臉習(xí) 題 課機(jī)動(dòng)時(shí)數(shù)深圳信息職業(yè)技術(shù)學(xué)院教師學(xué)期授課計(jì)劃教師姓名：課程名稱：授課班級(jí):周 次授課 日期授課章節(jié)及內(nèi)容提要課型（講 授/實(shí) 踐/測(cè) 試）需 用 時(shí) 數(shù)教學(xué)平 臺(tái)課外作業(yè)備 注23.3講授

3、：Boostrap+jQuery技術(shù)的意義 邊講邊做：任務(wù)4.1 Bootstrap安裝與配置 步驟1： Bootstrap下載與引用 步驟2：測(cè)試Bootstrap 步驟3： jQuery下載與引用 邊講邊做：任務(wù)4.2實(shí)現(xiàn)客戶界面首頁(yè)頁(yè) 面結(jié)構(gòu)步驟1:頁(yè)面頭部設(shè)置步驟2：配置響應(yīng)式容器和頁(yè) 腳步驟3：頁(yè)眉導(dǎo)航欄的實(shí)現(xiàn) 步驟4：站內(nèi)搜索框的實(shí)現(xiàn)講授 實(shí)踐 相結(jié) 合4智慧職 教 mooc完成課堂任 務(wù)33. 10邊講邊做：任務(wù)4.2實(shí)現(xiàn)客戶界面首頁(yè)頁(yè) 面結(jié)構(gòu)步驟5：導(dǎo)航內(nèi)容的實(shí)現(xiàn)步驟6：實(shí)現(xiàn)導(dǎo)航內(nèi)容的響應(yīng) 式折疊展開(kāi)效果邊講邊做：任務(wù)4.3實(shí)現(xiàn)首頁(yè)主體局部步驟1:添加首頁(yè)第一屏廣告步驟2：添加

4、首頁(yè)“觀鳥(niǎo)召集” 中的圖文單元邊講邊做：任務(wù)4.3實(shí)現(xiàn)首頁(yè)主體局部步驟3:首頁(yè)“觀鳥(niǎo)召集”版 塊響應(yīng)式布局步驟4： “觀鳥(niǎo)召集”版塊美 化步驟5：添加“熱門(mén)線路”版 塊中的圖文單元步驟6：為“熱門(mén)線路”添加 “瀑布流”效果講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題步驟7：為首頁(yè)第一屏廣告添 加輪播器43. 17邊講邊做：任務(wù)4.4實(shí)現(xiàn)“線路展示”頁(yè) 面步驟1：實(shí)現(xiàn)頁(yè)面主體局部響 應(yīng)式布局步驟2：實(shí)現(xiàn)線路區(qū)劃導(dǎo)航” 的響應(yīng)式布局步驟3：實(shí)現(xiàn)“線路區(qū)劃導(dǎo)航” 頁(yè)內(nèi)導(dǎo)航功能步驟4：為“線路展示”版塊 添加標(biāo)題邊講邊做：任務(wù)4.5實(shí)現(xiàn)“線路詳情”頁(yè) 面步驟

5、1：實(shí)現(xiàn)頁(yè)面中的“面包 屑”導(dǎo)航步驟2：實(shí)現(xiàn)頁(yè)面“線路參數(shù)” 版塊步驟3:實(shí)現(xiàn)頁(yè)面“選項(xiàng)卡” 版塊導(dǎo)航功能講授 實(shí)踐 相結(jié) 合4智慧職 教 mooc完成課堂任務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題53. 24邊講邊做：任務(wù)4.5實(shí)現(xiàn)“線路詳情”頁(yè) 面步驟4：實(shí)現(xiàn)“行程安排”時(shí) 間線步驟5：實(shí)現(xiàn)“用戶評(píng)價(jià)”內(nèi) 容邊講邊做：任務(wù)5.1實(shí)現(xiàn)“線路維護(hù)”頁(yè)面導(dǎo)航局部步驟1：實(shí)現(xiàn)頁(yè)面結(jié)構(gòu)步驟2：實(shí)現(xiàn)頁(yè)眉導(dǎo)航步驟3:實(shí)現(xiàn)側(cè)邊欄導(dǎo)航講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題63.31邊講邊做：任務(wù)5.2實(shí)現(xiàn)“線路維護(hù)”頁(yè) 面內(nèi)容局部步驟1:添加內(nèi)容局部頂部 步

6、驟2：添加內(nèi)容局部底部 步驟3：實(shí)現(xiàn)數(shù)據(jù)表格 步驟4：實(shí)現(xiàn)刪除確認(rèn) 邊講邊做：任務(wù)5.3 “定制線路”頁(yè)面實(shí) 現(xiàn)步驟1:實(shí)現(xiàn)“基本信息”內(nèi)講授 實(shí)踐 相結(jié) 合4智慧職 教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題容窗第一行控件步褒2：實(shí)現(xiàn)“基本信息”內(nèi) 容窗第二行控件74.7邊講邊做：任務(wù)5.3 “定制線路”頁(yè)面實(shí) 現(xiàn)步躲3：實(shí)現(xiàn)添加“行程”內(nèi) 容窗步鞭4：實(shí)現(xiàn)添加“團(tuán)費(fèi)”內(nèi) 容窗步驟5：實(shí)現(xiàn)上傳“圖片”內(nèi) 容窗邊講邊做：任務(wù)6.1客戶界面導(dǎo)航欄“聯(lián) 系我們”彈出二維碼步躲1： jQuery編程起步步驟2:為“聯(lián)系我們”添加二維碼圖片彈出框任務(wù)6.2客戶界面菜單活躍狀 態(tài)跟蹤

7、步驟1：設(shè)置導(dǎo)航目標(biāo)步歌2：確定當(dāng)前頁(yè)面步驟3：動(dòng)態(tài)設(shè)置導(dǎo)航條目 “活躍”狀態(tài)講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題84. 14邊講邊做：任務(wù)6.3管理系統(tǒng)“側(cè)邊欄導(dǎo) 航”中橫向展開(kāi)子菜單實(shí)現(xiàn) 步驟1:添加側(cè)邊欄”資源管理”導(dǎo)航模塊步瞬2：橫向展開(kāi)的子菜單內(nèi) 容制作步驟3：采用彈出框?qū)崿F(xiàn)摘向 展開(kāi)子菜單任務(wù)6.4管理系統(tǒng)側(cè)邊導(dǎo)航欄 活躍狀態(tài)跟蹤步躲1:獲取當(dāng)前翻開(kāi)的文件 所在的子目錄步驟2：設(shè)置活躍狀態(tài)的側(cè)邊 欄導(dǎo)航子模塊為“展開(kāi)”步鞭3：網(wǎng)頁(yè)加載時(shí)動(dòng)態(tài)設(shè)置“活躍”導(dǎo)航子模塊圖標(biāo)步驟4：用戶切換導(dǎo)航子模塊 時(shí)切換圖標(biāo)邊講邊做：任務(wù)7.1定制線

8、路”選項(xiàng)卡的 動(dòng)態(tài)啟用講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題步驟1： “行程”選項(xiàng)的動(dòng)態(tài) 啟用步驟2：任意選項(xiàng)內(nèi)容的動(dòng)態(tài) 啟用任務(wù)7.2 “行程”編輯條目數(shù) 的動(dòng)態(tài)生成步驟1:獲取行程天數(shù)步驟2:動(dòng)態(tài)添加日程編輯卡 片94.21邊講邊做：任務(wù)7.2 “行程”編輯條目數(shù) 的動(dòng)態(tài)生成步驟3：動(dòng)態(tài)設(shè)置日程編輯卡 片的標(biāo)題和id屬性值（方 法1）步驟4：動(dòng)態(tài)設(shè)置日程編輯卡 片的標(biāo)題和id屬性值（方 法2）步驟5：設(shè)置折疊面板的狀態(tài)、 添加圖標(biāo)邊講邊做：任務(wù)7.3 “基本信息”用戶輸 入合法性檢查步驟1:設(shè)置表單控件驗(yàn)證模 式步驟2： “交通方式”驗(yàn)證

9、的 實(shí)現(xiàn)步驟3:點(diǎn)擊“下一步”按鈕 需通過(guò)驗(yàn)證才啟用下一個(gè) 選項(xiàng)講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題104.28邊講邊做：任務(wù)7.4添加、刪除、撤銷刪 除“團(tuán)次”編輯條目的實(shí)現(xiàn) 步驟1:添加“團(tuán)次”編輯條目步驟2：全選與取消全選的實(shí) 現(xiàn)步驟3：刪除編輯條目與撤銷 刪除邊講邊做：任務(wù)7.5團(tuán)費(fèi)編輯條目恢復(fù)及 警告框動(dòng)畫(huà)效果制作步驟1:記錄刪除前被刪除條 目的位置步驟2：以淡出的動(dòng)畫(huà)效果原 位恢復(fù)被刪除的條目講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題步驟3：警告框“飛入”動(dòng)畫(huà) 的實(shí)現(xiàn)步驟4：自定義

10、警告框的關(guān)閉115. 12邊講邊做：講授：1.異步訪問(wèn)與同步訪問(wèn)方式的 區(qū)別與各自的特點(diǎn)2,XmlHttpRequest 對(duì)象3.Ajax生命周期4JS ajax案例講解任務(wù)8.1管理員界面?zhèn)冗厵趯?dǎo) 航的異步加載步驟1：將側(cè)邊欄導(dǎo)航單獨(dú)形 成一個(gè)文件步驟2：異步加載側(cè)邊欄導(dǎo)航 文件講授：的安裝數(shù)據(jù)集的設(shè)置常用方法 邊講邊做：任務(wù)8.2管理員界面?zhèn)冗厵趯?dǎo) 航的異步加載步驟1：使用mock.js生成模擬 酒店數(shù)據(jù)步驟2：編寫(xiě)異步獲取酒店信 息的ajax請(qǐng)求講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問(wèn)題125. 12邊講邊做：任務(wù)8.2管理員界面?zhèn)冗厵趯?dǎo) 航的異步加載步驟3：配置模擬后端路由，成功加載酒店數(shù)據(jù)步驟4：顯示提示信息邊講邊做：任務(wù)8.3酒店信息的分頁(yè)顯示步驟1:實(shí)現(xiàn)酒店信息分頁(yè)頁(yè) 碼的動(dòng)態(tài)添加步驟2：獲取指定頁(yè)碼的數(shù)據(jù)步驟3：實(shí)現(xiàn)分頁(yè)顯示功能講授 實(shí)踐 相結(jié) 合4智慧職教 mooc完成課堂任務(wù)135. 19邊講邊做：任務(wù)8.4修改酒店信息步驟1：實(shí)現(xiàn)修改信息模態(tài)框步驟2：將指定記錄的信息填 寫(xiě)