《Web前端开发技术》课程教学改革与实践

张微微 河北工程技术学院

1 概述

Web前端开发是计算机领域比较热门的工作岗位。因此，许多院校计算机专业开设了Web前端开发技术等相关专业。本课程主要的教学内容有HTML、CSS、JavaScript和JS前端框架，以及Dreamweaver开发工具的使用，主要知识点包含HTML标记、CSS样式、CSS+DIV布局、JavaScript基础语法、JavaScript对象、DOM和BOM、jQuery等。以往，本课程的教学过程主要是围绕Web前端开发的知识点，在讲解知识点后，让学生编写练习题目达到消化和巩固知识点的目的。本课程的目标是培养学生设计和制作Web页面的综合能力，这种围绕知识点的教学方式使得学生不能将知识进行综合，学生不能很好的将知识点应用到实际项目中。为了培养学生的学习兴趣和综合能力，可以采用以项目为驱动的的项目化教学方法。

2 教学内容

课程内容主要有HTML、CSS、JavaScript和JS前端框架。根据学期时常可以对教学内容进行课时的调整。表1为课程主要内容及学时分配：

3 项目驱动

在课程中，实施项目驱动的教学方法是贯穿在整个学期中。在学期初，可以将班级中的学生分为十个组，每个组的学生进行相同版式的网页设计，从而形成一种比赛竞争的氛围。图1为某组的网页示例。

图1 网页示例

在教学过程中，教师可以先讲授知识点的语法，然后让学生进行简单的练习。当学生基本掌握了知识点后，可以将所学知识应用到自己的Web页面中，从而进行了较为深入的实践。例如，教师在讲解HTML中的无序列表一节，教师可以给出无序列表的语法，无序列表和超链接的结合。进而可以讲解使用无序列表制作网页菜单。学生在学习网页菜单之后，基本可以实现自己Web页面中的简单导航菜单。经过这一系列知识点的讲解之后，学生的学习兴趣就会逐渐增加，学习积极性也会相应提高，教学过程就会取得良好的效果。

在学期末，可以以组为单位，组织学生进行网页的第一次评比。评比的目的是让学生很好的总结所学知识，巩固学生的学习兴趣和学习积极性，为后续Java Web开发奠定学习基础。图2为相同组的学生制作的网页作品。

图2 学生网页作品

4 总结

Web前端开发是一门实践性较强的课程，课程的目的是让学生掌握Web页面的制作技术。使用项目驱动的教学方法有助于教学的开展和提高教学效果。在实际应用中，这种教学方法受到了学生的普遍好评。

[1] 雷蕴.Web前端开发课程教学研究与实践[J].电脑知识与技术,2016(34).

[2] 蔚继承,燕飞.面向能力培养的《Web技术及应用》课程教学改革[J].教育教学论坛,2016(49).

[3] 魏冬梅.Web前端开发课程教学探讨与实践[J].福建电脑,2013(6).