《web前端技術(shù)》課程標準

《Web前端技術(shù)》課程標準【課程名稱】 【課程編碼】【課程類別】專業(yè)必修課 【適用專業(yè)】【授課單位】 【總學(xué)時】64（32理論+32實驗）【教材】趙敏、劉三滿、張振寰，《Web前端技術(shù)》，航空工業(yè)出版社,2022年5月【編寫執(zhí)筆人】 【編寫日期】 1．課程定位和課程設(shè)計1.1課程制定依據(jù)近年來，在網(wǎng)絡(luò)基礎(chǔ)設(shè)施及5G終端加速普及、互聯(lián)網(wǎng)技術(shù)日趨成熟等利好因素的推動下，網(wǎng)絡(luò)在人們的生活中發(fā)揮著越來越重要的作用，越來越多的企業(yè)開始重視企業(yè)網(wǎng)站建設(shè)。一個設(shè)計精良的企業(yè)網(wǎng)站不僅能夠提升企業(yè)形象，還可以宣傳企業(yè)熱門服務(wù)，拓展企業(yè)業(yè)務(wù)等。因此，Web前端技術(shù)也成了當前比較熱門的學(xué)科或?qū)I(yè)之一。為了培養(yǎng)符合企業(yè)需求的Web前端開發(fā)人員，我們參考多所院校的人才培養(yǎng)方案，并結(jié)合Web前端相關(guān)崗位的實際需要開設(shè)了本課程。1.2課程性質(zhì)與作用課程性質(zhì)：《Web前端技術(shù)》是軟件工程專業(yè)培養(yǎng)課程體系中的一門專業(yè)必修課程，其包含了軟件行業(yè)Web開發(fā)領(lǐng)域的關(guān)鍵技術(shù)基礎(chǔ)知識（HTML5，CSS及JavaScript等）。該課程的設(shè)置充分考慮了其在Web開發(fā)領(lǐng)域的關(guān)鍵性作用、目前市場廣泛的應(yīng)用需求和良好的就業(yè)前景，注重學(xué)生對理論基礎(chǔ)知識、專業(yè)技能的理解、掌握。課程作用：通過本課程的學(xué)習，使學(xué)生理解HTML5、CSS及JavaScript等基本的理論知識；掌握應(yīng)用上述理論知識，制作基本網(wǎng)頁、設(shè)計網(wǎng)頁布局、實現(xiàn)多樣化及良好客戶體驗的頁面效果等應(yīng)用技能；培養(yǎng)學(xué)生的創(chuàng)新意識，設(shè)計特色網(wǎng)頁。1.3課程設(shè)計思路本課程從實際工作出發(fā)，通過豐富多彩的案例和實戰(zhàn)，系統(tǒng)講解Web前端的相關(guān)知識；學(xué)生可以在課程的學(xué)習中順著知識點的脈絡(luò)逐漸完善案例的各個模塊，過關(guān)斬將，最終實現(xiàn)美觀、實用的網(wǎng)頁效果。此外，最后以企業(yè)網(wǎng)站的建設(shè)為例，簡明清晰地介紹了網(wǎng)站開發(fā)的實際流程與常見網(wǎng)頁的制作方法，既有助于學(xué)生理解知識點，又具有啟發(fā)性和實用性，讓學(xué)生能夠?qū)W有所用。2．課程目標2.1知識目標（1）了解本課程內(nèi)容在Web開發(fā)領(lǐng)域的定位與作用；（2）了解HTML5、CSS及JavaScript技術(shù)的發(fā)展脈絡(luò)、趨勢及應(yīng)用前景；（3）掌握HTML5中的基本元素、文字與段落元素、圖像元素、列表元素、表格元素、超鏈接元素、多媒體元素、框架元素及表單元素的語法、屬性和參數(shù)等基礎(chǔ)知識；（4）掌握CSS中元素的語法、屬性和參數(shù)等基礎(chǔ)知識；（5）了解網(wǎng)頁布局的幾種方法，掌握使用CSS進行網(wǎng)頁布局、樣式設(shè)計的基礎(chǔ)知識；（6）掌握JavaScript中的基本語法知識；（7）掌握JavaScript進行提交內(nèi)容校驗、生成網(wǎng)頁特效等方法。2.2能力目標（1）具備使用HTML5制作包含基本內(nèi)容的網(wǎng)頁的能力；（2）具備使用HTML5及CSS等技術(shù)來設(shè)計網(wǎng)頁布局的能力；（3）具備使用JavaScript技術(shù)來提高網(wǎng)頁交互性、體驗性的能力；（4）具備綜合使用HTML5、CSS與JavaScript的相關(guān)知識，來豐富、渲染網(wǎng)頁的能力；（5）具備根據(jù)具體應(yīng)用需求，創(chuàng)新性地設(shè)計網(wǎng)頁的能力。2.3素質(zhì)目標（1）培養(yǎng)學(xué)生具備克服困難解決問題的意志；（2）培養(yǎng)學(xué)生養(yǎng)成嚴謹認真的科學(xué)態(tài)度，耐心細致的工作作風；（3）培養(yǎng)學(xué)生具備良好的交流溝通素養(yǎng)和創(chuàng)新精神。3．課程內(nèi)容與教學(xué)要求3.1課程安排本課程內(nèi)容分為14個章節(jié)，包括Web前端開發(fā)基礎(chǔ)，HTML5基礎(chǔ)，文本、圖像、多媒體和列表，超鏈接、表格和表單，CSS3基礎(chǔ)，CSS3的常用屬性，CSS3布局，JavaScript基礎(chǔ)，HTML5基礎(chǔ)，函數(shù)、對象和數(shù)組，DOM和BOM，事件，jQuery基礎(chǔ)以及創(chuàng)建WJ自制女裝品牌店網(wǎng)站，內(nèi)容包括其教學(xué)要求和課時分配如表1所示。表1《Web前端技術(shù)》課程要求及課時分配表章節(jié)課程名稱教學(xué)內(nèi)容教學(xué)要求課時分配1Web前端開發(fā)基礎(chǔ)網(wǎng)站開發(fā)基礎(chǔ)知識Web前端技術(shù)概述Web前端開發(fā)工具實戰(zhàn)演練——使用HBuilderX創(chuàng)建“金企鵝教育”項目（1）了解網(wǎng)站與網(wǎng)頁（2）初步了解Web前端技術(shù)（3）熟悉Web前端開發(fā)工具（4）掌握HTML5的基礎(chǔ)知識，培養(yǎng)代碼規(guī)范意識（5）提升實踐動手能力22HTML5基礎(chǔ)（1）HTML5的基本語法（2）HTML5的文檔結(jié)構(gòu)（3）HTML5的結(jié)構(gòu)標簽實戰(zhàn)演練——創(chuàng)建“金企鵝教育”網(wǎng)站主頁（1）掌握HTML5的基本語法（2）熟悉HTML5的文檔結(jié)構(gòu)（3）熟悉HTML5的結(jié)構(gòu)標簽（4）加強對互聯(lián)網(wǎng)信息時代的了解（5）培養(yǎng)專業(yè)技能，夯實基礎(chǔ)23文本、圖像、多媒體和列表（1）文本（2）圖像實戰(zhàn)演練——制作“金企鵝教育”主頁“精品圖書”模塊（3）多媒體實戰(zhàn)演練——制作“金企鵝教育”主頁“企業(yè)宣傳”模塊3.4列表實戰(zhàn)演練——制作“金企鵝教育”主頁“教育資訊”模塊（1）掌握標題和段落標簽的使用方法（2）熟悉文本格式化標簽的使用方法和特殊字符的表示方法（3）了解網(wǎng)頁中圖像格式和路徑的表示方法，掌握圖像、圖標和流標簽的使用方法（4）掌握在網(wǎng)頁中嵌入音頻和視頻文件的方法（5）掌握無序列表、有序列表和自定義列表標簽的使用方法，熟悉列表嵌套的實現(xiàn)方法44超鏈接、表格和表單（1）超鏈接（2）表格實戰(zhàn)演練———制作“云課堂”頁面的“精品課程”模塊（3）表單實戰(zhàn)演練——制作“金企鵝教育”網(wǎng)站的登錄頁面（1）掌握超鏈接標簽的使用方法，熟悉不同類型的超鏈接（2）掌握表格標簽的使用方法，熟悉表格的常用屬性（3）掌握表單標簽的使用方法和表單控件的設(shè)置方法，熟悉表單控件的屬性45CSS3基礎(chǔ)（1）CSS3的基本語法（2）在網(wǎng)頁中引入CSS3樣式（3）CSS3選擇器（4）CSS3的繼承性和層疊性實戰(zhàn)演練————為“金企鵝教育”網(wǎng)站主頁鏈接樣式表（1）掌握CSS3的基本語法（2）掌握在網(wǎng)頁中引入CSS3樣式的方式，包括行內(nèi)樣式、內(nèi)嵌樣式表和鏈接樣式表（3）熟悉CSS3選擇器的含義，掌握不同種類選擇器的使用方法（4）熟悉CSS3的特性，包括繼承性、層疊性和優(yōu)先級46CSS的常用屬性（1）文本屬性（2）圖像屬性實戰(zhàn)演練——美化“金企鵝教育”主頁“精品圖書”模塊（3）列表屬性實戰(zhàn)演練——美化“金企鵝教育”主頁“教育資訊”模塊（4）超鏈接屬性實戰(zhàn)演練——美化“金企鵝教育”網(wǎng)站主頁的導(dǎo)航欄（5）表格屬性實戰(zhàn)演練——美化“云課堂”頁面的“精品課程”模塊（6）表單屬性實戰(zhàn)演練——美化“金企鵝教育”網(wǎng)站的登錄頁面（1）掌握設(shè)置字體樣式和文本格式的相關(guān)屬性（2）掌握設(shè)置網(wǎng)頁圖像和背景樣式的相關(guān)屬性（3）掌握設(shè)置列表、超鏈接、表格和表單樣式的相關(guān)屬性67CSS布局（1）盒子模型（2）元素的排版（3）常見的布局版式實戰(zhàn)演練——布局“金企鵝教育”網(wǎng)站PC端主頁（4）響應(yīng)式布局實戰(zhàn)演練——布局“金企鵝教育”網(wǎng)站移動端主頁（1）掌握盒子模型的相關(guān)知識，包括盒子模型的基本結(jié)構(gòu)和屬性，以及不同類型元素的盒子模型（2）掌握元素的排版，包括標準流排版、浮動排版和定位排版（3）熟悉常見的布局版式，包括單列、雙列、三列和綜合版式（4）掌握響應(yīng)式布局的實現(xiàn)方法48CSS高級應(yīng)用（1）變形效果（2）過渡效果（3）動畫效果實戰(zhàn)演練——制作北極熊走路動畫片段（1）熟悉變形效果的相關(guān)知識，包括變形屬性、2D變形和3D變形（2）熟悉過渡效果的相關(guān)屬性，了解常見過渡效果的應(yīng)用場景及觸發(fā)方式（3）熟悉關(guān)鍵幀和動畫效果的相關(guān)屬性，能夠制作動畫片段49JavaScript基礎(chǔ)（1）JavaScript的基本語法（2）在網(wǎng)頁中引入JavaScript實戰(zhàn)演練——為“金企鵝教育”網(wǎng)站主頁鏈接js文件（3）變量（4）數(shù)據(jù)類型（5）運算符（6）流程控制語句實戰(zhàn)演練——計算銀行存款收益（1）熟悉JavaScript的基本語法。（2）掌握在網(wǎng)頁中引入JavaScript的方式，包括內(nèi)嵌式、外鏈式和行內(nèi)式。（3）熟悉變量的聲明與賦值，以及變量的作用域。（4）掌握JavaScript中的數(shù)據(jù)類型、運算符和流程控制語句。610函數(shù)、對象和數(shù)組（1）函數(shù)實戰(zhàn)演練——判斷某一年是否為閏年（2）對象（3）數(shù)組（1）掌握函數(shù)的定義和調(diào)用方法，熟悉嵌套函數(shù)和遞歸函數(shù)。（2）掌握對象的創(chuàng)建和訪問方法，熟悉常用的內(nèi)置函數(shù)。（3）掌握數(shù)組的定義和數(shù)組元素的操作，熟悉數(shù)組的屬性和方法。611DOM和BOM（1）DOM（2）BOM實戰(zhàn)演練——實現(xiàn)線上點菜功能（1）了解DOM，熟悉HTML元素操作和DOM節(jié)點操作的屬性和方法。（2）了解BOM，熟悉window對象、location對象、history對象、navigator對象和screen對象的屬性和方法。412事件（1）事件概述（2）事件綁定（3）事件對象（4）常見事件類型（5）事件優(yōu)化實戰(zhàn)演練——制作“金企鵝教育”主頁的輪播圖（1）熟悉事件與事件流，掌握事件綁定方式和事件對象的常用屬性和方法。（2）熟悉常見的事件類型，包括鼠標事件、鍵盤事件、焦點事件和頁面事件。（3）了解事件優(yōu)化方式，包括事件委托和事件刪除。613jQuery（1）jQuery基礎(chǔ)（2）jQuery選擇器（3）jQuery操作元素（4）jQuery的事件處理（5）jQuery的動畫效果實戰(zhàn)演練——制作自動隱藏式菜單（1）了解jQuery，熟悉下載和配置jQuery的方法。（2）熟悉jQuery選擇器、jQuery對網(wǎng)頁元素進行的操作、jQuery的時間處理。（3）掌握jQuery的動畫效果，包括元素的隱藏與顯示、元素的淡入淡出和元素的滑動效果等。614創(chuàng)建WJ自制女裝品牌店網(wǎng)站（1）站點規(guī)劃和創(chuàng)建（2）制作主頁（3）制作全部商品頁（4）制作購物車頁（5）制作登錄頁（1）熟悉Web前端技術(shù)的應(yīng)用。

（2）鍛煉實踐能力，提升工作競爭力。6合計644．課程實施4.1教學(xué)條件我校十分注重建設(shè)和完善本課程的教學(xué)設(shè)施，如多媒體教室、機房、網(wǎng)絡(luò)教學(xué)平臺、網(wǎng)絡(luò)數(shù)據(jù)庫等。同時，我校有一支強大的師資隊伍，可以為本課程的教學(xué)出謀劃策。4.2教學(xué)方法建議本課程遵循“教師引導(dǎo)，學(xué)生為主”的原則，采用講解、多媒體演示、場景模擬法、討論、翻轉(zhuǎn)課堂等多種方法，努力為學(xué)生創(chuàng)設(shè)更多知識應(yīng)用的機會。講解法：主要用于講授Web前端技術(shù)基礎(chǔ)知識、行業(yè)崗位知識等理論性較強的知識。多媒體演示法：在講解過程中，借助音頻、視頻、圖片等直觀手段來呈現(xiàn)教學(xué)內(nèi)容，在激發(fā)其學(xué)習興趣和積極性的同時，不斷提高其知識儲備能力和綜合文化素質(zhì)。場景模擬法：針對所教內(nèi)容布置任務(wù)，引導(dǎo)學(xué)生通過情景化的模擬訓(xùn)練來提升知識的實際應(yīng)用能力和職業(yè)素養(yǎng)。討論法：根據(jù)知識點，鼓勵學(xué)生運用所學(xué)知識進行主題討論，使其在討論中逐步提升交際能力、思辨能力、解決實際問題的能力等。翻轉(zhuǎn)課堂法：堅持學(xué)生的主體地位，鼓勵學(xué)生在課上對自己學(xué)到的知識點進行分享和講解，并對其講解進行補充和評價，不斷完善學(xué)生的知識結(jié)構(gòu)，加深其對所學(xué)知識的理解。教師在教學(xué)過程中，可根據(jù)學(xué)生的實際情況靈活選用教學(xué)方法，因材施教，盡量照顧到每一個學(xué)生的學(xué)習需求。4.3教學(xué)評價與考核要求課程的教學(xué)評價由形成性測評（40%）和終結(jié)性測評（60%）組成，其考核要求如下：4.3.1形成性測評形成性測評考核學(xué)生在學(xué)習本課程過程中的學(xué)習情況和實際應(yīng)用能力的發(fā)展情況，包括出勤考核（10%）、課堂參與程度考核（10%）、作業(yè)完成質(zhì)量考核（20%）等。（1）出勤考核本項考核通過課前點名考核學(xué)生的課堂出勤率。遲到15分鐘以內(nèi)每次扣1分，遲到15分鐘以上或無故缺勤一節(jié)課每次扣2分，該項考核累計最多扣10分。（2）課堂參與程度考核本項考核主要通過課堂提問和課堂積極發(fā)言來評判學(xué)生的學(xué)習態(tài)度、學(xué)習主動性、課堂參與程度，以及學(xué)生的思辨能力、問題解決能力及其對課堂教學(xué)知識的掌握情況等。只要學(xué)生能按時上課聽講，即可獲得5分的基本分。學(xué)生上課發(fā)言一次，即可另外獲得0.5分，課堂發(fā)言最多可得5分。學(xué)生的最后成績?yōu)椤?+課堂發(fā)言得分”。（3）作業(yè)完成質(zhì)量考核本項考核主要通過學(xué)生作業(yè)來檢測其對教學(xué)主體內(nèi)容的掌握與理解程度、實際應(yīng)用知識的能力、自主學(xué)習能力、信息收集與處理能力等。每次作業(yè)成績按照相應(yīng)標準而定，學(xué)生作業(yè)質(zhì)量劃分為優(yōu)秀（10分）、良好（8分）、中等（7分）、及格（6分）和不及格（0分）五個檔次。最后的作業(yè)成績?yōu)閷W(xué)生作業(yè)完成質(zhì)量成績的平均數(shù)。4.3.2終結(jié)性測評終結(jié)性測評主要考核學(xué)生在學(xué)完本課程后所達到的水平，通過期末考試進行考核。期末考試由論文考試（60%）組成，主要評估學(xué)生對本門課程基本知識的掌握情況與綜合運用能力。5．課程資源開發(fā)與利用5.1教材