基于CDIO 理念的《HTML5 網站設計》課程教學模式構建

戴宏明，戴宏亮

（1.廣東科貿職業學院，廣州510430；2.華南理工大學，廣州510006；3.廣州大學，廣州510006）

0 引言

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

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

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

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

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

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

1.1 教學目標

在軟件工程專業，《HTML5 網站設計》課程是核心專業課，《HTML5 網站設計》課程主要學習Web 前端技術，這些技術是移動Web 開發的基本技術。《HTML5 網站設計》課程教學目標主要包括三個方面的內容：

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

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

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

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

1.2 教學內容

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

表1 《HTML5 網站設計》課程理論知識

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

1.3 教學計劃

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

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

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

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

1.4 教學方法與教學手段

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

圖2 教學方法與教學手段

1.5 考核方法

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

1.6 保證環節

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

2 進一步討論

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

表2 教學效果統計表

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

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

3 結語

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