《Web前端開(kāi)發(fā)》教學(xué)大綱

《Web前端開(kāi)發(fā)》教學(xué)大綱課程編號(hào)：13220502英文名稱：Front-endDevelopmentofWeb學(xué)分：2.5學(xué)時(shí)：總學(xué)時(shí)48學(xué)時(shí)，其中理論32學(xué)時(shí)，實(shí)踐16學(xué)時(shí)先修課程：計(jì)算機(jī)導(dǎo)論課程類別：專業(yè)主干課授課對(duì)象：計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)學(xué)生教學(xué)單位：機(jī)械與電氣工程學(xué)院修讀學(xué)期：第3學(xué)期一、課程描述和目標(biāo)《Web前端開(kāi)發(fā)》是一門(mén)計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)低年級(jí)學(xué)生的專業(yè)必修課，屬于應(yīng)用類課程。通過(guò)本課程，讓學(xué)生學(xué)習(xí)有關(guān)Web前端開(kāi)發(fā)所需的知識(shí)，學(xué)習(xí)Web前端常用的開(kāi)發(fā)和調(diào)試工具，能用HTML技術(shù)設(shè)計(jì)Web頁(yè)面，能用CSS對(duì)Web頁(yè)面進(jìn)行布局和美化，能用JavaScript實(shí)現(xiàn)Web頁(yè)面的動(dòng)態(tài)效果和交互功能，能設(shè)計(jì)和開(kāi)發(fā)滿足不同行業(yè)需求的Web前端應(yīng)用。課程目標(biāo)1：學(xué)習(xí)Web前端開(kāi)發(fā)所需的基礎(chǔ)知識(shí)，包括HTML、CSS、JavaScript，培養(yǎng)Web前端開(kāi)發(fā)的基本能力，包括代碼編寫(xiě)、代碼調(diào)試、頁(yè)面優(yōu)化。課程目標(biāo)2：能熟練使用Web前端開(kāi)發(fā)的編輯工具軟件，調(diào)試工具軟件和發(fā)布工具軟件。課程目標(biāo)3：能設(shè)計(jì)與開(kāi)發(fā)滿足不同行業(yè)需求的Web前端應(yīng)用。二、課程目標(biāo)對(duì)畢業(yè)要求的支撐關(guān)系畢業(yè)要求指標(biāo)點(diǎn)課程目標(biāo)權(quán)重指標(biāo)點(diǎn)5-2：能夠選擇與使用恰當(dāng)?shù)膬x器、信息資源、工程工具和專業(yè)模擬軟件，對(duì)計(jì)算機(jī)軟硬件系統(tǒng)在設(shè)計(jì)與實(shí)施等過(guò)程中的復(fù)雜工程問(wèn)題進(jìn)行分析、計(jì)算與設(shè)計(jì)。課程目標(biāo)1H指標(biāo)點(diǎn)8-2：理解誠(chéng)實(shí)公正、誠(chéng)信守則的工程職業(yè)道德和規(guī)范，并能夠在計(jì)算機(jī)相關(guān)領(lǐng)域的工程實(shí)踐中自覺(jué)遵守。課程目標(biāo)2M指標(biāo)點(diǎn)12-1：具備持續(xù)更新和提高自我知識(shí)、能力與素質(zhì)的終身學(xué)習(xí)意識(shí)。課程目標(biāo)3M三、教學(xué)內(nèi)容、基本要求與學(xué)時(shí)分配序號(hào)教學(xué)內(nèi)容基本要求及重、難點(diǎn)（含德育要求）學(xué)時(shí)教學(xué)方式對(duì)應(yīng)課程目標(biāo)1Web前端開(kāi)發(fā)基礎(chǔ)：Web網(wǎng)站基本概念Web網(wǎng)站工作原理Web網(wǎng)站規(guī)范Web前端開(kāi)發(fā)工具理解Web網(wǎng)站的概念和規(guī)范，理解Web網(wǎng)站工作原理，學(xué)會(huì)使用Web前端開(kāi)發(fā)工具德育要求：愛(ài)崗敬業(yè)2講授式演示式課程目標(biāo)1課程目標(biāo)22HTML模塊：HTML簡(jiǎn)介與結(jié)構(gòu)HTML文字、段落、圖像、超鏈接、列表、表格、DIV、SPANHTML表單理解HTML基本概念和規(guī)范，具備HTML代碼編寫(xiě)能力，能應(yīng)用HTML知識(shí)制作結(jié)構(gòu)合理代碼規(guī)范的Web前端應(yīng)用。德育要求：家國(guó)情懷6講授式演示式練習(xí)式課程目標(biāo)1課程目標(biāo)23CSS模塊：CSS簡(jiǎn)介與基本語(yǔ)法CSS在HTML中的使用方法CSS基本選擇器CSS復(fù)合選擇器CSS盒子模型CSS定位CSS頁(yè)面布局理解CSS基本概念和規(guī)范，具備CSS代碼編寫(xiě)能力，理解CSS在Web開(kāi)發(fā)中的作用，能夠應(yīng)用HTML與CSS知識(shí)設(shè)計(jì)和開(kāi)發(fā)出結(jié)構(gòu)合理、代碼規(guī)范、樣式美觀的Web前端應(yīng)用。德育要求：工匠精神8講授式演示式練習(xí)式課程目標(biāo)2課程目標(biāo)34JavaScript模塊：JavaScript簡(jiǎn)介JavaScript語(yǔ)法JavaScript對(duì)象瀏覽器對(duì)象HTMLDOM對(duì)象JQuery應(yīng)用Web應(yīng)用部署理解JavaScript基本概念和規(guī)范，具備JavaScript代碼編寫(xiě)能力，了解在瀏覽器環(huán)境中調(diào)試JavaScript的方法，能應(yīng)用HTML、CSS和JavaScript知識(shí)設(shè)計(jì)和開(kāi)發(fā)出結(jié)構(gòu)合理、代碼規(guī)范、樣式美觀、具有動(dòng)態(tài)效果的Web前端應(yīng)用。了解Web前端應(yīng)用部署方法。德育要求：職業(yè)素養(yǎng)8講授式演示式練習(xí)式課程目標(biāo)2課程目標(biāo)35案例項(xiàng)目模塊：首頁(yè)與商品詳情購(gòu)物車(chē)管理登錄與冊(cè)訂單管理與個(gè)人中心瀏覽器調(diào)試技術(shù)了解功能模塊的設(shè)計(jì)與實(shí)現(xiàn)，掌握前瀏覽器和后端Java調(diào)試技術(shù)，掌握應(yīng)用MVC模式進(jìn)行Web開(kāi)發(fā)。德育要求：創(chuàng)新意識(shí)、團(tuán)隊(duì)協(xié)作8講授式演示式練習(xí)式課程目標(biāo)3合計(jì)32序號(hào)實(shí)驗(yàn)項(xiàng)目實(shí)驗(yàn)內(nèi)容與要求學(xué)時(shí)類型對(duì)應(yīng)課程目標(biāo)1HTML表單應(yīng)用實(shí)驗(yàn)要求：必修。實(shí)驗(yàn)內(nèi)容：計(jì)一個(gè)問(wèn)卷調(diào)查Web頁(yè)面，調(diào)查內(nèi)容三選一（手機(jī)使用習(xí)慣，微博使用習(xí)慣，游戲娛樂(lè)習(xí)慣）。具體要求：包含表單的下列元素text，radio，checkbox，select，textarea，submit，reset，具體調(diào)查內(nèi)容自定義2設(shè)計(jì)課程目標(biāo)1課程目標(biāo)22CSS基礎(chǔ)應(yīng)用實(shí)驗(yàn)要求：必修。實(shí)驗(yàn)內(nèi)容：完成7個(gè)局部Web頁(yè)面的CSS樣式代碼編寫(xiě)，給出HTML代碼和樣式要求，學(xué)生完成CSS代碼編寫(xiě)。2設(shè)計(jì)課程目標(biāo)1課程目標(biāo)23CSS綜合應(yīng)用實(shí)驗(yàn)要求：必修。實(shí)驗(yàn)內(nèi)容：完成2個(gè)完成頁(yè)面的布局，給出HTML代碼和Web頁(yè)面效果圖，學(xué)生完成頁(yè)面布局的CSS代碼編寫(xiě)。Web頁(yè)面1固定寬度居中2列型布局，要求綜合使用CSS頁(yè)面布局技術(shù)；Web頁(yè)面2自適應(yīng)寬度2列型布局，要求綜合使用CSS頁(yè)面布局技術(shù)。2設(shè)計(jì)課程目標(biāo)2課程目標(biāo)34JavaScript應(yīng)用實(shí)驗(yàn)要求：必修。實(shí)驗(yàn)內(nèi)容：完成1個(gè)有獎(jiǎng)競(jìng)賽Web頁(yè)面，要求使用JavaScript數(shù)組、函數(shù)、事件等基礎(chǔ)知識(shí)。具體要求：系統(tǒng)內(nèi)部產(chǎn)生一個(gè)一定范圍的隨機(jī)數(shù)；用戶猜一個(gè)數(shù)字，如果和系統(tǒng)隨機(jī)數(shù)相同，則中獎(jiǎng)。用戶猜數(shù)的形式可以多樣，可以是數(shù)字按鈕或者輸入一個(gè)數(shù)字或者變換的數(shù)字點(diǎn)暫?；蛘咂渌尚械姆绞剑华?jiǎng)品在屏幕上顯示若干個(gè)，中獎(jiǎng)后突出顯示用戶獲得的一個(gè)獎(jiǎng)品；單擊重置按鈕，游戲可以重新開(kāi)始。2設(shè)計(jì)課程目標(biāo)2課程目標(biāo)35綜合網(wǎng)站設(shè)計(jì)實(shí)驗(yàn)要求：必修。實(shí)驗(yàn)內(nèi)容：完成1個(gè)電子商務(wù)類Web前端應(yīng)用的設(shè)計(jì)和開(kāi)發(fā)。具體要求：(1)設(shè)計(jì)電子商務(wù)網(wǎng)站首頁(yè)index.html，包含網(wǎng)站Logo，導(dǎo)航菜單，最新動(dòng)態(tài)，產(chǎn)品分類，產(chǎn)品列表；(2)設(shè)計(jì)商品詳情detail.html，包含商品各類具體信息：編號(hào)、名稱、簡(jiǎn)介、圖片、單價(jià)、購(gòu)買(mǎi)數(shù)量，加入購(gòu)物車(chē)按鈕；(3)設(shè)計(jì)用戶注冊(cè)reg.html和登錄login.html頁(yè)面;(4)設(shè)計(jì)購(gòu)物車(chē)展示頁(yè)面cart.html，包含3項(xiàng)購(gòu)物項(xiàng)目，提交訂單按鈕；(5)設(shè)計(jì)訂單頁(yè)面order.html，包含訂單金額，收貨人、收獲電話、收獲地址，訂單明細(xì)；(6)網(wǎng)站部署到Windows或者Linux的Web服務(wù)器軟件中。8綜合課程目標(biāo)2課程目標(biāo)3合計(jì)16四、課程教學(xué)方法集中講授與翻轉(zhuǎn)課堂相結(jié)合、直觀演示、小組討論、案例分析等教學(xué)方式。五、學(xué)業(yè)評(píng)價(jià)和課程考核（一）考核方式及具體要求序號(hào)考核方式課程目標(biāo)1（分值）課程目標(biāo)2（分值）課程目標(biāo)3（分值）合計(jì)1平時(shí)作業(yè)334102章節(jié)測(cè)驗(yàn)15510303課程實(shí)驗(yàn)226104課程項(xiàng)目10103050課程目標(biāo)對(duì)應(yīng)分值302050100（二）考核與評(píng)價(jià)標(biāo)準(zhǔn)1.平時(shí)作業(yè)考核與評(píng)價(jià)標(biāo)準(zhǔn)分值觀測(cè)點(diǎn)90-100分70-89分60-69分0-59分作業(yè)按時(shí)完成，90%以上的作業(yè)內(nèi)容齊全，基本知識(shí)點(diǎn)理解、掌握到位。能夠利用利用理論知識(shí)實(shí)現(xiàn)較為復(fù)雜Web前端應(yīng)用開(kāi)發(fā)。按時(shí)完成，70%以上的作業(yè)內(nèi)容齊全，基本知識(shí)點(diǎn)理解、掌握較到位。能夠較好利用理論知識(shí)實(shí)現(xiàn)Web前端應(yīng)用開(kāi)發(fā)。延時(shí)完成，60%以上的作業(yè)內(nèi)容齊全，基本知識(shí)點(diǎn)理解、掌握基本到位。能夠利用理論知識(shí)基本實(shí)現(xiàn)Web前端應(yīng)用開(kāi)發(fā)。不交和補(bǔ)交，50%以下的作業(yè)內(nèi)容齊全，基本知識(shí)點(diǎn)理解、掌握有偏差。不能利用理論知識(shí)實(shí)現(xiàn)Web前端應(yīng)用開(kāi)發(fā)。2.章節(jié)測(cè)試與評(píng)價(jià)標(biāo)準(zhǔn)章節(jié)測(cè)試根據(jù)測(cè)試題目及評(píng)分標(biāo)注進(jìn)行打分（百分制）。3.課程實(shí)驗(yàn)考核與評(píng)價(jià)標(biāo)準(zhǔn)分值觀測(cè)點(diǎn)90-100分70-89分60-69分0-59分課程實(shí)驗(yàn)?zāi)芨鶕?jù)實(shí)驗(yàn)要求自主設(shè)計(jì)實(shí)驗(yàn)方案，有自己的設(shè)計(jì)理念，實(shí)驗(yàn)完成度高，效果好。實(shí)驗(yàn)報(bào)告完整，技術(shù)總結(jié)分析到位。能根據(jù)實(shí)驗(yàn)要求自主設(shè)計(jì)實(shí)驗(yàn)方案，有自己的設(shè)計(jì)理念，實(shí)驗(yàn)完成度較高，效果較好。實(shí)驗(yàn)報(bào)告完整，技術(shù)總結(jié)分析基本到位。能根據(jù)實(shí)驗(yàn)要求自主設(shè)計(jì)實(shí)驗(yàn)方案，實(shí)驗(yàn)完成度一般，效果一般。實(shí)驗(yàn)報(bào)告較完整，技術(shù)總結(jié)分析不到位?；灸芨鶕?jù)實(shí)驗(yàn)要求自主設(shè)計(jì)實(shí)驗(yàn)方案，實(shí)驗(yàn)完成度差，效果差。實(shí)驗(yàn)報(bào)告不完整，無(wú)技術(shù)總結(jié)分析。4.課程項(xiàng)目考核與評(píng)價(jià)標(biāo)準(zhǔn)分值觀測(cè)點(diǎn)90-100分70-89分60-69分0-59分課程項(xiàng)目課程項(xiàng)目功能完善，符合課程項(xiàng)目設(shè)計(jì)要求；項(xiàng)目代碼規(guī)范，代碼注釋豐富，符合項(xiàng)目開(kāi)發(fā)代碼要求；界面簡(jiǎn)潔美觀，人機(jī)交互合理，業(yè)務(wù)邏輯合理。項(xiàng)目文檔格式規(guī)范，符合項(xiàng)目技術(shù)文檔要求。課程項(xiàng)目功能較完善，符合課程項(xiàng)目設(shè)計(jì)要求；項(xiàng)目代碼較規(guī)范，有一定代碼注釋，符合項(xiàng)目開(kāi)發(fā)代碼要求；界面簡(jiǎn)潔美觀，人機(jī)交互較合理，業(yè)務(wù)邏輯合理。項(xiàng)目文檔格式較規(guī)范，符合項(xiàng)目技術(shù)文檔要求。課程項(xiàng)目功能基本完善，符合課程項(xiàng)目設(shè)計(jì)要求；項(xiàng)目代碼規(guī)范，有代碼注釋，基本符合項(xiàng)目開(kāi)發(fā)代碼要求；界面效果一般，人機(jī)交互簡(jiǎn)單，業(yè)務(wù)邏輯基本合理。項(xiàng)目文檔基本符合項(xiàng)目技術(shù)文檔要求。課程項(xiàng)目基本功能未完成；項(xiàng)目代碼不規(guī)范；界面簡(jiǎn)陋，人機(jī)交互不合理。項(xiàng)目文檔格式不規(guī)范，不符合項(xiàng)目技術(shù)文檔要求。六、教材與參考書(shū)（一）推薦教材1．《從0到1HTML+CSS+JavaScrip