2024年-H页面微场景制作入门(初级)教程

主讲：王玲H5页面微场景制作入门教程王玲工作室1

2CONTENTS目录经验分享，共同成长什么是H5为什么要做H5我们要在哪里使用H5怎么制作H5（易企秀）whatwhywherehowend22024/5/5什么是H5WHAT32024/5/5H5是指第5代HTML（超文本标记语言），也指用H5语言制作的一切数字产品。通俗地说，H5是一种创建网页的方式。它会让手机网页看上去更炫酷，功能也更丰富多彩。对于用户而言，H5具有流量入口多、分发效率高、使用门槛低等明显优势。什么是H5？42024/5/5H5的特点52024/5/5为什么要做H5WHY62024/5/5为什么要做H5页面?随着移动互联网的高速发展，智能手机、平板电脑等移动终端设备越来越普及，用户在移动端花的时间也越来越长。用户时间碎片化，接收信息爆炸性增长，企业营销需要迅速抓住眼球，众多企业已经站在互联网转型的风口。微信H5页面中触摸、滑动、摇一摇，辅之以文字、图片、动画、声音，给互联网用户带来了全新体验，技术本身带来的新奇感让人们口口相传。H5技术正被用于商业展示、会议活动、数字出版与教育、电子贺卡、个人展示等各类场景中。72024/5/5我们要在哪里使用H5WHERE82024/5/5微信互动营销：摇一摇、大转盘、刮刮卡、优惠券、投票调查、小游戏……商业展示：企业宣传、产品展示、品牌传播、优惠促销、企业招聘、数据年报……本次培训的目的：企业宣传、每月工作汇报、工作展示会议活动：会议、展览会、发布会、活动……数字出版与教育：电子杂志、多媒体课件、培训课程……电子贺卡：商业贺卡、节日贺卡、生日贺卡、祝福卡……个人应用：个人秀、婚礼邀请、聚会Party、求职简历……H5页面几乎适用于所有企业和个人什么场合可以用到H5页面?92024/5/5H5页面制作要求背景图片尺寸：640px*1010px说明：px单位，中文叫像素图片格式：.png、.jpg、.gif说明：图片尽量控件在500K以内。

图片压缩工具：/web/bbs/topic?topicId=128背景音乐格式：.mp3

说明：背景音乐尽量控件在1M以内。

音乐剪切工具：/web/bbs/topic?topicId=129页面数：无限制说明：为了更好的用户体验，建议尽量控制在15页以内。102024/5/5怎么制作H5HOW112024/5/5开场小故事122024/5/5站在他人的角度问题132024/5/5圣诞节母亲带女儿出去逛街街上非常热闹她想女儿一定会非常的高兴142024/5/5然而她绝对没有想到在人潮汹涌的大街上女儿却紧拽着她衣角呜呜地哭个不停152024/5/5原来是女儿的鞋带开了她蹲下身帮女儿系鞋带系好鞋带无意中抬起头她惊奇的发现……162024/5/5没有彩灯没有圣诞礼物除了一双双粗大的脚和来来往往的双腿什么也看不见母亲震惊了我什么也看不到172024/5/5母亲立即抱起女儿女儿笑了母亲流泪了第一次从女儿的角度眺望世界她感到非常震惊从此这位母亲牢记要站在孩子的立场上看待问题182024/5/5不要轻易地将自己的喜好逻辑强加于他人的身上站在不同的角度看风景各有各的感受冷暖自知反思192024/5/5不仅仅一位好母亲需要站在孩子立场上看问题每个人都需要站在他人的角度看问题只有换位思考将心比心才能够真正了解他人的所思所想202024/5/5站在妻子的角度思考一下她是否愿意以我这样的人为丈夫

?????自我反思中212024/5/5站在上司的角度思考一下他是否认为我是一个合格的下属

?????222024/5/5站在孩子的角度思考一下他是否获得了一个孩子应有的童年生活

?????232024/5/5体验一下请为什么要站在他人的角度考虑问题呢因为你认为对的事情未必是对的小故事242024/5/5这是美女吗我们倒过来看先看一个国外的252024/5/5这是美女吗我们倒过来看再看一个国内的262024/5/5进入制作教程272024/5/5制作小提示制作H5场景推荐使用PC（电脑）端浏览器也可在手机上下载制作工具客户端，在手机上进行制作（但是在手机上制作，相对复杂一些，还是建议用PC端来做。）282024/5/5资料准备场景制作发布宣传信息收集1432H5场景制作与运用流程292024/5/5制作前，准备好4个资料创意：展示什么，用什么方式图片：提前备好，视觉效果好文字：准备充分，具有感染力音乐：烘托氛围，MP3格式302024/5/5免费注册易企秀账号进入官网后点击右上角“注册”1.邮箱注册：输入邮箱和密码，点击“注册”即可。2.第三方登录：无需注册，直接点击图标，使用微信或者QQ进行登录。/312024/5/5登录易企秀账号点击官网右上角“登录”1.邮箱登录：输入邮箱和密码，点击“登录”即可。2.第三方登录：无需注册，直接点击图标，使用微信或者QQ进行登录。322024/5/5创建场景点击右上角创建场景332024/5/5【套模板】选择一个模板，把模板中需要修改的地方修改即可快捷制作。【自主创建】点击“+”进入自主创建，一页一页创建场景。342024/5/5场景名称填写名称后期可改填写完毕点击创建点击选择为了自己管理方便352024/5/5制作页面362024/5/5页面模板在易企秀制作页面的左侧栏，易企秀官方为大家提供了分门别类的“页面模板”，在制作场景的过程中，可以参考或者直接套用页面模板进行场景创建。自己制作的页面，也可以保存为“我的”模板，以供下次使用。企业账号将自己的场景设置为“企业页面模板”，子账号可以直接使用。372024/5/5右侧的“页面管理”5大管理操作复制：点中条框，点击“复制”我的模板

：点中条框，点击“我的复制”，出现在左侧“页面模板”中，可删除删除：点中条框，点击“删除”移动：点中条框，可上下拖动添加：点击“+”，添加一页

382024/5/510个基本组件+设置+发布组件是构成场景的基本要素1.文本2.背景3.音乐4.视频5.图片6.形状7.图集8.互动9.表单10.特效392024/5/51.点击“文本”后→即可创建2.单击文本框→出现编辑菜单3.双击文本框→进入基础编辑402024/5/5点击“背景”后，选择“背景库”中的背景图也可点击“上传”上传图片到“我的背景”库412024/5/5背景编辑→背景创建后，点击编辑栏上的背景齿轮，即可对背景进行编辑。→背景编辑主要包括：剪切、更换、效果（放大、缩小）、删除。422024/5/5点击“音乐”即可创建【背景音乐】1.【音乐库】为官方提供的音乐素材2.【外部链接】插入网络音乐链接3.【我的音乐】自主上传音乐432024/5/5点击“视频”后，给场景添加网络视频点击“什么是视频通用代码”，出现详细操作442024/5/5点击“图片”后，选择“图片库”中的图片素材或点击“上传”上传图片到“我的图片”库452024/5/5点击“形状”后，选择“形状组件”库中选择形状组件“形状”是便于用户制作扁平化页面的素材，形状素材和文字一样可以做“颜色、大小”等设置。462024/5/5图集：是几张图片的集合主要设置：图片比例、切换方式472024/5/5“互动”是方便制作者与观看者互动的组件互动组件目前主要是“一键拨号”，正在不断增加482024/5/5表单（也叫信息收集表、报名表、信息反馈表等）是场景创建者用来收集查看场景的用户反馈信息的重要工具。可点击“表单”创建也可直接在互动模板里直接快捷创建。492024/5/5【设置动画】动画设置主要应用于：文字、图片、图形、一键拨号、输入框等组件设置方法：点击组件→选择“动画”→进入动画设置页面502024/5/5制作小提示点击预览图标，即可对此页面的动画设置进行整体预览。512024/5/5设置是对场景的基本信息进行设置，主要包括：场景封面、场景名称、场景描述、翻页方式。点击“场景共享”和“友情展示”下拉键，可参加易企秀官方活动和尾页设置。522024/5/5特效组件是给某一个页面加上一个特殊的效果。点击“特效”即可为当前页面选择合适的特效532024/5/5“保存”只是对操作进行保存，如果不点击“发布”此场景未发布的编辑内容，在场景分享出去时，别人看不到最新编辑的内容。点击“退出”则推出编辑页面。很重要，很重要，很重要……重要的事情要说三遍542024/5/5点击发布后，可获得场景二维码、场景连接和更多的一键分享方式。552024/5/5下载更大的场景二维码（在“我的推广”里找到二维码，如下图）562024/5/5“我的场景”管理点击“我的场景”可看到自己创建的所有场景列表。点击单个场景右下角的齿轮，即可对此场景进行“设