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