Web前端課程的知識(shí)體系和教學(xué)實(shí)踐

劉蕾　劉冰月

摘 要：Web前端技術(shù)在軟件開發(fā)中的地位十分重要，無(wú)論是臺(tái)式機(jī)還是移動(dòng)端的軟件產(chǎn)品都離不開前端技術(shù)，因此高等院校計(jì)算機(jī)專業(yè)都普遍開設(shè)了Web前端課程，甚至一些文科專業(yè)也開展了學(xué)習(xí)。Web前端課程通常包括一系列課程，比如網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)、JavaScript編程、HTML5網(wǎng)頁(yè)制作等，內(nèi)容都是圍繞HTML、CSS、JavaScript知識(shí)體系展開。針對(duì)該類課程知識(shí)點(diǎn)多，學(xué)生層次復(fù)雜的問題，基于多年教學(xué)總結(jié)，提出了一套前端課程的設(shè)置方案，探討在Web前端課程中應(yīng)該包含的知識(shí)體系、教材選用和教學(xué)實(shí)踐等問題。這套教學(xué)知識(shí)體系適用于計(jì)算機(jī)類專業(yè)學(xué)生，在教學(xué)過程中取得了良好的教學(xué)效果。

關(guān)鍵詞：Web前端技術(shù)；知識(shí)體系；教材選用；教學(xué)實(shí)踐

中圖分類號(hào)：TP31 文獻(xiàn)標(biāo)識(shí)碼：A

1 引言（Introduction）

Web前端是計(jì)算機(jī)應(yīng)用開發(fā)的重要領(lǐng)域。Web前端開發(fā)人員需要熟練掌握HTML、CSS、JavaScript、Ajax等核心的前端開發(fā)技術(shù)，同時(shí)具備互聯(lián)網(wǎng)交互設(shè)計(jì)能力，熟悉瀏覽器工作原理和數(shù)據(jù)通信協(xié)議，掌握最新的開發(fā)工具和開發(fā)框架[1]。由于前端技術(shù)內(nèi)容豐富、包羅萬(wàn)象，目前沒有哪門課能夠概括其全部，因此，前端技術(shù)通常以各種形式出現(xiàn)在不同的課程中。例如哈佛大學(xué)的公開課《計(jì)算機(jī)導(dǎo)論》中，講述了HTML、CSS、JavaScript、Ajax，以及網(wǎng)站網(wǎng)頁(yè)開發(fā)等內(nèi)容；斯坦福大學(xué)的公開課《用網(wǎng)頁(yè)技術(shù)開發(fā)手機(jī)應(yīng)用》中，講述了Canvas、SVG、OpenGL、WebGL、JavaScript、HTML5等；拉籌伯大學(xué)的公開課《新聞人的網(wǎng)絡(luò)編輯和發(fā)布》中，講述了HTML和CSS的使用方法，并且提出無(wú)論是文科生還是理科生都應(yīng)該了解網(wǎng)頁(yè)制作的知識(shí)；清華大學(xué)的《Web前端技術(shù)實(shí)訓(xùn)課程》中，講述Web交互技術(shù)發(fā)展趨勢(shì)、瀏覽器渲染技術(shù)、JavaScript高級(jí)程序設(shè)計(jì)、HTML5&CSS3;技術(shù)、JS關(guān)鍵技術(shù)、JS架構(gòu)設(shè)計(jì)等主題。在計(jì)算機(jī)專業(yè)中，Web前端技術(shù)是分布式網(wǎng)站建設(shè)、JavaScript高級(jí)編程、Java Web網(wǎng)站開發(fā)、Android移動(dòng)開發(fā)、人機(jī)交互等專業(yè)課程的先行課程[2]。不同專業(yè)的學(xué)生學(xué)習(xí)該課程，其教學(xué)內(nèi)容會(huì)作相應(yīng)調(diào)整，下面我們就探討一下計(jì)算機(jī)專業(yè)本科同學(xué)在前端技術(shù)課程當(dāng)中應(yīng)該掌握的知識(shí)體系[3]。

2 Web前端知識(shí)體系（Web front-end knowledge

system）

2.1 HTML

HTML超文本標(biāo)記語(yǔ)言是互聯(lián)網(wǎng)的核心語(yǔ)言，它的作用是告訴瀏覽器如何顯示文檔的內(nèi)容，如文本、圖像和其他媒體資源，還可以通過超鏈接把文檔與其他互聯(lián)網(wǎng)資源連接起來(lái)。學(xué)生需要了解HTML語(yǔ)法，學(xué)習(xí)使用編輯工具編寫HTML文檔。通過HTML文檔的創(chuàng)建過程，獲得編輯和修改HTML網(wǎng)頁(yè)的經(jīng)驗(yàn)；了解瀏覽器如何對(duì)網(wǎng)頁(yè)進(jìn)行展示，理解HTML文檔與瀏覽器的關(guān)系，記憶HTML常用標(biāo)簽的用法。

2.2 HTML5

HTML5是HTML目前發(fā)布的版本，為了在移動(dòng)設(shè)備上支持多媒體，引入了一些新的語(yǔ)法元素，如Video、Audio和Canvas標(biāo)簽。Canvas是取代Flash顯示圖形或動(dòng)畫并且能夠與用戶交互的多媒體元素，學(xué)生應(yīng)該掌握Canvas編程方法，會(huì)使用相關(guān)繪圖API完成在Canvas上繪制路徑、矩形、圓形、字符，以及圖像的操作。其他一些HTML5新增的功能在幫助瀏覽器實(shí)現(xiàn)富客戶端功能上，也將發(fā)揮巨大的作用[4]，學(xué)生應(yīng)該了解這些新增的元素和屬性。表單一直都是Web的核心技術(shù)之一，可以依靠它來(lái)完成Web上的數(shù)據(jù)輸入界面，從而使得客戶端和服務(wù)器能夠進(jìn)行方便快捷的交互。HTML5新增了許多表單控件及其API，可以方便完成驗(yàn)證功能而不用借助其他前端腳本語(yǔ)言。HTML5還引進(jìn)了文檔結(jié)構(gòu)標(biāo)簽，如header、section、article、nav、footer等，使搜索引擎可以更好地理解文檔的語(yǔ)義。此外，本地存儲(chǔ)、本地緩存、本地?cái)?shù)據(jù)庫(kù)等也是學(xué)生應(yīng)該熟練掌握的內(nèi)容。

2.3 CSS

CSS是級(jí)聯(lián)樣式表，它的作用是控制頁(yè)面里每一個(gè)元素的表現(xiàn)形式，比如字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。學(xué)生學(xué)習(xí)的重點(diǎn)在于掌握CSS選擇符的使用，可以在學(xué)習(xí)和使用中逐漸擴(kuò)展對(duì)CSS3新增選擇符的認(rèn)識(shí)。字體和文本、背景、邊框、邊距等常用屬性必須記憶，應(yīng)該通過大量編碼練習(xí)強(qiáng)化記憶。CSS3是CSS目前的版本，主要包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等模塊。CSS3高級(jí)選擇器是非常有用的，例如子串匹配的屬性選擇符、結(jié)構(gòu)性偽類、目標(biāo)偽類、UI元素狀態(tài)偽類、通用兄弟元素選擇器，它們可以減少在標(biāo)簽中的class和ID的數(shù)量并讓設(shè)計(jì)師更方便地維護(hù)樣式表。使用CSS偽類知識(shí)可以制作出豐富多彩的顯示效果，學(xué)生需要在平時(shí)多多積累。盒子模型在前端開發(fā)中非常重要，重點(diǎn)掌握CSS中盒子模型的各個(gè)屬性，學(xué)生需通過大量編碼練習(xí)強(qiáng)化記憶。浮動(dòng)和定位在頁(yè)面布局中有著重要的意義，是學(xué)習(xí)時(shí)必須掌握的重點(diǎn)，通過編碼實(shí)踐，比較每一個(gè)屬性值不同的含義。CSS3的新特征有很多，例如圓角效果、圖形化邊框、盒子陰影與文字陰影、變形效果、動(dòng)畫效果、多欄布局、媒體查詢等。難點(diǎn)在于定義動(dòng)畫關(guān)鍵幀@keyframes，需要理解關(guān)鍵幀的含義并在編碼實(shí)踐時(shí)認(rèn)真體會(huì)其作用，比較不同的屬性值的區(qū)別。使用Transition與Transform結(jié)合能夠?qū)崿F(xiàn)豐富多彩的動(dòng)畫效果，需要熟練掌握Transition與Transform知識(shí)，并將這部分知識(shí)進(jìn)行結(jié)合使用[5]。

2.4 JavaScript

JavaScript是一種面向?qū)ο蟮目蛻舳四_本語(yǔ)言，它的運(yùn)行不需要Web服務(wù)器的支持，可以直接在客戶端本地運(yùn)行。通過JavaScript的學(xué)習(xí)，學(xué)生能夠了解JavaScript的基本語(yǔ)法，函數(shù)和事件，學(xué)會(huì)使用JavaScript的內(nèi)置對(duì)象、BOM對(duì)象、DOM對(duì)象和它們的常用方法[6]。

學(xué)生應(yīng)該理解函數(shù)、事件的概念。在JavaScript中，函數(shù)可以簡(jiǎn)單地理解為用來(lái)完成一系列工作的一組語(yǔ)句。JavaScript函數(shù)可以封裝那些在程序中可能需要多次使用的模塊，并可以作為事件驅(qū)動(dòng)處理程序。使用函數(shù)前一定要先進(jìn)行定義，函數(shù)定義分為三個(gè)部分：函數(shù)名、參數(shù)列表和函數(shù)體。事件就是指Web頁(yè)面在瀏覽器處于活動(dòng)狀態(tài)時(shí)發(fā)生的各種事情，也就是用戶與Web頁(yè)面交互時(shí)產(chǎn)生的各種操作。瀏覽器為了響應(yīng)某個(gè)事件而進(jìn)行的處理，叫做事件處理，這個(gè)處理過程叫做事件處理函數(shù)。對(duì)事件的處理，一般都是通過調(diào)用相應(yīng)的事件處理函數(shù)去完成的。學(xué)生應(yīng)該重點(diǎn)掌握J(rèn)avaScript的函數(shù)和事件處理，先學(xué)會(huì)編寫簡(jiǎn)單的事件處理響應(yīng)函數(shù)。練習(xí)如何使用JavaScript控制客戶端行為是重要的學(xué)習(xí)途徑。讓學(xué)生通過JavaScript實(shí)際案例的編寫過程，學(xué)習(xí)JavaScript語(yǔ)言的編程思路和編程經(jīng)驗(yàn)，記憶JavaScript的基本語(yǔ)法結(jié)構(gòu)。

關(guān)于JavaScript對(duì)象，學(xué)生應(yīng)該理解以下知識(shí)點(diǎn)。對(duì)象是一組包含數(shù)據(jù)的屬性和對(duì)屬性中包含的數(shù)據(jù)進(jìn)行操作的方法。JavaScript中支持的對(duì)象主要有內(nèi)置對(duì)象、瀏覽器對(duì)象、DOM對(duì)象、自定義對(duì)象。JavaScript將一些常用的功能預(yù)先定義成對(duì)象，用戶可以直接使用，這種對(duì)象就是內(nèi)置對(duì)象。瀏覽器對(duì)象是網(wǎng)頁(yè)和瀏覽器本身的各種元素在JavaScript程序中的體現(xiàn)，它使JavaScript可以定位、改變內(nèi)容，以及展示HTML頁(yè)面的所有元素。DOM對(duì)象定義了用于HTML的一系列標(biāo)準(zhǔn)的對(duì)象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。除了瀏覽器里面預(yù)定義的那些對(duì)象之外，也可以自己定義對(duì)象。在Javascript高級(jí)課程中應(yīng)該講述怎么使用對(duì)象、屬性、函數(shù)和方法，怎樣實(shí)現(xiàn)自定義對(duì)象，并通過大量的編程練習(xí)記憶JavaScript中的常用BOM和DOM對(duì)象的方法的使用[7]。

2.5 人機(jī)交互設(shè)計(jì)

學(xué)生應(yīng)該能夠了解人機(jī)交互設(shè)計(jì)的具體工作，理解設(shè)計(jì)的準(zhǔn)則與規(guī)范，學(xué)會(huì)分析用戶需求，能夠發(fā)現(xiàn)常見的設(shè)計(jì)缺陷，能夠按照標(biāo)準(zhǔn)的設(shè)計(jì)流程進(jìn)行軟件產(chǎn)品交互設(shè)計(jì)，會(huì)使用設(shè)計(jì)工具開發(fā)界面原型。具體的實(shí)踐方式，通過收集身邊的交互設(shè)計(jì)典型案例，分析其中的成功和失敗，發(fā)現(xiàn)和總結(jié)常見的設(shè)計(jì)缺陷，設(shè)立某個(gè)應(yīng)用場(chǎng)景，深入分析用戶的需求并組織小組討論。

3 Web前端技術(shù)的教學(xué)目的（The teaching aim of

web front-end technology）

現(xiàn)階段，Web前端開發(fā)工程師是一個(gè)較新并且需求量較大的職位，在國(guó)際和國(guó)內(nèi)的Web開發(fā)相關(guān)領(lǐng)域中也日益受到重視，從事前端開發(fā)的程序員越來(lái)越多。對(duì)于Web前端開發(fā)人員來(lái)說(shuō)，目前主要需要掌握的技術(shù)包括HTML、CSS和JavaScript。隨著RIA（Rich Internet Applications，富互聯(lián)網(wǎng)應(yīng)用）的流行和普及，一些框架和服務(wù)器端語(yǔ)言也是Web前端開發(fā)工程師應(yīng)該掌握的。

在互聯(lián)網(wǎng)的演化進(jìn)程中，Web1.0時(shí)代的網(wǎng)站主要以靜態(tài)內(nèi)容為主，用戶使用網(wǎng)站時(shí)也以瀏覽為主。而進(jìn)入到Web2.0時(shí)代以后，各種媲美于桌面應(yīng)用程序的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的展示和呈現(xiàn)方式也發(fā)生了根本的變化。網(wǎng)頁(yè)不再只是由靜態(tài)的、單一的文字和圖片構(gòu)成，而是包含了各種各樣豐富的多媒體資源和動(dòng)態(tài)功能，這使得網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)、效果更加炫麗、操作也越來(lái)越智能化和人性化，網(wǎng)頁(yè)上豐富多樣、智能友好的交互形式為用戶提供了更好的使用體驗(yàn)，而這些都是基于Web前端開發(fā)技術(shù)實(shí)現(xiàn)的。

因此，Web前端教學(xué)應(yīng)該以HTML5、CSS3和JavaScript等相關(guān)技術(shù)為主線，使知識(shí)講解與實(shí)踐相結(jié)合，從設(shè)計(jì)人機(jī)交互界面開始入門，深入到網(wǎng)站開發(fā)、代碼性能優(yōu)化、提升頁(yè)面效率，全面提高學(xué)生的Web前端開發(fā)能力。面向企業(yè)需求，培養(yǎng)適應(yīng)市場(chǎng)需要的開發(fā)人員。

4 Web前端教材編寫思路（Ideas for compiling web

front-end textbook）

目前Web前端教材比較缺乏，為了滿足這門課的教學(xué)需要，我校自主編寫的CDIO教程《HTML5與CSS3實(shí)戰(zhàn)教程》對(duì)課程內(nèi)容做了如下安排。

在第1章介紹HTML基礎(chǔ)，主要介紹HTML的基本語(yǔ)法、常用標(biāo)簽和重點(diǎn)元素的使用。接下來(lái)，在第2—4章主要介紹CSS的使用。分別介紹CSS的基本語(yǔ)法、選擇符的作用和使用、常用屬性的使用和樣式的定義。在此基礎(chǔ)之上，講解CSS的盒子模型的常用屬性、浮動(dòng)定位和position定位、display屬性的使用。另外，還介紹了CSS3中新引入的動(dòng)畫效果的實(shí)現(xiàn)，包括Animation動(dòng)畫實(shí)現(xiàn)和Transition過渡效果實(shí)現(xiàn)。在第5章介紹JavaScript基礎(chǔ)，主要介紹JavaScript的基本語(yǔ)法、JavaScript函數(shù)定義、事件和事件處理、內(nèi)置對(duì)象、BOM對(duì)象和DOM對(duì)象的常用屬性和方法的使用。第6-8章是對(duì)HTML5規(guī)范中新引入的元素和特性進(jìn)行介紹。首先，介紹了HTML5新增元素和屬性，主要包括HTML5中新增的元素和屬性的含義和使用，例如新增的包含語(yǔ)義信息的文檔結(jié)構(gòu)元素和新增的表單元素等。接下來(lái)，講解了HTML5中新引入的Canvas畫布元素，主要介紹Canvas元素的使用，包括利用Canvas繪制基本圖形、繪制圖像，以及Canvas和基本事件處理。然后，介紹HTML5中新增的本地存儲(chǔ)技術(shù)，包括Web Storage和本地?cái)?shù)據(jù)庫(kù)的使用。在第9章講解貫穿全書的綜合項(xiàng)目案例，主要介紹一個(gè)綜合的完整的咖啡銷售網(wǎng)站的頁(yè)面設(shè)計(jì)和開發(fā)，使用到了之前所學(xué)的HTML、CSS和JavaScript，以及HTML5和CSS3的新特性等技術(shù)，進(jìn)行一個(gè)較為綜合的Web網(wǎng)站頁(yè)面設(shè)計(jì)開發(fā)。最后，在第10章講解人機(jī)交互設(shè)計(jì)的基本原則和典型案例[8]。

5 教學(xué)策略（Teaching strategy）

前端技術(shù)課程中，既有很多靈活的理論知識(shí)（尤其是HTML、CSS、JavaScript的語(yǔ)法知識(shí)），又有大量代碼設(shè)計(jì)題。而且該課程對(duì)程序設(shè)計(jì)能力的要求很高，需要學(xué)生動(dòng)手編寫作業(yè)題以應(yīng)用并掌握相關(guān)知識(shí)。對(duì)于學(xué)習(xí)者來(lái)說(shuō)，應(yīng)該較為熟練使用計(jì)算機(jī)，有一定英語(yǔ)基礎(chǔ)，最好學(xué)習(xí)過《計(jì)算機(jī)導(dǎo)論》之類的課程。教師在教學(xué)實(shí)施之前應(yīng)該準(zhǔn)備教學(xué)大綱、教學(xué)日歷、教案、實(shí)驗(yàn)指導(dǎo)書、教學(xué)手冊(cè)（制定具體的平時(shí)成績(jī)考核標(biāo)準(zhǔn)）、期末成績(jī)考核標(biāo)準(zhǔn)。除此之外需要至少一個(gè)功能完整的網(wǎng)站項(xiàng)目供課堂教學(xué)使用，以及大量的基礎(chǔ)案例。

5.1 啟發(fā)式教學(xué)

在Web前端教學(xué)中，對(duì)于知識(shí)的理解更多來(lái)源于實(shí)踐，教師應(yīng)該鼓勵(lì)學(xué)生去大膽設(shè)想并努力完成自己的作品，培養(yǎng)學(xué)生的創(chuàng)造性思維和主動(dòng)學(xué)習(xí)精神。在完成自己的作品當(dāng)中，學(xué)生會(huì)發(fā)揮主觀能動(dòng)性，主動(dòng)學(xué)習(xí)和嘗試課堂之外的技術(shù)，體會(huì)到創(chuàng)造的樂趣。

5.2 與科研相結(jié)合

在教學(xué)中引進(jìn)新的理論和技術(shù)內(nèi)容盡量把科研中涉及到的與前端技術(shù)課程相關(guān)的新理論和技術(shù)、優(yōu)秀論文介紹給學(xué)生。例如，給學(xué)生講解“搜索引擎”，講解當(dāng)前網(wǎng)絡(luò)和數(shù)據(jù)庫(kù)的研究熱點(diǎn)。

5.3 實(shí)踐教學(xué)

前端教學(xué)應(yīng)該以HTML5、CSS3和JavaScript等相關(guān)技術(shù)為主線，在整個(gè)知識(shí)體系講授期間貫穿一個(gè)完整的Web前端開發(fā)項(xiàng)目案例[9]。在理論內(nèi)容講解和單元項(xiàng)目案例實(shí)現(xiàn)的過程中，結(jié)合具體知識(shí)點(diǎn)講解HTML和CSS的基本語(yǔ)法、主要標(biāo)簽和屬性作用、JavaScript基本語(yǔ)法和常用對(duì)象的使用、函數(shù)和事件處理等內(nèi)容，并在掌握了每一章的理論內(nèi)容和單元項(xiàng)目實(shí)現(xiàn)過程的基礎(chǔ)之上，完成對(duì)課程綜合項(xiàng)目中相應(yīng)的模塊的實(shí)現(xiàn)，從而綜合應(yīng)用所學(xué)技術(shù)、加深了各章知識(shí)點(diǎn)的理解程度和提高技術(shù)運(yùn)用熟練程度。

5.4 采用新的教育技術(shù)

為了提高教學(xué)效果建立了一個(gè)Web前端作品展示網(wǎng)站。以往的課程考核都是學(xué)生上傳源碼，教師檢查。建設(shè)并開通了Web前端作品展示平臺(tái)之后，學(xué)生可以獨(dú)立上傳文件并展示作品。作品對(duì)所有訪問者開源，同學(xué)之間可以相互借鑒和學(xué)習(xí)。同時(shí)，平臺(tái)還有點(diǎn)贊和評(píng)論功能，針對(duì)所有學(xué)生和家長(zhǎng)開放。對(duì)于成績(jī)?cè)u(píng)定，教師有專門的工作臺(tái)進(jìn)行項(xiàng)目評(píng)分，方便而高效；教師的評(píng)語(yǔ)也可以被學(xué)生看到，促進(jìn)師生交流。同時(shí)，為了保證項(xiàng)目展示穩(wěn)定性和訪問正確性，平臺(tái)設(shè)定輔助上傳機(jī)制，自動(dòng)提示上傳文件的格式錯(cuò)誤。平臺(tái)運(yùn)行獨(dú)立的沙盒機(jī)制，防止惡意代碼文件的破壞。

6 結(jié)論（Conclusion）

Web前端課程在高等院校的開設(shè)比較普遍，雖然課程名稱不統(tǒng)一，但是很多專業(yè)都在教授相關(guān)課程，面向的學(xué)生群體不同，教授的內(nèi)容難度也不相同。作為計(jì)算機(jī)專業(yè)的院系，一般都開設(shè)了前端課程，或者要求學(xué)生自學(xué)以掌握相關(guān)知識(shí)。本科或者專科學(xué)習(xí)計(jì)算機(jī)專業(yè)的學(xué)生[10]，掌握了前端開發(fā)的技能，在就業(yè)時(shí)可以選擇Web前端工程師的崗位，從事相關(guān)的工作。作為教師，我們應(yīng)該認(rèn)真研究最新的技術(shù)熱點(diǎn)，更好地開展Web前端課程教學(xué)，使課程與行業(yè)現(xiàn)狀接軌，讓學(xué)生更加順利的就業(yè)[11]。

參考文獻(xiàn)（References）

[1] 魏冬梅.Web前端開發(fā)課程教學(xué)探討與實(shí)踐[J].福建電腦，2013（6）：181-183.

[2] 阮曉龍.Web前端開發(fā)課程內(nèi)容改革的探索與嘗試[J].中國(guó)現(xiàn)代教育裝備，2015（7）：94-97.

[3] 儲(chǔ)久良.Web前端開發(fā)技術(shù)課程教學(xué)改革與實(shí)踐[J].計(jì)算機(jī)教育，2014（14）：12-15.

[4] 陸鋼，李慧云.HTML5技術(shù)應(yīng)用現(xiàn)狀與發(fā)展趨勢(shì)研究[J].廣東通信技術(shù)，2013（5）：2-5.

[5] 孔志文.HTML5與CSS3技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用及發(fā)展前景[J].課程教育研究，2015（9）：216-217.

[6] 胡沛.JavaScript課程教學(xué)改革探索[J].電腦知識(shí)與技術(shù)，2011

（32）：7944-7945.

[7] 江駿.基于CDIO的JavaScript課程教學(xué)改革與研究[J].消費(fèi)電子，2012（15）：56-56.

[8] 胡倫.對(duì)網(wǎng)絡(luò)課程人機(jī)交互設(shè)計(jì)的研究與探索[J].中國(guó)教育信息化，2011（1）：75-76.

[9] Dan L I，Yang N.Reform of the Course of HTML+CSS Web Page Design Based on Project-oriented and Task-driven[J].Computer Knowledge & Technology，2013（3）：15-20.

[10] 陸煒妮，鄒利華.基于專本銜接的“web前端”課程設(shè)計(jì)[J].石家莊職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017（6）：62-65.

[11] Chen X，Dong W U.Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Employment Orientation[J].Modern Computer，

2017（1）：14-19.

作者簡(jiǎn)介：

劉 蕾（1978-），女，碩士，副教授.研究領(lǐng)域：數(shù)據(jù)挖掘，大數(shù)據(jù).

劉冰月（1978-），女，碩士，教授.研究領(lǐng)域：數(shù)據(jù)挖掘，大數(shù)據(jù).