概念图在《动态网页设计》教学中的应用

李春艳　石秋香

摘 要：概念图是以图的形式来呈现思考的过程或者知识的关联。本文分析了概念图应用于《动态网页设计》教学中的原因，介绍了概念图的绘制过程以及概念图在《动态网页设计》教学中的具体应用。

关键词：概念图；教学

目前，我国多数院校的教育技术学专业、计算机相关专业都开设动态网页设计类的课程。《动态网页设计》是我院教育技术学专业学生的一门必修课程，本课程的主要任务是培养学生利用ASP技术开发动态网页的能力。针对前几轮教学中存在的问题，笔者尝试用概念图进行教学，取得了良好的教学效果，希望能对其他同仁起到抛砖引玉的作用。

1 概念图应用《动态网页设计》教学的原因分析

1.概念图简介

概念图是盛行于欧美国家的一种教学策略，它以直观形象的方式表达知识结构，能有效呈现思考的过程及知识的关联，引导学生进行意义建构。[1]概念图是由3 部分组成：节点、连线、连接语词。节点表示概念；连线表示两个概念之间的意义联系，并用箭头符号指示方向；连接语词是用来标注连线的，描述两个概念间的关系。[2]目前使用较广的概念图工具是Inspiration，它简单易用，教师可以在较短的时间内教会学生如何使用。

2.《动态网页设计》教学存在的问题

《动态网页设计》教学内容主要包括ASP编程的基础知识和实例。本课程的主要教学目标是让学生在掌握基础知识的基础上，能够设计和制作交互式的动态网站。因此，实例教学具有重要的意义，它不但能够让学生巩固以前所学的基础知识，还能够使学生掌握交互式的动态网站创建的过程，培养学生解决实际问题的能力，以及探索和创新能力。

交互式的动态网站创建必然会涉及到每个网页的设计、网页之间链接的设计以及网页之间传递参数的确定，这就说明具体的实例教学内容比较复杂、逻辑性比较强，这为教师的教和学生的学都带来了一定困难。在前几轮的教学中，笔者发现学生对如何实现某一功能的代码不成问题，也就是单个页面的编写对学生来说比较容易；但是学生弄不清各个页面之间的联系以及页面间需要传递的参数，不懂网站中的网页是如何联系起来的。

3.概念图应用于《动态网页设计》教学的优势

人的大脑有一种特点，容易记住直观的东西，内容一多就会迷失在繁杂的信息中。但是，如果把自己的想法用概念图的形式画下来，想法就会跃然纸上，思路也会变得更加清晰。因此可以把概念图应用到动态网页设计教学中。

在动态网页设计的概念图中，网页就是一个节点，可以用箭头表示两个网页之间的关系，箭头的方向决定了网页之间链接的方向，两个网页之间的连接语词描述了网页之间的链接关系以及需要传递的参数。概念图应用于教学中可以帮助学生认清网页之间的联系及参数传递，引导思维的走向，对编程学习起着促进作用。

2 动态网页概念图的绘制

在教学中，笔者使用Inspiration教学软件进行概念图的绘制。概念图的制作没有严格的程序规范，但是要学习制作一个好的概念图，一般可以通过以下几个步骤来实现：

（1）绘制主页面结点，在主结点的方框或圆圈中，写下主页面的文件名和主要功能，用“注释”标记写入如何实现这一具体功能。

（2）绘制从主页面可以链接到的其他二级页面结点，方框或圆圈中可以写文件名和主要的功能，用“注释”标记写入如何实现这一具体功能，以方便具体代码的编写。

（3）连线及连接词的绘制：在连接线上写上合适的连结词。连结词必须清晰表达两个页面是如何实现链接的（例如按钮、热文字）以及会传递什么参数。

（4）依次建立下级页面及页面间的联系。

3 概念图在《动态网页设计》教学中的应用

1.借助概念图，有利于教师的教和学生的学

教师在课前画概念图的过程，相当于一个备课的过程，通过画概念图，教师可以非常清晰地了解到一节课的教学内容、各个环节之间的关系、在教学中应该考虑什么问题等。具体的课堂教学过程中，概念图的应用有两种方式：

（1）教师应用做好的概念图进行讲解

交互网站设计的教学常常从主页面开始，然后逐层讲解各页面。因为Inspiration具有折叠隐藏功能，这样教师在课堂中就可以使用备课时做出的概念图。随着教师讲课进度的推进，逐渐显示各个页面，这样可以使教师的讲课更加条理清晰，通过网页的一层层展开，同学们的思维也会渐渐的清晰。Inspiration 中“注释”框的设计，类似于教学小黑板的功用。 “注释”框轻捷灵活，既不限多少块，又可随时折叠收藏，因此在具体讲解某个页面的时候，教师就可以把“注释”框展开，和同学们详细分析此页面需要那些功能以及如何实现。Inspiration还具有超链接的功能，教師在讲课的时候可以使用此功能链接到具体的网页源代码，这样就节省了时间。

（2）教师和学生共同绘制概念图

Inspiration专为教学而设计，大量符号直接放在桌面上，随手取用，十分方便。因此教师可以在教学的过程中和学生共同绘制交互网站的概念图。

在教学过程中，教师可以，一边讲授一边绘画，使学生非常清楚地看到整个绘画过程。这一过程，一方面可以使学生了解网页之间是如何建立联系和传递参数的；另一方面也可以让学生感受到教师是如何利用概念图对交互网站进行设计的。教师也可让学生来绘制概念图，这样不但增加了互动，激发了学生的学习兴趣，促使学生积极思考，加强对网页关系的理解，同时也增强了他们的成就感。

实践表明，概念图以简洁明了的图形形式表现复杂的网页结构，形象地呈现各网页之间的联系，包括网页之间链接的关系以及传递的参数，从而提高了学习者对动态互网站构建的理解。

2.借助概念图，有助于学生网站设计能力的提高

学生通过自己绘制交互网站概念图，学习者能深刻领会网页之间的相互关系，了解自己知识以及设计能力方面的不足，及时进行调整和补救。利用概念图，学习者之间还可以相互学习交流，是网站设计能力提高的有效方法和策略。教师通过概念图可以获得关于学生网站设计掌握情况的大量信息，很快发现学生对网页之间联系的理解程度和在理解过程中存在的错误，从而更有针对性地进行教学。实践证明，概念图不仅可以激发学生的学习兴趣，而且可以帮助学生理清思路，掌握网页之间的关系，有助于学生网站设计能力的提高。

3.借助概念图，改变传统的评价方式

原有的教学评价方式就是笔试或让学生制作一个动态网站。考试往往只能考查某些知识点，这种形式不能充分、完整地评价学生的网页设计与制作能力。制作动态网站这种形式又无法避免有些学生从网上下载，这两种形式都不能考查到学生的实际能力。

平时，通过让学生画概念图，教师可及时了解学生学习的学习情况与诊断学生的问题，从而改进教学，是形成性评价的好方式。同样，概念图也可以作为总结性评价的工具，是学生头脑中关于网页知识结构的图示化再现，可反映出学生交互网站设计能力。因此在期末考核时，采用基础知识考试和绘制概念图的方式，通过基础知识测试了解学生ASP基础知识的掌握情况，通过绘制概念图，了解学生网站设计能力。

4 总结

概念图既是评价工具，也是教学策略，更是一种深层的学习方法，可以帮助学生有效地记忆、理清思路，进而解决问题，形成能力。概念图应用于动态网页设计课程中不但有利于教师的教，更有利学生的学和学生交互网站设计能力的提高，可相信概念图在动态网页设计类课程教学中的应用会越来越广泛。

参考文献

[1] 顾娟.概念图在地理学习中的应用[J]. 成都大学学报（教育科学版），2007（2）：46_47.

[2] 王兄，汤服成.概念图及其在数学学习中的现实意义[J]. 数学教育学报， 2004（3） ：16-18.