職業(yè)技術(shù)學(xué)院《Web數(shù)據(jù)交互技術(shù)及響應(yīng)式開發(fā)技術(shù)》教學(xué)大綱

6/6《Web數(shù)據(jù)交互技術(shù)及響應(yīng)式開發(fā)技術(shù)》教學(xué)大綱課程基本信息課程代碼課程名稱（中/英）Web數(shù)據(jù)交互技術(shù)及響應(yīng)式開發(fā)技術(shù)WebDataInteractionandResponseDevelopmentTechnology開課學(xué)院智能制造與信息工程學(xué)院適用專業(yè)軟件技術(shù)學(xué)分3分總學(xué)時(shí)48學(xué)時(shí)理論學(xué)時(shí)24實(shí)踐學(xué)時(shí)24課程性質(zhì)必修課程類別專業(yè)課考核方式考查先修課程Web網(wǎng)頁制作基礎(chǔ)、JavaScript程序設(shè)計(jì)、輕量級前端框架選用教材《Web前端開發(fā)中級（下冊）》，工業(yè)和信息化部教育與考試中心主編，電子工業(yè)出版社，2019.8網(wǎng)絡(luò)課程無課程簡介本課程是軟件技術(shù)專業(yè)學(xué)生的專業(yè)必修課程。課程教學(xué)目標(biāo)是通過本課程的學(xué)習(xí)，使學(xué)生能綜合運(yùn)用Ajax和Bootstrap進(jìn)行Web前端開發(fā)，能熟練使用Bootstrap框架，能正確解決Web前端開發(fā)過程中的問題。本課程要求學(xué)生理解并學(xué)會(huì)Web數(shù)據(jù)交互技術(shù)、Ajax工作原理、頁面性能優(yōu)化技術(shù)、Socket通信、Bootstrap響應(yīng)式頁面開發(fā)技術(shù)等，掌握利用Ajax和Bootstrap進(jìn)行Web前端開發(fā)的方法和技巧。本課程將依據(jù)應(yīng)用型人才培養(yǎng)定位，在教學(xué)中融入課程思政，實(shí)現(xiàn)立德樹人的人才培養(yǎng)目標(biāo)。課程目標(biāo)課程目標(biāo)1：課程思政目標(biāo)——將課程思政元素融入網(wǎng)頁內(nèi)容中，在網(wǎng)頁上通過文本、圖片、動(dòng)畫等元素展示與課程思政有關(guān)的信息；引導(dǎo)學(xué)生形成積極向上的世界觀、價(jià)值觀和人生觀，并樹立版權(quán)意識(shí)。課程目標(biāo)2：web前端開發(fā)能力提升——提高學(xué)生的Web數(shù)據(jù)交互技術(shù)及響應(yīng)式開發(fā)技術(shù)能力，具體要求如下：1）Web數(shù)據(jù)交互技術(shù)：能創(chuàng)建并運(yùn)行Web前后端數(shù)據(jù)交互頁面，能使用JavaScript及jQuery操作iframe，能開發(fā)AJAX應(yīng)用實(shí)例。2）響應(yīng)式開發(fā)技術(shù)：熟練掌握Bootstrap框架中的柵格布局及各種組件的使用方法和技巧，能利用Bootstrap框架搭建簡單頁面。課程目標(biāo)3：綜合素養(yǎng)培養(yǎng)——培養(yǎng)思辨能力，理解web前端開發(fā)技術(shù)性，具備一定的代碼優(yōu)化設(shè)計(jì)能力。堅(jiān)定學(xué)生的民族自信，會(huì)用國產(chǎn)軟件HBuilder設(shè)計(jì)開發(fā)Web數(shù)據(jù)交互及響應(yīng)式網(wǎng)頁作品。課程內(nèi)容與教學(xué)要求（一）Web數(shù)據(jù)交互技術(shù)概述1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Web的概念（2）了解Web數(shù)據(jù)交互技術(shù)，包括AJAX、iframe、WebSocket等2.能力培養(yǎng)要求（1）能理解Web前后端數(shù)據(jù)交互的原理（2）能創(chuàng)建并運(yùn)行Web前后端數(shù)據(jù)交互頁面（二）HTTP概述1.知識(shí)點(diǎn)和教學(xué)要求（1）了解HTTP的概念、消息結(jié)構(gòu)及主要特點(diǎn)（2）熟悉HTTP的通信過程（3）熟悉HTTP常見的狀態(tài)碼2.能力培養(yǎng)要求（1）能識(shí)別HTTP常見的狀態(tài)碼（2）能根據(jù)HTTP狀態(tài)碼給出對應(yīng)解決方案（三）AJAX與iframe1.知識(shí)點(diǎn)和教學(xué)要求（1）了解AJAX異步通信的工作原理（2）了解iframe異步通信的工作原理2.能力培養(yǎng)要求（1）能使用JavaScript及jQuery操作iframe（2）能開發(fā)AJAX應(yīng)用實(shí)例（四）頁面性能優(yōu)化技術(shù)1.知識(shí)點(diǎn)和教學(xué)要求（1）熟悉Cookie的創(chuàng)建、使用和銷毀的方法（2）掌握頁面性能優(yōu)化的方法2.能力培養(yǎng)要求（1）能創(chuàng)建、使用和銷毀Cookie（2）能進(jìn)行頁面性能優(yōu)化（五）Socket通信1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Socket通信的概念、機(jī)制及過程（2）掌握使用Socket開發(fā)聊天室功能的方法2.能力培養(yǎng)要求（1）能使用PHP實(shí)現(xiàn)Socket服務(wù)端（2）能使用jQuery實(shí)現(xiàn)Socket客戶端（3）能測試聊天室功能（六）Bootstrap概述1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Bootstrap的構(gòu)成、功能及開發(fā)工具（2）掌握Bootstrap安裝和配置的方法2.能力培養(yǎng)要求（1）能下載、安裝和配置Bootstrap（2）能利用Bootstrap框架搭建簡單頁面（七）Bootstrap的基本架構(gòu)1.知識(shí)點(diǎn)和教學(xué)要求（1）了解響應(yīng)式開發(fā)的概念、流程及布局結(jié)構(gòu)（2）熟悉Bootstrap的柵格布局2.能力培養(yǎng)要求（1）能使用Bootstrap實(shí)現(xiàn)柵格基本布局（2）能使用Bootstrap實(shí)現(xiàn)水平布局和垂直布局（3）能使用Bootstrap實(shí)現(xiàn)柵格排序和偏移（八）Bootstrap的樣式1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Bootstrap的作用（2）熟悉常見的Bootstrap樣式，包括媒體對象、文本、列表、表格、圖片、表單、輔助樣式等2.能力培養(yǎng)要求（1）能使用Bootstrap對媒體對象、文本進(jìn)行設(shè)置（2）能使用Bootstrap對列表、表格進(jìn)行設(shè)置（3）能使用Bootstrap對圖片、表單進(jìn)行設(shè)置（4）能使用Bootstrap對輔助演示進(jìn)行設(shè)置，如背景色、文本顏色等（九）Bootstrap的組件1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Bootstrap的組件（2）熟悉常見的Bootstrap組件，包括按鈕、下拉菜單、按鈕組、輸入框組、導(dǎo)航、標(biāo)簽、徽章、縮略圖、警告框、進(jìn)度條、版式、字體圖標(biāo)等2.能力培養(yǎng)要求（1）能使用Bootstrap對按鈕、下拉菜單、按鈕組進(jìn)行設(shè)置（2）能使用Bootstrap對輸入框組、導(dǎo)航、標(biāo)簽、徽章進(jìn)行設(shè)置（3）能使用Bootstrap對縮略圖、警告框、進(jìn)度條進(jìn)行設(shè)置（4）能使用Bootstrap對版式、字體圖標(biāo)進(jìn)行（十）Sass概述1.知識(shí)點(diǎn)和教學(xué)要求（1）了解Sass的基本概念（2）熟悉Sass的安裝和配置方法（3）掌握Sass的基礎(chǔ)語法2.能力培養(yǎng)要求（1）能下載、安裝和配置Sass（2）能利用Sass進(jìn)行簡單的網(wǎng)頁開發(fā)（十一）Bootstrap響應(yīng)式開發(fā)案例1.知識(shí)點(diǎn)和教學(xué)要求（1）熟悉Bootstrap響應(yīng)式網(wǎng)站開發(fā)的一般流程（2）掌握Bootstrap響應(yīng)式網(wǎng)站開發(fā)的方法2.能力培養(yǎng)要求（1）能使用Bootstrap框架進(jìn)行項(xiàng)目搭建及頁面初始化（2）能利用Bootstrap框架進(jìn)行后臺(tái)模板布局（3）能利用Bootstrap框架進(jìn)行項(xiàng)目首頁開發(fā)（4）能利用Bootstrap框架進(jìn)行用戶中心和提醒事項(xiàng)功能開發(fā)（5）能利用Bootstrap框架進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)面板功能開發(fā)（6）能利用Bootstrap框架進(jìn)行動(dòng)畫效果開發(fā)五、學(xué)時(shí)分配、教學(xué)方法及支撐課程目標(biāo)序號(hào)教學(xué)單元名稱學(xué)時(shí)主要教學(xué)方法支撐的課程目標(biāo)1Web數(shù)據(jù)交互技術(shù)概述1集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，32HTTP概述1集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，33AJAX與iframe2集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，34頁面性能優(yōu)化技術(shù)2集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，35Socket通信3集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，36Bootstrap概述3集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，37Bootstrap的基本架構(gòu)4集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，38Bootstrap的樣式6集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，39Bootstrap的組件10集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，310Sass概述4集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，311Bootstrap響應(yīng)式開發(fā)案例8集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，312復(fù)習(xí)、考試4集中講授、實(shí)驗(yàn)操作課程目標(biāo)1，2，3合計(jì)48六、課程考核（一）考核要求1.本課程為考查科目，成績評定采用百分制。試卷命題依據(jù)教學(xué)大綱要求，注重對學(xué)生實(shí)踐操作技能的考核，命題符合教學(xué)大綱中規(guī)定的教學(xué)內(nèi)容和教學(xué)要求。2.重點(diǎn)考核范圍：課內(nèi)部分考核內(nèi)容包含教材里的教學(xué)單元內(nèi)容，重點(diǎn)考核Bootstrap組件及AJAX典型應(yīng)用。3.考核目標(biāo)：本課程注重學(xué)生平時(shí)的學(xué)習(xí)投入、綜合技能訓(xùn)練和積累，涉及學(xué)生對Web數(shù)據(jù)交互技術(shù)及響應(yīng)式網(wǎng)頁開發(fā)技術(shù)的理解、基于Bootstrap框架的網(wǎng)頁搭建及AJAX數(shù)據(jù)交互網(wǎng)頁功能的實(shí)現(xiàn)。4.成績評定方法：總評成績由平時(shí)表現(xiàn)（占60%）和考試成績（占40%）兩部分構(gòu)成。平時(shí)成績包括考勤（占20%），課堂作業(yè)（占40%）；考試成績?yōu)槠谀┛荚嚦煽儯ㄕ?0%）。（二）成績評定序號(hào)考核形式考核方法考核權(quán)重考核對應(yīng)的

課程目標(biāo)備注1考勤出勤次數(shù)6%課程目標(biāo)2，32課堂表現(xiàn)課堂參與9%課程目標(biāo)2，33平時(shí)作業(yè)每次課課堂練習(xí)45%課程目標(biāo)1，2，34期末考試開卷上機(jī)考試40%課程目標(biāo)2，3總評成績各項(xiàng)考核按權(quán)重相加100%課程目標(biāo)1，2，3說明：學(xué)生不提交或被認(rèn)定為抄襲者，以0分計(jì)算。參考書目及學(xué)習(xí)資料1.《JavaScript+jQuery交互式Web前端開發(fā)》黑馬程序員，人民郵電出版社，20202.《Bootstrap響應(yīng)式Web開發(fā)》，黑馬程序員，人民郵電出版社，2021八、大綱說明本課程注重學(xué)生實(shí)踐技能培養(yǎng)，教學(xué)過程