Web前端课程的知识体系和教学实践
刘蕾 刘冰月
摘 要：Web前端技术在软件开发中的地位十分重要，无论是台式机还是移动端的软件产品都离不开前端技术，因此高等院校计算机专业都普遍开设了Web前端课程，甚至一些文科专业也开展了学习。Web前端课程通常包括一系列课程，比如网页设计与开发、JavaScript编程、HTML5网页制作等，内容都是围绕HTML、CSS、JavaScript知识体系展开。针对该类课程知识点多，学生层次复杂的问题，基于多年教学总结，提出了一套前端课程的设置方案，探讨在Web前端课程中应该包含的知识体系、教材选用和教学实践等问题。这套教学知识体系适用于计算机类专业学生，在教学过程中取得了良好的教学效果。
关键词：Web前端技术；知识体系；教材选用；教学实践
中图分类号：TP31 文献标识码：A
1 引言（Introduction）
Web前端是计算机应用开发的重要领域。Web前端开发人员需要熟练掌握HTML、CSS、JavaScript、Ajax等核心的前端开发技术，同时具备互联网交互设计能力，熟悉浏览器工作原理和数据通信协议，掌握最新的开发工具和开发框架[1]。由于前端技术内容丰富、包罗万象，目前没有哪门课能够概括其全部，因此，前端技术通常以各种形式出现在不同的课程中。例如哈佛大学的公开课《计算机导论》中，讲述了HTML、CSS、JavaScript、Ajax，以及网站网页开发等内容；斯坦福大学的公开课《用网页技术开发手机应用》中，讲述了Canvas、SVG、OpenGL、WebGL、JavaScript、HTML5等；拉筹伯大学的公开课《新闻人的网络编辑和发布》中，讲述了HTML和CSS的使用方法，并且提出无论是文科生还是理科生都应该了解网页制作的知识；清华大学的《Web前端技术实训课程》中，讲述Web交互技术发展趋势、浏览器渲染技术、JavaScript高级程序设计、HTML5&CSS3;技术、JS关键技术、JS架构设计等主题。在计算机专业中，Web前端技术是分布式网站建设、JavaScript高级编程、Java Web网站开发、Android移动开发、人机交互等专业课程的先行课程[2]。不同专业的学生学习该课程，其教学内容会作相应调整，下面我们就探讨一下计算机专业本科同学在前端技术课程当中应该掌握的知识体系[3]。
2 Web前端知识体系（Web front-end knowledge
system）
2.1 HTML
HTML超文本标记语言是互联网的核心语言，它的作用是告诉浏览器如何显示文档的内容，如文本、图像和其他媒体资源，还可以通过超链接把文档与其他互联网资源连接起来。学生需要了解HTML语法，学习使用编辑工具编写HTML文档。通过HTML文档的创建过程，获得编辑和修改HTML网页的经验；了解浏览器如何对网页进行展示，理解HTML文档与浏览器的关系，记忆HTML常用标签的用法。
2.2 HTML5
HTML5是HTML目前发布的版本，为了在移动设备上支持多媒体，引入了一些新的语法元素，如Video、Audio和Canvas标签。Canvas是取代Flash显示图形或动画并且能够与用户交互的多媒体元素，学生应该掌握Canvas编程方法，会使用相关绘图API完成在Canvas上绘制路径、矩形、圆形、字符，以及图像的操作。其他一些HTML5新增的功能在帮助浏览器实现富客户端功能上，也将发挥巨大的作用[4]，学生应该了解这些新增的元素和属性。表单一直都是Web的核心技术之一，可以依靠它来完成Web上的数据输入界面，从而使得客户端和服务器能够进行方便快捷的交互。HTML5新增了许多表单控件及其API，可以方便完成验证功能而不用借助其他前端脚本语言。HTML5还引进了文档结构标签，如header、section、article、nav、footer等，使搜索引擎可以更好地理解文档的语义。此外，本地存储、本地缓存、本地数据库等也是学生应该熟练掌握的内容。
2.3 CSS
CSS是级联样式表，它的作用是控制页面里每一个元素的表现形式，比如字体样式、背景、排列方式、区域尺寸、边框等。学生学习的重点在于掌握CSS选择符的使用，可以在学习和使用中逐渐扩展对CSS3新增选择符的认识。字体和文本、背景、边框、边距等常用属性必须记忆，应该通过大量编码练习强化记忆。CSS3是CSS目前的版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS3高级选择器是非常有用的，例如子串匹配的属性选择符、结构性伪类、目标伪类、UI元素状态伪类、通用兄弟元素选择器，它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。使用CSS伪类知识可以制作出丰富多彩的显示效果，学生需要在平时多多积累。盒子模型在前端开发中非常重要，重点掌握CSS中盒子模型的各个属性，学生需通过大量编码练习强化记忆。浮动和定位在页面布局中有着重要的意义，是学习时必须掌握的重点，通过编码实践，比较每一个属性值不同的含义。CSS3的新特征有很多，例如圆角效果、图形化边框、盒子阴影与文字阴影、变形效果、动画效果、多栏布局、媒体查询等。难点在于定义动画关键帧@keyframes，需要理解关键帧的含义并在编码实践时认真体会其作用，比较不同的属性值的區别。使用Transition与Transform结合能够实现丰富多彩的动画效果，需要熟练掌握Transition与Transform知识，并将这部分知识进行结合使用[5]。
2.4 JavaScript
JavaScript是一种面向对象的客户端脚本语言，它的运行不需要Web服务器的支持，可以直接在客户端本地运行。通过JavaScript的学习，学生能够了解JavaScript的基本语法，函数和事件，学会使用JavaScript的内置对象、BOM对象、DOM对象和它们的常用方法[6]。
学生应该理解函数、事件的概念。在JavaScript中，函数可以简单地理解为用来完成一系列工作的一组语句。JavaScript函数可以封装那些在程序中可能需要多次使用的模块，并可以作为事件驱动处理程序。使用函数前一定要先进行定义，函数定义分为三个部分：函数名、参数列表和函数体。事件就是指Web页面在浏览器处于活动状态时发生的各种事情，也就是用户与Web页面交互时产生的各种操作。浏览器为了响应某个事件而进行的处理，叫做事件处理，这个处理过程叫做事件处理函数。对事件的处理，一般都是通过调用相应的事件处理函数去完成的。学生应该重点掌握JavaScript的函数和事件处理，先学会编写简单的事件处理响应函数。练习如何使用JavaScript控制客户端行为是重要的学习途径。让学生通过JavaScript实际案例的编写过程，学习JavaScript语言的编程思路和编程经验，记忆JavaScript的基本语法结构。
关于JavaScript对象，学生应该理解以下知识点。对象是一组包含数据的属性和对属性中包含的数据进行操作的方法。JavaScript中支持的对象主要有内置对象、浏览器对象、DOM对象、自定义对象。JavaScript将一些常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象。浏览器对象是网页和浏览器本身的各种元素在JavaScript程序中的体现，它使JavaScript可以定位、改变内容，以及展示HTML页面的所有元素。DOM对象定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。除了浏览器里面预定义的那些对象之外，也可以自己定义对象。在Javascript高级课程中应该讲述怎么使用对象、属性、函数和方法，怎样实现自定义对象，并通过大量的编程练习记忆JavaScript中的常用BOM和DOM对象的方法的使用[7]。
2.5 人机交互设计
学生应该能够了解人机交互设计的具体工作，理解设计的准则与规范，学会分析用户需求，能够发现常见的设计缺陷，能够按照标准的设计流程进行软件产品交互设计，会使用设计工具开发界面原型。具体的实践方式，通过收集身边的交互设计典型案例，分析其中的成功和失败，发现和总结常见的设计缺陷，设立某个应用场景，深入分析用户的需求并组织小组讨论。
3 Web前端技术的教学目的（The teaching aim of
web front-end technology）
现阶段，Web前端开发工程师是一个较新并且需求量较大的职位，在国际和国内的Web开发相关领域中也日益受到重视，从事前端开发的程序员越来越多。对于Web前端开发人员来说，目前主要需要掌握的技术包括HTML、CSS和JavaScript。随着RIA（Rich Internet Applications，富互联网应用）的流行和普及，一些框架和服务器端语言也是Web前端开发工程师应该掌握的。
在互联网的演化进程中，Web1.0时代的网站主要以静态内容为主，用户使用网站时也以浏览为主。而进入到Web2.0时代以后，各种媲美于桌面应用程序的Web应用大量涌现，网站的展示和呈现方式也发生了根本的变化。网页不再只是由静态的、单一的文字和图片构成，而是包含了各种各样丰富的多媒体资源和动态功能，这使得网页的内容更加生动、效果更加炫丽、操作也越来越智能化和人性化，网页上丰富多样、智能友好的交互形式为用户提供了更好的使用体验，而这些都是基于Web前端开发技术实现的。
因此，Web前端教学应该以HTML5、CSS3和JavaScript等相关技术为主线，使知识讲解与实践相结合，从设计人机交互界面开始入门，深入到网站开发、代码性能优化、提升页面效率，全面提高学生的Web前端开发能力。面向企业需求，培养适应市场需要的开发人员。
4 Web前端教材编写思路（Ideas for compiling web
front-end textbook）
目前Web前端教材比较缺乏，为了满足这门课的教学需要，我校自主編写的CDIO教程《HTML5与CSS3实战教程》对课程内容做了如下安排。
在第1章介绍HTML基础，主要介绍HTML的基本语法、常用标签和重点元素的使用。接下来，在第2—4章主要介绍CSS的使用。分别介绍CSS的基本语法、选择符的作用和使用、常用属性的使用和样式的定义。在此基础之上，讲解CSS的盒子模型的常用属性、浮动定位和position定位、display属性的使用。另外，还介绍了CSS3中新引入的动画效果的实现，包括Animation动画实现和Transition过渡效果实现。在第5章介绍JavaScript基础，主要介绍JavaScript的基本语法、JavaScript函数定义、事件和事件处理、内置对象、BOM对象和DOM对象的常用属性和方法的使用。第6-8章是对HTML5规范中新引入的元素和特性进行介绍。首先，介绍了HTML5新增元素和属性，主要包括HTML5中新增的元素和属性的含义和使用，例如新增的包含语义信息的文档结构元素和新增的表单元素等。接下来，讲解了HTML5中新引入的Canvas画布元素，主要介绍Canvas元素的使用，包括利用Canvas绘制基本图形、绘制图像，以及Canvas和基本事件处理。然后，介绍HTML5中新增的本地存储技术，包括Web Storage和本地数据库的使用。在第9章讲解贯穿全书的综合项目案例，主要介绍一个综合的完整的咖啡销售网站的页面设计和开发，使用到了之前所学的HTML、CSS和JavaScript，以及HTML5和CSS3的新特性等技术，进行一个较为综合的Web网站页面设计开发。最后，在第10章讲解人机交互设计的基本原则和典型案例[8]。
5 教学策略（Teaching strategy）
前端技术课程中，既有很多灵活的理论知识（尤其是HTML、CSS、JavaScript的语法知识），又有大量代码设计题。而且该课程对程序设计能力的要求很高，需要学生动手编写作业题以应用并掌握相关知识。对于学习者来说，应该较为熟练使用计算机，有一定英语基础，最好学习过《计算机导论》之类的课程。教师在教学实施之前应该准备教学大纲、教学日历、教案、实验指导书、教学手册（制定具体的平时成绩考核标准）、期末成绩考核标准。除此之外需要至少一个功能完整的网站项目供课堂教学使用，以及大量的基础案例。
5.1 启发式教学
在Web前端教学中，对于知识的理解更多来源于实践，教师应该鼓励学生去大胆设想并努力完成自己的作品，培养学生的创造性思维和主动学习精神。在完成自己的作品当中，学生会发挥主观能动性，主动学习和尝试课堂之外的技术，体会到创造的乐趣。
5.2 与科研相结合
在教学中引进新的理论和技术内容尽量把科研中涉及到的与前端技术课程相关的新理论和技术、优秀论文介绍给学生。例如，给学生讲解“搜索引擎”，讲解当前网络和数据库的研究热点。
5.3 实践教学
前端教学应该以HTML5、CSS3和JavaScript等相关技术为主线，在整个知识体系讲授期间贯穿一个完整的Web前端开发项目案例[9]。在理论内容讲解和单元项目案例实现的过程中，结合具体知识点讲解HTML和CSS的基本语法、主要标签和属性作用、JavaScript基本语法和常用对象的使用、函数和事件处理等内容，并在掌握了每一章的理论内容和单元项目实现过程的基础之上，完成对课程综合项目中相应的模块的实现，从而综合应用所学技术、加深了各章知识点的理解程度和提高技术运用熟练程度。
5.4 采用新的教育技术
为了提高教学效果建立了一個Web前端作品展示网站。以往的课程考核都是学生上传源码，教师检查。建设并开通了Web前端作品展示平台之后，学生可以独立上传文件并展示作品。作品对所有访问者开源，同学之间可以相互借鉴和学习。同时，平台还有点赞和评论功能，针对所有学生和家长开放。对于成绩评定，教师有专门的工作台进行项目评分，方便而高效；教师的评语也可以被学生看到，促进师生交流。同时，为了保证项目展示稳定性和访问正确性，平台设定辅助上传机制，自动提示上传文件的格式错误。平台运行独立的沙盒机制，防止恶意代码文件的破坏。
6 结论（Conclusion）
Web前端课程在高等院校的开设比较普遍，虽然课程名称不统一，但是很多专业都在教授相关课程，面向的学生群体不同，教授的内容难度也不相同。作为计算机专业的院系，一般都开设了前端课程，或者要求学生自学以掌握相关知识。本科或者专科学习计算机专业的学生[10]，掌握了前端开发的技能，在就业时可以选择Web前端工程师的岗位，从事相关的工作。作为教师，我们应该认真研究最新的技术热点，更好地开展Web前端课程教学，使课程与行业现状接轨，让学生更加顺利的就业[11]。
参考文献（References）
[1] 魏冬梅.Web前端开发课程教学探讨与实践[J].福建电脑，2013（6）：181-183.
[2] 阮晓龙.Web前端开发课程内容改革的探索与尝试[J].中国现代教育装备，2015（7）：94-97.
[3] 储久良.Web前端开发技术课程教学改革与实践[J].计算机教育，2014（14）：12-15.
[4] 陆钢，李慧云.HTML5技术应用现状与发展趋势研究[J].广东通信技术，2013（5）：2-5.
[5] 孔志文.HTML5与CSS3技术在网页制作中的应用及发展前景[J].课程教育研究，2015（9）：216-217.
[6] 胡沛.JavaScript课程教学改革探索[J].电脑知识与技术，2011
（32）：7944-7945.
[7] 江骏.基于CDIO的JavaScript课程教学改革与研究[J].消费电子，2012（15）：56-56.
[8] 胡伦.对网络课程人机交互设计的研究与探索[J].中国教育信息化，2011（1）：75-76.
[9] Dan L I，Yang N.Reform of the Course of HTML+CSS Web Page Design Based on Project-oriented and Task-driven[J].Computer Knowledge & Technology，2013（3）：15-20.
[10] 陆炜妮，邹利华.基于专本衔接的“web前端”课程设计[J].石家庄职业技术学院学报，2017（6）：62-65.
[11] Chen X，Dong W U.Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Employment Orientation[J].Modern Computer，
2017（1）：14-19.
作者简介：
刘 蕾（1978-），女，硕士，副教授.研究领域：数据挖掘，大数据.
刘冰月（1978-），女，硕士，教授.研究领域：数据挖掘，大数据.
摘 要：Web前端技术在软件开发中的地位十分重要，无论是台式机还是移动端的软件产品都离不开前端技术，因此高等院校计算机专业都普遍开设了Web前端课程，甚至一些文科专业也开展了学习。Web前端课程通常包括一系列课程，比如网页设计与开发、JavaScript编程、HTML5网页制作等，内容都是围绕HTML、CSS、JavaScript知识体系展开。针对该类课程知识点多，学生层次复杂的问题，基于多年教学总结，提出了一套前端课程的设置方案，探讨在Web前端课程中应该包含的知识体系、教材选用和教学实践等问题。这套教学知识体系适用于计算机类专业学生，在教学过程中取得了良好的教学效果。
关键词：Web前端技术；知识体系；教材选用；教学实践
中图分类号：TP31 文献标识码：A
1 引言（Introduction）
Web前端是计算机应用开发的重要领域。Web前端开发人员需要熟练掌握HTML、CSS、JavaScript、Ajax等核心的前端开发技术，同时具备互联网交互设计能力，熟悉浏览器工作原理和数据通信协议，掌握最新的开发工具和开发框架[1]。由于前端技术内容丰富、包罗万象，目前没有哪门课能够概括其全部，因此，前端技术通常以各种形式出现在不同的课程中。例如哈佛大学的公开课《计算机导论》中，讲述了HTML、CSS、JavaScript、Ajax，以及网站网页开发等内容；斯坦福大学的公开课《用网页技术开发手机应用》中，讲述了Canvas、SVG、OpenGL、WebGL、JavaScript、HTML5等；拉筹伯大学的公开课《新闻人的网络编辑和发布》中，讲述了HTML和CSS的使用方法，并且提出无论是文科生还是理科生都应该了解网页制作的知识；清华大学的《Web前端技术实训课程》中，讲述Web交互技术发展趋势、浏览器渲染技术、JavaScript高级程序设计、HTML5&CSS3;技术、JS关键技术、JS架构设计等主题。在计算机专业中，Web前端技术是分布式网站建设、JavaScript高级编程、Java Web网站开发、Android移动开发、人机交互等专业课程的先行课程[2]。不同专业的学生学习该课程，其教学内容会作相应调整，下面我们就探讨一下计算机专业本科同学在前端技术课程当中应该掌握的知识体系[3]。
2 Web前端知识体系（Web front-end knowledge
system）
2.1 HTML
HTML超文本标记语言是互联网的核心语言，它的作用是告诉浏览器如何显示文档的内容，如文本、图像和其他媒体资源，还可以通过超链接把文档与其他互联网资源连接起来。学生需要了解HTML语法，学习使用编辑工具编写HTML文档。通过HTML文档的创建过程，获得编辑和修改HTML网页的经验；了解浏览器如何对网页进行展示，理解HTML文档与浏览器的关系，记忆HTML常用标签的用法。
2.2 HTML5
HTML5是HTML目前发布的版本，为了在移动设备上支持多媒体，引入了一些新的语法元素，如Video、Audio和Canvas标签。Canvas是取代Flash显示图形或动画并且能够与用户交互的多媒体元素，学生应该掌握Canvas编程方法，会使用相关绘图API完成在Canvas上绘制路径、矩形、圆形、字符，以及图像的操作。其他一些HTML5新增的功能在帮助浏览器实现富客户端功能上，也将发挥巨大的作用[4]，学生应该了解这些新增的元素和属性。表单一直都是Web的核心技术之一，可以依靠它来完成Web上的数据输入界面，从而使得客户端和服务器能够进行方便快捷的交互。HTML5新增了许多表单控件及其API，可以方便完成验证功能而不用借助其他前端脚本语言。HTML5还引进了文档结构标签，如header、section、article、nav、footer等，使搜索引擎可以更好地理解文档的语义。此外，本地存储、本地缓存、本地数据库等也是学生应该熟练掌握的内容。
2.3 CSS
CSS是级联样式表，它的作用是控制页面里每一个元素的表现形式，比如字体样式、背景、排列方式、区域尺寸、边框等。学生学习的重点在于掌握CSS选择符的使用，可以在学习和使用中逐渐扩展对CSS3新增选择符的认识。字体和文本、背景、边框、边距等常用属性必须记忆，应该通过大量编码练习强化记忆。CSS3是CSS目前的版本，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。CSS3高级选择器是非常有用的，例如子串匹配的属性选择符、结构性伪类、目标伪类、UI元素状态伪类、通用兄弟元素选择器，它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。使用CSS伪类知识可以制作出丰富多彩的显示效果，学生需要在平时多多积累。盒子模型在前端开发中非常重要，重点掌握CSS中盒子模型的各个属性，学生需通过大量编码练习强化记忆。浮动和定位在页面布局中有着重要的意义，是学习时必须掌握的重点，通过编码实践，比较每一个属性值不同的含义。CSS3的新特征有很多，例如圆角效果、图形化边框、盒子阴影与文字阴影、变形效果、动画效果、多栏布局、媒体查询等。难点在于定义动画关键帧@keyframes，需要理解关键帧的含义并在编码实践时认真体会其作用，比较不同的属性值的區别。使用Transition与Transform结合能够实现丰富多彩的动画效果，需要熟练掌握Transition与Transform知识，并将这部分知识进行结合使用[5]。
2.4 JavaScript
JavaScript是一种面向对象的客户端脚本语言，它的运行不需要Web服务器的支持，可以直接在客户端本地运行。通过JavaScript的学习，学生能够了解JavaScript的基本语法，函数和事件，学会使用JavaScript的内置对象、BOM对象、DOM对象和它们的常用方法[6]。
学生应该理解函数、事件的概念。在JavaScript中，函数可以简单地理解为用来完成一系列工作的一组语句。JavaScript函数可以封装那些在程序中可能需要多次使用的模块，并可以作为事件驱动处理程序。使用函数前一定要先进行定义，函数定义分为三个部分：函数名、参数列表和函数体。事件就是指Web页面在浏览器处于活动状态时发生的各种事情，也就是用户与Web页面交互时产生的各种操作。浏览器为了响应某个事件而进行的处理，叫做事件处理，这个处理过程叫做事件处理函数。对事件的处理，一般都是通过调用相应的事件处理函数去完成的。学生应该重点掌握JavaScript的函数和事件处理，先学会编写简单的事件处理响应函数。练习如何使用JavaScript控制客户端行为是重要的学习途径。让学生通过JavaScript实际案例的编写过程，学习JavaScript语言的编程思路和编程经验，记忆JavaScript的基本语法结构。
关于JavaScript对象，学生应该理解以下知识点。对象是一组包含数据的属性和对属性中包含的数据进行操作的方法。JavaScript中支持的对象主要有内置对象、浏览器对象、DOM对象、自定义对象。JavaScript将一些常用的功能预先定义成对象，用户可以直接使用，这种对象就是内置对象。浏览器对象是网页和浏览器本身的各种元素在JavaScript程序中的体现，它使JavaScript可以定位、改变内容，以及展示HTML页面的所有元素。DOM对象定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。除了浏览器里面预定义的那些对象之外，也可以自己定义对象。在Javascript高级课程中应该讲述怎么使用对象、属性、函数和方法，怎样实现自定义对象，并通过大量的编程练习记忆JavaScript中的常用BOM和DOM对象的方法的使用[7]。
2.5 人机交互设计
学生应该能够了解人机交互设计的具体工作，理解设计的准则与规范，学会分析用户需求，能够发现常见的设计缺陷，能够按照标准的设计流程进行软件产品交互设计，会使用设计工具开发界面原型。具体的实践方式，通过收集身边的交互设计典型案例，分析其中的成功和失败，发现和总结常见的设计缺陷，设立某个应用场景，深入分析用户的需求并组织小组讨论。
3 Web前端技术的教学目的（The teaching aim of
web front-end technology）
现阶段，Web前端开发工程师是一个较新并且需求量较大的职位，在国际和国内的Web开发相关领域中也日益受到重视，从事前端开发的程序员越来越多。对于Web前端开发人员来说，目前主要需要掌握的技术包括HTML、CSS和JavaScript。随着RIA（Rich Internet Applications，富互联网应用）的流行和普及，一些框架和服务器端语言也是Web前端开发工程师应该掌握的。
在互联网的演化进程中，Web1.0时代的网站主要以静态内容为主，用户使用网站时也以浏览为主。而进入到Web2.0时代以后，各种媲美于桌面应用程序的Web应用大量涌现，网站的展示和呈现方式也发生了根本的变化。网页不再只是由静态的、单一的文字和图片构成，而是包含了各种各样丰富的多媒体资源和动态功能，这使得网页的内容更加生动、效果更加炫丽、操作也越来越智能化和人性化，网页上丰富多样、智能友好的交互形式为用户提供了更好的使用体验，而这些都是基于Web前端开发技术实现的。
因此，Web前端教学应该以HTML5、CSS3和JavaScript等相关技术为主线，使知识讲解与实践相结合，从设计人机交互界面开始入门，深入到网站开发、代码性能优化、提升页面效率，全面提高学生的Web前端开发能力。面向企业需求，培养适应市场需要的开发人员。
4 Web前端教材编写思路（Ideas for compiling web
front-end textbook）
目前Web前端教材比较缺乏，为了满足这门课的教学需要，我校自主編写的CDIO教程《HTML5与CSS3实战教程》对课程内容做了如下安排。
在第1章介绍HTML基础，主要介绍HTML的基本语法、常用标签和重点元素的使用。接下来，在第2—4章主要介绍CSS的使用。分别介绍CSS的基本语法、选择符的作用和使用、常用属性的使用和样式的定义。在此基础之上，讲解CSS的盒子模型的常用属性、浮动定位和position定位、display属性的使用。另外，还介绍了CSS3中新引入的动画效果的实现，包括Animation动画实现和Transition过渡效果实现。在第5章介绍JavaScript基础，主要介绍JavaScript的基本语法、JavaScript函数定义、事件和事件处理、内置对象、BOM对象和DOM对象的常用属性和方法的使用。第6-8章是对HTML5规范中新引入的元素和特性进行介绍。首先，介绍了HTML5新增元素和属性，主要包括HTML5中新增的元素和属性的含义和使用，例如新增的包含语义信息的文档结构元素和新增的表单元素等。接下来，讲解了HTML5中新引入的Canvas画布元素，主要介绍Canvas元素的使用，包括利用Canvas绘制基本图形、绘制图像，以及Canvas和基本事件处理。然后，介绍HTML5中新增的本地存储技术，包括Web Storage和本地数据库的使用。在第9章讲解贯穿全书的综合项目案例，主要介绍一个综合的完整的咖啡销售网站的页面设计和开发，使用到了之前所学的HTML、CSS和JavaScript，以及HTML5和CSS3的新特性等技术，进行一个较为综合的Web网站页面设计开发。最后，在第10章讲解人机交互设计的基本原则和典型案例[8]。
5 教学策略（Teaching strategy）
前端技术课程中，既有很多灵活的理论知识（尤其是HTML、CSS、JavaScript的语法知识），又有大量代码设计题。而且该课程对程序设计能力的要求很高，需要学生动手编写作业题以应用并掌握相关知识。对于学习者来说，应该较为熟练使用计算机，有一定英语基础，最好学习过《计算机导论》之类的课程。教师在教学实施之前应该准备教学大纲、教学日历、教案、实验指导书、教学手册（制定具体的平时成绩考核标准）、期末成绩考核标准。除此之外需要至少一个功能完整的网站项目供课堂教学使用，以及大量的基础案例。
5.1 启发式教学
在Web前端教学中，对于知识的理解更多来源于实践，教师应该鼓励学生去大胆设想并努力完成自己的作品，培养学生的创造性思维和主动学习精神。在完成自己的作品当中，学生会发挥主观能动性，主动学习和尝试课堂之外的技术，体会到创造的乐趣。
5.2 与科研相结合
在教学中引进新的理论和技术内容尽量把科研中涉及到的与前端技术课程相关的新理论和技术、优秀论文介绍给学生。例如，给学生讲解“搜索引擎”，讲解当前网络和数据库的研究热点。
5.3 实践教学
前端教学应该以HTML5、CSS3和JavaScript等相关技术为主线，在整个知识体系讲授期间贯穿一个完整的Web前端开发项目案例[9]。在理论内容讲解和单元项目案例实现的过程中，结合具体知识点讲解HTML和CSS的基本语法、主要标签和属性作用、JavaScript基本语法和常用对象的使用、函数和事件处理等内容，并在掌握了每一章的理论内容和单元项目实现过程的基础之上，完成对课程综合项目中相应的模块的实现，从而综合应用所学技术、加深了各章知识点的理解程度和提高技术运用熟练程度。
5.4 采用新的教育技术
为了提高教学效果建立了一個Web前端作品展示网站。以往的课程考核都是学生上传源码，教师检查。建设并开通了Web前端作品展示平台之后，学生可以独立上传文件并展示作品。作品对所有访问者开源，同学之间可以相互借鉴和学习。同时，平台还有点赞和评论功能，针对所有学生和家长开放。对于成绩评定，教师有专门的工作台进行项目评分，方便而高效；教师的评语也可以被学生看到，促进师生交流。同时，为了保证项目展示稳定性和访问正确性，平台设定辅助上传机制，自动提示上传文件的格式错误。平台运行独立的沙盒机制，防止恶意代码文件的破坏。
6 结论（Conclusion）
Web前端课程在高等院校的开设比较普遍，虽然课程名称不统一，但是很多专业都在教授相关课程，面向的学生群体不同，教授的内容难度也不相同。作为计算机专业的院系，一般都开设了前端课程，或者要求学生自学以掌握相关知识。本科或者专科学习计算机专业的学生[10]，掌握了前端开发的技能，在就业时可以选择Web前端工程师的岗位，从事相关的工作。作为教师，我们应该认真研究最新的技术热点，更好地开展Web前端课程教学，使课程与行业现状接轨，让学生更加顺利的就业[11]。
参考文献（References）
[1] 魏冬梅.Web前端开发课程教学探讨与实践[J].福建电脑，2013（6）：181-183.
[2] 阮晓龙.Web前端开发课程内容改革的探索与尝试[J].中国现代教育装备，2015（7）：94-97.
[3] 储久良.Web前端开发技术课程教学改革与实践[J].计算机教育，2014（14）：12-15.
[4] 陆钢，李慧云.HTML5技术应用现状与发展趋势研究[J].广东通信技术，2013（5）：2-5.
[5] 孔志文.HTML5与CSS3技术在网页制作中的应用及发展前景[J].课程教育研究，2015（9）：216-217.
[6] 胡沛.JavaScript课程教学改革探索[J].电脑知识与技术，2011
（32）：7944-7945.
[7] 江骏.基于CDIO的JavaScript课程教学改革与研究[J].消费电子，2012（15）：56-56.
[8] 胡伦.对网络课程人机交互设计的研究与探索[J].中国教育信息化，2011（1）：75-76.
[9] Dan L I，Yang N.Reform of the Course of HTML+CSS Web Page Design Based on Project-oriented and Task-driven[J].Computer Knowledge & Technology，2013（3）：15-20.
[10] 陆炜妮，邹利华.基于专本衔接的“web前端”课程设计[J].石家庄职业技术学院学报，2017（6）：62-65.
[11] Chen X，Dong W U.Teaching Reformation Practice of the HTML5 Web Front-End Development Course Based on Employment Orientation[J].Modern Computer，
2017（1）：14-19.
作者简介：
刘 蕾（1978-），女，硕士，副教授.研究领域：数据挖掘，大数据.
刘冰月（1978-），女，硕士，教授.研究领域：数据挖掘，大数据.
