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

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

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

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

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

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

6、驟2：添加內(nèi)容局部底部 步驟3：實現(xiàn)數(shù)據(jù)表格 步驟4：實現(xiàn)刪除確認 邊講邊做：任務(wù)5.3 “定制線路”頁面實 現(xiàn)步驟1:實現(xiàn)“基本信息”內(nèi)講授 實踐 相結(jié) 合4智慧職 教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問題容窗第一行控件步褒2：實現(xiàn)“基本信息”內(nèi) 容窗第二行控件74.7邊講邊做：任務(wù)5.3 “定制線路”頁面實 現(xiàn)步躲3：實現(xiàn)添加“行程”內(nèi) 容窗步鞭4：實現(xiàn)添加“團費”內(nèi) 容窗步驟5：實現(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)航目標步歌2：確定當前頁面步驟3：動態(tài)設(shè)置導(dǎo)航條目 “活躍”狀態(tài)講授 實踐 相結(jié) 合4智慧職教 mooc完成課堂任 務(wù)講解上一 節(jié)課課堂 任務(wù)出現(xiàn) 的問題84. 14邊講邊做：任務(wù)6.3管理系統(tǒng)“側(cè)邊欄導(dǎo) 航”中橫向展開子菜單實現(xiàn) 步驟1:添加側(cè)邊欄”資源管理”導(dǎo)航模塊步瞬2：橫向展開的子菜單內(nèi) 容制作步驟3：采用彈出框?qū)崿F(xiàn)摘向 展開子菜單任務(wù)6.4管理系統(tǒng)側(cè)邊導(dǎo)航欄 活躍狀態(tài)跟蹤步躲1:獲取當前翻開的文件 所在的子目錄步驟2：設(shè)置活躍狀態(tài)的側(cè)邊 欄導(dǎo)航子模塊為“展開”步鞭3：網(wǎng)頁加載時動態(tài)設(shè)置“活躍”導(dǎo)航子模塊圖標步驟4：用戶切換導(dǎo)航子模塊 時切換圖標邊講邊做：任務(wù)7.1定制線

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

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

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