论CDIO教学理念基于PBI的“HTML5+CSS3网站设计”范文

摘要：为了更好地提升学生利用HTML5及CSS3进行网站设计的能力，本文进行了基于CDIO及PBI教学理念开展“HT⁃ML5+CSS3网站设计”课程的教学改革研究，首先介绍了CDIO及PBI的概念，然后阐述了“HTML5+CSS3网站设计”课程教学现存的问题，最后提出了基于CDIO及PBI教学理念的“HTML5+CSS3网站设计”课程的教学改革思路。教学实践表明，该思路能够有效地帮助学生形成设计意识，有效地提升学生的职业能力和创新能力，具有一定的参考价值。

关键词：CDIO；PBI；网站设计；教学改革

随着网络技术的发展，尤其移动互联网的盛行，各种Web网站不断兴起，急需大量的网站设计人才。然而，传统的“HT⁃ML5+CSS3网站设计”课程教学存在学生设计意识、职业能力和创新能力等培养不足的现象，难以培养真正满足社会市场需要的网站设计人才。因此，适时进行CDIO教学理念基于PBI的“HTML5+CSS3网站设计”课程教学改革研究具有一定的现实意义。

1CDIO、PBI及“HTML5+CSS3网站设计”课程概述

1.1CDIO概述

所谓CDIO，即构思、设计、实现和运作四个英文单词的首字母，是经过美国及瑞典等众多国家众多高校验证过的一种工程教育模式，具有以学生为主体、从做中学和强化实践能力培养的特点。CDIO教学模式能够进一步地强化学生的理论知识功底，更好地锻炼学生的专业技能，有利于培养学生的团队协作精神，以及较好地提升学生的人际交往能力，目前广泛地被我国众多高校应用于多门课程教学改革之中，并取得了一定的成效。

1.2PBI概述

所谓PBI，即项目驱动教学模式，是一种以项目为线索，将各章节的重点教学内容巧妙地联系在一起，并将各个知识点隐含在项目中，试图使学生能够自主提出问题和尝试解决问题，从而提升学生的分析和解决问题能力的一种教学方法。PBI教学模式能够较好地提升学生发现问题的能力，进一步加强学生进行项目分析的能力和提升学生解决问题的能力，使得学生能够在动手做的过程中扎实理论功底，并在完成项目后获得成就感，从而充分激发学生的学习兴趣。

1.3“HTML5+CSS3网站设计”课程概述

“HTML5+CSS3网站设计”课程是一门理论知识较为繁杂的课程，包括HTML5、CSS3、Web基础、数据库和网站规划与设计等理论知识。同时，“HTML5+CSS3网站设计”课程也是一门实践性较强的课程，要求学生能够利用所学的理论知识设计出具有一定实用价值的网站。

2“HTML5+CSS3网站设计”课程教学现存的问题

2.1学生设计意识培养不足

传统的“HTML5+CSS3网站设计”课程难以帮助学生形成较好的设计意识，具体表现为以下几个方面：第一，该课程全部为理论教学，由于学时少且理论知识较为繁杂，若采用传统的教学方法则难以帮助学生形成更高层次的设计意识。第二，传统的“HTML5+CSS3网站设计”课程教学一般以操作软件为主，学生学习到的多为零散的网站设计知识，因此难以帮助学生真正形成整体网站的设计意识。第三，传统的“HTML5+CSS3网站设计”课程教学一般各章节的联系紧密度不够，案例相对较为独立，因此难以系统地培养学生的设计意识。

2.2学生职业能力培养不够

传统的“HTML5+CSS3网站设计”课程对学生的职业能力培养不够，具体表现为以下几个方面：第一，传统的“HTML5+CSS3网站设计”课程的教材章节顺序一般与真正的网站设计流程不符，使得学生在根据现有教材进行学习时，无法对所学的知识形成整体的认识，从而不利于学生职业能力的培养。第二，传统的“HTML5+CSS3网站设计”课程的各个知识点之间的关联性不高，从而导致学生在面临真正的实际网站项目时，难以综合应用所学知识顺利开展网站设计，甚至出现无从下手的窘境。第三，传统的“HTML5+CSS3网站设计”课程的教学注重章节重点内容的教学和考核，缺乏实际网站设计项目的贯穿，因此难以培养学生灵活运用所学知识进行网站设计的职业能力。

2.3学生创新能力培养不足

传统的“HTML5+CSS3网站设计”课程教学存在学生创新能力培养不足的现象，具体表现为以下几个方面：第一，传统的“HTML5+CSS3网站设计”课程教学一般以教师为中心，使得学生的学习主体地位被剥夺，从而削减了学生的创新意识。第二，传统的“HTML5+CSS3网站设计”课程教学一般以教材为中心，使得学生经常被动的按照教材的顺序来接受教材中的知识，从而不利于学生自主创新能力的培养。第三，传统的“HT⁃ML5+CSS3网站设计”课程的实践教学多为验证性实验教学，学生仅敲入书中案例代码即完成实践训练，使得学生的创造性思维能力得不到锻炼的机会。

2.4教学效果反馈不足

传统的“HTML5+CSS3网站设计”课程的教学存在教学效果反馈不足的现象，具体表现为以下几点：第一，传统的“HT⁃ML5+CSS3网站设计”课程采用试卷笔试的考核方式，难以真正评价学生的网站设计能力，从而很难获得真实的教学效果反馈，进而不利于学生实践能力的培养。第二，传统的“HTML5+CSS3网站设计”课程考核存在注重学生成绩考核而不注重学生职业能力考核的现象，从而很难体现真实的教学效果，进而不利于学生职业能力的培养。第三，传统的“HTML5+CSS3网站设计”课程考核缺乏阶段考核机制，从而缺乏对学生学习过程的全面考核，使得在教学过程中缺少必要的及时反馈，进而使得授课教师无法及时调整教学方案。

3融合CDIO及PBI教学理念开展“HTML5+CSS3网站设计”课程的教学改革

3.1借助CDIO及PBI教学理念改进教学方法

针对传统“HTML5+CSS3网站设计”课程现存的问题，可以借助CDIO及PBI教学理念改进教学方法，具体措施主要包括以下几点：第一，借助基于CDIO及PBI教学理念的教学方法，可以激发学生学习“HTML5+CSS3网站设计”课程的学习热情。第二，借助基于CDIO及PBI教学理念的教学方法，能够增强学生自主学习“HTML5+CSS3网站设计”课程的意识。第三，借助基于CDIO及PBI教学理念的教学方法，能够提高学生主动参与“HTML5+CSS3网站设计”课程学习的参与度。

3.2融合CDIO及PBI帮助学生形成设计意识

针对传统“HTML5+CSS3网站设计”课程教学存在的难以帮助学生形成较好的设计意识情况，可以通过融合CDIO及PBI来改善，具体措施主要包括以下几点：第一，增加“HTML5+CSS3网站设计”课程的学时，并优化较为繁杂的理论知识结构，从而更好地帮助学生形成更高层次的设计意识。第二，融合CDIO和PBI教学模式，调整教学内容，从而帮助学生融合零散的网站设计知识，进而真正帮助学生形成整体网站的设计意识。第三，利用项目任务驱动教学理念，增强各章节之间的紧密程度，运用相互关联的案例，系统地培养学生的设计意识。

3.3引入项目案例帮助学生在网站设计过程中提升职业能力和团队意识

“HTML5+CSS3网站设计”课程的教学应引入项目案例来帮助学生在网站设计过程中提升团队意识，具体措施主要包括以下几点：第一，基于CDIO及PBI的教学理念重新编写项目贯穿全书的教材，使得学生对所学的知识形成整体的认识，从而更好地培养学生的职业能力。第二，借助CDIO及PBI教学理念，用实际网站项目关联各章节知识点，真正锻炼学生设计实用网站的能力，避免学生在遇到真实网站设计时不知从何下手。第三，借助CDIO及PBI教学理念，深入贯彻工程项目驱动教学思想，开展分组设计实用网站项目实践，让学生加入各组并发挥各自的特长，从而不断提升学生的团队协作意识。

3.4借助CDIO及PBI培养学生的创造性思维能力

首先，依据CDIO及PBI教学理念，协调好教师和学生的角色地位，确保学生的学习主体地位，突出教师的学习引导地位。然后，根据CDIO及PBI教学理念，将知识点隐藏于网站项目设计中，从而挖掘学生的潜能，锻炼学生的发现、分析和解决项目问题的能力。最后，借助CDIO及PBI教学思想，引导学生自主对项目进行分析、规划、设计和实现，从而提升学生的学习能力和创造性思维能力。

3.5借助CDIO及PBI制定多元教学效果反馈机制

根据CDIO及PBI教学理念，开展多样化考核方式，例如笔试和上机结合的考核方式，从而获得更准确的教学效果反馈。另外，开展分阶段考核的考核模式，对学生的学习过程进行全面考核，从而弥补过去缺失的必要的及时反馈，进而使得教师能够及时根据反馈结果及时调整教学方案。

4结束语

为了更好地提升“HTML5+CSS3网站设计”课程的教学质量，本文进行了基于CDIO及PBI教学理念开展“HTML5+CSS3网站设计”课程的教学改革研究。经过两轮的教学实践，发现该方法能够有效地确保以学生为主体，提升学生的学习参与度以及网站设计的能力，取得明显的成效，以新闻专业同学为例，教改前学生的期末考试卷面成绩平均分为66.68分，采用教学改革方法后学生的平均分提高至75.16分，笔者认为该方法具有一定的推广价值。

参考文献：

[1]彭安杰,严小英,孙毅,等.基于CDIO模式的网站开发技术研究与实践——以成都中医药大学附属医院为例[J].电脑知识与技术,2017,13(29):95-97.

[2]丁士杰,刘红军.基于CDIO的课赛融合教学模式研究——以《电子商务网站建设与管理》课程为例[J].教育现代化,2018,5(47):297-298.

[3]柴群,梁剑波.基于项目驱动的《网页制作与网站开发》课程教学设计研究[J].电脑知识与技术,2019,15(34):134-135.

[4]骆焦煌.项目任务教学法在课程教学中的应用——以网站设计与开发课程为例[J].辽东学院学报(自然科学版),2019,26(2):148-152.

[5]朱锦晶.基于CDIO-OBE的《HTML5+CSS3网页设计》课堂教学改革探析[J].当代教育实践与教学研究,2020(13):114-115.

作者：匡珍春 单位：广东海洋大学数学与计算机学院