Web前端開發(fā)（HTML5+CSS3+JavaScript） 教學(xué)大綱

XXX學(xué)院《Web前端基礎(chǔ)技術(shù)》課程教學(xué)大綱一、課程基本信息課程名稱Web前端基礎(chǔ)技術(shù)WebFront-EndBasicTechnology課程代碼適用專業(yè)/開課學(xué)期軟件工程/第學(xué)期學(xué)分/學(xué)時學(xué)分/48學(xué)時學(xué)時分配48理論學(xué)時32實(shí)驗(yàn)（實(shí)踐）學(xué)時16實(shí)訓(xùn)（含上機(jī)）/實(shí)習(xí)/其他/課程類別大類通識課程專業(yè)教育課程實(shí)踐教育課程公共基礎(chǔ)課大類平臺課通識通選課專業(yè)基礎(chǔ)課專業(yè)主干課專業(yè)拓展課實(shí)驗(yàn)課集中實(shí)踐課√課程性質(zhì)必修()選修()考核方式考試()考查()開課院（部）信通學(xué)院課程負(fù)責(zé)人課程團(tuán)隊(duì)授課語言中文對先修的要求《程序設(shè)計基礎(chǔ)》對后續(xù)的支撐《Web前端框架技術(shù)》大綱撰寫與審定撰寫人審核人審定人修訂時間課程簡介及課程目標(biāo)本課程是一門軟件工程專業(yè)的專業(yè)必修課，具有較強(qiáng)的實(shí)踐性。通過本課程的學(xué)習(xí)，使學(xué)生系統(tǒng)性掌握HTML、CSS和JavaScript等前端開發(fā)的相關(guān)知識，并最終可以開發(fā)出具有良好交互性的前端頁面；同時在本階段培養(yǎng)學(xué)生具備獨(dú)立的Web開發(fā)能力，掌握Web開發(fā)的基本流程和方法，熟悉標(biāo)記語言、樣式語言以及腳本語言的基本語法、語句，建立面向?qū)ο笏季S方式和方法，熟練使用軟件開發(fā)工具，高效完成定制任務(wù)。Thiscourseisaprofessionalessentialcourseforsoftwareengineeringmajors,whichisstrong.Throughthestudyofthiscourse,studentscansystematicallygrasptherelevantknowledgeoffront-enddevelopmentofHTML,CSS,andJavaScript,andfinallydevelopthefront-endpageswithgoodinteraction;Thebasicprocessesandmethodsofwebdevelopmentarefamiliarwiththebasicgrammarandsentencesoflabellanguage,stylelanguage,andscriptlanguage,establishobject-orientedthinkingmethodsandmethods,proficientinsoftwaredevelopmenttools,andefficientlycompletecustomizedtasks.課程目標(biāo)：1.了解Web前端開發(fā)的基本概念和開發(fā)流程，掌握Web前端開發(fā)的核心內(nèi)容，包括HTML、CSS和JavaScript，能按照需求完成開發(fā)任務(wù)。2.具備綜合運(yùn)用Web前端核心技術(shù)能力，能使用前端技術(shù)用于解決實(shí)際項(xiàng)目開發(fā)問題。三、課程目標(biāo)及對畢業(yè)要求觀測點(diǎn)的支撐序號畢業(yè)要求支撐畢業(yè)要求觀測點(diǎn)課程目標(biāo)11.掌握軟件生命周期中涉及的工程基礎(chǔ)和專業(yè)知識，以及相關(guān)的數(shù)學(xué)、自然科學(xué)知識，并能夠?qū)⑵鋺?yīng)用到軟件實(shí)踐中，解決復(fù)雜軟件工程問題。2.問題分析：能應(yīng)用數(shù)學(xué)、自然科學(xué)和與軟件工程相關(guān)的基本原理，識別、表達(dá)、并通過文獻(xiàn)研究和借助仿真軟件等手段，分析軟件系統(tǒng)及其相關(guān)領(lǐng)域的復(fù)雜工程問題，進(jìn)行識別、表達(dá)和分析，以獲取有效結(jié)論。5.能夠針對軟件工程及其相關(guān)領(lǐng)域的復(fù)雜工程問題，開發(fā)、選擇與使用恰當(dāng)?shù)募夹g(shù)、資源、現(xiàn)代工程工具和信息技術(shù)工具，包括對復(fù)雜工程問題的預(yù)測與模擬，并能夠理解其局限性。觀測點(diǎn)1.2了解軟件工程專業(yè)知識、方法和技術(shù)在該領(lǐng)域的應(yīng)用背景、發(fā)展現(xiàn)狀和趨勢；能選擇恰當(dāng)?shù)哪Ｐ陀糜诒硎鰪?fù)雜軟件工程問題；且能將其應(yīng)用于復(fù)雜軟件工程問題的建模和求解。觀測點(diǎn)2.3能夠針對具體的軟件工程領(lǐng)域復(fù)雜工程的多種可選方案，運(yùn)用基本原理，借助文獻(xiàn)研究，分析過程的影響因素，并獲得有效結(jié)論。觀測點(diǎn)5.3能夠針對具體的對象，開發(fā)或選用滿足特定需求的現(xiàn)代工具，模擬和預(yù)測專業(yè)問題，并能夠分析其局限性。目標(biāo)123.設(shè)計/開發(fā)解決方案：能夠針對軟件工程及其相關(guān)領(lǐng)域復(fù)雜工程問題設(shè)計提出設(shè)計方法或解決方案，并針對特定系統(tǒng)需求設(shè)計滿足用戶需求的解決方案，包括軟硬件功能設(shè)計、系統(tǒng)架構(gòu)設(shè)計、組件設(shè)計和數(shù)據(jù)庫設(shè)計等，并能夠在設(shè)計環(huán)節(jié)中體現(xiàn)創(chuàng)新意識，考慮社會、健康、安全、法律、文化以及環(huán)境等因素。4.研究：能夠基于軟件工程的基本原理并采用科學(xué)方法對復(fù)雜工程問題進(jìn)行研究，包括搜集與整理資料、系統(tǒng)設(shè)計、設(shè)計實(shí)驗(yàn)、分析與解釋數(shù)據(jù)、并通過信息綜合得到合理有效的結(jié)論。觀測點(diǎn)3.1掌握軟件工程設(shè)計和產(chǎn)品開發(fā)全周期、全流程的基本設(shè)計/開發(fā)方法和技術(shù)，了解影響設(shè)計目標(biāo)和技術(shù)方案的各種因素；掌握軟件需求分析、設(shè)計、實(shí)現(xiàn)、測試、維護(hù)以及過程與管理的方法和技術(shù)。觀測點(diǎn)4.1能夠基于科學(xué)原理，通過文獻(xiàn)研究或相關(guān)方法，調(diào)研和分析復(fù)雜軟件工程問題的解決方案。目標(biāo)2

四、教學(xué)內(nèi)容及進(jìn)度安排序號教學(xué)內(nèi)容（包含重點(diǎn)、難點(diǎn)和思政點(diǎn)）課程目標(biāo)達(dá)成途徑（應(yīng)寫清楚運(yùn)用何種教學(xué)模式實(shí)現(xiàn)）課內(nèi)學(xué)時支撐課程目標(biāo)理論實(shí)踐1內(nèi)容：Web開發(fā)前端綜述與HTML基礎(chǔ)了解相關(guān)的Web前端開發(fā)技術(shù)；Web頁面執(zhí)行流程；開發(fā)工具介紹；第1個HTML文檔；文檔結(jié)構(gòu)分析；文檔編寫規(guī)范重點(diǎn)：HTML文檔結(jié)構(gòu)難點(diǎn)：理解Web執(zhí)行流程思政點(diǎn)：分析Web開發(fā)的技術(shù)棧，明確學(xué)習(xí)目標(biāo)和職業(yè)規(guī)劃。通過課堂講授，使學(xué)生：1）了解Web前端開發(fā)技術(shù)2）靜態(tài)和動態(tài)頁面執(zhí)行流程3）熟悉HTML基本語法，創(chuàng)建HTML頁面20目標(biāo)12內(nèi)容：HTML基礎(chǔ)格式化文本標(biāo)記；段落與排版標(biāo)記；分行、水平線標(biāo)記；超鏈接和圖像；列表和表格、表單重點(diǎn)：HTML標(biāo)記的含義和使用。難點(diǎn)：使用HTML實(shí)現(xiàn)排版思政點(diǎn)：以“J20”研發(fā)為例，引出對技術(shù)基礎(chǔ)積累的重要性。通過課堂講授，使學(xué)生：1）掌握字體標(biāo)記和屬性2）掌握段落標(biāo)記和屬性3）區(qū)分段落和換行4）超鏈接與圖片使用5）掌握列表布局、表格定位與表單元素作用通過作業(yè)練習(xí)，使學(xué)生：創(chuàng)建HTML文檔及實(shí)現(xiàn)基本排版樣式；掌握創(chuàng)建使用列表和表單實(shí)現(xiàn)排版的頁面；掌握表單制作，熟悉各類表單元素的標(biāo)記84目標(biāo)13內(nèi)容：CSS基礎(chǔ)CSS選擇器；CSS語法；盒子模型；div和span標(biāo)記；CSS樣式屬性；單位、字體、顏色和列表樣式重點(diǎn)：選擇器；格式化文本樣式難點(diǎn)：盒子模型思政點(diǎn)：以HTML不足而引入CSS為例，培養(yǎng)創(chuàng)新精神。通過課堂講授，使學(xué)生：1）掌握5種選擇器的使用2）使用CSS進(jìn)行格式化對象通過作業(yè)練習(xí)，使學(xué)生：創(chuàng)建基于CSS排版的的HTML頁面42目標(biāo)14內(nèi)容：CSS布局與CSS3頁面布局的方法；導(dǎo)航列表菜單設(shè)計；CSS3新特性。重點(diǎn)：頁面布局；導(dǎo)航列表菜單設(shè)計；轉(zhuǎn)換和過渡；難點(diǎn)：頁面布局；導(dǎo)航列表菜單設(shè)計思政點(diǎn)：以CSS炫酷網(wǎng)站為例，弘揚(yáng)“大國工匠“精神。通過課堂講授，使學(xué)生：1）掌握三列橫線和縱向布局的設(shè)計方法2）掌握水平和垂直導(dǎo)航列表菜單的設(shè)計方法通過作業(yè)練習(xí)，使學(xué)生：創(chuàng)建基于CSS的頁面布局的頁面，并能添加導(dǎo)航菜單84目標(biāo)15內(nèi)容：JavaScript基礎(chǔ)JavaScript基礎(chǔ)語法；變量、表達(dá)式、函數(shù)、程序結(jié)構(gòu)重點(diǎn)：基本語法難點(diǎn)：函數(shù)定義與使用思政點(diǎn)：以語法規(guī)則為例，做個遵紀(jì)守法的好公民。課堂講授，使學(xué)生：掌握J(rèn)avaScript基礎(chǔ)語法通過作業(yè)練習(xí)，使學(xué)生：使用JavaScript基礎(chǔ)語法解決一般數(shù)學(xué)問題22目標(biāo)16內(nèi)容：JavaScript應(yīng)用事件分類、響應(yīng)與處理；HTML元素查詢、添加、移除、修改；動態(tài)改變樣式重點(diǎn)：事件響應(yīng)編程難點(diǎn)：事件響應(yīng)編程思政點(diǎn)：以華為5G技術(shù)為例，引出“掌握核心技術(shù)，掌控未來“的理念。通過課堂講授，使學(xué)生：1）掌握常用事件的捕獲與響應(yīng)2）掌握查詢元素的各種方法3）熟悉元素的編輯操作及動態(tài)樣式的實(shí)現(xiàn)通過作業(yè)練習(xí)，使學(xué)生：結(jié)合CSS，能夠制作包含輪播圖、進(jìn)度條的HTML頁面42目標(biāo)17內(nèi)容：JavaScript綜合運(yùn)用DOM與BOM；數(shù)據(jù)存儲WebStorage的使用；購物車實(shí)現(xiàn)。重點(diǎn)：基于DOM節(jié)點(diǎn)的操作難點(diǎn)：數(shù)據(jù)儲存和獲取思政點(diǎn)：三者融合，弘揚(yáng)協(xié)作精神。通過課堂講授，使學(xué)生：1）理解DOM和BOM概念2）掌握基于DOM操作的方法3）頁面數(shù)據(jù)傳遞的方法42目標(biāo)1，目標(biāo)2

課程考核及評價序號課程目標(biāo)考核內(nèi)容評價方式及成績比例(%)成績比例(%)平時成績（體現(xiàn)過程性考核）30%-60%期末考核平時考勤課堂實(shí)驗(yàn)課堂互動...1了解Web前端開發(fā)的基本概念和開發(fā)流程，掌握Web前端開發(fā)的核心內(nèi)容，包括HTML、CSS和JavaScript，能按照需求完成開發(fā)任務(wù)。（支撐畢業(yè)要求觀測點(diǎn)1.2；2.3；5.3）掌握HTML基本標(biāo)記使用，包括文字、段落格式化、圖片、表格和表單等元素；掌握使用CSS進(jìn)行文本、段落格式設(shè)置、界面布局；掌握使用JavaScript基本語法、元素查詢和屬性設(shè)置并能設(shè)計出具有簡單交互頁面的頁面。316160802具備綜合運(yùn)用Web前端核心技術(shù)能力，能使用前端技術(shù)用于解決實(shí)際項(xiàng)目開發(fā)問題。（支撐畢業(yè)要求觀測點(diǎn)3.1；4.1）能綜合運(yùn)用前端技術(shù)解決實(shí)際項(xiàng)目開發(fā)問題。3611020比例3070100課程目標(biāo)達(dá)成度計算方法：1.課程分目標(biāo)達(dá)成度=課程分目標(biāo)下各評價方式：“學(xué)生實(shí)際平均成績*權(quán)重之和”/“分目標(biāo)分值*權(quán)重之和”。2.整體課程目標(biāo)達(dá)成度：各課程分目標(biāo)達(dá)成度的最小值。六、教材及參考資料1.教材《Web前端開發(fā)基礎(chǔ)（HTML+CSS+JavaScript）》鮑小忠著中國鐵道出版社2021.062.主要參考書《Web前端開發(fā)技術(shù)-HTML5、CSS3、JavaScript(第3版)》儲久良編著清華大學(xué)出版社2018.7七、課程考核評分標(biāo)準(zhǔn)課程目標(biāo)平時考勤評分標(biāo)準(zhǔn)權(quán)重（%）90-10080-8970-7960-690-59優(yōu)秀良好中等及格不及格目標(biāo)1課堂考勤：全勤，不遲到，不早退。課堂考勤：正常全勤，1次請假，無早退或遲到。課堂考勤：正常全勤，1次請假或有早退或遲到現(xiàn)象。課堂考勤：多次請假、早退或遲到現(xiàn)象。課堂缺勤超過3次，或多次有早退或遲到現(xiàn)象。3目標(biāo)2課堂考勤：全勤，不遲到，不早退。課堂考勤：正常全勤，1次請假，無早退或遲到。課堂考勤：正常全勤，1次請假或有早退或遲到現(xiàn)象。課堂考勤：多次請假、早退或遲到現(xiàn)象。課堂缺勤超過3次，或多次早退或遲到現(xiàn)象。3課程目標(biāo)實(shí)驗(yàn)報告評分標(biāo)準(zhǔn)權(quán)重（%）90-10080-8970-7960-690-59優(yōu)秀良好中等及格不及格目標(biāo)1課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，實(shí)驗(yàn)結(jié)果完全滿足要求；無抄襲；實(shí)驗(yàn)報告撰寫認(rèn)真、格式良好。課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，結(jié)果很好滿足要求；無抄襲；提交報告格式較好。課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，結(jié)果較好滿足要求；提交報告格式較好。課程實(shí)驗(yàn)不能在規(guī)定時間完成，質(zhì)量一般。不提交實(shí)驗(yàn)報告或抄襲他人實(shí)驗(yàn)報告。16目標(biāo)2課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，實(shí)驗(yàn)結(jié)果完全滿足要求；無抄襲；實(shí)驗(yàn)報告撰寫認(rèn)真、格式良好。課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，結(jié)果很好滿足要求；無抄襲；提交報告格式較好。課程實(shí)驗(yàn)?zāi)茉谝?guī)定時間完成，結(jié)果較好滿足要求；提交報告格式較好。課程實(shí)驗(yàn)不能在規(guī)定時間完成，或質(zhì)量一般。不提交實(shí)驗(yàn)報告或抄襲他人實(shí)驗(yàn)報告。6

課程目標(biāo)課堂互動評分標(biāo)準(zhǔn)權(quán)重（%）90-10080-8970-7960-690-59優(yōu)秀良好中等及格不及格目標(biāo)1非常積極參與課堂互動、并能準(zhǔn)確回答老師在課堂提出的問題。能積極參與課堂互動；較為準(zhǔn)確回到老師在課堂提出的問題。不怎么參與課堂互動，但回答問題正確。不參與課堂互動，回答問題需要提示才能勉強(qiáng)完成。不參與課堂互動，不能正確回答課堂提問。1目標(biāo)2非常積極參與課堂互動、并能準(zhǔn)確回答老師在課堂提出的問題。能積極參與課堂互動；較為準(zhǔn)確回到老師在課堂提出的問題。不怎么參與課堂互動，但回答正確。不參與課堂互動，回答問題需要提示才能勉強(qiáng)完成。不參與課堂互動，不能正確回答。1課程目標(biāo)期末考核評分標(biāo)準(zhǔn)權(quán)重（%）90-10080-8970-7960-690-59優(yōu)秀良好中等及格不及格目標(biāo)1對Web前端開發(fā)的相關(guān)概念清楚；熟悉開發(fā)工具使用和代碼調(diào)試技巧；完全掌握Web前端開發(fā)基礎(chǔ)的核心內(nèi)容。對Web前端開發(fā)的相關(guān)概念清楚；熟悉開發(fā)工具使用和代碼調(diào)試技能；很好掌握Web前端開發(fā)的核心內(nèi)容。對Web前端開發(fā)的相關(guān)概念基本清楚；對開發(fā)工具的使用和代碼調(diào)試有一定的掌握；對Web前端開發(fā)的核心內(nèi)容掌握程度一般。對Web前端開發(fā)的相關(guān)概念基本清楚；不能很好的掌握Web前端開發(fā)的核心內(nèi)容。對Web前端開發(fā)的相關(guān)概念不清楚；沒有掌握Web前端開發(fā)的核心