摘要 ：  文章首先分析了网站开发技术课程教学痛点，然后论述了网站开发技术课程教学创新实践，接着 说明了网站开发技术课程教学创新成效，最后对网站开发技术课程教学创新进行了反思。

　　关键词 ：  网站开发技术课程,教学创新,Web前端工程师

　　习近平总书记在全国高校思想政治工作会议上  指出，“高校立身之本在于立德树人。只有培养出一流  人才的高校，才能够成为世界一流大学 。办好我国高  校，办出世界一流大学，必须牢牢抓住全面提高人才  培养能力这个核心点，并以此来带动高校其他工作”[1]。 以上指导思想对高校人才培养提出了更高的要求，要  求把立德树人贯穿教学始终，提升人才培养的高阶性  和专业性 。这就需要对专业课程教学做出新的调整， 大力开展课程教学创新，以实现全面高阶人才培养的  新目标。而对于网站开发技术这门在培养计算机相关  专业 Web 前端高阶技术人才中起到关键作用的专业  课程来说，更需要根据课程特点率先做出调整，实现  教学创新。

　　一 、   网站开发技术课程教学痛点

　　网站开发技术课程是一 门计算机相关专业的专  业课程，开设在第五学期 。根据学生的就业需求及专  业人才培养方案的要求，该课程教学内容的设置与学  生未来就业岗位的用人需求挂钩，有很强的就业针对  性，且直接面向就业专业技能的培养 。该课程是一 门  实践性较强的专业课程 ， 旨在培养符合 Web 前端工  程师岗位需求的高阶专业人才 。结合多年教学经验， 笔者对目前教学中存在的痛点做如下分析。

　　第一，不能在教学中实现 OBE 理念 。 以往课程教  学目标设计“ 重教书、轻育人”，即教学更注重知识体  系的完整性，过度追求静态知识量，而缺少对学生的  关注，也没有根据学生的反馈及时进行调整，这种以  “ 灌输式”教学为主的模式，很难实现以学生为中心、 以产出为导向的教育目的，导致学生的兴趣和参与感  都不强，且对学生的价值引领和品格塑造也较为欠缺。

　　第二，课堂较为沉默，缺少活力。以往授课以讲授

　　为主，以“教”为中心，注重知识的传授，课堂缺乏吸引 力，学生参与感不强，且师生、生生互动较少，导致课堂 效果不理想 。笔者认为，像网站开发技术一类的编程 类课程，要注重学生实践动手能力的培养，但当前纯 讲授式的教学不能很好地培养学生的实践动手能力。

　　第三，课堂教学内容陈旧，缺乏创新性 。传统课堂  教学内容陈旧，缺乏深度和挑战度，导致学生参与度  低 ， 且教师没有在课堂上将学科发展前沿与学生共  享，知识点的呈现形式较为单一，且缺少对知识点的  提炼过程 。而计算机行业领域发展较快，各类编程工  具和科研成果层出不穷 ， 教学内容也需要与时俱进， 不断更新调整 。受学时所限，将新的研究成果全部搬  入课堂难度较大，此时需要进行教学创新，利用多种  教学形式和工具来完成新知识的传授。

　　第四，不能在教学中实现有效的课程思政融入。 把立德树人根本任务贯穿教学始终 ， 尽量以潜移默  化 、润物无声的方式实现思政教育的全过程融入，保  证育人效果的有效实现是课程思政的教学目标 。实现  教学创新前的网站开发技术课程教学以知识点讲授  和程序代码编写为主，“重教学、轻育人”，导致在课程  中融入思政教育的内容很少，不能较好地实现思政育  人目标，这是亟须解决的教学痛点之一 。笔者认为，需  要根据课程特点找到合适的思政融入方式。

　　第五，课程评价体系有待完善 。传统课程一般采 用“ 一考定终身”的评价方式，只注重知识性评价，也缺少过程性评价，也缺少能力检测评价 。 由于学生存 在差异性，以及课程实践动手能力要求比较高，单一 的评价方式没有考虑学生的个性特点，也不能激发学 生自主学习的热情， 故应加大对实操能力考核的力 度，如增加设计类作业和小组协作作品考核，这也是亟须解决的教学痛点。

　　二 、   网站开发技术课程教学创新实践

　　（一）确定课程教学创新目标

　　网站开发技术课程的设置面向 Web 前端工程师  的岗位需求，其主要任务是全面介绍与网站前端整站  设计有关的知识，向学生阐明 Web 基本工作机制，并  使学生具有解决一般网站前端整站设计问题的能力。 另外，通过对网页创意及编程语言和制作工具的学  习，学生要对于网站设计中涉及的相关知识有全面的  了解，能够掌握 Web 前端开发的基本技术并拥有网站  前端整站设计的能力，进而达到 Web 前端工程师就业的要求。

　　根据一流课程建设需求，结合以上课程设置的要  求和特点，以及对教学痛点的分析，该课程的教学目标创新以新工科建设为主导，以 OBE 理念为基线，将立德树人的根本任务贯穿教学全过程，并根据就业需求及专业人才培养方案的要求，实现知识、能力、素质、 思政四方面教学目标的有机结合，以激发学生自主学  习的内驱力。

　　知识目标：学生通过学习网页创意、编程语言， 掌握与网站整站设计有关的知识，并理解 Web 基本工作机制。

　　能力目标：面向 Web 前端工程师岗位需求，学生 需要具有解决一般网站整站设计问题的能力，同时教 师要把课程讲授和项目实践相结合，引入工学结合理 念，从而培养学生的思辨意识和创新能力[2]。

　　素质目标：学生需要具有团队合作精神和社会责任感，遵守职业道德规范，以便成为有中国情怀、国际视野的专业人才。

　　思政目标：教师将社会主义核心价值观融入教学， 以提高学生道德品质和文化素养，进而使学生成为德才兼备、全面发展的人才。

　　（二）课程教学内容创新及资源建设

　　1.引入学科前沿知识，形成具有专业特色的教学  和实验案例库。首先，根据教学内容设计相关案例，案  例以实现知识点教学为目标 ， 需要贯穿教学全过程， 以便通过案例教学提高学生的参与度和兴趣 。其次， 案例设计需贴近工程实际与学科前沿，符合企业用人  需求 。根据以上两点需求，以及课程主要涉及的五类  教学模块，网站开发技术课程的案例库建设共包括五  大类 150 多个案例，分别用于课程教学、实验、研讨、 分组项目选题， 并持续建设和更新 。其中，HTML5 和  CSS3 教学和实验案例共计 60 个，此类教学内容属于行业前沿知识，知识点较多，通过多个贴近工程实践  的编程实践小案例的贯穿，可以较好地融合多个知识  点，故此类案例以动态效果编程小案例为主，数量较  多；JavaScript 教学和实验案例共计 40 个，此类教学内  容属于行业经典必修知识 ， 是前沿框架应用的基础， 知识点较多，通过多个经典编程案例的贯穿，可以实  现多知识点的融会贯通，此类案例同样体量较小但数  量较多；jQuery 教学和实验案例共计 40 个，此类教学  内容是在 JavaScript 基础上的框架应用 ， 属于行业前  沿必修知识，知识点较多，需要通过案例实现知识点  的全面掌握，此类案例同样体量较小但数量较多；移  动端页面设计教学和实验案例共计 10 个，此类教学  内容属于行业前沿知识，偏重前三类知识在移动端开  发的综合运用和页面整体设计，每个案例需要用到前  面学习过的多个知识点，此类案例体量和数量中等； 网站整站设计教学和实验案例共计 5 个，此类教学内  容是前述知识的综合运用，教学内容直接与就业综合  技能对接，是对 Web 前端开发的综合运用及进行网站  整体设计，此类案例体量最大，数量较少[3-6]。

　　2.以 SPOC 和雨课堂为平台，构建以学生为中心  的网络教学资源，实现对线下教学的补充 。丰富全面  的学习资源是提升学习效果的基础，因此如何给学生  提供更多、更适合的学习资源是课程教学创新过程中  必须考虑的问题。随着互联网的深入发展，学生更喜欢  通过网络获取资源。基于此，该课程实现了线上平台的  建设 。 当前，该课程框架已建设完整，完成了课程导  学、单元教学、播客单元、教学资源、课程活动、线上学  习六个线上模块的建设，课程资源丰富，课程活动开展  活跃，课程应用情况良好。该课程主要包括 8 类基本资  源（课程大纲、教案、教学视频、演示文稿、测试习题、 案例代码等）和 4 类拓展资源（工程案例、教学软件、 实验选题、思政资源），针对“课前预习+ 课堂讲授+  小 组研讨+课后实践+项目演练”，提供全方位的学习支持。

　　除解决实践类课程课后预习和复习的课堂情景  再现问题以外，教师在授课过程中进一步发现和总结  问题 ，利用 SPOC 平台完成了更多的教学设计和改革  任务，并通过增加线上资源，取得了更好的教学效果。 例如，上传教学资源（授课 PPT、在线授课笔记、教学  大纲、案例资源、程序源代码、所需软件等），方便教学  过程的实现，也方便学生随时下载，获取更多的教学  资源；上传教学实验的安排及讲解，学生可随时下载， 方便教学设计的实现；通过线上作业上传和批阅，在  线考试的实现等，能够提高教学效率并实现无纸化操作；通过线上讨论和问卷调查，便于完成师生互动的目标[7]。

　　（三）课程教学组织实施

　　网站开发技术课程构建“ 以产出为导向，以案例  为驱动”的教学模式，形成“案例引导— 知识内化— 设   计实验—优化整合—项目实施”5 个层面的学习过程 ， 实现了“知识获取—实践创新—协作沟通—综合素养 ” 4 项能力的进阶 。课程面向 Web 前端工程师职业需  求，采用层次化、阶梯式实践教学方式，使学生逐步实   现三个技能目标：使用 HTML 和 CSS 制作企业站→使   用 HTML 和 CSS 制作更复杂的电商站→使用 HTML5   和 CSS3 的新技术完善网站设计，实现动态交互。具体   教学实施过程如下。

　　1.课前 。基于课程案例资源、实验项目资源、知识 点思维导图和线上资源平台，教师通过布置课前预习 任务，实现任务分解→ 资料查阅→ 知识获取，让学生 提前参与进来，了解学习内容，可激发学习动力，同时 培养自学和独立思考的能力 。其间，教师布置的预习 任务要围绕课程案例内容设置提问并提供相关案例 资料 ， 以此引导学生自主对案例进行分析和探讨，并 借此使学生初步认识网站开发技术课程当节课的相 关知识点。

　　2.课中。教师要充分发挥课堂教学主阵地、主战场  的作用，完成案例引入→ 现场编程→ 知识重难点解  析→项目分析→讨论等过程，实现基于案例引入的知  识点学习和实操 。在这一过程中，教师通过小测试了  解学生对网站开发技术课程当节课内容的了解程度， 然后呈现案例并配以细致的解析，促使学生更深入地  对案例相关项目进行了解和掌握 。其间，教师可通过  雨课堂的随机点名和课堂在线测试功能辅助教学，提  高学生课堂参与度，积累过程性考核数据，并侧重培  养前沿技能、沟通协作能力和工程实践能力，从而实  现知识内化的学习过程。

　　3.课后。教师要基于 SPOC 网络教学平台，发布作 业和实验任务，让学生通过完成实验，实现设计实验 学习过程；发布分组讨论议题，让学生通过完成作业 和实验， 以及通过分组协作完成实战项目的设计、分 析和讨论，实现对学习的优化整合 。实战设计项目是 网站整站的设计，需要以小组形式分工合作，可考验 学生小组协作能力和知识运用能力，实现对所学课程 知识的全面应用，且与互联网开发公司的工作模式接 近 ， 可以帮助学生体验未来工作场景和工作模式，实现知识体系的完善和实操技能的培养，有效提升学生 的信息化素养、协作及综合运用能力 。学生基于课中 对项目的分析和讨论，对课后实战项目的实施进行优 化设计，再通过实战项目的完成实现项目实施学习过 程，可提高自身的综合素养 。此外，教师还可以通过 SPOC 平台发布“ 在线讨论”和“ 调查问卷”，实现线上 师生互动，并及时解决学生在学习中遇到的问题[8-10]。

　　（ 四）课程思政融入方案

　　教师要根据网站开发技术课程特点，实现精准的 课程思政融入，包括职业规范和社会责任感、爱国主 义教育、工匠精神、民族自信心、审美情趣、民族自豪 感六个方面，具体可通过“ 课前呈现—课中内化—课 外实践”模式实现隐性思政育人。

　　第一，课前。教师根据课程内容，在线上布置预习 任务，实现思政内容引入 。例如，在讲授单页面开发 时，可将线上预习任务设置为浏览中国国家博物馆网 站，并总结网站设计特点，这样学生在预习时对中华 优秀传统文化会形成形象化的认识；在讲授网站开发 工具时，可布置线上预习任务为搜索前端工程师职业 规范，这样学生在预习时对前端工程师职业定位会有 所了解。

　　第二，课中。教师讲授与课前预习任务相结合，实 现思政内容的课中内化 。例如，在课中讲授单页面开 发时 ， 教师可以课前预习任务的完成情况作为切入 点，融入中国国家博物馆网站设计分析，同时展示中 国优秀传统文化、革命历史及中国特色社会主义建设 伟大成就，进行爱国主义教育和思想政治教育；在讲 授网站开发工具时，对课前预习任务的完成情况进行 总结，讲解前端工程师的职业定位，规划职业生涯，以 达到增强学生职业责任感和社会责任感的目的 。另 外，对于编程类授课内容，教师可采用项目式教学，如 在讲授某站点制作实例时，通过某站点内容展示高品 质企业站点的设计 ， 由此体现我国经济高速发展、技 术先进等内容，以增强学生民族自信心。

　　第三，课后。教师通过网络教学平台问卷调查、小 组思政专题讨论，进一步巩固思政教学效果，并根据 学生的参与度、讨论结果和问卷统计，实现思政效果 评价[11]。

　　（五）课程成绩评定方式改革

　　网站开发技术课程要构建全程化、结构化闭环考核体系 ， 量化学生过程性学习效果与项目实战能力。 过程性考核占总成绩的 40%，包括出勤（占 5%）、作业[占 15%，其中涵盖教师评价（占 5%）、小组互评（占  5%）、学生自评（占 5%）］、课堂讨论（占 10%）、项目过  程（占 10%）；期末考试占 60%（结课大作业），包括项  目答辩、小组协作、项目论文。多元评价指标基于全程  数据监测，可用于评价学生三阶能力目标达成度和各教学环节的持续改进。其中，评价体系中的小组互评、 学生自评和讨论过程，实现了学生自主评价，提高了学生的参与度， 有助于实现以学生为中心的教学目标；项目过程评价、答辩和论文充分实现了全面考核， 有助于实现产出导向的教学目标；小组协作和分组讨论有助于实现强化思想道德教育和加强团队协作的教学目标；评价体系中的结课大作业要求学生综合应  用本课程所学知识，自选主题，独立完成网站整站的  设计，可以使学生利用所学的内容设计出自己的站点，从而激发学生的学习兴趣，提升学生的动手实践能力 。为了使每个学生得到训练并认真完成大作业， 教师根据每位学生大作业的代码量、技术难度、页面界面的美观程度、编码的熟练程度、代码的规范性进行综合评定，给出公正合理的成绩。

　　三 、   网站开发技术课程教学创新成效

　　第一，教学过程实现了现代化信息技术与教学的 深度融合，以前沿知识为核心设计教学内容，突出了 教学内容的“高阶性、创新性和挑战度”。教师应以“两 性一度”为主导，提升教学内容的高阶性和挑战性，增 加学习挑战度，使教学过程实现知识、能力、素质的有 机结合，培养学生解决复杂问题的能力；教学内容改 革体现时代性；教学形式体现先进性和互动性，且使 学习结果具有探究性和个性化；循序渐进提升教学案 例难度和复杂度，使学生真正忙起来，需要花时间和 精力解决实际问题 。具体来说，网站开发技术课程教 学内容融入了目前 Web 前端网站设计的最新工具和 技术，如 HTML5、CSS3、Vue.js 等新技术，紧跟互联网 开发前沿的脚步，而且教学内容会根据市场需求及时 更新 。在将前沿知识融入教学的同时，突出了知识的 综合运用技巧；引入基于案例的启发式教学方式，提 升了学生的创新设计能力；基于小组项目协作的实战 项目设计，提高了学习内容的挑战性。

　　第二，基于 OBE 理念，以学生能力培养为中心， 以产出为导向构建教学体系，打破课堂沉默状态，焕  发课堂生机活力，显著提升了教学效果 。 网站开发技  术课程新教学模式以调动学生学习积极性为出发点，将能力培养与教学环节紧密连接，突出学生中心地  位，如启发式案例教学可强化师生互动，焕发课堂活  力；小组项目协作可强化生生互动，有助于批判性思  维的培养 。同时，注重评价方式的多样性，增加过程性  评价，通过线上平台实现小组互评和学生自评环节， 提升了学生参与度，提高了课程挑战性 。教学模式改  革体现了由基础到应用、由理论到实践、由课堂到实  战、由单一能力到综合能力的渐进培养过程。

　　第三，建设具有学科特色的项目案例库，提供全  方位教学资源，并将其应用于分层递进式授课和实践  教学环节，培养学生解决复杂工程问题的能力和创新  设计能力。以 Web 前端工程师人才需求为核心构建项  目案例库，在各教学环节层层深入，突显了专业特色， 培养了学生的实操技能及创新设计能力，已构建典型  案例 150 多个、企业级实战项目 5 项 。案例教学的引  入，提高了学生的参与热情，并锻炼了学生的实操能  力 。 同时，全部案例讲解过程和完整代码都上传至  SPOC 平台，学生可以随时下载查阅，方便复习和预  习 。随着实操技能及创新设计能力的提高，部分学生  还参加了省部级创新大赛，并获得多项奖励。

　　第四，在教学各环节深度挖掘、融入思政元素，实 现了润物无声的思政教育。通过对课程内容的深入分 析，采用从案例和实验素材入手的方式，实现了课程 思政的有效融入 。网站开发技术课程教学创新设计所 有环节均围绕立德树人和 OBE 理念展开，实现了理 论实践一体化的教学内容改革；教学创新的基本理念 是协同有序，做有温度的课程思政，在课前就种下思 政的种子，使其课中生根发芽，课后开花结果。

　　四 、   网站开发技术课程教学创新反思

　　以上教学创新实践是基于网站开发技术这门课 程进行的，经过了 5 年教学实践，取得了较好的教学 效果，但目前还存在一些不足，需要持续建设改进，主 要体现在以下五个方面。

　　第一，根据互联网行业迅猛发展的特点，在课程 建设过程中，需要进一步完善教学案例设计，加大学 生学习投入，增加企业级项目设计实现比例，科学“增 负”；进一步实现知识、能力、素质三阶协同目标的有 机融合，紧跟行业发展步伐，始终保持教学内容的先 进性、高阶性、挑战性。

　　第二，重视小组协作讨论式学习，变“ 问答式课堂”为“ 思辨式课堂”，进一步提高教学的互动性和学 生学习主动性 。多年教学实践说明，学生学习主动性 与教学效果呈正相关。

　　第三，考核评价体系需要进一步完善，继续加大 平时成绩的比例，增加设计类作业的比重，增强学生 的成就感，贯彻以学生为中心的教学理念。

　　第四，思政育人力度需要继续加大，深度挖掘课  程中的思政元素，思考如何在各类案例教学中润物无  声地进行思政教学，进一步完善课程思政教学体系， 把立德树人目标贯穿教学始终。

　　第五，科研反哺教学在课程中的应用还不够深 入。本课程是编程类专业课程，以应用实践为主，目前 的教学实践和最新的科研成果联系还不够紧密 。对 此，需要把最新科技发展前沿理念和技术成果引入课 堂教学，这对引导学生实现探究式与个性化学习，以 及对学生专业思考能力进行培养都有好处，是今后课 程建设的重要方向。

　　五 、   结语

　　本文介绍了网站开发技术课程教学创新手段。首 先，对目前高校培养高阶人才的需求和课程教学痛点 问题进行了深入分析，并据此开展教学创新；其次，从 探讨如何解决现有教学痛点问题入手，从确定教学创 新目标、课程内容创新及资源建设、课程教学组织实 施、课程思政融入方案和课程成绩评定方式改革五个 方面阐述了教学创新设计的实现方式和实践过程；最 后，对课程改革成效进行了总结，并根据教学创新实 践的效果和不足提出未来课程持续建设计划。在本课程教学创新实践中，将案例教学法贯穿始终，并引入  多种辅助教学方法，加强线上教学平台和资源建设， 贯彻以“新工科”为主导的 OBE 理念和立德树人教学  目标，取得了良好的教学效果，当然还存在一些不足  需要完善和持续建设，希望可以给其他专业课程建设  提供一些思路，推动专业课程建设进一步发展。

　　参考文献 ：

　　[1] 习近平在全国高校思想政治工作会议上强调 把思想政治工作 贯穿教育教学全过程 开创我国高等教育事业发展新局面[N].人民 日报,2016-12-09(1).

　　[2] 高鹭,周李涌.计算机实用技术课程教学创新设计[J].计算机教 育,2022,333(9):137-140.

　　[3] 耿丽娟.“课程思政”在计算机基础课程中的探索[J].通讯世界, 2019,26(8):347-348.

　　[4] 孟瑶 .“Web 前端开发技术”课程思政研究[J].电脑与信息技术 , 2020,28(3):83-84.

　　[5]  肖本新. 高校思政教育如何实现“供求平衡”[J].人民论坛,2018 (1):116-117.

　　[6] 张呈江.“ 网页设计与制作”课程思政实践研究[J].工业和信息化 教育,2021(8):53-57.

　　[7] 黄沙,路丕军,穆莉.大学计算机基础课程思政建设的探索与实 践[J].卫星电视与宽带多媒体,2019(16):87-88.

　　[8] 王雪峰,陈兴稣.基于项目任务驱动的网站开发技术课程教学改 革研究[J].科技资讯,2022,20(9):194-198.

　　[9] 陈小燕.在高校计算机基础教学中实施项目教学法的探索[J].中 国科教创新导刊,2012(4):168-169.

　　[10] 孙展鹏,王晓东,宋高臣,等.基于一流本科课程建设的课堂教学 改革与思考[J].现代商贸工业,2023,44(17):253-255.

　　[11] 张婷,蒋权,黄帆.《UI 设计》线上线下混合式一流本科课程建设 的实践路径[J].设计,2023,36(15):91-93.