H5页面创意设计课程教学教案.pdfVIP

《H5页面创意设计》

教学教案

第1章

课时内容认识H5授课时间135分钟课时3

掌握与H5相关的概念

教学目标了解如何学好H5设计

了解H5设计的相关流程

H5的概念、类型、风格

H5页面设计的原则

教学重点

H5设计人员应具备的素质

H5的设计与制作流程

H5的类型、风格，H5的优势与不足，H5页面设计的原则，H5设计作品应具备的特点，

教学难点

H5的设计与制作流程

教学思路：（1）通过对H5的概念、类型、风格，优势与不足，以及设计原则的介绍，

让学生对H5与H5页面设计有个基本认识；（2）通过对优秀H5页面设计作品的特点，

以及H5设计人员应具备的能力进行讲解，告诉学生学好H5需具备的条件；（3）对H5

的设计与制作流程进行介绍，包括明确设计目标、内容策划、；页面设计、交互设计和

H5的生成与发布；（4）通过项目实训练习本章知识；（5）安排实战演练巩固本章所学

教学设计

知识，提升设计能力与动手能力。

1、教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点；（2）通过

课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴趣。

2、教学资料及要求：除教材中讲解的知识，可以通过其他渠道了解更多H5相关知识，

加以学习。

教学内容

讨论问题：1、H5是什么？

2、学好H5设计需具备哪些能力？

3、H5的设计与制作流程是怎样的？

内容大纲：具体可结合本章的PPT课件进行配合讲解。

1.1H5的基础知识

1.1.1H5是什么

1.1.2H5的类型

1.1.3H5的风格

1.1.4H5的优势与不足

1.1.5H5页面设计的五大原则

1.2如何学好H5设计

1.2.1优秀的H5设计作品应具备的特点

1.2.2H5设计人员应具备的能力

1.3H5的设计与制作流程

1.3.1明确设计目标

1.3.2内容策划

1.3.3页面设计

1.3.4交互设计

1.3.5H5的生成和发布

1.4项目实训

项目一旅游推广H5页面素材的搜集与制作

项目二邀请函H5页面素材的搜集与制作

实战演练

1、了解H5的基础知识。

小结2、掌握如何学好H5设计。

3、掌握H5的设计与制作流程

先利用Photoshop对端午节图片素材（配套资源对端午节图片素材（配套资源素材素材第1章章端午节素材.psd）进

实战演练行处理，制作端午节H5页面（配套资源页面（配套资源效果效果第1章章端午节H5页面.psd），然后在

MAKA中添加动画效果并进行预览。下图所示为参考效果。