HTML5网页设计与制作课程游戏化教学设计

张爱军 刘胜达 王英玮

摘 要：为了更好地提升计算机专业毕业生的网页设计与制作的能力，本文进行了HTML5网页设计与制作课程游戏化教学设计研究。首先对HTML5网页设计与制作课程进行了介绍，然后分析了HTML5网页设计与制作课程对计算机相关专业学生的能力培养要求，最后提出了HTML5网页设计与制作课程游戏化教学设计方案。实践表明，该方案能够有效地激发学生的学习兴趣，有效地提升学生的自主学习能力，有效地提升学生的网页设计与制作的实践能力，具有一定的参考价值。

关键词：HTML5;网页设计与制作：游戏化教学;设计

0 引言

隨着大智移云技术的飞速发展，网络应用越来越广泛，涌现了大量的热门网站，而HTML5网页设计与制作课程是讲授如何制作网页的课程，对于计算机相关专业来说非常重要。因此，适时进行HTML5网页设计与制作课程游戏化教学设计研究，具有重要的现实意义。

1 HTML5网页设计与制作课程简介

HTML5网页设计与制作课程，是计算机科学与技术专业的一门应用性质较强的重要专业必修课。本课程以应用为主导，是一门关于网页设计与制作的应用课程，适合有编程基础的同学学习。该课程具有操作性强、理论性强、结构完整和很强的工程性等特点。

2 HTML5网页设计与制作课程对计算机相关专业学生的能力培养要求

通过本课程的教学，帮助学生掌握学习互联网基本知识，深入学习HTML、CSS，会完成基本的静态页面制作。会使用基本的设计软件，如PhotoShop和Fireworks进行切图，会精确的还原设计图，以及学习基本的浏览器兼容问题的处理方法。启发学生的创新意识，提高学生在HTML5程序设计过程中分析问题和解决问题的动手能力，使学生的理论知识和实践技能得到共同发展。

3 HTML5网页设计与制作课程游戏化教学策略

1.HTML5网页设计与制作课程游戏化教学案例设计

HTML5网页设计与制作课程游戏化教学案例是教师在课堂讲授课程时采用的案例，学生仅是将其听懂并跟着教师动手验证即可。为了吸引学生的注意力，激发学生的学习兴趣，提升学生的学习参与度，设计了大量有趣的游戏化教学案例，例如数学计算高手、三国连连看、水果超市、作物大挑战、疯狂汽车、儿童识拼音和英语单词好记星等，以上案例利用HTML5实现，能够稳定运行于众多主流浏览器中，也能较好的运行于平板、手机等移动平台，能够有效地激发学生学习HTML5网页设计与制作课程的兴趣，有效地提升学生自主学习的能力，有效地提升学生的实践动手能力。

2.HTML5网页设计与制作课程游戏化实践环节设计

HTML5网页设计与制作课程游戏化实践环节是先由教师布置HTML5相关的游戏化实践项目，然后由学生自主分组分工协作完成HTML5游戏化实践项目，最后进行学生自评、同学互评以及教师点评。HTML5网页设计与制作课程的游戏化实践环节主要包括项目布置、项目实施和实践项目总结三大部分，其中，项目布置包括HTML5游戏化实践项目情境、HTML5游戏化实践项目要求和HTML5游戏化实践项目分组;项目实施包括HTML5游戏化实践项目讨论、HTML5游戏化实践项目搜集资料和HTML5游戏化实践项目优化;项目总结包括HTML5游戏化实践项目学生展示、HTML5游戏化实践项目师生评价和HTML5游戏化实践项目教师点评。实践表明，利用贴近生活实际的HTML5游戏化实践项目能够很好地激发学生的参与兴趣，提升学生的学习动力，大幅提升学生的HTML5实践应用能力。

3.HTML5网页设计与制作课程游戏化第二课堂设计

为了提升学生课后进行HTML5网页设计与制作课程的自主学习程度，可以搭建HTML5网页设计与制作课程的游戏化网络教学平台，通过平台开展游戏化第二课堂活动。其优势主要包括以下几点：第一，在HTML5网页设计与制作课程的游戏化网络教学平台中，学生可以进行课后自主学习，以及在任何时间和任何地点进行移动学习，因此该模式能够很好地锻炼学生的自主学习能力。第二，在HTML5网页设计与制作课程的游戏化网络教学平台中，学生可以自由分组进行积分对抗，即利用竞争机制、团队精神和集体荣誉感提升学生的参与程度，从而激发学生学习HTML5网页设计与制作课程的兴趣，提高学生利用HTML5进行网页设计与制作的能力。第三，通过HTML5网页设计与制作课程的游戏化网络教学平台，学生还能够进行私信和群聊等方式进行互动沟通，使得学生在遇到困难时能够与同组同学讨论，从而有效地提升学生的沟通能力、分析能力和创新能力。

4 结束语

为了更好地提升计算机相关专业学生的HTML5应用能力，本文进行了HTML5网页设计与制作课程游戏化教学设计研究。首先对HTML5网页设计与制作课程进行了介绍，然后分析了HTML5网页设计与制作课程对计算机相关专业学生的能力培养要求，最后提出了HTML5网页设计与制作课程游戏化教学设计方案。经过近一年的HTML5网页设计与制作课程教学实践，发现该游戏化教学策略能够有效地激发学生的学习兴趣，有效地提升学生的学习参与度，有效地提升学生的HTML5实践应用能力，具有一定的推广价值。

参考文献

[1]田华，陈敏娜，王朋娇.以创新思维培养为导向的项目教学设计与实践——以“网页设计”课程为例[J].中国信息技术教育，2019（05）：106-109.

作者简介：

张爱军（1963-），男，黑龙江哈尔滨人，硕士，副教授，主要研究方向：信号频谱分析.

基金项目：本文系2018年度黑龙江省哲学社会科学研究规划项目“游戏化智慧课堂及智慧学习空间构建与应用研究”（18EDE498），2019年度黑龙江省教育科学“十三五”规划重点课题“智慧城市视域下基于OBE的双创型智能系统开发人才校企协同培养研究”（GJB1319105），2019年中国物流学会、中国物流与采购联合会面上研究课题“智慧城市建设背景下智慧物流系统开发人才培养创新研究”（2019CSLKT3-209），2019年黑龙江财经学院人文社会科学基金项目“智慧城市建设背景下校企共建双导师工作室协同育人模式研究”（SK201912）阶段性研究成果。