基于Html5可视化设计平台的Html5课程设计与制作

摘要：Html5可视化设计平台具有操作简单，分享快捷的技术优势。用户可以根据自己的需求，设计与制作Html5课程。本文根据学生需求和教学目标确定课程内容，归纳课程要点，设计Html5页面内容。搭配适当的色彩、文字、图形、音乐、视频等多媒体内容制作Html5课程，为线上线下立体混合式课程构建提供一个补充内容。

关键词：Html5  可视化设计平台  Html5课程设计与制作

HTML5，简称“H5”，是第五代超文本标记语言。Html5技术通过互动页面、交互动画、可视化文字、丰富的视频、音频资源给用户带来丰富的交互体验。在没有代码基础的情况下，可以通过HTML5可视化设计平台快速地制作，编辑、开发和维护Html5页面。结合一定的技术基础，可以制作出非常优秀的作品。除此以外，Html5可视化设计平台还可以根据用户需求，依托数据库提供数据统计服务，分析浏览和交互行为数据，对课程内容评价提供数据依据。

借助Html5可视化设计平台和智慧工具的信息化优势，整合教学资源，可以进一步激发学生的学习动力，打造立体混合式课堂，提高教学效果。

一、平台的选择

伴随着HTML5技术的出现，面世了大量简单易上手的Html5可视化设计平台，大家通常看到的作品，大多是由这些平台制作完成的。易企秀、兔展、MAKA、iH5、木疙瘩等都是比较出色的Html5可视化设计平台，对于初学者来说易企秀和MAKA的容易上手。iH5和木疙瘩适合有更多需求的专业设计师或专业技术人员使用。对于刚开始使用Html5可视化设计平台，又有与Photoshop文件交互使用需求的用户，可以选择兔展作为Html5可视化设计平台。兔展可以将Photoshop源文件直接导入工作台进行编辑处理，把Html5页面做得更加美观。

二、确定选题

Photoshop图形图像处理这门课程注重学生的实践运用，包含了图像编辑与选区、图层应用、蒙版等知识点，在对Html5课程进行设计时，不能照搬传统课堂上的教学内容。因为Html5课程本身力求简洁，如果想将课程的全部内容进行呈现可能达不到想要的效果，还容易让学生产生疲惫感，失去学习兴趣。所以在确定选题时对内容要有所选择，应该是对具体知识点的讲解。Html5课程除了承担基本的教学作用以外，还可以作为课堂资源的补充内容，成为学生可以随时随地查看的课堂笔记。Photoshop图形图像处理这门课程要在Html5頁面中标注常用的快捷方式，帮助学生在学习过程中掌握使用方法。

三、Html5可视化设计平台课程设计与制作

1.课程内容

Html5课程的学习内容根据要根据具体的教学目标来确定范围，以蒙版为例，教学目标包含三个方面的内容。首先是会使用图层蒙版修图（对智能对象的编辑）的能力目标，其次是理解什么是蒙版的知识目标，最后是激发学生对Photoshop的学习兴趣的素质目标。结合教学目标，确定Html5课程内容包含图层蒙版的作用、原理、图层蒙版的添加、图层蒙版的停用与启用、剪贴蒙版的特性、剪贴蒙版的创建与释放。

2.课程要点

确定了Html5课程内容后，要对课程内容重新进行整理、归纳。根据各个知识点之间的逻辑关系、前后顺序、繁难程度等特点综合考虑，将知识点进行重新编排，让它更符合学生的学习习惯，借助Html5可视化设计平台逐层呈现课程内容。根据“是什么——为什么——怎么做”这样的层次结构，将蒙版的课程内容划分为三部分。第一部分：图层蒙版的作用，第二部分：图层蒙版的原理，第三部分：图层蒙版的添加、图层蒙版的停用与启用、剪贴蒙版的特性、剪贴蒙版的创建与释放。

3.课程设计

学生在用手机观看Html5课程时如果耗时太长，可能丧失学习兴趣。因此Html5课程不同于微课，在时间上应控制在3分钟以内。所以在对Html5课程设计时，要力求内容简洁、主题鲜明、重难点突出。尽可能用最少的页面，呈现出Html5课程的主要内容。

4.课程制作

兔展可以制作翻页、长页、短视频等，不需要扎实的技术基础，直接就可以上手，其中翻页最适合用来制作Html5课程。登录兔展，通过个人中心直接进入工作台。

根据对课程内容划分，第一部分用一张页面，第二部分用一张页面，第三部分用两张页面。

第一页：

Photoshop中的图层蒙版，可以控制图层的不透明度、制作图像特效，还能作为编辑智能对象的辅助工具。

第二页：

图层蒙版用黑白灰来控制图像的显示或隐藏。白色可以显示本图层的内容，黑色可以使对应的区域隐藏，显示下一层的图像。灰色呈现半透明区域，灰度值越高，不透明度越低。图层蒙版可以作为辅助工具修剪智能对象。

第三页：

添加图层蒙版：在图层面板下方单击“添加图层蒙版”按钮，可对当前层添加图层蒙版。

停用与启用：1.选择图层菜单—图层蒙版—停用或启用命令。2.选择图层面板当前图层，单击鼠标右键，停用或启用图层蒙版。3.按住Shift键，单击蒙版缩略图。

第四页：

剪贴蒙版使用上一层图层的内容，覆盖到相邻图层的形上。通过形状、选区等内容，来控制剪贴蒙版图层的显示范围和不透明度。使用图层样式创建的图层，也包含有剪贴蒙版。在剪贴蒙版图层上，还可以再创建图层蒙版。

特性：剪贴蒙版可以叠加，但优先显示上面的图层。

创建与释放：按住Alt键，用鼠标单击相邻图层间就可以创建与释放剪贴蒙版。

在对页面进行设计制作时，选择恬淡的页面色彩来衬托Html5页面主体文字内容。对颜色的选择要考虑视觉障碍群体的需求，避免黑底红字或红底灰字，向他们传递有效的页面信息。

编辑页面顺序时，可以通过Html5可视化设计平台设置各种有趣的动画效果，结合手指的滑动来动态播放。把原本生硬的知识点，通过这种动态互动变得简单有趣，调动学生的学习积极性。

添加柔和的背景音乐，可以让学生在舒缓的音乐中对内容进行学习。此外，还可以添加关键步骤的画面或讲解的视频素材，将内容进行直观呈现，但时间要短，内容要直接。

编辑页面内容时，还可以加入兔展提供的弹幕形式播放留言，适时地设置留言、点赞、阅读数等互动形式，借助一些小插件来增强学生的人机互动体验，增强Html5课程的趣味性。制作完成后，一键生成宣传海报、二维码、链接等形式分享给学生，还可以将课程二维码附在教学资源中。既能宣传课程又能快速传递课程信息。

四、总结

图形图像处理、数字媒体技术等方向的用户，结合Html5可视化设计平台既可以设计制作出精美的作品，还可以将其与教学内容衔接起来，进行综合应用。通过实践，结合Html5可视化设计平台设计制作的Html5课程，可以作为线上线下相融合的课程教学补充内容。

利用新平台、新技术能进一步提高教师的课程设计制作水平，要有效运用这些数字化工具，提升教学质量。

参考文献

[1]刘俣宏，赵国宏.H5技术在信息技术教学中的应用研究[J].教育现代化，2019，6（57）：120-121.

[2]林健辉.UMU互动学习平台在手机HTML5页面制作课程中的应用[J].电子技术与软件工程，2018（23）：71-72.

[3]赵腾.基于H5的科普移动微课的设计与开发[D].上海师范大学，2017.

[4]刘华，敖谦.基于微信公众平台的混合式教学——以“网线制作六步法”课程为例[J].现代教育技术，2017，27（01）：48-54.

作者简介

刘小莹（1985—），女，汉族，四川射洪人，硕士，现就职于重庆电信职业学院，讲师，研究方向：图形图像处理、数字媒体、数字文化创意、数字界面（UI）设计、数字产品创意设计。