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

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

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

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

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