基于CDIO的网页制作基础及HTML课程教学改革实践

刘田田

摘 要： 提出基于CDIO理念的网页制作基础及HTML教学改革新实践。以问题为先导，激发学生对HTML课程的好奇心和兴趣；同时以项目为驱动，围绕具体APP实例进行展开；以应用为目标，将教学与实际任务结合，让学生学中做、做中学。教学实践及学生评价表明，基于CDIO理念的HTML课程改革实践能够有效激发学生的学习兴趣，使其自主性和创造性得到提高。

关键词： HTML； APP开发； 教学改革； CDIO工程教育

中图分类号：G642.0 文献标志码：A 文章编号：1006-8228（2018）11-81-03

Abstract： This paper puts forward a new teaching practice of Web page making basics and HTML based on CDIO， which uses questions as a guide to stimulate students' curiosity and interest in HTML courses， uses the specific project APP instance to carry out the teaching， and with the goal of application， combines teaching with practical tasks to make learning and operation integrated. Teaching practice and student evaluation show that the teaching reform for HTML courses based on the CDIO concept can effectively stimulate students interest in learning and improve their autonomy and creativity.

Key words： HTML； APP development； teaching reform； CDIO engineering education

0 引言

現代教育的目标是培养求知者发现、分析与解决问题的综合能力，而随着经济的快速发展，应用型和技能型人才成为目前用人单位急缺的资源，作为培养应用型和技能型人才的高职教育日益受到重视。高职教育注重人才素质与职业综合能力的培养，为用人单位输送具备一线生产与管理、技术与服务的“应用型”人才。网页制作基础及HTML是软件技术专业的一门专业基础课，具有很强的实践性。通过学习该课程，使学生掌握HTML5、CSS和JS技术，为学生今后学习开发各种类型的APP打下基础。

CDIO[1-3]，即Conceive（构思）、Design（设计）、Implement（实现）和Operate（运作）四个单词的首字母缩写。CDIO工程教学模式以产品研发到产品运行的生命周期为载体，让学生以主动的、实践的、课程之间有机联系的方式学习工程。旨在培养学生扎实的理论功底、专业技能、团队合作和人际交往技能。

本文首先对网页制作基础及HTML课程现状和当前技术现状进行阐述分析，接着针对课程特点，结合CDIO工程教育理念，对该课程教学改革提出新的课程实施步骤。

1 网页制作基础及HTML课程传统教学现状

网页制作基础课程包括HTML5、CSS和JS三个方面的知识点，是理论与实践并重的课程，如果在教学过程中继续使用传统的教学模式，就极易造成重理论而轻实践的结果[4]。我们以“网页制作基础及HTML”课程为例，分析课程存在的主要问题。

一是教学目标设定，传统课程的学习目标列举教授的知识点、学生应掌握的知识点，这种教学目标仅仅完成了最基本的知识灌输，不利于学生能力的培养。此外，对于职业院校的学生而言，知识的理解是基础，达到灵活的应用并且提高项目能力才是最终目标。

二是传授方法，教师在教学中要避免只单纯地传授知识或单纯地训练学生的某种技能，教师须在教学过程中培养学生的专业知识能力、个人能力、人际交往能力以及创造能力[5]。

三是考核评估方法，传统的基于考试的评估方法把学生的注意力偏隅在课程的理论知识和局部技巧上，使学生对所学知识无法形成完整的认知，也不能灵活应用，对实际项目没有系统的分析能力和开发/编程能力。当遇到大型复杂的软件项目时，往往不能快速有效地构思、设计、实现与运行[6]。

2 基于CDIO的网页制作基础及HTML课程教学改革实践步骤

基于课程教学现状和存在的问题，本文将CDIO工程教育模式应用到HTML课程[7]的改革中，以具体APP开发项目为驱动，贯彻CDIO的核心精神，形成“应用为目标、理论作工具，教师主导、学生主体”的基于CDIO的项目式驱动教学/学习方法。

2.1 教学目标设定

通过本课程的学习，使学生了解H5 APP的基本概念，学会开发APP前端页面与后端服务，能够生成安卓或苹果的安装包，并进行云部署发布产品。培养学生掌握页面组件的基本用法，掌握APP调用手机硬件的方法，以及训练界面设计实现能力，为今后学习开发移动端应用打下扎实基础。

依据课程标准，先通过简单APP示例（如hello world、扫一扫）了解WeX5开发H5 APP的过程及所使用的，再以仿微店APP开发为主线，贯穿整个教学过程，在逐步完成各章节同步训练的过程中，以“层层递进”的方式完成一个H5 APP的开发，从而让学生在实践中掌握知识、技能和素质目标。

2.2 教学方式选择

课堂教学采用“教、学、做”一体化方式，以项目开发过程引导学生学习基本知识，通过动手实践，让学生掌握H5 APP开发的知识以及操作技能。“一体化”是CDIO工程教育的核心，将理论与实践、知识与能力间互相结合，通过集成化的教学过程，把专业知识与工程项目融合在一起，教学过程以学生动手实践为主，配合教师示范和检查作用，用一系列综合和拓展实训来培养学生的技术应用能力和创新能力。

采用“项目驱动”、“问题牵引”和“多重循环”等教学方法，课程首先通过具体实现“扫描二维码的实现原理”来了解基于WeX5工具开发H5 APP的过程及方法，再以仿微店APP的开发为主线，贯穿整个教学过程。在逐步完成同步训练后，以“层层递进”的方式完成H5 APP的开发，从而让学生在实践中掌握知识和技能。最后以一个完整“记账APP”的实训项目，深化学生对知识的掌握，培养学生团队协作、解决实际问题的能力。

教师在举例示范时，不仅要展示问题的解决方案，更要体现问题的分析过程，启发学生思考。在课堂上，学生分为几个学习小组，启发各个小组针对同一问题，思考不同的解决方案。通过小组代表阐述解决问题方案，激发小组成员间的良性竞争意识，激励学生主动参与课堂教学，更好的促进知识的吸收与转化。整个课堂教学在机房进行，学生人手一台计算机，在真实环境中进行学习和训练。教师机和学生机安装多媒体教学软件，以便进行广播教学、学生作品展示、提问和作业提交。

2.3 教学评价方式

基于CDIO工程模式的HTML课程改革中采用“过程评价+结果评价”的形成性考核方式，总评成绩由形成性考核的各项成绩组成。分数比例为：20%综合素质评价（平时表现+通用能力考核）、40%过程考核（课堂实践+课后实践+操作实践）、40%终结考核（项目实战）。其中，综合素质评价又从出勤情况、学习态度、学习表现和通用能力四个方面来考核；过程考核包括课堂及课后实践操作；终结考核由一个完整实训项目评定。此外，还引入了“组间互评+组内自评+教师评价”的多元化评价机制，培养学生的批判性思维，同时又可以防止学生在项目完成过程中 “搭顺风车”的现象，起到相互监督的效果。

3 教学效果

为了获取该课程改革实践教学效果，在课程结束后利用网络评价教学平台对软件技术专业16级2个班共65名学生进行了匿名问卷调查。学生分别从教学内容、教学形式、实践环节、考核方式和教学效果等五个方面对课程进行评价，结果显示：超过95%的学生对教学内容和教学形式安排表示满意；98.8%的学生认为课程考核内容和方式安排合理，能够真实客观体现学生的学业水平；两个教学班级综合满意度分别达到99.09%和98.37%。在课程进行中，学生保持高的出勤率；设置提问环节学生有积极的反馈，课程活跃度高；实践操作环节大部分学生能够根据教师的讲解和演示完成相应训练项目。课后问卷调查也反映出课程改革实践充分调动了學生的学习积极性，促进了学生与教师、学生之间的交流，提升了学生知识的应用能力和小组成员间协作能力。

学生通过在项目教学过程中的深度参与，实现了从传统的“看中学”、“教中学”向“教、学、做”一体化的转变，并在这一过程中，潜移默化地提升了学生的工程实践技能。以项目为引导，将团队教育贯穿在整个项目的页面设计、CSS样式修改以及JS动作实现的过程中。并通过小组互评激发学生的评判性思维，通过组员互助互动培养学生的合作意识，通过分工协作增强学生的责任感。教学实践证明，基于 CDIO 的HTML课程教学改革能够很好地提高学生的自主学习能力、团队合作能力、创新意识和工程应用能力，促进学生“知识、能力素质”的协调发展。

4 结束语

网页制作基础及HTML课程是一门实践性很强的计算机专业基础课程，将CDIO工程教育的理念和方法应用到该课程中，提高了学生的自主学习能力与工程实践能力，使学生在实践中掌握知识、技能和素质目标。而由于教学方法的改变，使得任课教师需要花费更多的精力进行备课和教学设计，这就要求教师在后续课程教学中加以调整和改进。

参考文献（References）：

[1] 顾佩华，包能胜，康全礼，陆小华，熊光晶，林鹏，陈严.CDIO在中国（上）[J].高等工程教育研究，2012.3：24-40

[2] 顾佩华，包能胜，康全礼，陆小华，熊光晶，林鹏，陈严.CDIO在中国（下）[J].高等工程教育研究，2012.5：34-45

[3] 顾佩华，胡文龙，陆小华，包能胜，林鹏.从CDIO在中国到中国的CDIO：发展路径、产生的影响及其原因研究[J].高等工程教育研究，2017.1：24-43

[4] 闫宁，宋莹，杨永光.高职院校教改项目存在的问题及其对策研究[J].中国职业技术教育，2017.3：80-84

[5] 康全礼，丁飞己.中国CDIO工程教育模式研究的回顾与反思[J].高等工程教育研究，2016.4：40-46

[6] 姜大志，孙浩军.基于CDIO的主动式项目驱动学习方法研究——以Java类课程教学改革为例[J].高等工程教育研究，2012.4：159-164

[7] 马科.HTML5 APP商业开发实战教程：基于We X5可视化开发平台[M].高等教育出版社，2016.