摘要：开发Web前端是一项非常特殊的任务。本文以计算机特定的“Web前端开发技术”课程为例，介绍该课程的性质，分析课程的内容，课程的难点，并确定了课程形式的知识点。介绍了设计和制作的视频及其应用，为提高此类课程的质量和有效性提供了参考。

关键词：Web前端开发课程  高职院校课程  教学实践

引言

Web技术是Internet应用技术中最重要的基础技术之一，它对应于越来越多的领域和规模，并且需求趋于多样化和复杂化，互联网行业需要大量从事网站设计，系统开发，运营和维护的前端Web开发人才。在Web1.0时代，网站的主要内容是静态的，使用该网站的用户的行为也基于冲浪。所以，基于Dreamweaver和FrontPage的可视化开发工具可以指导网页的设计和开发。这些课程注重界面设计。它还淡化了编码问题，并创建了大多数静态网页，这些网页是通过HTML和CSS等技术呈现给用户的。

一、课程性质

本文涵蓋的Web前端开发技术课程是一门有关信息管理和信息系统的专业骨干课程，是一门实用性强的实用课程。该课程的内容包括：前端开发技术的开发过程和关键技术，常见的前端开发工具的功能和使用，页面操作和调试方法，前端页面内容和样式的基本方法和技术，前端结束脚本语言的原理和应用程序，使用主流的前端开放源代码框架，全面设计前端页面。

二、课程建设

（一）教学内容

安排教学内容时，根据Web前端开发所需的知识，主要基于HTML，CSS和JavaScript组织指令内容，并添加AJAX和PHP内容。同时，随着HTML技术的发展，HTML5的知识将得到及时的改善，将两个关键内容提取到内容系统中：（1）将CSS+DIV技术集成到本书的每一章中，增强CSS+DIV技术的融合，并解决实际工程中的应用问题。（2）合并JavaScript，DOM，BOM技术，着重培养学生设计动态交互式网页的能力。（3）通过添加PHP服务器端编程，学生首先了解Web后端的开发，进一步加深对Web前端的理解，并在使用Web方法之前学习与后端的异步数据通信。

（二）教学方法

结合任务型教学法和案例教学方法，激发学生的学习兴趣，并注意学生自我学习能力的发展。在教学方法中，自学方法是主流，教师的教学是相辅的。首先，分解网站的总体设计工作，并为每个知识点设计一个小案例。教师将首先讨论重要的知识点和实例，并积极为学生提供免费的学习资源平台，并教授信息获取途径，以便学生掌握技术应用的最重要点。然后让学生自己完成每个级别的任务，然后由老师解释并纠正实践中的一般问题。将任务驱动和案例教学相结合，以激发学生的学习兴趣并增强他们的自学技能。

（三）评估方法

关于评估方法，以前集中于知识点评估的评估标准已经改变为侧重于实践技能。过去，授课的考试形式是老师写问题，然后学生回答，但是这种形式的考试仅限于书本知识，不能掌握学生的真正能力。《Web技术及应用》是理论和实践的结合，不仅要求学生理解基本概念，而且还要求应用特定的知识，动手制作和协调技能。所以除了一般的理论知识检查链接之外，还添加了项目开发的实践评估方式。

学生将获得所学知识，在此基础上完成给定的项目内容和相关文档，项目分数必须至少为课程总分数的20%。同时，根据这些项目，建议并鼓励学生参加学校和社会组织的各种比赛，获奖项目将获得额外积分。

三、设计与实施

Web前端开发技术课程很复杂，涵盖了三个核心：HTML5，CSS3和JavaScript，以及围绕这三个核心开发的许多技术框架和解决方案。所以课程小组开发了一系列微型课程，以解决课程中的关键点和挑战，成为对传统课堂教学的精髓。下面以课程组教师创建的“Web前端设计表单”视频的设计和实现过程为例。在该教学视频中，介绍了主页上的表单知识，通过教授和实践该知识点，学生将了解表格的申请表，表格的基本结构以及学习创建表格的方法和技巧。使用案例、分解和动画方法解决问题，解释知识点，并通过课后练习进行动手实践练习所学知识点。课程内容的设计包括以下四个部分：

（1）提出问题

联系现实情况，在现实世界的网站上显示常见表应用方案的示例，在Web前端开发技术课程中指导您了解表的知识点，并提出此视频问题：如何在网站中建立电子表格，网站实施了吗？

（2）明确主题

通过栩栩如生的动画形式，我们将在三维图像中呈现Web表单的基本结构，并指出视频的主题。

（3）解释基本原理

与实际情况相结合来看，使用广泛的动画逐步解释创建表内容和创建表样式的过程，从而渗透解释基本原理。该程序编写的一个小视频实时显示了操作过程，可以帮助学生将理论整合到实践中并加深了抽象程序。在视频中显示在浏览器中解释了代码之后的副作用，以便学生可以更生动直观地理解程序的结果。

（4）总结和实践

视频的结尾总结了所学的知识，并帮助学生复习了视频内容。在视频的末尾进行相关的动手练习，以帮助学生应用和练习介绍的知识点。辅助材料中还包括示例和练习的参考材料，以方便学生进行比较。

四、培养并提高能力

Web前端开发是一个易于但难以学精的项目，内容覆盖了广泛的知识，包括特定的技术和抽象的概念。通过教学生编写高质量的代码并鼓励团队合作来发展和提高学生的技能。

（1）编写高质量代码

编写代码是Web前端开发人员的基本任务，并且代码的质量反映了开发人员的能力。这里的核心是代码质量，前端开发的三种主要语言：HTML，CSS和JavaScript具有不同的特性和不同的代码质量要求。根据三种编码语言的特点，鼓励学生编写高质量的编码技能和能力。

（2）团队合作

在当今竞争激烈的世界中，团队合作非常重要。大学教育需要在各个方面培养大学生的团队合作精神和能力，提升大学生的团队合作意识，并培养高素质的包容性人才。可以使用网络技术来开发出色的网页效果，但是要隐藏精美的页面代码背后的内容变得越来越困难。除技术原因外，团队合作也是一个关键因素。通过分散项目任务，学生可以完成协作并培养学生的團队合作感和学生技能。

五、应用与效果

在开发技术的Web前端课程的教学过程中，每节课后都会通过网络教学平台发布相关视频和其他材料，以便学生在课后观看和学习它们。

六、增加实践课程课时

高职院校越来越倾向于培养应用型人才，所以，学生需要更多的实践能力。老师不仅需要开展学习精彩的课程，而且还需要在学校里进行Web应用程序开发技术课程的更多动手教育。学生通常对基于计算机的操作感兴趣，教师应在实践课程中教授理论知识，这对于学生从操作角度理解理论知识更有用，它比仅仅学习理论知识更清晰，更容易记住。

七、结束语

在本文中，我们以Web前端制作技术知识的形式介绍Web前端开发技术课程的内容和功能，并解释视频的设计，制作和应用。在课程的整个过程中，相关的视频和辅助材料都会在网络教学平台上发布，方便学生在课后自主学习中使用。下一个任务是结合在线教室平台来丰富课程的视频库，并层叠和集成分段视频，以便学生可以在教室外独立学习和复习。综合评估方法更方便学生调动学习热情，有效开展网络学习和自主研究活动。

参考文献

[1]蔚继承，燕飞，王美丽，陈勇.面向能力培养的《Web技术及应用》课程教学改革[J].教育教学论坛，2016，No.287，64-65.

[2]刘强，张阿敏，朱文球，等.计算机公共基础课程教学资源建设研究[J].计算机教育，2012，（17）：50-53.

基金项目

此文是2019年度吉林省职业教育与成人教育教学改革研究课题《新时代高职院校计算机应用技术专业Web前端开发课程的实践研究》（课题编号：2019ZCY219）的支撑性研究成果。

作者简介

辛红，女，1983年出生，松原职业技术学院讲师，研究方向是高职计算机应用及软件工程。