《網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)》課程教學(xué)大綱一、課程基本信息課程名稱：網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)課程代碼：課程類型：專業(yè)核心課授課對(duì)象：軟件工程、數(shù)字媒體技術(shù)等專業(yè)學(xué)生總學(xué)時(shí)：48+16學(xué)時(shí)（其中教學(xué)周48學(xué)時(shí)，實(shí)踐周16學(xué)時(shí)）學(xué)分：3學(xué)分二、課程教學(xué)目標(biāo)（一）知識(shí)目標(biāo)使學(xué)生全面了解Web相關(guān)基礎(chǔ)知識(shí)，包括Web概述、網(wǎng)頁標(biāo)準(zhǔn)、網(wǎng)站開發(fā)工作流程及常用開發(fā)工具。深入掌握HTML5、CSS3、JavaScript的核心知識(shí)，如HTML常用標(biāo)簽、CSS樣式表及布局方法、JavaScript腳本編程基礎(chǔ)等。熟悉jQuery、Vue等前端框架的基本原理和使用方法，了解BootStrap框架等拓展知識(shí)。理解網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)的各個(gè)環(huán)節(jié)，包括網(wǎng)站規(guī)劃、素材準(zhǔn)備、頁面設(shè)計(jì)與布局、功能添加及發(fā)布維護(hù)等。（二）能力目標(biāo)培養(yǎng)學(xué)生熟練運(yùn)用HTML5、CSS3進(jìn)行網(wǎng)頁結(jié)構(gòu)搭建和樣式設(shè)計(jì)的能力，能夠完成PC端和移動(dòng)端網(wǎng)頁布局。提升學(xué)生使用JavaScript進(jìn)行網(wǎng)頁交互功能開發(fā)的能力，實(shí)現(xiàn)瀏覽器對(duì)象操作、DOM和BOM操作等。讓學(xué)生具備使用jQuery簡(jiǎn)化JavaScript代碼，實(shí)現(xiàn)常見網(wǎng)頁特效的能力，掌握Vue框架進(jìn)行組件化開發(fā)的基礎(chǔ)能力。通過網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)，鍛煉學(xué)生將理論知識(shí)應(yīng)用于實(shí)際項(xiàng)目的能力，培養(yǎng)項(xiàng)目規(guī)劃、團(tuán)隊(duì)協(xié)作和問題解決能力。（三）素質(zhì)目標(biāo)培養(yǎng)學(xué)生嚴(yán)謹(jǐn)?shù)木幊趟季S和規(guī)范的代碼編寫習(xí)慣。提高學(xué)生的創(chuàng)新意識(shí)和審美能力，能夠設(shè)計(jì)出美觀且實(shí)用的網(wǎng)頁。增強(qiáng)學(xué)生的團(tuán)隊(duì)合作精神和溝通能力，在項(xiàng)目實(shí)訓(xùn)中學(xué)會(huì)分工協(xié)作。培養(yǎng)學(xué)生自主學(xué)習(xí)和持續(xù)學(xué)習(xí)的能力，適應(yīng)Web前端技術(shù)的快速發(fā)展。三、課程教學(xué)重難點(diǎn)（一）教學(xué)重點(diǎn)HTML5常用標(biāo)簽的使用及網(wǎng)頁結(jié)構(gòu)搭建。CSS3樣式表的應(yīng)用，包括盒模型、選擇器、布局方法（浮動(dòng)、定位、彈性盒模型等）。JavaScript的基本語法、條件語句、循環(huán)語句、函數(shù)以及DOM和BOM對(duì)象操作。jQuery的選擇器和事件處理，Vue框架的基礎(chǔ)語法和組件使用。網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)的全流程操作，包括規(guī)劃、設(shè)計(jì)、開發(fā)和發(fā)布。（二）教學(xué)難點(diǎn)CSS3復(fù)雜布局的實(shí)現(xiàn)，如響應(yīng)式布局和自適應(yīng)布局的原理與實(shí)踐。JavaScript面向?qū)ο缶幊趟枷爰皬?fù)雜交互功能的實(shí)現(xiàn)。Vue框架的生命周期理解和組件化開發(fā)模式的應(yīng)用。綜合運(yùn)用多種技術(shù)進(jìn)行完整網(wǎng)站項(xiàng)目的開發(fā)與調(diào)試。四、教學(xué)方法講授法：系統(tǒng)講解Web前端開發(fā)的基礎(chǔ)理論知識(shí)、語法規(guī)則和概念原理，確保學(xué)生對(duì)知識(shí)點(diǎn)有清晰準(zhǔn)確的理解。演示法：通過實(shí)際操作演示，如使用開發(fā)工具編寫代碼、展示網(wǎng)頁效果，讓學(xué)生直觀地看到知識(shí)的應(yīng)用過程和實(shí)際效果。案例教學(xué)法：引入大量實(shí)際的網(wǎng)頁設(shè)計(jì)與開發(fā)案例，引導(dǎo)學(xué)生分析案例需求、實(shí)現(xiàn)思路和技術(shù)要點(diǎn)，培養(yǎng)學(xué)生解決實(shí)際問題的能力。項(xiàng)目驅(qū)動(dòng)法：在課程后期安排綜合性的項(xiàng)目實(shí)訓(xùn)，讓學(xué)生分組完成實(shí)際的網(wǎng)站開發(fā)項(xiàng)目，在項(xiàng)目實(shí)踐中鞏固所學(xué)知識(shí)，提高團(tuán)隊(duì)協(xié)作和項(xiàng)目管理能力。小組討論法：組織學(xué)生針對(duì)一些復(fù)雜問題或技術(shù)難點(diǎn)進(jìn)行小組討論，促進(jìn)學(xué)生之間的思想交流和知識(shí)共享，培養(yǎng)學(xué)生的團(tuán)隊(duì)合作和自主學(xué)習(xí)能力。五、課程教學(xué)內(nèi)容與學(xué)時(shí)安排（一）第一部分：理論篇（16周，48學(xué)時(shí)）章節(jié)教學(xué)內(nèi)容理論學(xué)時(shí)實(shí)踐學(xué)時(shí)第1章網(wǎng)頁設(shè)計(jì)與Web前端基礎(chǔ)，包括Web概述、網(wǎng)頁標(biāo)準(zhǔn)簡(jiǎn)介、網(wǎng)站開發(fā)工作流程、Web開發(fā)工具21第2章HTML常用標(biāo)簽，涵蓋HTML5網(wǎng)頁結(jié)構(gòu)、網(wǎng)頁文本、圖片標(biāo)簽及屬性、超鏈接標(biāo)簽、插入音視頻21第3章使用CSS3樣式表，包括初識(shí)CSS樣式表、盒模型、列表標(biāo)簽及樣式、元素分類及轉(zhuǎn)換、CSS常用屬性、選擇器高級(jí)、CSS繼承與優(yōu)先、常用CSS3屬性42第4章使用HTML+CSS布局網(wǎng)頁，包括CSS布局概述、元素的浮動(dòng)、定位、圖片特點(diǎn)及布局、表單及布局、表格及布局、內(nèi)聯(lián)框架、CSS進(jìn)階應(yīng)用、PC端網(wǎng)頁布局綜合案例實(shí)戰(zhàn)42第5章HTML5+CSS3移動(dòng)網(wǎng)站布局，涉及HTML5新增標(biāo)簽、CSS3新增偽類和偽元素、變形、過渡及動(dòng)畫、新增屬性、彈性盒模型、響應(yīng)式布局和自適應(yīng)布局、移動(dòng)端網(wǎng)頁布局案例實(shí)戰(zhàn)63第6章使用JavaScript腳本，包括初識(shí)JavaScript、基本元素、操作瀏覽器對(duì)象屬性及CSS樣式、條件語句、循環(huán)語句、函數(shù)、對(duì)象操作語句、常用內(nèi)置對(duì)象、DOM對(duì)象及操作、BOM對(duì)象及操作、localStorage對(duì)象及操作、Web交互開發(fā)案例實(shí)戰(zhàn)84第7章jQuery基礎(chǔ)知識(shí)，包括jQuery介紹、基本選擇器、高級(jí)選擇器、事件處理、內(nèi)容處理、樣式處理21第8章Vue框架，包括Vue.js簡(jiǎn)介和環(huán)境搭建、基礎(chǔ)語法、組件基礎(chǔ)知識(shí)、生命周期、簡(jiǎn)單Vue應(yīng)用實(shí)例42（二）第二部分：應(yīng)用篇（1周，16學(xué)時(shí)）章節(jié)教學(xué)內(nèi)容實(shí)踐學(xué)時(shí)第9章網(wǎng)站設(shè)計(jì)綜合實(shí)訓(xùn)，包括網(wǎng)站的規(guī)劃、素材準(zhǔn)備及管理、網(wǎng)頁外觀設(shè)計(jì)及布局、向頁面添加內(nèi)容、使用CSS設(shè)置頁面、添加網(wǎng)頁特效及功能、發(fā)布及維護(hù)Web站點(diǎn)、課程設(shè)計(jì)及要求12第10章課業(yè)拓展，涵蓋瀏覽器開發(fā)者工具、Canvas圖形繪制、BootStrap框架、架設(shè)互聯(lián)網(wǎng)網(wǎng)站、云服務(wù)4六、課程考核方式平時(shí)成績(jī)（30%）：包括課堂表現(xiàn)（回答問題、參與討論等）、作業(yè)完成情況、實(shí)驗(yàn)報(bào)告質(zhì)量等。實(shí)踐成績(jī)（40%）：根據(jù)學(xué)生在課程實(shí)驗(yàn)、項(xiàng)目實(shí)訓(xùn)中的表現(xiàn)和成果進(jìn)行評(píng)分，考察學(xué)生的實(shí)際操作能力和項(xiàng)目完成質(zhì)量。期末考核（30%）：采用理論考試與實(shí)踐操作相結(jié)合的方式，理論考試考查學(xué)生對(duì)課程基礎(chǔ)知識(shí)和核心概念的掌握程度，實(shí)踐操作考核學(xué)生綜合運(yùn)用所學(xué)知識(shí)解決實(shí)際問題的能力。七、推薦教材與參考資料推薦教材：《網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)案例教程——HTML5、CSS3、JavaScript（第2版）》，莫小梅等編著，清華大學(xué)出版社.參考資料：《Web前端設(shè)計(jì)從入門到實(shí)戰(zhàn)——HTML5、CSS3、JavaScript項(xiàng)目案例開發(fā)（第2版）》.張樹明，清華大學(xué)出版社，2019.《HTML5與CSS3基礎(chǔ)教程（第9版）》.[美]喬·卡薩博納（JoeCasabona）著，望以文譯，人民郵電出版社.相關(guān)技術(shù)網(wǎng)站（如MDN、W3School等）和在線學(xué)習(xí)平臺(tái)（如慕課網(wǎng)、網(wǎng)易云課堂等）上的優(yōu)質(zhì)課程和學(xué)習(xí)資源。《網(wǎng)頁設(shè)計(jì)與Web前端開發(fā)》教學(xué)進(jìn)度表課程代碼：總學(xué)時(shí)：48+16學(xué)時(shí)（其中教學(xué)周48學(xué)時(shí)，實(shí)踐周16學(xué)時(shí)）

學(xué)分：3學(xué)分

授課對(duì)象：軟件工程、數(shù)字媒體技術(shù)等專業(yè)學(xué)生一、理論教學(xué)周（16周，每周3學(xué)時(shí)）周次教學(xué)內(nèi)容理論學(xué)時(shí)實(shí)踐學(xué)時(shí)第1周第1章Web前端基礎(chǔ)

Web概述、網(wǎng)頁標(biāo)準(zhǔn)、開發(fā)流程、常用工具21第2周第2章HTML常用標(biāo)簽

網(wǎng)頁結(jié)構(gòu)、文本/圖片標(biāo)簽、超鏈接、音視頻標(biāo)簽

21第3周第3章使用CSS3樣式表

選擇器基礎(chǔ)、盒模型、列表樣式、元素分類21第4周第3章使用CSS3樣式表CSS常用屬性、選擇器高級(jí)、CSS繼承與優(yōu)先、常用CSS3屬性21第5周第4章使用HTML+CSS布局網(wǎng)頁CSS布局概述、浮動(dòng)、定位原理、圖片布局21第6周第4章使用HTML+CSS布局網(wǎng)頁表單布局、表格布局、內(nèi)聯(lián)框架、CSS進(jìn)階應(yīng)用、PC端網(wǎng)頁布局綜合案例實(shí)戰(zhàn)21第7周第5章HTML5+CSS3移動(dòng)網(wǎng)站布局HTML5新增標(biāo)簽、CSS3偽類/偽元素21第8周第5章HTML5+CSS3移動(dòng)網(wǎng)站布局變形、過渡、動(dòng)畫屬性及CSS3新增屬性21第9周第5章HTML5+CSS3移動(dòng)網(wǎng)站布局彈性盒模型、響應(yīng)式和自適應(yīng)原理、移動(dòng)端布局案例21第10周第6章使用JavaScript腳本初識(shí)JavaScript、基本元素、操作瀏覽器對(duì)象屬性及CSS樣式21第11周第6章使用JavaScript腳本條件語句、循環(huán)語句、函數(shù)21第12周第6章使用JavaScript腳本對(duì)象操作語句、內(nèi)置對(duì)象、DOM對(duì)象及操作21第13周第6章使用JavaScript腳本BOM對(duì)象及操作、localStorage對(duì)象及操作、Web交互開發(fā)案例實(shí)戰(zhàn)21第14周第7章jQuery基礎(chǔ)知識(shí)選擇器、事件處理、內(nèi)容處理、樣式處理21第15周第8章Vue框架簡(jiǎn)介和環(huán)境搭建、基礎(chǔ)語法21第16周第8章Vue