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

《H5页面创意设计课程教学教案.docx》由会员分享，可在线阅读，更多相关《H5页面创意设计课程教学教案.docx（25页珍藏版）》请在优知文库上搜索。

1、H5页面创意设计下载原文可修改字体底色教学教案课时内容认识H5授课时间135分钟课时3教学目标掌握与H5桁关的概念0了解如何学好H5设计了解H5设计的相关流程教学重点EJH5的概念、类型、风格EJH5页面设计的原则0H5设计人员应具备的案侦0H5的设计与制作源程教学难点HS的类型、风格，H5的优势与不足，H5页面设计的原则,H5设计作品应具备的特点.115的设计与制作流程教学设计教学网路：（1）通过对H5的概念、类型、风格,优势与不足.以及设计原则的介绍.让学生对H5与115页面设计布个基本认识：（2）通过对优秀115页面设计作品的特点，以及H5设计人员应其在的能力进行讲解，告诉学生学好H5需

2、具备的条件：（3对H5的设计与制作流程进行介绍，包括明确设计目标、内容策划、；页面设计、交互设计和H5的生成与发布：（4）通过项目实训炼习本章知识：（5）安排实战演练巩冏本章所学知识，提升设计能力与动手能力.1、教学手段：（D通过理论加案例的方式讲解，帮助学生快速理解知识点：（2）通过课堂讨论提出问题，活跃课堂气氛并激发学员的学习兴建。2、教学资料及要求：除教材中讲解的知识可以通过其他栗道了解更多H5相关知识.加以学习.教学内容讨论问题：1、H5是什么？2、学好H5设计需具备哪些能力？3,115的设计与制作流程是怎样的？内容大纲：具体可结合本率的PPT课件进行配合讲解1.1 HS的基础和以1.

3、1.1 H5是什么1.1.2 H5的矣型1.1.3 HS的风格1.1.4 H5的优势均不足1.1.5H5页而设计的五大原则1.2 如何学好H5设计1.2.1 ft仔的H5i攵计作品应具备的特点1.2.2 HS设计人员应具备的能力1.3 H5的设计与制作流走1.3.1 明稿设计目标1.3.2 内容策,划1.3.3 页面设计1.3.4 交互设计1.3.5 H5的生成和发布1.4 项目实训项H旅游推广H5页而木材的搜集与制作项目二道请函H5页面素材的投集与制作实战演练1、了解H5的基础知识.小结2、常押如何学好H5设计。3、常握H5的设计与制作流程先利用PhotoShoP对端午节图片素材（忆套资源:

4、素材第1次端午节素材.psd）进实战演练行处理，制作端午节H5页面（配套资源:效果第1代然午节H5页面.psd）,然后在MAKA中添加动画效果并进行预览。卜图所示为参考效果.课时内容%：W的设计规范和授课时间180分钟课时4工具教学目标EJ了解H5的设计规范（3掌握H5的图像、功效等元素设计工具0掌握H5的谀计生成制作工具EJ掌握H5的创意开发工具了解H5的辅助设计工具教学重点EJH5的常用设计尺寸0H5页面的安全区Photoshop.I1.1.ustrator.AfterEffects.AUditiOn等元素设计工具0MAKA.一易企秀、兔展、人人秀、初页等H5制作工具0意派Epub360、

5、IH5等H5创意开发工具EJ格式工厂、PSPIay,TinyPNG.草料二维码等H5辅助设it工具教学难点E1.H5的设计规范0H5的元素设计工具0115的设计生成制作工具0H5的创意开发工具0H5的辅助设计工具教学设计我学思路:1）通过对浏览器的选择、H5的常用设计尺寸、H5页面的安全区等知识进行讲解，让学生掌握H5的设计现莅；（2）通过对PhotOShop、I1.1.ustrator.AfterEffectsAUditiOn进行介绍，让学生熟恚H5的元素设计工具：（3）通过对MAKA、一易企秀、免展、人人秀、初贞等进行介绍,让学生熟悉HS的生成制作工具：（4）通过对意派Epub360,iH

6、5等进行介绍.让学生熟悉H5的创逆开发工具：（5）通过对格式J1.厂、PSPIay、TmyPNG、笊料：维码等进行介绍，让学生熟悉H5的辅助设计工具：6通过项目实训练习本章知识：7）安排实战演练巩固本章所学知识，提升设计能力与动手能力.1、教学手段：（1）通过理论加案例的方式讲解，帮助学生快速理解知识点：（2）通过课堂讨论提出问鹿，活跃课堂气象并激发学员的学习兴也；3对于近点内容进行着重讲解.2、教学资料及要求：除教材中讲解的这些工具软件,还可以r解其他工具的使用方法.教学内容知识回顾：在前面介绍了115的基础知识,以及H5设计与制作的流程等内容.讨论问题：1、H5仃哪些设计规范？2、H5行哪

7、些页面元素的设计工具？3、H5的页面生成工具有哪也？4、16仃哪些创意开发工具？内容大纲：具体可结合本武的PPTi果件进行配合讲解。2.1 H5的设计规范2.1.1 浏S1.M的选择2.1.2 HS的常用设计尺寸2.1.3 HS页面的安全区2.2 H5的元素设计工具1.1.1 功能强大的设计工具Photoshop1.1.2 专业的矢量图绘制工具I1.1.ustrator1.1.3 附炫视为特效制作工具AfterEffects1.1.4 效设计制作工具Audition2.3 H5的设计生成.制作工具2.3.1 定制推广H5制作工具MAKA2.3.2 企业管辅H5*1.作工具易企用2.3.3 快逢

8、制作H5工具电展2.3.4 场第H5制作工具人人为2.3.5 砂片故事HS制作工具初贡2.4 H5的创禽开发工乂2.4.1 专业HS工具Epub36082.4.2 在我.编辑H5工具iH52.5 H5的柏助谩计工具2.5.1 声视压Mi工具格式工厂2.5.2 手机使党设计信PSPIay2.5.3 图片压缩工具TinyPNG2.5.4 二维码生成工具草料二维码2.6 项目实训项H-使用MAKA制作H5活动页面项目二使用格式工厂将JPG格式的图片转换为PNG格坎实战演练小结1、掌握H5的设计规范.2、掌握H5的元素设计、生成制作、创意开发和辅助设计工具课后练习（1）使用人人秀中的素材制作H5页面，

9、要求完成后的效果不但美观，而且能动态显示,完成后的参考效果如卜图所示。410力.t!fmCM*MX*MH*充电，（2）使用格式工厂招“夜景png”（花套资源:素材第2章夜景png）转换为T1.F格式（配套资源:效果第2章夜景.5）。（3）使用草料二维码将“我最png”图片生成二维码形式，及累图片及完成后的军考效果如下图所示（配套资源:效果第2章夜景二维码png）,课时内容H5页面的设计基础授课时间135分钟课时3教学目标EJ掌握H5原型图的相关知识掌握H5色彩相关知识掌握H5版面相关知识教学重点0H5原型图的概念色彩三要索0色彩与情感、氛围的关系0H5页面版面类型教学难点0H5坡型图应具备的要

10、素E1.色彩与情感、城围的关系0色彩搭配方法0HS页面8类型设计要点教学设计1、教学思路：(1)通过讲解H5原型图是什么、H5原型图应具条的要素，让学生掌握HS原型图的基础知识：(2通过介绍色彩的三大要素、色彩决定情感、色彩决定筑围、HS页面的配色方法，让学生掌握色彩的相关知识：(3)通过讲解H5版面类型，以及创建画面焦点、单页面视觉层级、多页面视觉层级、让版面设计的原则，学生掌握版面的相关知识；(4)通过项目实训练习本章知识：(5)安排实战演练巩同本章所学知识提升设计能力与动手能力.2、教学手段:D果用理论加案例的方法进行讲解,引导学生快速熟悉并掌握相关知识：(2)通过课堂讨论提出问魄，活跃

11、课堂气氛并激发学员的学习兴趣；3对于.重点内容进行若重讲解。3、教学资料及要求：除教材中讲解的知见.可以学习其他原型图绘制、色彩搭配和版面排版的相关知识.教学内容知识回顾：前面讲解了H5设计现他及各种设计工具等.讨论问逊：1、什么叫H5原型图？有什么用？2,怎么让H5页面的色彩更有吸引力？3、怎么在H5页面中引导用户的浏览视线内容大纲：具体可结合本欧的PPT课件进行配介讲解.3.1 H5原型图3.1.1 HS原RH是什么3.1.2 H5原型图应具各的条米3.26彩3.2.1 /认识色彩的三大突素3.2.2 色彩决定情感3.2.3 色彩决定武333.2.4 HS页而的A己。方法3.2.5 案例分

12、析“炮步App”H5页面的电彩分析3.3版面3.3.1 认识H5版面美型3.3.2 创建色面侬点.3.3.3 单页面祝优层统3.3.4 多页百视觉层里3.3.5 版面设计的原则3.3.6 案例分析分析“2020年度店长总站”HS页面强而布局3.4项目实训，贞目一乐H5页面的色彩与板田装曾项目二躺奖H5页面的电影与版面名8实战演练AOME小结】、掌握H5原型图的基础知识.2、掌握色彩、版面的相关知识.对卜图所示的草打音乐节HS页面进行鉴货，分析其色彩运用与版面布局的特点.实战演练课时内容H5负面的索材设计授课时间】35分钟课时3教学目标0掌握H5页面的图片设计相关知识0掌JH5页面的文字设计相关

13、知识0掌旌H5页而的音效设计相关知识教学束点0图片素材的获取0H5页面中的文字及字体0H5页面中音效素材的狭取方法教学难点三图片的设计原则0H5页面标题文字和正文文字的设计技巧EJH5页面中音效素材的选标注意犷JS教学设计1、教学思路：（1）首先讲解H5负面图片素材的狭取方法、H5页面图片的设计原则，然后通过设计案例进行理论与实践的结合学习；（2）接着认识H5页面中的文字及字体，讲斛H5页面标膻文字的设计技巧、H5页面正文文字的设计技巧等知识，再通过招聃H5页面文字的制作进行综合提升：（3）阱解H5页面中音效设计的生婴性、H5页面存效素材的获取方法、H5页面音效的选择与添加注诙事项等知识，并通

14、过AUditiCn音效制作巩固学习；（1）通过项目实训练习本章知识；5安排实战演练巩固本章所学知识，提升设计能力与动手能力.2,教学手段：1）采用理论加案例的方法进行讲解,引导学生快速熟悉并掌握相关知识：（2）通过课堂讨论提出问遨.活跃课堂气狙并激发学员的学习兴趣：（3）对于重点内容进行着JR讲解，3、教学资料及要求：除讲解教材中的知识外，M以了解图片设计、文字设计与音效设计的其他知识.教学内容知识回顾：在前面讲解了H5原理图、色彩、版面等H5页在设计的基础知识.讨论问逾：1、哪些柔道可以扶得昭页面的图片素材、者效素材？2、如何进行图片和文字的设计？3,选择音效时需注意哪咚问题？内容大纲：具体可结合本章的PPT课件进行配合讲解.4.1 HS百面的图片设计4.1.1 H5页面图片素材的获取方法4.1.2 5页面用片的设计原则4.1.3 设计案例敕剪H5页面的仔景困片4.1.4 设计案例调JfHS页面的图片色彩4.1.5 设计案例绘割H5页面的夫董人物4.1.6 设计发例优化H5页面的困片效果4.2