可视化H5的实训教学研究与实践

魏蓓蓓

摘 要：移动互联信息技术的迅速崛起，让信息的传播迎来了又一次巨大变革。同时手机的快速发展，让H5页面的传播速度更快，因此H5页面制作课程的学习也迫在眉睫，成为今后学生就业的一个重要方向。本文将对可视化H5页面制作课程的实训教学提出自己的理解。

关键词：H5 实训教学

随着移动互联信息技术的发展，人们的生活方式也发生了巨大的变化。同时，移动互联信息技术让信息传播从传统媒体时代进入了新媒体时代，这样，移动互联信息技术中的H5的作用也就越发的重要[1]。

一、学习可视化H5的重要性

在新媒体时代，传媒行业遭遇前所未有的转型与变局。不管是新媒体企业，还是传统媒体单位，都对IT人才的需求呈现不断上升的态势，随之而来的是H5的应用需求也越来越大，这样，高职院校尤其是传媒类专业的学生就更需要掌握H5页面制作这门技能。那么，什么是H5？H5也就是HTML5的简称，HTML也就是超文本标记语言的英文缩写，那么，显然H5也就是超文本标记语言的第5代标准，它是网页制作中用到的标记语言。但是传媒类专业的学生没有计算机相关语言的学习基础，因此学起H5来就更显得吃力，所以可视化的H5页面制作工具就应运而生，成为首选的学习工具[2]。

二、常见的可视化H5制作工具

目前，国内外有很多可以进行 H5页面可视化制作的工具，例如，国外常见的工具有 Adobe Edge、Wix、Weebly、Hype等，国内常见的工具有木疙瘩、 iH5、意派、易企秀、MAKA、兔展等，这些软件都有各自的特点，它们为开发H5页面提供了有力的支持，使H5的开发变得更加方便、快捷，并且成本低。

可视化的H5制作工具容易操作，容易掌握，而且功能强大，它能将数据转换成图形或者图像在屏幕上显示出来并进行交互处理，为没有计算机语言基础的人开发H5页面提供了强大的技术支持，使得H5的开发变得简单快捷。

三、可视化H5的实训教学策略

1.选择合适的教材内容

每门课程进行教学前都要选取教材，在教材的选取过程中要根据教学过程的实际需要，认真地研究备选教材，汲取其中的精华部分，不断改进和完善教学内容，这样才能够让H5页面制作教学跟得上行业发展的步伐。同时，在教学过程中，还要合理的拓展教学内容，把一些优秀的H5页面作品整合到教学范围内，这样可以让学生掌握行业发展动态，学习到最新的思路、技术和方法，同时还可以拓宽学生的设计思路，让他们了解更多、更好的H5页面作品。除此之外，要充分利用学校自身的实训室或者机房，合理的增加实训课的课时量，提高学生的实践操作能力。这样能让学生通过实训课的实践操作，更加牢固地掌握相关理论知识，深化学生对相关理论知识的消化和理解，做到融会贯通、活学活用。

2.案例教学法及项目教学法

对于实践教学来说，案例教学法是一种具有很高实效性的教学方式。对每个知识点都采用一个或多个相应案例进行分析及讲解，首先，教师需要结合具体的教学内容，选择一些典型的案例，然后通过案例的分析引导，让学生自觉的参与进案例分析中，这样可以调动学生的主动思维，提高学生独立解决问题的能力。案例教学法打破了传统的教学方式以教学为主，学生被动吸收的教学模式，更加强调了学生在课堂教学中的作用，这样既能够激发学生的探究欲，又能够培养学生的思维创造能力。

项目教学法是一种以项目为主线，以教师为指引、以实训为导向、以学生为主体的教学模式。项目教学法有较强的启发性、有良好的互信动、有很好的实践性，还有明确的学习目标，和传统教学模式相比，项目教学法可以有助于教师更方便地处理教学难题，而且能够培养学生形成良好的创新精神和提高实际解决问题的能力。在教学过程中，通过一个项目的引入，来巩固几个知识点的掌握。教师结合具体教学内容和学生实际情况，将具体的项目引入到课堂上，经过教师的启发、指导和策划，让学生能够通过独立思考和团队合作来完成项目的设计和制作。项目教学法的使用，有助于增强教师和学生之间的交流互动，大大缩短了学生理论学习与实践操作之间的距离，提高了学生的学习积极性[3]。

H5页面制作重视的是实际操作，因此教师在教学过程中就要融入更多的实训内容，这样学生才能形成理论联系实际的意识，进而增强学生的实际操作能力。在H5页面制作的每个环节都可以使用案例教学和项目教学，案例和项目是理论的具体应用，通过案例教学和项目教学让学生加深对理论知识的理解，进一步来提高学生灵活运用理论知识的能力，这也是我们教学过程最终要实现的目标。但是，教师必须要仔细的选取案例和项目，这样才能保证案例教学和项目教学的效果，最好能够选择一些既能加深学生对理论知识的理解，又十分贴近教学内容的经典案例和项目。比如学习组与长数据的时候，教师可以选取相关媒体的优秀案例，例如闪电新闻的H5页面“他是谁？”，教师可以用这个实际案例来分析页面的设计和制作要点，这样就能够引导学生用组与长数据的方法来设计大体框架，进而让学生体验整个设计与制作的流程，从选题策划到视觉设计再到最后发布。

3.加强作业训练

H5页面制作教学的作业环节具有非常重要的作用，不仅可以检查学生对所学知识的掌握程度，还能够锻炼学生对各种制作方法的操作能力，比如各类动画应用、行为、触发事件与交互控制等。教师通过查看学生作业，可以对学生的作业完成情况进行分析和总结，进而发现学生对所学知识的掌握情况，然后再针对学生的作业情况进行系统的讲解，对发现的问题及时进行处理，对学生的疑惑及时进行解答，这样就可以做到及时发现、及时解决，从而让学生对每个小知识点都能够牢固的掌握，避免造成问题的累积。

4.用比赛带动实训

目前有很多H5页面制作方向的大赛，教师可以及时搜索相关信息，组织学生参与，让学生在比赛中发现自己在学习中的薄弱环节，在比赛中巩固自己对知识的掌握，在比赛中解决自己没有遇到过的问题，这样用比赛带动日常实训，起到事半功倍的效果。

5.学生自主探究

对学生进行分组，以组为单位完成作品，把每次各组完成的作品放到课堂上，让各组派出一个代表来讲解自己所在组的作品，分享在制作过程中的想法、问题、解决方法以及收获;然后让其他学生对这组的作品进行质疑、评价或建议，经过讨论之后，各组再自行修改或完善作品，最后，再评选出最好的几组成品。

四、实践效果

在实训策略实施前，学生单纯依靠教师的讲授，缺乏学习的兴趣和主动性，对单一知识点能够掌握，但一出现综合性的项目或者几个知识点的集合就开始摸不着头脑。课后作业更是一塌糊涂，只会寻找模板进行改动，从不主动思考，存在应付的心理。

实训策略实施后，效果很明顯：

1.让学生处于主体地位，教师位于指引地位。

在教学过程中，教师会更多地注重学生的反馈，在实训的同时进行调整，在调整的同时进行总结，这样不但能够提高学生们的实践能力，而且还能提高教师的专业能力。同时，也能激发学生们的学习兴趣，促进学生们自主学习、独立解决问题，学生不再一味地等着教师传道受业解惑，而是带着问题去学习，去探索，去

钻研。

2.有利于学生了解项目完成的各阶段任务。

基于平时的各种实训，学生们对页面制作的各个阶段都能做到了如指掌，拿到一个项目不再摸不着头脑，而是迅速就能进入状态，开始筹备一项项准备工作。同时，依靠平时的分组训练，也增强了团队合作能力，为今后走到工作岗位之后的合作打下基础。

结语

总之，H5页面制作这门课程的实践性很强，这就需要教师在教学过程中不断研究适合教学的新方法，不断调整教学内容，采取更加多样化的方式方法来激发学生的学习兴趣，把行业发展的新技术融入教学过程中，促进学生能够利用自己所学的知识对实际问题进行处理，更好地适应未来工作岗位的工作需要。

参考文献

[1]王丹丹.基于可视化编辑平台教授H5设计的必要性[J].艺术科技.20180515.

[2]王志.H5，如何助力新闻可视化[J].传媒评论.20180905.

[3]饶晓娟.利用新媒体数字化营销工具H5进行项目化教学的实践[J].职业.20161225.