思维导图在中职前端HTML5教学中的应用探讨

林峰

摘要：思维导图是东尼·博赞发明的一种有效的思维工具，它以图文并茂的形式，将知识和思维形象化，且近些年在教育领域中思维导图的应用越来越广泛，本文论述了在中职前端基础课程教学中思维导图的应用的优势，剖析了思维导图融入教学设计、课堂教学、培养学生能力、学生评价等方面的策略，并以前端HTML5的教学为例，探讨思维导图的具体应用。

关键词：思维导图应用策略;HTML5教学;发散思维

中图分类号：TP311 文献标识码：A

文章编号：1009-3044（2020）13-0185-02

HTML5是中职计算机前端应用技术与服务专业的核心基础课程，在培养前端开发人才起着重要地位。这门课程理论部分不多，但需要掌握的知识点不少，HTML5涵盖了大量的标签和属性，传统的教学方法就是一节课讲若干的标签、几个属性，大部分学生当堂就能掌握。但是随着课程的展开，需要记忆的标签属性日益增多，学生就会忘了前面的知识，或者混淆了知识点，在做具体项目时，造成效率低下，或者出错连连，有的学生就会放弃这门学科。

如何让学生把学习知识记下来，即使将来忘了，也能很快地联想起来，这就是计算机前端教学中需要考虑的问题，经过这两年的教学实践，通过思维导图对教学进行重构，取得良好的效果。

1思维导图的优势

思维导图是一种图形思维工具，它采用文字结合图形的形式，按照知识的内在联系进行知识结构的重组，使知识的层次关系、存储结构更加清晰化，思维导图是将整个知识点及相应的逻辑联系放在一张图中，直观得体现出来。运用思维导图，可以高效系统地掌握各个知识点，提高记忆的效率，以及培养发散思维的能力。

2思维导图在前端HTML5教学中的应用

2.1通过思维导图进行知识重构

思维导图通常应用于知识点多，各部分关联性强的学科，通过思维导图制作出整个知识体系的框架结构，以图形的形式清晰地表现出来，有助于学生的理解和记忆，同时教师在教学内容的安排上更加灵活。

针对HTML5知识点多，关联性强的特点，在上课前首先将要学习的知识点制作成思维导图来概括，思维导图注重关键词的应用，通过简洁明了的词汇来描述知识点，这样便于学生抓住重点。比如上HTML5第一次课，通过展示全书内容的思维导图（如图1），让学生对这门课有个总体的印象，对学习目标有了明确的认识，这样比学生看教材目录去了解课程内容，效果要更好。思维导图的设计思路就是“紧扣教材、线索明了、用词精准、结构清晰”，力图让学生在读图的过程中快速抓住重点。

2.2应用思维导图提高课堂效率

应用思维导图的教学过程，就是以思维导图的脉络为主线，根据每条线所包括的知识点展开教学，如在讲解图像IMG标签时，事先在导图画出四个分支：语义、属性、路径、可选属性。（如图2）教学时根据各分枝的知识点展开，每个知识点进行提炼概括，这样在课堂项目教学时，老师在操作的同时，对涉及的知识点进行解释，学生在理解知识点的同时对图像进行记忆，可以做到“所见即所学”“所学即所得”，很大程度提高了课堂学习效率。

3应用思维导图培养学生发散思维

思维导图是培养逻辑思维能力的高效工具，它是以辐射的形式存在，有利于人脑的思维的发散展开。

比如在HTML5项目实训教学设计中，要求学生仿某电商平台设计商场网页的界面，中心主题就是设计商城，学生先根据这个中心主题来制作思维导图，将设计的思路以子节点的形式放人导图中，学生自由发挥，比如子节点内容有“主页界面框架”“目录结构划分”“素材收集”“版块划分”“网页风格”等，在子节点上再根据相应的模块能进行添加，反复进行这样的操作使用就可以将需要的节点添加完成，这样学生再根据完成的思维导图来制作商场网页。在制作的过程，如果有新的思路，比如在网页要增加一个“问题回答”这个版块，那么在思维导图中进行补充，把自己的想法直接在导图中体现。实践证明，这种思维导图设计思路能有效培养学生的发散思维，学生思路更易于展开，同时也提高学生逻辑严谨性。

4应用思维导图进行分组协作学习

思维导图也是一种有效的沟通工具，传统的分组教学中，小组討论的效果并不理想，组员各自为政，缺乏有效的交流沟通。经过分析，其实就是缺乏有效的沟通工具，利用思维导图能很好地解决这个问题。

在搭建“阳光心理咨询网站”的综合项目实践中，要求学生开发一个真正意义上的网站，教师首先将网站开发流程的思维导图发给学生（如图3），要求学生分组协作完成网站项目的开发，理解网站的开发流程。

各小组以公司的模式进行开发设计，组长按思维导图的分支模块对组员进行了任务分配，各组员对所对应的模块进行拓展，以思维导图的形式进行展示。比如负责“总体规划”的成员，在“总体规划”的支点上进行功能拓展（如图4）：使用表格还是DIV+CSS进行网站的设计？目标用户是针对学生群体还是师生群体？网站的风格只是展示型，还是包含留言、表单等互动版块，网站包含哪些功能模块等，在思维导图中体现出来。

最后组员将各自负责设计的思维导图拿出来汇总，形成一个大的思维导图，最终通过头脑风暴，同学们对方案进行讨论增改，直接在思维导图上修改，形成一个最终比较完善的建站方案，再分工完成。在完成过程中，如果有新的思路，那么直接在导图上变动，其他同学一看就清楚了。

实践证明，以“图”的形式来交流，更为简洁明了，因为同学们的思路都以已经“画”在思维导图上了，比单纯的语言交流更加直接清晰。而且以思维导图为媒介的交流模式的高效性会被学生认可，将来学生在其他学习或工作中会不自觉地使用思维导图进行沟通交流。

5引导学生应用思维导图

思维导图可视化的优点，可以让学生快速地掌握知识的重难点，理清知识点间的联系，所以在教学过程中，有意识地教会学生掌握思维导图的制作和使用，中职学生有电脑的不多，所以推荐学生使用百度脑图等思维导图的APP进行制作。有意识地培养学生使用思维导图，引导学生对知识进行归类细分，强化学生课堂所学的知识。每次课后都要求学生根据所学的知识，按照自己的理解制作思维导图，这项任务作为学生成绩考核的一块。

HTML5常用标签有十几类，通过一张思维导图可以将这些知识点进行分类细化，方便学生的记忆。学生在做项目或考试复习时，如果知识点忘记了，看下思维导图，马上就能回忆起所学的知识，提高了学生的学习效率。

经过观察，很多学生掌握的思维导图后，会有意识将它应用于其他科目的学习中，也取得很好的效果，这也是我们教育工作者所期待的。

6思维导图应用于学生的评价

传统的评价方式就是上课提问，检查学生的练习，考试等方式，但是这种评价方式是片面的、不全面的，无法对学生所掌握的知识结构进行了解。所以布置学生完成思维导图作业，要求学生独立完成，就是将自己所学的知识进行串联，学生学得透彻，理解得深刻，思维导图就会做得全面，逻辑性强，错误率少，教师通过学生的思维导图，就能了解学生掌握的情况。

在HTML5教学实践中，为了评价学生的学习效果，制作了思维导图质量评价表，通过评分，可以掌握到学生的学习情况。

在小组协作的项目实训环节中，教师通过各组完成的思维导图进行评判，及时提出指导性意见。

7结束语

经过教学实践证明，应用思维导图在前端HTML5教学实践中取得了良好的效果。对教师而言，掌握思维导图进行教学，教学衔接更为流畅，逻辑更为严谨，提高了上课效率，也优化了老师对学生的评价。对学生而言，应用思维导图学习大大激发了学生的学习兴趣，学生对知识的掌握更为系统、更为透彻，同时也培养了学生严谨的逻辑思维能力，将来不管在学习和工作中，这种能力给学生的影响是终身的。不单是HTML5这门课，很多前端的课程如JAVASCRIPT、uI设计、微信小程序制作等课程，应用思维导图进行教与学，都将产生事半功倍的效率。