基于CDIO 理念的《HTML5 網(wǎng)站設計》課程教學模式構(gòu)建

戴宏明，戴宏亮

（1.廣東科貿(mào)職業(yè)學院，廣州510430；2.華南理工大學，廣州510006；3.廣州大學，廣州510006）

0 引言

目前，互聯(lián)網(wǎng)+在全球經(jīng)濟領域已得到廣泛的應用，互聯(lián)網(wǎng)已是大眾創(chuàng)業(yè)、萬眾創(chuàng)新的工具。HTML5網(wǎng)站作為互聯(lián)網(wǎng)的一個重要元素，HTML5 網(wǎng)站設計已成為一項基本技能。在新工科背景下[1-3]，在社會經(jīng)濟轉(zhuǎn)型發(fā)展中，HTML5 網(wǎng)站設計人才扮演的角色將會愈發(fā)重要。隨著國家信息化發(fā)展戰(zhàn)略的實施，各行各業(yè)對前端設計人才的需求日益強烈。另外，社會就業(yè)大軍規(guī)模日益龐大，剛畢業(yè)的前端設計人員找工作越來越困難。為什么會出現(xiàn)如此強烈反差呢？這個問題由來已久，在歐美發(fā)達國家也是如此。簡單地說，就是教育界培養(yǎng)的工程技術(shù)人才與社會實際要求脫節(jié)，工程技術(shù)應屆畢業(yè)生的實踐能力及創(chuàng)新能力與社會的實際應用要求有較大差距。

為了培養(yǎng)出符合社會需要的工程技術(shù)人才，各國教育行政主管部門、大學和教師開展了一系列的工程教育改革。CDIO（Conceive 構(gòu)思，Design 設計，Implement 實施，Operate 運行）教育模式就是在此背景下由美國麻省理工學院和瑞典皇家工學院等四所大學經(jīng)過多年的探索、研究和實踐，于2004 年創(chuàng)立的。這個教育模式是以真實產(chǎn)品、過程和系統(tǒng)的構(gòu)思、設計、實施、運行全生命周期為背景，以CDIO 教學大綱和標準為基礎，讓學生以主動的、實踐的、課程之間具有有機聯(lián)系的方式學習和獲取工程能力，包括個人的科學和技術(shù)知識、終身學習能力、交流和團隊工作能力，以及在社會實際環(huán)境下建造產(chǎn)品、過程和系統(tǒng)的能力[4-7]。CDIO大綱覆蓋了一個現(xiàn)代工程師應具有的科學和技術(shù)知識、能力和素質(zhì)。CDIO 的12 條標準是一個對實施CDIO 工程模式的指引和評價系統(tǒng)。CDIO 工程教育理念繼承并發(fā)展了歐美20 多年來工程教育改革的理念，提出了可操作性的能力培養(yǎng)及考核標準。到目前為止，全球已有幾十所著名高校加入CDIO 組織，CDIO工程教育理念在工程人才培養(yǎng)領域發(fā)揮著極其重要的作用。

《HTML5 網(wǎng)站設計》課程是一門理論性和實踐性并重的課程，包含HTML、CSS、JS 腳本、響應式技術(shù)及前端設計框架等多方面的內(nèi)容，不同內(nèi)容的學習方法差異大，從初學到應用這些技術(shù)的學習周期長。通?！禜TML5 網(wǎng)站設計》課程是在大二上學期開設，傳統(tǒng)的教學方式很難使學生在有限的時間內(nèi)掌握好這些知識及技能。筆者研究HTML5 網(wǎng)站設計多年，為多家企業(yè)建設過HTML5 網(wǎng)站，有比較豐富的設計經(jīng)驗，也有多年的《HTML5 網(wǎng)站設計》課程教學經(jīng)驗。在CDIO 工程教育一體化課程體系設計理念（如圖1 所示）指導下，筆者在教學目標、教學內(nèi)容、教學計劃、教學方法、教學手段、考核方法等方面做了大量的探索及研究，對《HTML5 網(wǎng)站設計》課程進行了改革，構(gòu)建了基于CDIO 工程教育理念的新型教學模式。

圖1 CDIO工程教育一體化課程體系設計理念

1 基于CDIO工程教育理念教學方案改革

基于CDIO 工程教育理念對《HTML5 網(wǎng)站設計》課程進行改革，首先需要明確以下幾個問題：①這門課程在課程體系中如何定位？②這門課程要求學生掌握哪些知識、培養(yǎng)哪些能力及訓練提高哪些素質(zhì)？③在課程中如何保證學生獲取相關(guān)知識、能力及素質(zhì)？④在課程結(jié)束后如何評估學生掌握了相關(guān)知識及具備相關(guān)能力和素質(zhì)？要解決好這些問題，需要對《HTML5 網(wǎng)站設計》課程進行全方位的改革，包括教學目標、教學內(nèi)容、教學計劃、教學方法、教學手段、保障措施及考核方法。

1.1 教學目標

在軟件工程專業(yè)，《HTML5 網(wǎng)站設計》課程是核心專業(yè)課，《HTML5 網(wǎng)站設計》課程主要學習Web 前端技術(shù)，這些技術(shù)是移動Web 開發(fā)的基本技術(shù)?！禜TML5 網(wǎng)站設計》課程教學目標主要包括三個方面的內(nèi)容：

（1）應掌握的知識包括：①HTML5 網(wǎng)站設計基礎；②HTML5 網(wǎng)站規(guī)劃方法；③HTML5 基本原理；④CSS基本原理及使用方法；⑤JS 腳本技術(shù)基本原理及使用方法；⑥HTML5 網(wǎng)站的排版布局原理及色彩搭配原理；⑦HTML5 網(wǎng)站設計原則；⑧HTML5 重點技術(shù)；⑨響應式技術(shù)及HTML5 前端框架技術(shù)。

（2）應獲取的能力包括：①能夠根據(jù)用戶的要求及客觀情況對HTML5 網(wǎng)站進行規(guī)劃；②熟練掌握HTML5 常用標記符的使用；③熟練使用DIV+CSS 進行HTML5 網(wǎng)頁布局；④熟練使用JS 腳本技術(shù)；⑤熟練使用響應式技術(shù)及HTML5 前端框架技術(shù)；⑥溝通能力；⑦團隊協(xié)作能力；⑧解決HTML5 網(wǎng)站設計相關(guān)問題的能力。

（3）應訓練的素質(zhì)：①做事有始有終；②面對問題百折不饒；③精益求精的工匠精神。

傳統(tǒng)教學模式下課程教學目標的設計也強調(diào)知識、能力及素質(zhì)，但傳統(tǒng)教學模式下這三個環(huán)節(jié)的設計與后續(xù)教學環(huán)節(jié)沒有建立映射關(guān)系。另外，課程之間的交叉知識點也沒有得到科學地處理。在傳統(tǒng)教學模式下，不同課程之間的交叉知識點存在重復教學的可能，知識、能力與素質(zhì)這三方面目標的達成更多依賴教師的素質(zhì)。在CDIO 工程教育模式下，課程在課程體系中的定位很清晰，課程教學目標的設計有嚴格的設計原則，教學目標要求的知識、能力及素質(zhì)與教學內(nèi)容、教學計劃、教學方法、教學手段、考核方法等環(huán)節(jié)建立了明確的映射關(guān)系。在課程結(jié)束，知識、能力及素質(zhì)三方面的目標是否達成，都會在考核環(huán)節(jié)中體現(xiàn)出來。

1.2 教學內(nèi)容

教學內(nèi)容主要包括三個部分：理論知識、實驗內(nèi)容及實訓項目。理論知識主要包括HTML5 網(wǎng)站設計相關(guān)定義、原理、使用方法、設計原則等內(nèi)容，如表1所示。

表1 《HTML5 網(wǎng)站設計》課程理論知識

HTML5 網(wǎng)站設計實驗主要用于強化對理論知識的理解及實踐能力的培養(yǎng)，實驗內(nèi)容與一級知識點相對應，每個一級知識點包括一個或者多個實驗。實訓項目由實際項目改造而成，主要用于培養(yǎng)學生的構(gòu)思、設計、實施及運行能力。

1.3 教學計劃

教學計劃由三個階段組成：

（1）基本技術(shù)學習階段。在此階段，主要學習理論知識及完成相關(guān)實驗，為下一階段的學習打下堅實的基礎。

（2）項目實訓階段。此階段要實現(xiàn)三個方面的目標：①在教師的帶領下，學習HTML5 網(wǎng)站項目從構(gòu)思、設計、實施及運行的整個過程；②能夠綜合運用第一階段所學技術(shù)，遇到問題能夠快速、正確地解決；③訓練溝通能力及團隊協(xié)作能力。

（3）項目實踐階段。實踐題目來自實際項目或者模擬實際項目，實踐項目的難度、要求等與社會實際應用接軌。在此階段，以學生團隊為主，獨立地進行構(gòu)思、設計、實施及運行，教師及合作的工程師作為項目技術(shù)顧問參與到各個階段的指導及評審。

1.4 教學方法與教學手段

CDIO 工程教育模式強調(diào)自主學習和經(jīng)驗學習，對于學生而言，這兩種方法是學習工程技術(shù)的核心方法。對于工程教育本身而言，僅僅依靠學生的自主學習是不夠的。HTML5 網(wǎng)站設計核心技術(shù)枯燥、抽象、復雜，從理解到熟練運用的學習周期較長。在這個過程中，教師有效的教學方法及教學手段能夠激發(fā)學生的學習興趣、提高學生的學習效率。這也是教師在CDIO 工程教育模式下存在的根本價值。有效的教學方法主要包括：①講授教學法；②探究式教學法[8]；③示范教學法；④分組討論教學法；⑤案例教學法；⑥任務驅(qū)動教學法；⑦項目驅(qū)動教學法[9]。教學手段是師生相互傳遞信息的載體，有效的教學手段能夠促進學生更快地理解教學內(nèi)容，提高學習效率。根據(jù)《HTML5 網(wǎng)站設計》課程的特點，有效的教學手段主要包括多媒體教學、白板、數(shù)位板等媒體及工具。

圖2 教學方法與教學手段

1.5 考核方法

傳統(tǒng)考核模式主要由兩部分構(gòu)成：平時成績和期末成績。平時成績包括考勤、作業(yè)，一般占30%；期末成績就是期末考試的分數(shù)，一般占70%。這種考核模式，更強調(diào)期末考試，很難激發(fā)學生的學習動力，學生往往在臨近期末考試時迫于考試壓力才開始突擊學習。對于CDIO 工程教育而言，最終的學習效果取決于學生的興趣、學習方法及持續(xù)不斷地努力和積累，傳統(tǒng)的考核方法已遠遠不能滿足CDIO 工程教育模式的要求[10]。在這種情況下，我們對傳統(tǒng)的考核模式進行了改革。新的考核模式主要由三部分組成，與教學計劃的三個階段相對應。第一部分是對基本技術(shù)學習階段的考核，這部分的考核內(nèi)容主要包括考勤、實驗及作業(yè)，占總成績的30%。第二部分是對項目實訓階段的考核，這部分的考核內(nèi)容主要包括考勤、實訓階段成果、團隊合作能力等，占總成績的30%。第三部分是對項目實踐階段的考核，這部分的考核內(nèi)容主要包括項目文檔、運行程序、項目日志等，占總成績的40%。新的考核方式側(cè)重于對實踐能力及過程的考核，經(jīng)過實踐驗證，只有真正學得好的學生才能取得好成績。

1.6 保證環(huán)節(jié)

基于CDIO 工程教育模式《HTML5 網(wǎng)站設計》課程能夠順利實施，需要四個環(huán)節(jié)的保證：①政策保證。按照CDIO 工程教育理念進行教學改革，工科相關(guān)專業(yè)的培養(yǎng)方案、課程體系、教學大綱需要做很多調(diào)整，甚至要推倒重來，沒有各級領導的重視及政策的支持，是很難保證推行下去的。②資源保證。構(gòu)建CDIO 工程化教育環(huán)境及一體化課程，需要投入大量的人力及物力，沒有資源的保證是很難產(chǎn)生好效果的。③師資保證。CDIO 工程化教育對教師有較高要求，教師的工程化能力及經(jīng)驗對工程教育的結(jié)果起著決定性的作用。④學生保證。工程教育對學生也有較高要求，大量實踐證明，要學會HTML5 網(wǎng)站設計技術(shù)，必須參與實際項目，并且要通過大量的自主學習才能達到這個目標。

2 進一步討論

在按照CDIO 工程教育理念實施改革之后，筆者從興趣、理論知識、實踐能力、溝通能力及團隊協(xié)作能力等多個維度對2015 級、2016 級及2017 級計算機科學與技術(shù)專業(yè)學生進行了統(tǒng)計，如表2 所示。

表2 教學效果統(tǒng)計表

備注：2015 級學生115 人，2016 級學生120 人，2017 級學生138 人。2014 級沒有實施CDIO 改革，2016 級及2017 級都實施了改革。百分率表示學生比例。

與傳統(tǒng)教學模式相比較，在改革之后，學生的興趣、理論知識、實踐能力、溝通能力及團隊協(xié)作能力都有大幅度的提升。

3 結(jié)語

筆者研究CDIO 工程教育理念已有多年的時間了，在近幾個學期當中，筆者按照CDIO 工程教育理念對《HTML5 網(wǎng)站設計》課程進行了不斷的改革，取得了很不錯的效果。提升教學質(zhì)量就像我們對產(chǎn)品質(zhì)量的追求，只有更好沒有最好，只有對課程體系、教學內(nèi)容、教學計劃、教學方法、教學手段及考核方法持續(xù)不斷改進，才會有更好的效果。