HTML、CSS 与JavaScript 程序设计课程建设的探索与实践

朱士玲　叶青　卢鹏　吉立建

摘要：为了使HTML、CSS与JavaScript程序设计课程更加贴合当前的教育需求和技术发展趋势，文章从课程目标、课程内容、教学方法改革、课程评价机制几个方面进行课程建设的探索与实践，为学生提供一个全面、实用、前沿的学习平台，使学生不仅能够掌握Web开发的技术知识，还能够发展成为具备创新能力和终身学习能力的专业人士。

关键词：前端开发；Web开发；课程建设；教学方法改革

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

文章编号：1009-3044（2024）14-0169-04 开放科学（资源服务）标识码（OSID） ：

0 引言

HTML、CSS和JavaScript作为网页设计的三大核心技术，对于培养具备实际应用能力的计算机专业人才具有重要意义[1]。通常大数据技术专业的学生在大一上、下学期会先学习C语言和Java语言程序设计课程，有一定的编程基础，但就如何把网站的界面更好地用前端技术呈现出来还未曾接触，为此，HTML、CSS 与JavaScript程序设计往往会被开设为大二上学期的必修课程，培养学生将前后端知识综合应用于实际的Web开发中。

传统的前端开发课程往往存在教学目标不明确、教学内容和教学案例陈旧落后、知识点覆盖不全面、前后知识衔接不紧密、教学方法单一、课程资源匮乏、重理论轻实践、重专业技能轻思政教育等问题[2]，导致学生在面对某一页面设计需求时，仍然不能快速准确地利用所学知识实现页面布局、页面元素的样式设置和交互功能，也缺乏相应的问题解决能力、创新精神以及行业素养。因此，探索新的课程建设道路显得尤为重要，不仅对学生的个人发展，也对高校的教育质量、企业的人才储备以及整个社会的技术进步和经济发展具有深远影响[3]。

1 课程建设的目标

思想道德目标：学生应了解与Web开发相关的法律法规，确保未来在工作中遵守相关法律法规；遵守学术诚信，不抄袭他人作品，诚实地完成所有课程作业和项目；对自己的学习负责，对团队合作的项目负责，培养良好的工作态度和社会责任感。

知识目标：掌握HTML、CSS 和JavaScript 的基础知识，包括熟练掌握 HTML 的语义化、CSS 的样式表设计以及 JavaScript的编程思想；熟练使用前端开发工具；理解Web标准和规范；了解最新的Web技术和趋势；理解并掌握前端开发的全过程。

能力目标：培养实践能力，通过实际的网页设计和开发，提高学生的编程能力和解决实际问题的能力；培养创新思维，鼓励学生设计独特的Web应用和解决方案；培养团队协作能力，通过团队项目和协作任务，提高学生的团队合作和沟通能力；培养自主学习能力，使学生能够适应技术的快速变化。

素质目标：培养学生的网页设计创意思维、艺术设计素质；培养学生的批判性思维能力，使他们能够分析和评估不同的技术方案和设计选择；培养终身学习的习惯，不断更新知识和技能，实现个人持续成长。

2 课程内容建设

本课程注重理论与实践相结合，课程的总学时为64学时，其中理论32学时，实践32学时。为了保证教学内容的连贯性，通常采用4节连上的课堂教学模式，其中前2节以理论讲解为主，后2节以学生做实验为主，老师答疑为辅的方式展开教学。

2.1 理论教学内容

表1为理论教学内容计划表，该部分共分为11个知识板块，32学时，根据教学内容合理安排在1～16周内学习，在每一个教学内容中都融入了与教学主题相关的课程思政要素。教学内容的安排可保证HTML、CSS和JavaScript知识点的全覆盖，从表1中可看出各知识点依次递进，环环相扣，不仅能够帮助学生掌握专业知识，还能培养他们的社会责任感和职业道德。

2.2 实践教学内容

实践教学与理论教学相辅相成，在每一个知识板块的理论内容学习完成后，就进入与之相对应的实践项目，表2为实践教学内容计划表，每一次的实践项目丰富且紧贴理论教学内容，同时融入了多个典型的网页设计案例，考虑到教材内容的局限性，实践内容还会拓展诸如数据渲染、桌面端组件库Element、vue框架等流行技术，由浅入深，使学生充分将理论知识应用到实践中，直观地感受到前端开发带来的乐趣和挑战，提高学生的编程技能和问题解决能力。

3 教学方法改革

本课程采用线上线下混合式[4]、“教、学、做”一体化[5]教学模式，通过多种教学手段和形式，全方位地培养学生的前端开发能力，图1是本课程的教学方法设计，主要分为课前、课中和课后三个阶段。

1） 课前阶段：以线上教学为主。在课程准备阶段由教师在超星学习通建设好本门课程的在线学习平台，将教学大纲、教案、课件、代码、思维导图、教学视频、拓展资料、习题库等教学资源上传至学习平台。在每次上课前，教师将预习任务通过学习通下发给学生，要求学生在规定时间内完成学习资料、视频观看和学习效果测试，根据学生的完成情况设置激励积分，作为平时作业的考评成绩。在该阶段通过学生的答题情况和互动留言梳理普遍反映的重难点，为课中阶段的教学设计做准备。

2） 课中阶段：以线下教学为主，线上互动为辅。教师介绍本次课程要完成的实验任务，以引出学习内容、目标和重难点，使学生带着问题参与整个课程的学习中来。在理论教学环节，紧密结合实际案例，使学生在技术的运用中掌握知识。在解释抽象知识时，如浮动的概念，可配以3D动画演示的方式，使学生直观地感受元素设置浮动后产生的效果和影响。在讲解完某个知识点后，通过在线学习平台设置随堂问答和随堂练习环节，以巩固所学知识，提高学生的学习专注度。在实验环节，采用单人、小组合作的方式展开实验，先由教师挑选出1～2道题目分析，再以边敲代码边讲解的方式进行示范教学。针对较简单的题目，由学生单独完成，以培养独立解决问题的能力。针对较复杂的题目分小组讨论，学生分享各自的想法，然后根据想法实现页面效果，最后教师对学生的作品做出点评。在实验完成后，要形成实验报告，详细记录实验的主要设计思路及源程序、主要问题和解决方案、测试数据和结果、心得体会与自我评价，以锻炼学生的归纳总结能力。

3） 课后阶段：以线上互动为主。教师需要复盘课中阶段自身的教学情况和学生的学习情况，并形成教学总结。为满足学生的学习需求，应及时录制和发布理论和实验教学视频，作为传统课堂教学的补充，并通过在线上学习平台发布进阶版章节测试题和网页设计题，要求学生在规定时间内完成作答和作品设计，获取相应的任务激励积分。学生可通过线上讨论等方式与教师交流学习中遇到的问题，教师以线上留言或录制解答视频的方式，对常见问题进行详细讲解。该阶段增加了师生之间的互动频率，有助于提高学生的学习积极性，也为教师提供了及时了解学生学习状况的途径，有助于调整教学策略，提高教学质量。

4 课程评价机制

为了全面评价学生的学习效果，本课程建立多元化的课程评价体系。表3为课程成绩组成表，总体分为过程性成绩和终结性成绩。

前端开发作为一门实践性很强的课程，其终结性教学评估方式从传统的考试卷转向课程设计，可增强学生的实践能力、知识的综合运用能力、团队协作能力，培养创新思维。考虑到学生的整体学习情况，设置三种题型供学生选择，第一种选题是给定网页设计效果图、素材和具体功能需求，如某高校网站、某企业网站、某社会团体网站等。第二种是半开放选题，只指定设计题目和大体的设计内容，但不提供设计素材，如个人简历网页、个人博客网页、技术论坛网页、电商网页、新闻门户网页等。第三种是全开放选题，由学生自拟题目，要求主题健康向上，需求分析合理，能够综合运用本门课程的相关知识。课程设计题目在14周下发，学生自愿选题，自由组队，每组成员1～4 人，在17周根据作品完成情况、答辩情况、分工明细和课程设计报告撰写情况进行评分。

5 实施效果

5.1 学生表现

本文提出的课程建设思路已在2023-2024学年第1学期应用于2022级大数据技术专业3个班级的教学工作中，图2～图4分别是大数据2201班（43人）、2202班（43人）和 2203班（48人）的成绩分布图。课程成绩充分结合学生的平时成绩、实验成绩和课程设计成绩。其中在课程设计环节，有26% 的小组选择了企业网站设计，21% 的小组选择了高校网站设计，17% 的小组选择了社会团体网站设计，19% 的小组选择了半开放题目，剩下的小组选择了自拟题目。从图2～4 中可以看出，学生的成绩位于80～89分之间的较多，说明大部分学生能够较好地完成随堂任务、理论作业和实验任务，掌握了课程所要求的基本知识和技能。此外，优秀级别的同学在课程设计中能够设计出2个以上美观、具有交互效果及创新性的页面，答辩流利，报告质量高；良好级别的同学能够设计出1～2 个页面，具有一定的特效，报告质量较高；中等级别的同学能够设计出1个页面，但报告质量稍差；及格等级的学生存在答辩不流利，报告质量差等问题；不及格的同学存在在组内无工作量等问题。

5.2 教学质量反馈

表4是学生根据教师的授课情况所反馈的教学质量满意度调查表，满意度采用百分制，从表中可以看出，学生对本课程建设思路下的教学方法较为满意，但仍有改进空间，比如在课堂上应多采用启发式、参与式、讨论式等教学方法提高学生的课堂参与度等。

6 结束语

本文通过对当前HTML、CSS与JavaScript程序设计课程的教育现状的分析，结合教学理论与实践，对该课程的建设进行了全面的探索与实践。我们重视课程内容的实用性与前瞻性，注重教学方法的互动性与创新性，强调实践环节的系统性与实效性。通过这些努力，课程不仅提高了学生的学习兴趣和参与度，也显著提升了他们的技术能力和解决实际问题的能力。未来，我们将继续跟踪行业发展趋势，不断更新课程内容，优化教学方法，并加强与企业的合作，以确保课程能够更好地满足学生和市场的需求。

参考文献：

[1] 龙军，王家宁.Web前端开发课程建设的探索与实践[J].电脑知识与技术，2021，17（19）：196-198.

[2] 陈少燕.Web前端开发课程教学模式改革[J].中国新通信，2023，25（4）：51-53.

[3] 王红军，胡宇航，汪洪祥，等.Web前端开发课程体系建设与实践探索[J].文化创新比较研究，2021，5（2）：64-66.

[4] 高广银，储久良，成艳，等.线上线下混合式一流课程建设研究与实践：以“Web前端开发技术” 课程为例[J].计算机时代，2022（4）：77-79.

[5] 李娟，李宏博，苏丹，等.Web前端开发课程项目式教学改革与实践[J].高师理科学刊，2022，42（10）：78-81.

【通联编辑：朱宝贵】

基金项目：广东省高等教育教学改革项目《基于OBE 理念的大数据专业项目导向教学模式研究与实践》（编号：2023JXGG05） ；2022 年质量工程建设，面向对象程序设计课程教研室（2022ZLGC19）