2020年第2期
信息与电脑
China Computer & Communication
信息化教育
基于思维导图的《HTML5网页设计》课堂教学研究
油 晔
（辽宁轨道交通职业学院，辽宁 沈阳 110023）
摘 要：计算机教学过程需要学生掌握和理解的知识点越来越多，如何将枯燥乏味的理论知识变得形象、生动，使学生更好地掌握并消化所学知识，能够建立相应的知识体系结构，是教育工作者必须思考的问题。基于此，笔者对传统教学模式的现状进行了分析，然后对思维导图在高职计算机网络专业必修课程《HTML5网页设计》教学中的应用进行了分析与探讨，包括运用思维导图构建知识体系和思维导图在学生学习中的运用两部分内容。
关键词：思维导图；高职教育；网页设计
网页制作网站设计中图分类号：G642.4；TP393-4  文献标识码：A  文章编号：1003-9767（2020）02-234-03
Research on Teaching of “HTML5 Web Design ” Based on Mind Map
You Ye
(Guidao Jiaotong Polytechnic Institute, Shenyang Liaoning 110023, China)
Abstract: In the process of computer teaching, more and more knowledge needs to be mastered and understood by students. How
to make the dull theoretical knowledge can be better mastered by students, established the corresponding knowledge system structure in their minds is a problem that educators must think about. Based on this, the author analyzes the current situation of traditional teaching, and then analyzes and discusses the application of mind map in the teaching of “HTML5 web page design ”, which includs the construction of knowledge system by mind map and the application of mind map in students ’ learning activities.
Key words: mind map; Higher Vocational Education; Web design
0 引言
随着计算机技术、网络技术的不断成熟与发展，新的知识、新的技术也在不断涌现，为了适应信息的快速更迭，高职院校的教育教学改革应随之不断深化，在课堂教学中不断融入新技术与新的教学模式。
1 传统教学模式的现状
《HTML5网页设计》是计算机网络专业的一门专业基础课。本课程涉及网页基础知识、HTML5新技术、CSS3样式、网页布局、变形与动画等教学内容。由于作为万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML ），HTML5被火狐浏览器、谷歌浏览器、IE9等国内外知名浏览器所支持，所以学生很希望学好这门技术。但是HTML5有着丰富的语法、标签及属性，有些知识点又比较零散、杂乱，在传统教学模式中，老师为了让学生记住这些知识点，通常会利用PPT 、微课等形式进行教学，也会全
面地将相应的表单元素、标签及作用整理出来，让学生记到笔记中。这样一来，学生可能会忙于记满满几页的笔记，但是分散了其注意力和想象力，面对这些大量的概念性知识点，却无法理解知识点之间的联系与内容，无法紧跟教师课堂的节奏。因此，在教学过程中，学生普遍认为《HTML5网页设计》课程的记忆内容太多，理解比较困难，无法形成清晰、明了的知识体系结构[1]。
虽然传统的笔记可以将教师传授的知识点面面俱到地记录下来，但是由于重点不突出，满满的文字又容易让人产生视觉上的疲劳，所以课下很少有学生愿意主动翻看笔记来复习。而这些知识点却又需要学生
必须努力记忆，才能熟记于心并应用到设计实践中。在这种困难面前，学生原有的学习积极性就会逐渐消失，有些学生甚至会不自觉地退缩、放弃原有的学习热情。如何在有限的课堂时间内，充分调动学生学习的积极性，使学生主动参与到教学过程中，让他们的学习由被动学习变为主动学习、快乐学习，同时也能提高教师
基金项目：辽宁教育科学十三五规划项目“师范生人工智能应用能力提升研究”阶段研究成果（项目编号：JD18DB456）。作者简介：油晔(1977—)，女，山东菏泽人，本科，副教授。研究方向：计算机教学。
2020年第2期
信息与电脑
China Computer & Communication
信息化教育
的教学效率，这是教育工作者必须思考的问题。
2 思维导图概述
思维导图是一个创新性的思维工具，它首先由英国学者东尼·博赞（Tony Buzan）于20世纪70年代创造并开始推广、使用。最初，东尼·博赞设计思维导图是为了将它作为一种全新的记笔记的方式，将传统的线性笔记方式用一种快速、简单、易于理解的方式所替代。在思维导图运用的过程中，其在其他领域的作用也很快显现出来，利用它既可以进行开创性的设计和计划任务，也可以启发使用者思考新的项目，发现问题的解决方案等。
表面上看，思维导图只是在一张纸上绘制一幅含有一些信息（例如图形、线条、简单的文字）的图纸。然而，这些简单的图形、线条等元素可将传统的线性笔记中一些次要的、非本质的信息舍去，通过简洁明了的图形、线条、节点将知识与知识点之间的关系组织与连接起来，形成一个形象的知识网络。这样的设计不仅能够有效地刺激大脑皮层的工作，很好地调动善于逻辑分析的左脑和善于创造的右脑的活动，同时也能够激发人们的记忆力和创造力，帮助学习者进行有效的学习，并加深对知识点的理解。所以，思维导图不仅在个人领域、商业领域、职业领域得到了广泛的运用，在教育领域中也得到了教育工作者的广泛认同。
3 思维导图在《HTML5网页设计》课程中的应用思维导图能够利用颜、线条、图形等信息发掘大脑的创造力和记忆力，并且在教学的整个过程中使用思维导图也能够很好的锻炼学生运用、归纳和综合分析问题的能力。
《HTML5网页设计》课程教学采用思维导图不仅能够帮助学生掌握知识的内在联系，在原有知识框架的基础上建构新的知识体系，充分调动学生学习的兴趣，提高学生的学习效率，也能够帮助教师更好地进行教学过程的设计，并从中发现学生学习过程中遇到的问题，及时加以解决。
3.1 如何运用思维导图构建知识体系
教学过程构建思维导图，应做好以下工作。
3.1.1 一张大白纸
绘制思维导图的方法有手绘和机绘两种。利用软件绘制思维导图的工具也有很多，例如MindManager软件、Inspiration软件以及我们常用的Office软件中的Word和PowerPoint等都具有较强的绘制功能，可以实现思维导图的制作。但是笔者认为在学生的学习过程中（包括课前预习和课中记录）手绘法比较适合学生的学习。在首次课堂上，学生应准备一张不包含线条或其他吸引人们注意力的纯白纸；同时纸张最小选用A4型号。因为思维导图要向边缘延伸，纸张的大小要能够让学生实现二级、三级分支的设计，不能让思维导图上的元素过于拥挤；同时白纸在使用时一定要横向放置，以提供更多的利用空间。
3.1.2 一些彩水笔或铅笔
颜不仅可以赋予图像活力，也是激发创造力的关键。有研究表明，颜与人的右脑相关联，而文字与
人的左脑相关联，将颜与文字很好地结合能够充分调动人的左右脑，使其协同工作，同时也能充分调动学生的学习兴趣，激发他们的创造力。颜也是一种代码。学生在制作思维导图时，用特定的颜对不同的区域或主题进行绘画，可以增进大脑对图像的处理和储存，使学生更容易记住导图中的信息，显著地提高他们的记忆力。
3.1.3 开放的思维与想象力
在多年的教学生涯中，笔者发现高职院校的学生比较厌烦固定的、格式化的教学内容，而个性化、开放的思维与想象力恰恰是高职院校学生所具有的特点。思维导图提倡个性化的思维发散，在教学过程中利用高职生开放的思维与创造力、想象力，可以产生许多新鲜的想法和关联，通过思维导图来激活他们的灵感，让他们的思维过程变得更加充满趣味与彩，使大脑的更加强大，更有创意，更加高效。
3.2 思维导图在学生学习活动中的运用
英国哲学家弗朗西斯·培根曾经说过：“由感观和直觉沿着一条径直的、有规则的、谨慎的道路达到理智的知觉，即达到真正的概念和公理。”学生利用思维导图进行课前预习、课中学习、课后复习可以更好地提高学习效率[2]。
3.2.1 课前利用思维导图进行预习架构
培养学生自学的习惯应该从预习开始。预习是整个课堂教学中非常重要的一个环节，而这一环节恰恰是学生最不重视的。在学生预习的过程中，面对新的、零散、杂乱的知识点，他们很难掌握、理解，达不到预习的效果，预习笔记也很难完成。利用思维导图，教师为学生提供需要掌握的主要知识点，然后让他们在此基础上进行扩展。例如，在HTML5页面元素及属性这节中，教师将本节课需要学生掌握的内容绘制成如如图1所示地思维导图发给学生，让他们在课前根据预习情况进行填充和再制作，这样可以充分调动了学生预习的积极性，使他们可以根据自己的理解绘制具有自己特的思维导图，同时也对本节课的知识点有了一个整体的认识。
页面交互
元素
属性
全局属性
列表元素
分组元素
HTML5页面元素
图1 HTML5页面元素与属性的思维导图
（下转第238页）
2020年第2期
信息与电脑
China Computer & Communication
信息化教育
令；双击“小球落洞”移动图标，在演示窗口中选定红小球，将其属性中的类型修改为“指向固定区域内的某点”，将红球拖到左上角的洞内放开鼠标，可看到红球上有一黑点，此点为基点，再将红球拖到最右下角的洞中，此点为终点，这样就在最左上角洞基点到最右下角洞终点出现了一矩形框（程序运行时不可见），目标就在这矩形框内；将“小球落洞”移动图标属性中的基点、目标、终点的X 和Y 的值分别改为1、X 、5和1、Y 、3，如图3所示；将“重复执行”显示图标中的内容修改为“GoTo(IconID@”多排洞”)”；为了显示小球落入哪个洞，在等待图标前增加一个名为“显示小球落点”的显示图标，输入文本“小球落入第{Y}行第{X}列洞内”，如图4
所示。
图3 小球落入哪个洞2
的设计方法
图4 修改后的
在这个实例中一定要注意矩形区域的定义，四个角都可以作为第1行第1列即基点，终点在它的对角上。在移动图标的教学过程中，只要让学生掌握好这前3个类型的动画设置后，后面的两个路径动画，只需要教师适当提示，学生就能做出地球绕着太阳转、蝴蝶在花丛中飞舞的动画作品。
5 结 语
在多媒体课件中，一个恰当的动画运用将起到画龙点睛的作用，使课件变得生动活泼，更能激发学生的学习兴趣。在Authorware 课件课件制作中，只需要设置好移动图标的速度、执行方式、移动类型3个属性，结合计算图标对变量与
函数合理运用，就能制作出丰富多彩的动画作品。
3.2.2 课上运用思维导图进行创新学习
课堂上，学生可以根据教师讲解的内容及自己的理解不断完善思维导图，同时学生与学生之间、小组与小组之间也可以分享自己所绘制的思维导图，这样学生能够更深入地理解知识，对所学知识进行归纳和重组，构建自己的知识体系，同时也学会了分享，能够很好地吸取“他人之长，补己之短”，为今后步入工作岗位后学会与人合作打下基础。3.2.3 课后利用思维导图进行知识构建
根据艾宾浩斯的理论，对于学过的知识，仅仅经过20分钟人们便会遗忘40%左右。48小时后，会遗忘所学内容的70%，因此学会复习也是学生掌握知识的有效手段。所以教师让学生对预习的思维导图和课堂上的思维导图进行复习整理，并及时提交，可以促使学生在遗忘前对知识进行进一步的复习与巩固。
4 结 语
基于思维导图的教学模式，不仅可以帮助学生到适合自身的学习方法，实现知识体系的构建，同时还可以培养学生的自主学习能力，调动学生课堂学习的注意力与专注力，激发学生的学习兴趣，锻炼学生的逻辑思维与创造力，培养学生的交流能力和团队协作能力，为学生今后可持续性学习奠定基础。
参考文献
[1]（英）东尼·博赞.思维导图完整手册[M].郭胜阳，译.北京：中信出版社,2018:3-5.
[2]李传秀，张学辉，钟敏.思维导图在程序设计教与学中的应用探究[J].教育教学论坛,2019,399(5):174-1
75.
（上接第235页）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。