1、Web前端設(shè)計與開發(fā)課程教學(xué)大綱一、課程基本信息課程編號：12179課程名稱：Web前端設(shè)計與開發(fā)英文名稱：Design and Development of Web Front-end課程類型：專業(yè)課課程要求：選修學(xué)時/學(xué)分：48/3（講課學(xué)時：32 實驗學(xué)時：16）先修課程：面向?qū)ο蟪绦蛟O(shè)計、計算機(jī)網(wǎng)絡(luò)后繼課程：基于 Java 的微服務(wù)架構(gòu)與應(yīng)用、大數(shù)據(jù)項目綜合實踐適用專業(yè)：數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù) 二、課程描述 “Web前端設(shè)計與開發(fā)”是數(shù)據(jù)科學(xué)與大數(shù)據(jù)技術(shù)專業(yè)的選修課，旨在引導(dǎo)學(xué)生掌握Web前端設(shè)計與開發(fā)問題中的理論知識和開發(fā)工具。通過理解Web的基本概念，了解Web的工作原理；掌握HTM

2、L、CSS、JavaScript的基本語法及使用方法，能夠熟練進(jìn)行前端的設(shè)計與開發(fā)；熟悉Web開發(fā)的國際標(biāo)準(zhǔn)體系，掌握jQuery框架的使用方法，并能夠使用該框架進(jìn)行前端設(shè)計。通過本課程的學(xué)習(xí)，使學(xué)生具有一定的Web前端開發(fā)能力，為未來大數(shù)據(jù)領(lǐng)域的前端開發(fā)和應(yīng)用開發(fā)打下良好的基礎(chǔ)。三、課程教學(xué)目標(biāo)1. 了解Web前端設(shè)計與開發(fā)的應(yīng)用背景，掌握Web前端開發(fā)所需要的理論知識、工程知識，掌握前端開發(fā)的基本技術(shù)，能夠針對大數(shù)據(jù)系統(tǒng)的前端進(jìn)行設(shè)計。（支持畢業(yè)能力要求3）2. 掌握HTML5、CSS3、JavaScript技術(shù)在Web前端開發(fā)中的運(yùn)用方法。針對具體工程問題，能夠恰當(dāng)選擇開發(fā)框架，進(jìn)行前端

3、開發(fā)、模擬和實現(xiàn)。（支持畢業(yè)能力要求5）3. 在實驗過程中，培養(yǎng)學(xué)生獨立解決問題的能力，提高對技術(shù)的運(yùn)用并能夠針對實際問題進(jìn)行分析與解釋，在開發(fā)過程中體現(xiàn)出創(chuàng)新思維。（支持畢業(yè)能力要求3）四、教學(xué)內(nèi)容、安排及與教學(xué)目標(biāo)的對應(yīng)關(guān)系單元教學(xué)內(nèi)容單元教學(xué)目標(biāo)學(xué)時教學(xué)方式對應(yīng)課程教學(xué)目標(biāo)1一、Web技術(shù)概述1.1 Web概述1.2 超文本與標(biāo)記語言1.3 Web標(biāo)準(zhǔn)1.4 Web開發(fā)工具(1)了解本課程研究的對象、內(nèi)容，明確本課程的地位；(2)理解超文本與標(biāo)記語言的概念，能理解其使用的環(huán)境和意義； (3)了解W3C制定的Web標(biāo)準(zhǔn)，能夠說明網(wǎng)頁的組成部分與標(biāo)準(zhǔn)的對應(yīng)；(4)會使用Web開發(fā)工具對網(wǎng)頁進(jìn)

4、行設(shè)計。2講授1、22二、HTML5語言2.1 HTML5基礎(chǔ)概述2.2 HTML5基本標(biāo)記2.3 HTML5表格2.4 HTML5表單(1)了解HTML的作用和主要版本差異；(2)能說明HTML文檔結(jié)構(gòu)，并對靜態(tài)頁面做出規(guī)劃；(3)掌握標(biāo)記語法，能熟練使用圖片、鏈接、列表、表格和表單標(biāo)記以及屬性、事件等元素完成靜態(tài)頁面設(shè)計。8講授1、23三、實驗1：使用HTML5創(chuàng)建網(wǎng)站頁面 能夠使用HTML5標(biāo)簽進(jìn)行前端頁面的設(shè)計，其中包括圖片、鏈接、表格、表單等的制作。4實驗1、2、34四、CSS樣式表4.1 樣式表的定義與語法格式4.2 頁面布局定位4.3 CSS網(wǎng)頁元素設(shè)計(1)在頁面布局的CSS樣

5、式表中體會CSS代碼所起到的作用；(2)掌握樣式表的編寫基本模式，基本語法與布局方式，進(jìn)行頁面布局。8講授1、25五、實驗2：使用CSS樣式表設(shè)計網(wǎng)站外觀能夠熟練使用CSS樣式表對網(wǎng)站外觀樣式進(jìn)行設(shè)計。4實驗1、36六、JavaScript語言6.1 JavaScript語言概述6.2 ECMAScript 語法6.3 ECMAScript 行為和對象6.4 BOM與DOM編程6.5 實例講解(1)掌握J(rèn)avaScript的使用方法，能正確在HTML文檔中插入JavaScript腳本；(2)掌握J(rèn)avaScript的基本語法規(guī)則，會使用ECMAScript語句、對象進(jìn)行程序設(shè)計；(3)掌握BO

6、M中Windows對象和Document對象的屬性、方法，能夠運(yùn)用JavaScript語言結(jié)合BOM實現(xiàn)控制文檔頁面；(4)了解運(yùn)用DOM對象的用法，能正確使用DOM對象動態(tài)設(shè)計文檔頁面。12講授1、27七、實驗3：使用JavaScript 實現(xiàn)頁面的動態(tài)交互設(shè)計基于JavaScript完成一個動態(tài)頁面設(shè)計。6實驗1、2、38八、vue框架簡介8.1 MVVM模式8.2 vue框架的開發(fā)(1)理解MVVM設(shè)計思想對前端開發(fā)帶來的好處，能夠講清楚MVVM與MVC模式使用上的區(qū)別；(2)使用vue框架進(jìn)行頁面開發(fā)，能夠體會其對頁面特效實現(xiàn)帶來的方便。2講授1、29九、實驗4：使用vue設(shè)計帶有特效

7、的網(wǎng)頁基于vue完成一個特效頁面設(shè)計。2實驗1、2、3五、其他教學(xué)環(huán)節(jié)（課外教學(xué)環(huán)節(jié)、要求、目標(biāo)）課外實驗（課外24學(xué)時）1.進(jìn)一步熟悉HTML5的標(biāo)簽，重點學(xué)習(xí)Canvas對象對圖像的操作。（4學(xué)時）2.進(jìn)一步熟悉JavaScript的核心對象，使用它制作一個頁面，完成數(shù)據(jù)檢測等功能。（4學(xué)時）3.進(jìn)一步熟悉vue框架，使用它進(jìn)行頁面的設(shè)計。（6學(xué)時）4.綜合所學(xué)知識，設(shè)計一個網(wǎng)站的前端頁面。（10學(xué)時）六、教學(xué)方法本課程與課堂教學(xué)為主，結(jié)合實驗等教學(xué)手段完成課程教學(xué)任務(wù)。1.課堂教學(xué)主要采用CAI教學(xué)，輔助多媒體、綜合運(yùn)用各種教學(xué)手段，包括電子教案，網(wǎng)絡(luò)課堂等，構(gòu)建立體化的教學(xué)環(huán)境，引進(jìn)優(yōu)

8、質(zhì)教學(xué)資源，促進(jìn)學(xué)生的個性化學(xué)習(xí)和動手能力的提升。2.教學(xué)方法以單元式教學(xué)為主，增加典型應(yīng)用示例，學(xué)生小組研討問題等措施。3.實驗過程中，培養(yǎng)學(xué)生獨立解決問題的能力，能夠針對實際問題進(jìn)行分析與解釋，并體現(xiàn)出創(chuàng)新思維。4.利用課外實驗加深和拓展技能，提高針對復(fù)雜技術(shù)的運(yùn)用，提高學(xué)生獨立解決問題的能力。七、學(xué)習(xí)評量考試成績?yōu)榘俜种?，由實驗成績和期末成績組合而成。各部分內(nèi)容及所占比例如下：1.實驗成績(30%)主要考核學(xué)生對實驗的完成能力，利用基本知識解決實際問題的編程實踐的能力。主要分三次對實驗報告和實驗表現(xiàn)進(jìn)行考核，每次10分。2.期末考試成績(70%)主要考核綜合運(yùn)用基本概念和方法分析和解決問

9、題的能力和程度。書面考試形式。書面考試形式，題型包括填空、選擇、問答題、分析題，綜合設(shè)計等?？荚嚂r間為2學(xué)時。3. 說明可利用指定“八、教學(xué)資源”中指定的MOOC的合格證書+評價作為課程學(xué)習(xí)成績，參加其他MOOC并計劃代替學(xué)習(xí)成績者須在課前向任課教師提出申請，由課程組教師討論決定。八、教學(xué)資源1教材1張樹明Web前端設(shè)計基礎(chǔ)HTML5、CSS3、JavaScript清華大學(xué)出版社，20172. 參考書目1 謬亮，陶穎Web前端設(shè)計與開發(fā)HTML5+CSS3+JavaScript清華大學(xué)出版社，20182 HYPERLINK /writer/Ethan_1.html t _blank Ethan， HYPERLINK /writer/Brown_1.html t _blank Brown著， HYPERL