唐斐琳

关键词：BOPPPS模式；计算机类课程应用；网页设计与制作

中图分类号：G42 文献标识码：A

文章编号：1009-3044（2023）12-0149-03

1 BOPPPS 模式应用概况

1978年加拿大哥伦比亚大学的Douglas Kerr首次提出BOPPPS模式，当时主要是用于对教师的技能培训，其后，该模式得到广泛的应用和推广，国内最早是2007年黄娟在《职业教育研究》上发表的《加拿大模型的教学技能培训》，从此，拉开了国内对BOPPPS模型研究的热潮，BOPPPS模式突出“以学生为中心，以目标为导向”的教育理念，完美契合了新时代我国职业教育对教学的新要求，同时该模式还是一个强调学生参与和反馈的闭环教学设计[2]，通过设置深度参与式的学习活动来增进师生之间、生生之间的互动和交流，提高学生自我建构知识体系的能力，BOPPPS共有6 个步骤，按照Bridge-in 导入、Objective 目标前测、Pre-assessment 前言、Participatory Learning 参与式学习、Post-assessment后测、Summary总结来进行教学实施，如图1所示。

2 网页设计与制作课程教学问题分析

网页设计与制作课程，一般开设在高职计算机应用技术专业或者艺术设计专业当中，不同的专业对于人才培养的目标各不相同，无论是哪一个专业，它都处于核心地位，作为一门专业核心课程，它对接了UI设计师与网页前端工程师的职业岗位需求，对学生综合职业能力培养具有至关重要的作用。本次案例以计算机应用技术专业的网页设计与制作课程为例，分析该课程的性质与主要内容，整个内容包括表现层、样式层和行为层三个部分，在日常的教学中，学生学习该课程主要存在以下几个方面的问题：

1） 学生基础较弱，获得感不强

网页设计与制作课程为高职二年级阶段的学习科目，通过学情分析，学生普遍英语能力较弱，词汇量储备不足，面对不断出现的复杂代码容易忘记其指代含义。一半的学生在编写HTML代码时容易出错，易漏掉字符，导致页面效果无法显示，特别是后面章节涉及到的代码越来越复杂，学生学习容易受挫，导致学习兴趣度不高，自我成就感较差。

2） 学习内容更新慢，与行业企业脱节

随着互联网、大数据、区块链等飞速发展，各大互联网公司也在不断挖掘和开发新的技术，部分高职院校HTML代码编辑器与校外许多主流公司采用的编辑工具不一致，例如行业当中一般都使用比较先进的sublime text3 编辑器、Hbuiderx编辑器，而部分职业院校内老师还是根据教材内容，继续使用dreamweaver这一工具软件进行教学，通过插入图片的方式进行学习，缺乏新技术、新规范、新工艺带来的欣喜感，学生学习兴趣度不高。

3） 教师授课方式单一，学习枯燥乏味

传统教学主要是以教师讲授为主，灌输式的理论讲授经常出现在各个讲台，师生以及生生之间缺乏有效的互动和交流，这种灌输式的理论学习会导致学生对于课程的学习兴趣降低。

3 BOPPPS 模式在网页设计与制作教学中的实践探索

为了满足计算机应用技术专业对人才培养的需求，以2021级计算机应用技术专业三年制高职1班为例，将BOPPPPS模式融入网页设计与制作课程教学实践，从课程标准、教学设计、考核方式改革3个方面进行探索。

3.1 重构内容

网页设计与制作课程选用计算机“十三五”规划教材dreamweaver CS6案例教程，授课计划总学时为108学时，教师按照教材项目进行传统教学，包括网页基础知识、网站的规划与建设——制作“石市科干院”网站规划书并建立站点、添加页面对象——制作贸易公司网站等几大项目进行授课计划编制。该流程按照传统的“理论+实训”方式执行，并未对教学内容进行重构，学生学习起来容易导致理论与实践脱节，更缺乏实际工作任务带来的体驗感。结合计算机应用技术专业人才培养方案和网页前端工程师岗位工作要求，笔者将教学内容进行重构，以学生综合职业能力培养为目标，将实际工作任务转化为学习任务，将课程内容重构细化为5个代表性学习任务，分别设置：“个人简历”页面制作（6学时）、“随阅书吧”图书页面制作（6学时）、“公益拍摄”相册页面制作（12学时）、“一箱情愿”志愿服务驿站专题页制作（24学时）、“嗨购三湘”马坪村商贸街网上交易平台制作（48学时）5个项目，遵循学生的职业成长规律，增加了思政内容、职业素养等学习内容，注重学生综合职业能力的培养。

3.2 教学设计

BOPPPS模式，以建构主义为理论依据，以有效教学设计著称[3]，本次教学设计核心内容就是将BOPPPS模式与教学设计进行有机融合，结合五个项目的学习内容，初步将每个项目按照知识难易度进行课时划分，每2学时一个教案，均按照BOPPPS的6个阶段进行教学设计，并结合一体化学习资源素材，灵活采用多种教学方法，初步构建基于BOPPPS 教学模式的网页设计与制作教案。其采用的主要方法、主要特点和目的如表1所示。

3.3 教学过程实施举例

接下来以第五个学习任务的第三个微任务“CSS样式精准还原UI设计”为例进行课堂实施，如图2：

1） 导入

以“CSS样式精准还原UI设计”微任务为例，首先通过播放企业优秀案例，优秀校友网页前端工程师小沈的前端工作经历，讲述CSS样式设计还原对于前端工程师的重要性，让学生了解CSS精准还原的原因和效果，明确本次学习内容。

2） 目标

以“CSS样式精准还原UI设计”微任务为例，要求学生能够准确叙述CSS的基本语法，默写出CSS还原的基本步骤，掌握高级特性（继承父级、CSS层叠样式）的使用；并通过样式设置完成UI设计的精准还原，在完成任务的过程当中培养学生团队协作、创新能力以及精益求精的工匠精神。

3） 知识前测

以“CSS样式精准还原UI设计”微任务为例，学生需完成线上测试题目：1.CSS样式设置的流程是什么？2.精准还原所必备的条件有哪些？3.下列情况哪个属于CSS高级特性（继承父级、CSS层叠样式）？通过三个问题，对课前自主学习情况进行了解，对课中重难点进行预判，教师结合测试情况，针对性地为学生发送学习资源包，做到精准有效地自主学习，提高教学有效性。

4） 参与式学习

以“CSS样式精准还原UI设计”微任务为例，在讲述CSS样式规范时，学生展示汇报课前“一箱情愿”志愿服务驿站的首页制作，各小组成员记录还原过程中存在的问题。教师通过案例分析引导学生进行CSS样式思考，接着学生通过“小板凳对接”进行组内讨论，并制定优化方案，明确本次任务的重点内容。在化解难点方面，学生通过角色扮演、组间走查等深度参与式学习活动，进行交互体验，模拟UI设计师进行项目走查，检测CSS精准还原UI设计的规范程度。学生结合走查结果进行作品优化，培养他们精益求精的工匠精神。

5） 后测

以“CSS样式精准还原UI设计”微任务为例，提出2个问题，问题一：在还原过程中，发现有4个像素的小间隙，该如何去除？有几种方法？ 问题二：CSS样式初始化的原因描述错误有哪些？查看学生知识重难点掌握情况，并引导学生结合实际进行优化。

6） 总结

以“CSS样式精准还原UI设计”微任务为例，教师通过口诀编译的形式与学生共同进行总结，强调CSS精准还原的方法和技巧，再次强化本次教学的重点和难点，引导学生完成任务迁移。

3.4 创新考核方式

融入BOPPPS模式后，评价机制也相应地进行调整，以“CSS样式精准还原UI设计”微任务为例，按照目标达成情况进行考核，考察学生的课堂参与度、学习态度、职业素养和阶段性成果，如表2所示，在评价主体上，包括学生自评、组内互评、教师点评、技能大师评价等多元多方评价体系，探索性地设置了增值评价，考查学生相比前一个任务的学习进步程度，以此衡量BOPPPS模式对于课堂教学的有效性，同时，激发学生的获得感和成就感，促进学生的个人成长，通过此评价完美地契合BOPPPS模式“以学生为中心，以目标为导向”的理念[4]。

4 BOPPPS 模式应用的具体教学效果

1） 学习目标有效达成

通过BOPPPS模式融入课堂实践，根据学习通平台结果显示，全班优良率达到90%，其中90分以上5人，80～90 分人数为25 人，20% 的學生获得创新达人，相比前一个学习任务，环比增长5%，学习目标有效达成，职业素养稳步提升。

2） 学生兴趣稳步提升

BOPPPS模式突出“以学生为中心”的教学理念，通过设置深度参与式的学习活动来激发学生的学习兴趣，提高学生课堂的参与度，促进师生之间、生生之间的有效沟通，通过课中观察，结合学生自评和互评结果显示，学生的学习积极性显著提高，从要我学变为我要学。

5 结束语

网页设计与制作课程作为计算机应用技术专业的一门核心课，在实际教学的过程中存在教学内容陈旧、学习枯燥乏味、与行业企业实际脱轨等问题，本次任务在运用BOPPPS模式进行课堂教学实施过程中，通过BOPPPS 模式在“CSS样式精准还原UI设计”教学中的实践应用，加强了师生和生生之间的互动[5]，培养了学生主动分析问题和解决问题的能力，提升了学生学习活动参与度，激发了学生学习兴趣，提高了学习目标的达成度，为培养新时代高素质的网页前端工程师打下了坚实的基础，提供了可靠的保障。

当然也存在不足的地方，比如：参与学习活动的方式可以更加丰富多彩，应该尽可能地结合课程所对应的岗位来设置参与式的学习活动，以此来提高学生的学习兴趣，促进学生综合职业能力的提升。