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

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