基于任务驱动的网页编程教学方法探究

马春艳　梁霞　王海峪

摘 要：随着互联网的发展，网页编程发展越来越快，开发软件日新月异，但无论怎么变化，网页编程的核心却没有变，那就是HTML、CSS和JavaScript。本文以任务驱动的形式阐述网页编程的教学方法。

关键词：HTML；CSS；JavaScript

HTML是超文本标记语言（HyperText Markup Language）的缩写，是制作网页的基础。

CSS是Cascading Style Sheet的缩写。也称之为“层叠样式表”，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。JavaScript是一种脚本语言，比HTML要复杂，使用它可以使页面更加丰富多彩。本人在教学实践中不断的探究网页编程的教学方法，完善教学手段，几年来取得了良好的教学效果，下面对任务驱动式教学在本课程中的具体应用做一总结。

1 任务驱动教学法简介

“任务驱动教学法”是一种建立在建构主义学习理论基础上的教学法，它将以往以传授知识为主的传统教学理念，转变为以解决问题、完成任务为主的多维互动式的教学理念；将再现式教学转变为探究式学习，使学生处于积极的学习状态，每一位学生都能根据自己对当前问题的理解，运用共有的知识和自己特有的经验提出方案、解决问题。

2 任务驱动教学法在网页编程中的应用

由于网页编程是一门实践性很强的课程，老师单纯的理论讲解，激发不了学生的学习兴趣，很容易引起学生的厌学情绪，以任务为导向，在讲解HTML、CSS和JavaScript理论知识的一开始就以一个案例的形式先让学生感受到将要学习的内容可以实现这么精彩的网页，然后根据这个案例任务引导学生学习理论知识，在学习的同时完成这个案例任务的制作，通过学习以及实践可以加深学生的理解能力以及运用的能力。此外，可以提高学生解决问题的能力。

2.1 HTML语言

HTML是编写网页的基础，内容也很多，因此在这一章可以分成三个任务案例来讲解，每一个任务都是一个精彩的网页。任务一主要讲述HTML的基本构成，网页中可以添加的基本元素以及表单等，这部分的理论知识主要通过任务案例直观理解。任务二主要讲述表格以及如何使用表格布局页面，在讲述布局页面的时候，可以添加一个案例，用来专门讲解布局方面的问题，理论部分讲解完后，可以给学生留一个作业，把刚才的案例自己用表格布局来完成，达到巩固知识的目的。任务三主要简述框架布局，在讲述框架这部分内容时，还是以实践为主导，把任务三少部分的案例页面发给学生，让他们完成剩余的部分，这样可以激发学生的学习兴趣，并且做到有的放矢。这样每一个任务都有一个明确的目标以及视觉上的感受，当学生学习理论知识后就可以轻松的完成开始的时候老师给的任务案例了，最后可以加一个知识拓展的内容，把任务中没有涉及的知识点加进去。

2.2 CSS样式

CSS样式的属性很多，不容易掌握，同样以一个任务案例的形式展示一个网页，用加了样式的网页和没有加样式的网页进行一下对比，学生就会感受到加了样式的网页更加的精美，从而激发了学生的学习兴趣，如果以Dreamweaver为编写软件的话，软件有自动提示功能，所以学生编写代码部分就不会那么费力了。CSS的属性比较多，可以讲解比较常用的部分，例如背景的属性，字体的属性，边框的属性，滤镜特效等，在讲解每一个属性的时候都采用案例的形式进行。

2.3 JavaScript语言

JavaScript是一种脚本语言，主要是基于客户端运行的，用户点击带有JavaScript的网页，网页里的JavaScript就传到浏览器，由浏览器对此作处理，比HTML、CSS要复杂。下拉菜单、验证表单有效性等大量互动性功能，都是在客户端完成的，不需要和Web Server发生任何数据交换，因此，不会增加Web Server的负担。

在这部分中主要讲解一些成熟的代码，以三个任务的形式把JavaScript常见的应用运用到网页中，这三个任务分别是万年历、轮换图片以及注册验证等。通过三个任务案例，使学生对JavaScript有一个初步的认识，同时打消学生对脚本语言的恐惧心理，让他们轻松的学习。任务一主要讲述日历的制作，任务二主要讲述网页中轮换图片的设置，任务三主要讲述表单验证，在讲述这部分内容时，把表单验证的一部分代码发给学生，让他们把剩余的代码补充完整，这样学生在编写代码时就不费力了，例外在任务讲解中把学生分成若干组，每一组安排几个学得比较好的，让他们把每个任务按照小组的形式把案例完成，完成后互相评比，互相学习，从而达到掌握的目的。

因为JavaScript写的程序都是以源代码的形式出现的，也就是说你在一个网页里看到一段比较好的JavaScript代码，恰好你也用得上，就可以直接拷贝，然后放到你的网页中去。正因为可以借鉴、参考优秀网页的代码，所以让学生学习起来就不会那么费劲了

另外，本课程可安排一周的课程实训，网页编程课程实训是本课程实践教学的重要组成部分。是对学生掌握本门课程教学内容、运用所学知识解決实际问题能力的检验，通过课程实训的实施，达到了提高学生动手能力，增加了学生实际工作经验。

[参考文献]

[1]胡宇.谈信息技术课堂教学中创造性思维的培养[J].湖南：教育教学论文网.

[2]殷宝良.高等成人教育教学模式创新研究[J].南京：文教资料，2006.1（345）.

[3]曲伟峰，等.网页编程技术[M].北京：电子工业出版社.