Web前端開發(fā)技術(shù)課程大綱 課程教學(xué)大綱

《Web前端開發(fā)技術(shù)》課程教學(xué)大綱一、課程簡介課程中文名Web前端開發(fā)技術(shù)課程英文名WebFront-endDevelopmentTechnology雙語授課□是?否課程代碼1011216710114093課程學(xué)分4總學(xué)時數(shù)64（含實踐32）課程類別□通識教育課程□公共基礎(chǔ)課程?專業(yè)教育課程□綜合實踐課程□教師教育課程課程性質(zhì)?必修□選修□其他課程形態(tài)□線上?線下□線上線下混合式□社會實踐□虛擬仿真實驗教學(xué)考核方式□閉卷?開卷□課程論文?課程作品□匯報展示□報告?課堂表現(xiàn)□階段性測試?平時作業(yè)□其他（可多選）開課學(xué)院大數(shù)據(jù)與智能工程學(xué)院開課系(教研室)計算機(jī)科學(xué)與技術(shù)面向?qū)I(yè)計算機(jī)科學(xué)與技術(shù)、物聯(lián)網(wǎng)工程、數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)專業(yè)開課學(xué)期第3學(xué)期先修課程計算機(jī)基礎(chǔ)后續(xù)課程服務(wù)器端開發(fā)技術(shù)、移動應(yīng)用程序設(shè)計選用教材溫謙.HTML5+CSS3+JavaScriptWeb開發(fā)案例教程[M].北京:人民郵電出版社,2022.參考書目黃珍JavaScript+JQuery程序討論.[M].北京:人民郵電出版社,2017溫謙Vue.js+BootstrapWeb開發(fā)案例教程..[M].北京:人民郵電出版社,2022課程資源/course/BFU-1003382003?from=searchPage&outVendor=zw_mooc_pcssjg_課程簡介Web系統(tǒng)是基于網(wǎng)站形式的具有一定功能的系統(tǒng)，以網(wǎng)頁形式呈現(xiàn)給用戶的部分是前端。Web前端開發(fā)已經(jīng)成為最為重要的技術(shù)之一，人才需求量巨大。課程內(nèi)容涵蓋Web系統(tǒng)前端開發(fā)技術(shù)的HTML5、CSS3、JS等組成部分，其中HTML決定網(wǎng)頁的結(jié)構(gòu)，CSS決定網(wǎng)頁的樣式，JS決定網(wǎng)頁的交互。課程采用最新技術(shù)標(biāo)準(zhǔn)與應(yīng)用。課程包括知識點、知識型案例和綜合案例。通過學(xué)習(xí)使學(xué)生掌握Web前端規(guī)劃與設(shè)計的基本理論和基本知識，具備基于Web的前端設(shè)計的基本能力，能夠從事Web、移動等方面的軟件前端開發(fā)工作，富有社會責(zé)任感，具有創(chuàng)新意識和創(chuàng)業(yè)精神的高素質(zhì)應(yīng)用型專門人才。二、課程目標(biāo)表2-1課程目標(biāo)序號具體課程目標(biāo)課程目標(biāo)1明晰和運(yùn)用web前端開發(fā)中HTML5、CSS以及JavaScript的基本知識和應(yīng)用技術(shù)，熟練使用web前端應(yīng)用開發(fā)主流開發(fā)平臺環(huán)境配置和使用技術(shù)，能夠復(fù)述和辨析web前端應(yīng)用開發(fā)的基礎(chǔ)概念，能夠運(yùn)用web前端應(yīng)用開發(fā)基本結(jié)構(gòu)與流程，能熟練運(yùn)用這些語言和相關(guān)技術(shù)進(jìn)行Web前端頁面設(shè)計。課程目標(biāo)2基于用戶的實際需求，能夠進(jìn)行正確的需求分析，策劃和設(shè)計合理的Web前端應(yīng)用解決方案；能夠搜集、整理web系統(tǒng)測試數(shù)據(jù)，能夠熟練運(yùn)用測試方法；具備web系統(tǒng)發(fā)布和維護(hù)能力；能夠結(jié)合具體的應(yīng)用場景，進(jìn)行可用性，可訪問性，運(yùn)行性能等方面的分析和優(yōu)化；能夠撰寫項目設(shè)計文檔。課程目標(biāo)3具備自主學(xué)習(xí)意識，跟蹤web前端開發(fā)發(fā)展趨勢，及時掌握Web前端開發(fā)新技術(shù)；在解決比較復(fù)雜的問題時，具有把握全局、統(tǒng)籌規(guī)劃的能力，具有團(tuán)隊意識、較強(qiáng)的溝通、協(xié)調(diào)和創(chuàng)新思維能力；具有認(rèn)真務(wù)實、誠實守信的職業(yè)道德；及時掌握國家相關(guān)方面的科技戰(zhàn)略需求，樹立強(qiáng)烈的愛國主義使命感與責(zé)任心。表2-2課程目標(biāo)與畢業(yè)要求對應(yīng)關(guān)系畢業(yè)要求指標(biāo)點課程目標(biāo)畢業(yè)要求3：能夠針對大數(shù)據(jù)應(yīng)用領(lǐng)域的復(fù)雜工程問題，綜合應(yīng)用數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)基本原理和方法，設(shè)計、開發(fā)滿足特定應(yīng)用需求的系統(tǒng)方案，并能夠在設(shè)計環(huán)節(jié)中體現(xiàn)創(chuàng)新意識，考慮社會、健康、安全、法律、文化以及環(huán)境等多維度協(xié)同發(fā)展因素。【M】3.3能夠綜合考慮社會、健康、安全、法律、文化以及環(huán)境因素，并能夠進(jìn)行系統(tǒng)測試、維護(hù)或優(yōu)化升級。課程目標(biāo)1畢業(yè)要求5：能夠針對大數(shù)據(jù)應(yīng)用領(lǐng)域的復(fù)雜工程問題，選擇和使用恰當(dāng)?shù)募夹g(shù)、資源和現(xiàn)代工程工具，進(jìn)行信息表達(dá)、建模、設(shè)計、模擬、驗證，并能夠在實踐中了解這些工具使用的局限性。【H】5.1了解大數(shù)據(jù)應(yīng)用領(lǐng)域常用的軟硬件平臺、數(shù)據(jù)處理工具、現(xiàn)代工程工具和大數(shù)據(jù)框架的使用原理和方法，并理解其局限性。課程目標(biāo)2畢業(yè)要求3：具有自主學(xué)習(xí)和終身學(xué)習(xí)的意識，具備在科學(xué)研究與技術(shù)應(yīng)用過程中不斷學(xué)習(xí)和適應(yīng)發(fā)展的能力?！綥】4.2能針對個人或職業(yè)發(fā)展規(guī)劃，在復(fù)雜工程問題的解決方案中體現(xiàn)出一定的自主學(xué)習(xí)和終身學(xué)習(xí)的能力，不斷適應(yīng)大數(shù)據(jù)技術(shù)的發(fā)展和社會需求。課程目標(biāo)3三、課程學(xué)習(xí)內(nèi)容與方法（一）理論學(xué)習(xí)內(nèi)容及要求表3-1課程目標(biāo)、學(xué)習(xí)內(nèi)容和教學(xué)方法對應(yīng)關(guān)系序號課程模塊學(xué)習(xí)內(nèi)容學(xué)習(xí)任務(wù)課程目標(biāo)學(xué)習(xí)重點難點教學(xué)方法學(xué)時1HTML5語言1.網(wǎng)頁與HTML語言基本知識1.課堂學(xué)習(xí)：HTML發(fā)展歷史、網(wǎng)頁結(jié)構(gòu)、網(wǎng)站網(wǎng)頁開發(fā)流程、HTML常用標(biāo)記的使用方法、使用常用標(biāo)記制作網(wǎng)頁。2.拓展學(xué)習(xí)：分析優(yōu)秀網(wǎng)頁的HTML編碼。3.個人作業(yè)：使用常用標(biāo)記制作網(wǎng)頁。課程目標(biāo)1重點：網(wǎng)站網(wǎng)頁開發(fā)流程文本標(biāo)記、多媒體標(biāo)記、超鏈接標(biāo)記、列表標(biāo)記、結(jié)構(gòu)標(biāo)記表格標(biāo)記表單標(biāo)記難點：表格標(biāo)記表單標(biāo)記1.講授法：引導(dǎo)學(xué)生理解網(wǎng)頁結(jié)構(gòu)、HTML常用標(biāo)記的使用方法、編寫網(wǎng)頁的技巧、網(wǎng)站網(wǎng)頁的開發(fā)流程2.案例教學(xué)：深入理解和掌握使用常用標(biāo)記設(shè)計和實現(xiàn)網(wǎng)頁。92.Web標(biāo)準(zhǔn)：結(jié)構(gòu)、表現(xiàn)與行為課程目標(biāo)13.初步理解網(wǎng)站網(wǎng)頁開發(fā)流程課程目標(biāo)14.文本標(biāo)記課程目標(biāo)1、課程目標(biāo)25.多媒體標(biāo)記課程目標(biāo)1、課程目標(biāo)26.超鏈接標(biāo)記課程目標(biāo)1、課程目標(biāo)27.列表標(biāo)記課程目標(biāo)1、課程目標(biāo)28.結(jié)構(gòu)標(biāo)記課程目標(biāo)1、課程目標(biāo)29.表格標(biāo)記課程目標(biāo)1、課程目標(biāo)210.表單標(biāo)記課程目標(biāo)1、課程目標(biāo)22CSS3語言1.CSS標(biāo)準(zhǔn)與規(guī)則1.課堂學(xué)習(xí)：CSS選擇器、格式化文本、多媒體、表格、表單、頁面布局。2.拓展學(xué)習(xí)：分析優(yōu)秀網(wǎng)頁的CSS編碼。3.個人作業(yè)：使用CSS格式化網(wǎng)頁內(nèi)容。課程目標(biāo)1重點：選擇器文本樣式設(shè)置圖片樣式設(shè)置DIV+CSS網(wǎng)頁布局難點：選擇器DIV+CSS網(wǎng)頁布局1.講授法：引導(dǎo)學(xué)生理解CSS格式化網(wǎng)頁內(nèi)容方法、網(wǎng)頁布局方法。2.案例教學(xué)：深入理解和理解CSS使用技術(shù)和網(wǎng)頁布局。72.CSS選擇器課程目標(biāo)1、課程目標(biāo)23.CSS設(shè)置文本樣式課程目標(biāo)1、課程目標(biāo)24.CSS設(shè)置圖片效果課程目標(biāo)1、課程目標(biāo)25.盒子模型課程目標(biāo)1、課程目標(biāo)26.用CSS設(shè)置常用元素樣式課程目標(biāo)1、課程目標(biāo)27.DIV+CSS網(wǎng)頁布局課程目標(biāo)1、課程目標(biāo)23JavaScript語言1.JavaScript簡介1.課堂學(xué)習(xí)：JavaScript變量、數(shù)據(jù)類型、賦值語句、表達(dá)式、順序結(jié)構(gòu)、選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)、函數(shù)、異常處理、常用內(nèi)置對象、事件處理、BOM對象、操作DOM節(jié)點、AJAX技術(shù)。2.拓展學(xué)習(xí)：線上學(xué)習(xí)。3.個人作業(yè)：1）使用JavaScript基礎(chǔ)語法實現(xiàn)常用算法。2）使用函數(shù)實現(xiàn)模塊化程序設(shè)計。3）使用事件處理技術(shù)實現(xiàn)網(wǎng)頁交互。4）使用JavaScript對象操作網(wǎng)頁中DOM節(jié)點，實現(xiàn)節(jié)點的獲取、增加、刪除、修改等。課程目標(biāo)1重點：變量與數(shù)據(jù)類型表達(dá)式分支結(jié)構(gòu)循環(huán)結(jié)構(gòu)函數(shù)常用內(nèi)置對象事件處理操作DOM節(jié)點難點：分支結(jié)構(gòu)和循環(huán)結(jié)構(gòu)實現(xiàn)算法函數(shù)實現(xiàn)程序模塊化事件處理操作網(wǎng)頁DOM節(jié)點1.講授法：引導(dǎo)學(xué)生理解JavaScript基本語法、掌握使用基本語法實現(xiàn)基本算法、使用函數(shù)實現(xiàn)程序模塊化、使用事件處理技術(shù)實現(xiàn)網(wǎng)頁交互、操作網(wǎng)頁節(jié)點。2.案例教學(xué)：深入理解和掌握J(rèn)avaScript完成客戶端操作。162.變量與數(shù)據(jù)類型課程目標(biāo)13.賦值語句與表達(dá)式課程目標(biāo)1、課程目標(biāo)24.順序結(jié)構(gòu)課程目標(biāo)1、課程目標(biāo)25.分支結(jié)構(gòu)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)36.循環(huán)結(jié)構(gòu)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)37.函數(shù)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)38.異常處理課程目標(biāo)1、課程目標(biāo)29.Math、Array、Date、String等常用對象課程目標(biāo)1、課程目標(biāo)210.事件處理課程目標(biāo)1、課程目標(biāo)211.BOM對象課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)312.操作DOM節(jié)點課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)313.AJAX技術(shù)課程目標(biāo)1、課程目標(biāo)2合計32實驗學(xué)習(xí)內(nèi)容及要求表3-2課程目標(biāo)、學(xué)習(xí)內(nèi)容和教學(xué)方法對應(yīng)關(guān)系序號項目名稱項目來源教學(xué)目標(biāo)（觀測點、重難點）學(xué)時數(shù)項目類型要求每組人數(shù)教學(xué)方法課程目標(biāo)1實驗1：HTML基本標(biāo)記制作網(wǎng)頁教師開發(fā)1、使用文本標(biāo)記、多媒體標(biāo)記等實現(xiàn)網(wǎng)頁內(nèi)容（重點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)32、使用超鏈接標(biāo)記實現(xiàn)超鏈接（重點）3、使用列表、結(jié)構(gòu)標(biāo)記實現(xiàn)網(wǎng)頁內(nèi)容（重點）2實驗2：表格制作教師開發(fā)使用表格標(biāo)記實現(xiàn)多樣化的表格（重點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)33實驗3：表單制作教師開發(fā)使用表單標(biāo)記實現(xiàn)常用結(jié)構(gòu)表單（重點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)34實驗4：CSS格式化網(wǎng)頁教師開發(fā)使用CSS格式化文本、多媒體、表格、表單（重點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)35實驗5：CSS布局教師開發(fā)使用CSS+DIV實現(xiàn)頁面布局（重難點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)36實驗6：JavaScript語言基礎(chǔ)語法教師開發(fā)1、使用分支和循環(huán)實現(xiàn)常用算法（重難點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)課程目標(biāo)1、課程目標(biāo)2、課程目標(biāo)32、使用系統(tǒng)內(nèi)置對象實現(xiàn)日期應(yīng)用、數(shù)組應(yīng)用和字符串處理（重點）3、使用函數(shù)實現(xiàn)程序模塊化（重難點）7實驗7：JavaScript事件處理技術(shù)教師開發(fā)使用事件處理技術(shù)實現(xiàn)常用事件處理（重難點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)1、2、38實驗8：JavaScript文檔對象操作教師開發(fā)實現(xiàn)對文檔節(jié)點的獲取、修改、增加、刪除、替換等功能（重難點）4驗證性、設(shè)計研究必做1課堂講授、實驗指導(dǎo)1、2、332四、課程考核（一）考核內(nèi)容與考核方式表4-1課程目標(biāo)、考核內(nèi)容與考核方式對應(yīng)關(guān)系課程目標(biāo)考核內(nèi)容所屬學(xué)習(xí)模塊/項目考核占比考核方式課程目標(biāo)11.HTML常用標(biāo)記實現(xiàn)網(wǎng)頁結(jié)構(gòu)1/1、2、340%課外作業(yè)實驗項目課堂討論隨堂練習(xí)期末考試2.CSS格式化文本、圖片、表格表單、頁面布局2/4、53.JavaScript實現(xiàn)網(wǎng)頁操作和交互3/6、7、84.掌握網(wǎng)站和網(wǎng)頁開發(fā)流程1-3/1-8課程目標(biāo)21.根據(jù)客戶要求進(jìn)行正確的需求分析項目1-850%課外作業(yè)實驗項目期末考試2.根據(jù)需求分析設(shè)計網(wǎng)站和網(wǎng)頁功能規(guī)劃3.構(gòu)建美觀、易于上手的網(wǎng)頁4.搜集測試數(shù)據(jù)，進(jìn)行測試課程目標(biāo)31.主動學(xué)習(xí)，及時掌握最新技術(shù)學(xué)習(xí)模塊1-310%課外作業(yè)實驗項目課堂討論2.較強(qiáng)的溝通能力和團(tuán)隊協(xié)作能力項目1-83.創(chuàng)新意識項目1-84.職業(yè)道德，版權(quán)意識項目1-8表4-2課程目標(biāo)與考核方式矩陣關(guān)系課程目標(biāo)考核方式考核占比期末考試成績比例65%35%實驗成績比例40%平時作業(yè)成績比例30%課堂表現(xiàn)成績比例30%課程目標(biāo)140%35%45%40%40%=40%*65%+（35%*35%+45%*30%+40%*30%）*35%課程目標(biāo)250%55%45%50%50%=50%*65%+（40%*55%+45%*30%+50%*30%）*35%課程目標(biāo)310%10%10%10%10%==10%*65%+（40%*10%+10%*30%+10%*30%）*35%（二）成績評定1.平時成績評定（35%）（1）課堂表現(xiàn)（30%）：理論學(xué)習(xí)課堂利用雨課堂或?qū)W習(xí)平臺參與答題、隨堂練習(xí)、課程小組討論等課程活動的參與情況給分。實驗學(xué)習(xí)課堂，實驗課是否遵守機(jī)房管理規(guī)范、實驗室項目是否按時提交等情況進(jìn)行評分。（2）作業(yè)完成情況（30%）：平時作業(yè)完成情況，主要評價學(xué)習(xí)按時使用相關(guān)知識完成作業(yè)能力。（3）實踐教學(xué)（40%）：實驗課程的實驗項目完成情況，主要評價學(xué)生分析問題、解決問題的能力。2.期末成績評定（65%）期末考核采用大作業(yè)+答辯的方式，主要考察學(xué)生對基本概念的理解和基本知識的應(yīng)用、分析問題、算法設(shè)計、頁面設(shè)計、編寫程序?qū)崿F(xiàn)網(wǎng)頁的能力等。方式為開卷考試。3.總成績評定總成績（100%）=平時成績（35%）+期末成績（65%）。（三）評分標(biāo)準(zhǔn)表5評分標(biāo)準(zhǔn)考核項目評分標(biāo)準(zhǔn)優(yōu)秀(100>x≥90)良好(90>x≥80)中等(80>x≥70)及格(70>x≥60)不及格(x<60)期末大作業(yè)全部正確完成作業(yè)內(nèi)容頁面美觀、代碼規(guī)范、易讀性強(qiáng)正確完成大部分作業(yè)內(nèi)容頁面比較美觀、代碼比較規(guī)范、有較好的易讀性基本上完成了大作業(yè)的內(nèi)容頁面美觀度一般、代碼基