基于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 网站设计》课程进行了不断的改革，取得了很不错的效果。提升教学质量就像我们对产品质量的追求，只有更好没有最好，只有对课程体系、教学内容、教学计划、教学方法、教学手段及考核方法持续不断改进，才会有更好的效果。