网页游戏开发培训：STEAM 教育理念的中职课程游戏化教学设计研究——以《网页制作与设计》课程为例
黄怡菁 广西师范大学 广西 桂林 541000
摘要：近年来，STEAM教育促进综合性人才培养已成为研究的热点问题。为提高中职学生的综合 素质，解决其学习动机较弱、学习自主性不强的问题，文章创新性的将STEAM教育理念与游戏化教学 的方式进行设计融合，并以中职核心课程《网页制作与设计》为例进行了教学设计，阐释了具体的教 学活动环节以及设计要点，为中职教师根据实际教学需要有效融入STEAM教育理念，进行游戏化教学 设计提供新的思路。
一、引言
2014年6月，在教育部等部委编制的《现代职业教育体 系建设规划（2014-2020年）》中，明确强调要加强中职 学生的科学素养、技术思维和实践能力教育。2019年1月， 由国务院印发的《国家职业教育改革实施方案》提出，要 深化复合型技术技能培养培训模式改革，大幅提升新时代 职业教育现代化水平。可见，国家对培养职业技术人才提 出了更高的要求。[1]但是，在实际学习过程中，大部分中 职学生会表现出学习动机或自我效能感不足，从而引发学 习自主性较差的问题。这完全不利于培养具有高素质实操 性复合人才目标的实现。如何有效调动学生自主参与课堂, 提高学生解决实际问题的能力,值得我们进一步深入探讨。 STEAM教育为探寻以上问题的解决提供了新的思路。以 跨学科教学为核心的STEAM教育，强调多学科知识整合，聚 焦解决真实情景中的实际问题，与中职教育要求培养具有 创新精神和实践能力的目标需求不谋而合。在此基础上， 将STEAM教育内容进行游戏化处理，让游戏化教学设计贯穿 整个教学过程中，二者深度融合，实现在“玩中做，做中 学”的目的。本文以中职课程《网页制作与设计》为例， 基于STEAM教育理念，进行了游戏化教学设计研究，有效丰 富了中职的教学形式。
二、核心概念界定
（一）STEAM 教育
STEAM教育即科学 （Science） 、技术 （Technology）、工程（Engineering）、美术（Art）和 数学（Mathematics）五类学科英文首字母的缩写，是由 STEM衍生出来的跨学科教育的典型形式。STEAM教育聚焦于 实际问题的解决，强调多学科知识整合。
（二）游戏化教学设计
Instructional-design Theories and Models一书中 对游戏化教学设计进行了相关介绍，利用游戏当中的相关 要素，如挑战、好奇等，通过故事元素将其进行整合。游 戏与教学是两条交织的主线，为学生提供良好学习体验的 同时，回归教学核心。
三、基于 STEAM 教育理念的中职课程《网页制作与设计》游戏化教学设计
《网页制作与设计》是一门综合性和实践性很强的专 业核心课，但是大多数中职院校依旧停留于教师进行理论 讲解，演示操作流程，学生模仿教师的教学步骤完成作业 的教学方式。学生缺少对于课程的理解与思考，容易造成 知识点的遗忘，丧失学习兴趣。鉴于此，以《网页制作与 设计》这门课程为例，基于STEAM教育理念将其进行游戏化 教学设计，加入闯关、故事情节、激励、角色设计等游戏 化元素，在解决实际问题中调动学生的积极性。
（一）游戏叙事
叙事由故事情节和人物两个基本要素构成，是一种由 一系列现实或虚构的事件按一定的逻辑顺序连接而成的艺 术形式。故事情节如表1所示：
（二）玩法逻辑
代表各网页设计工作室的设计者们（4人为一个小 组，每个小组代表一个工作室参与竞争），所设计的网页 必须要满足产品经理列出的全部要求，设计出新颖且实用 的页面，通过层层关卡，在众多工作室中脱颖而出，最后 只有一个工作室能拿到订单，交付作品，获得酬劳。
（三）教学方案设计
1.教学目标描述。网页制作与设计的教学目标：学生 通过了解网页制作的基本知识，制作与设计简易网页，感 受工程设计的整个过程。掌握相关软件，进行创意设计， 在游戏化的过程中实现多元评价与反思。教学目标分解如 表2所示：
（1）活动一：进入游戏情景，提 出问题。本环节设有三个学习活动：进入游戏情景、提出 问题、体验学习。首先，教师扮演产品经理，给学生即网 页设计工作室负责人提出用户需求，并通过系列问题对参 与竞选的工作室进行初步资格审查，通关者，才可进入下 一轮。教师给学生提供必要的学习资料，并设定时间进行 审核。其次，教师根据所提供的学习资料，提出问题，如 静态网页与动态网页的实现？最后，教师会让学生以专业 视角分析不同风格的主题网站，进行记录。教师公布晋级 名单。（2）活动二：探究学习，数学应用。本环节主要 是探究关于动态网页中连接数据库的问题。首先，为了满 足公司想要了解客户对于游戏的反馈，需要进行数据库的 创建。在本活动中，主要探索建立与连接数据库的步骤和 方法。引导学生进行科学探究，让学生以小组为单位，分 别做出自己认为最优化的数据库，进行小组间评比，选出 排名前三的小组，能够获得额外的学习资料，为后面的闯 关提供帮助。（3）活动三：工程设计，技术制作。本环 节是使学生以小组为单位进行网页的制作与设计，从而体 会工程设计的过程。首先，进行组内的分工与合作，明确 小组任务。其次，进行合理的工期安排，将现有的技术与 创新思维融入作品的设计中。完成后进行测试、交流与改 进。最后，组内要对此次的项目过程和内容进行反思总 结。（4）活动四：创意尝试，美学设计。本环节是为了 打开学生的创新思维，激发学生创造美的能力。学生在页 面排版、色彩搭配等方面，以美学视度进行思考，进行创 意设计，成为竞选亮点，脱颖而出。（5）活动五：公布 结果，反思评价。本环节帮助学生回顾整个学习的过程， 并通过多种方式评价，促进学生更好地学习。学生通过作 品展示，阐述设计思路、方法、理念，在自评、互评、教 师评价后，进行投票。最后教师公布游戏结果，提供相应 的奖励，并让学生对整个教学活动过程进行反思，为下一 次的教学活动设计积累经验。
四、结语
本文基于STEAM教育理念，将游戏化元素贯穿于教学过 程的始终，通过增强教学过程的趣味性，激发学生学习兴 趣，引导学生利用跨学科知识解决问题，优化教学效果。 中职学生以就业为导向，重视实践操作和技能学习，STEAM 教育能很好迎合中职学生的学习需求，帮助学生适应社会 对于职业人才的需求。
参考文献 [1]曹永平.国家标准框架下职业教育人才培养方案的研 究[J].天津科技,2021,48(03):60-62.