基于OBE理念的网站前端交互技术课程思政教学设计与实践

关键词：课程思政；网站前端交互技术；OBE 理念；混合式教学；项目化教学；课程目标

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

文章编号：1009-3044（2025）03-0127-04 开放科学（资源服务） 标识码（OSID） ：

0引言

习近平总书记在全国高校思想政治工作会议上指出，要坚持以立德树人作为中心环节，把思想政治工作贯穿教育教学全过程，实现全程育人，全方位育人，就必须把课程思政潜移默化地融入各门课程中。

这为高校课程思政建设指明了方向，也对教师提出了更高的要求。课程思政从首次提出到现在已在全国所有高校各学科专业全面开展，学者们对课程思政的研究也形成了诸多可借鉴和推广的经验。目前，国内对课程思政的研究主要集中在内涵剖析、内在逻辑和实施路径与对策方面。李楠认为关于课程思政元理论研究以及将理论研究成果应用于实践将会是课程思政的未来研究热点[1]。

OBE（Outcomes-based Education） 理念强调以学生为中心，以学习成果为导向，以持续改进为重点，围绕预期学习成果来开发课程资源、设计教学环节、组织实施教学活动以保证学生达到预期成果[2]。我国教育部印发的《普通高等学校本科教育教学审核评估实施方案（2021—2025年） 》中指出，强化学生中心、产出导向、持续改进的原则。这与OBE理念不谋而合。当前，国外学者对OBE理念的研究主要集中在教学模式的探讨。ZAMIR M Z 通过对比试验得出基于OBE理念的教学模式比传统教学模式更能提升学生的学习成效[3]。国内学者对OBE理念的研究主要集中在内涵阐释、教学体系改革、教学模式创新等方面。张红琼提出基于OBE理念构建目标、内容、条件和评价“一体四翼”艺术设计类专业实践教学体系[4]。李俊提出基于OBE理念从教学目标、内容、资源和教学评价设计四个方面对Java语言程序设计课程进行教学改革[5]。

作为一门实践性强的专业核心课程，网站前端交互技术蕴含着丰富的思政元素，将其与思政教育有机融合，对于培养学生的思想政治素质、职业道德和社会责任感具有重要意义。本文通过介绍“网站前端交互技术”课程内容、课程目标、教学方法和思政教育的必要性，基于OBE理念对课程思政进行教学设计与实践，将思政元素融入项目化教学过程中，探索出切实可行的教学方法，促进了专业课程教学与课程思政教育的有机融合，也为计算机类课程结合知识点有效融入思政教育元素提供了借鉴意义。

1网站前端交互技术课程简介

网站前端交互技术是软件技术专业的专业核心课程，其前驱课程是网页设计基础，后继课程是网站前端框架技术，共75学时，4.5学分。课程涵盖JavaS⁃ cript基础语法、JavaScript对象编程、BOM编程、DOM编程、网页特效和 jQuery基础语法等内容，理论教学与上机实践教学并重。课程内容主要分为三大模块，如图1所示。

2网站前端交互技术教学目标和教学方法

网站前端交互技术旨在培养Web前端开发领域具有开发交互式网站能力的应用型复合人才。基于 OBE 理念，结合软件技术专业学生的就业去向、就业反馈和学情分析，设定该课程的教学目标，如图2所示。

为实现上述教学目标，本研究提出基于 OBE 理念的混合式教学模式，如图3所示。该模式将线上学习与线下课堂教学有机结合，并将课程思政贯穿于课前、课中和课后各个环节。课前，教师在超星学习通发布课前导学视频、课件和课前测验试题，学生完成课前导学任务并参与课前测验，教师分析学生的课前测验结果初步掌握学生的预习成效，调整教学策略。课中，采用“项目导向、任务驱动、理论实践一体化”的教学方法将知识讲解、技能训练、思政育人和能力提高有机结合。教师分析任务、讲解任务涉及的知识点，学生小组实现任务、学生和教师共同点评任务实现成效，再辅以巩固练习，最后师生对课堂进行小结。课后，教师在超星学习通发布课后作业、章节测验和主题讨论，学生完成课后学习任务，并参与微信学习群的答疑、交流活动。通过线上线下混合式教学模式，激发学生学习主观能动性，促进师生之间相互交流共同成长。

3网站前端交互技术课程思政教学设计

3.1课程思政的必要性

当前，互联网多元化价值观并存，容易引发网络意识形态结构性失衡的潜在风险。数字化重塑着人的价值观念和行为方式，要适应数字化时代变革，需要通过课程思政坚定学生的理想信念。软件技术专业的学生作为互联网常住民，易受不正之风、错误观念的影响。学生是未来网站设计与开发的从业者，要树立学生正确的世界观、人生观和价值观。教师在讲授专业知识的同时，应合理有效地融入各类思政元素，引导学生增强“四个意识”、坚定“四个自信”、做到“两个维护”，提高思想政治觉悟和职业道德修养。

网站前端交互技术是“1+X” Web前端开发职业等级证书的重要考点内容，因此，实施“网站前端交互技术”课程思政是培养新兴技术行业带来的Web前端开发技术技能人才的需要。另外，鉴于网站前端交互技术的专业性、实践性、科学性、创新性特点，对于学生而言更需要培养其追求卓越的科学精神与人文素养相互平衡。此外，网站前端交互技术在第二学期开设，此时，学生对专业知识有了基本的了解，正处于开始关注自身专业能力和未来就业方向阶段，网站前端交互技术作为前端开发工程师的必修课不仅加强学生的专业认知和专业认同更是塑造学生职业道德观的重要载体。因此，实施“网站前端交互技术”课程思政不仅是数字化时代的要求，也是高校课程改革的政策要求，还是高等院校推进素质教育的重要形式，更是实现人才培养目标的必然要求，最重要的是可以加强学生的思想教育。

3.2课程思政教学设计

课程思政融入专业课教学，就是要寓价值观引导于知识传授和能力培养之中，既要保证学生的专业知识技能过关，又要保证学生的思想、素质、观念和理念等方面过关。这就要求从专业人才培养特点和课程属性出发，结合职业要求和社会实际，以课程为载体，多角度挖掘提炼专业课程中所蕴含的思政元素与价值理念，拓展课程教学的深度、广度和温度，将思想政治教育有机融入人才培养的内在逻辑中，实现隐性教育与显性教育的有机统一。在教育部《高等学校课程思政建设指导纲要》等文件指导下网站前端交互技术课程思政教学设计从习近平新时代中国特色社会主义思想、社会主义核心价值观、中华优秀传统文化、宪法法治教育和深化职业理想和职业道德教育五个方面深入挖掘课程思政元素，如图4所示。帮助学生增强制度自信，坚定理想信念，培养其理性消费意识、安全意识、创新意识、辩证思维和数字素养，使他们具备团结合作精神，开源精神，自觉践行保护环境、服务社会的理念，将社会主义核心价值观的情感认同和爱国主义情怀融入网站前端交互技术课堂教学。

习近平新时代中国特色社会主义思想，是中华文化和中国精神的时代精华。例如，在JavaScript网页特效章节实现电商平台交互特效，通过电商网站功能日趋多元化，培养学生创新的意识，用发展的眼光看问题，不断自我革新，修炼终身学习的自觉性。

社会主义核心价值观，是我国社会主义现代化国家的建设目标，是对美好社会的生动表述，也是公民基本道德规范。例如，在DOM编程章节，以“百度贴吧”“新浪微博”为案例素材，设计留言板任务，通过贴吧、微博等网络社交媒体的舆论自由具体到个人网络冲浪的舆论底线，引导学生理性发声，共同构建自由、平等、公正、法治的网络环境，启发学生树立爱国、敬业、诚信、友善等信念，最后引导学生把社会主义核心价值观落实到个人的具体行动上，自觉做社会主义核心价值观的积极践行者。

中华优秀传统文化是引领人们思想进步的精神宝库，值得我们进行挖掘和传承。例如，在学期作业中，以中国传统节日为主题设计并制作交互型网页，用技术去传播中国文化。学生在素材收集的过程中了解中华优秀传统文化底蕴，强化了学生的文化自认同，增强了学生的文化自信和创新意识。

宪法是治国理政的总章程，更是关乎我们自身权利的法律武器。例如，在JavaScript对象编程章节，设计“京东秒杀，随机立减”案例，培养学生合理消费、谨防消费陷阱，激励学生成为宪法的忠实崇尚者、自觉遵守者、坚定捍卫者，营造起学习宪法、尊崇宪法、宣传宪法的浓厚氛围，持续增强学生对宪法的政治认同、思想认同和情感认同。

《新时代公民道德建设实施纲要》鼓励人们在工作中做一个好建设者。例如，在jQuery插件章节，以开源插件应用为例，引领学生了解GitHub开源项目，从同行中汲取力量。鼓励学生编写开源软件，把业务理论与实践结合起来，在实践中深化职业理想和职业道德教育。引导学生在实践中深刻理解并自觉实践软件行业的职业精神和职业规范，培养良好的职业品格，增强职业责任感，实现知识技能的工具性和精神性统一。

4 网站前端交互技术课程思政教学实践

4.1 课程思政融入点

网站前端交互技术课程主要分为3大模块，即Ja⁃ vaScript基础、JavaScript进阶和jQuery框架。思政元素在网站前端交互技术课程的融入点，如表1所示。

4.2 课程思政教学实践案例

1） 案例概述

以JavaScript网页特效章节的任务1：以模仿京东商品切换选项卡效果为例，阐述课程思政教学实践过程。

知识目标：掌握JavaScript操作元素的样式；掌握鼠标单击、鼠标移入移出事件。

能力目标：能够使用JavaScript修改style和class 样式并说出两种方式的区别；能够运用JavaScript鼠标事件完成选项卡特效。

思政目标：分析总结选项卡特效在网页的作用及区别，培养创新的意识，不断自我革新，修炼终身学习的自觉性。

其中，教学重点是实现选项卡特效的编程思路与步骤；教学难点是能区分不同类型选项卡对样式操作的区别。

2） 教学实施

教学实施过程，如表2所示。

3） 教学效果评价

学生反馈：选项卡功能涉及知识点较广而且环环相扣，非常锻炼编码逻辑思维，从不同的角度去分析问题其对应的代码量也有所变化，不仅考验思维逻辑还考验创新能力，课后还需要多看多想多练。

教师总结：各小组配合完成课堂任务；小组间作品的打分比较中肯；基本掌握鼠标单击事件、移入移出事件；基本掌握JavaScript操作style和class样式；大部分同学对选项卡的创新应用较为欠缺，还需要多浏览各类型的网站；个别同学对样式循环操作不熟练，主要表现在forEach方法的使用不够熟练。通过选项卡教学任务，培养学生的团队合作精神、激发学生不断求知的热情，锻炼学生编程逻辑思维和创新思维，用技术宣传家乡，达到思政育人目标。

5结论

党的二十大报告指出，全面贯彻党的教育方针，落实立德树人的根本任务，培养德智体美劳全面发展的社会主义建设者和接班人。对网站前端交互技术课程实施基于OBE理念的混合式教学模式，从专业人才培养方案和课程属性出发，充分挖掘课程中蕴含的思政育人元素并以润物细无声的形式融入线上线下教学中，是落实立德树人根本任务的回应。研究结果表明，基于 OBE理念的混合式教学模式能够有效地将思政元素融入网站前端交互技术课程教学中，提高学生的思想政治素质和专业技能。这为其他专业课程开展课程思政建设提供了借鉴和参考。未来，我们将继续探索更加有效的课程思政教学方法，并将课程思政与专业发展、社会需求紧密结合，为培养更多德才兼备的高素质技术技能人才做出更大的贡献。