遇柬你小程序
微信扫码,小程序制作
当前位置:首页 > 邀请函百科 > h5怎么制作邀请函?如何制作H5界面年会邀请函

h5怎么制作邀请函?如何制作H5界面年会邀请函

发布时间:2020-09-09 16:53:59作者:匿名阅读:64

  现在大家在制作邀请函的时候,都会使用h5去制作,这样非常的美观和漂亮,那么h5怎么制作邀请函?如何制作H5界面年会邀请函呢?下面遇柬你邀请函制作公司就给朋友们详细说下这些问题,以供参考。

h5怎么制作邀请函

  h5怎么制作邀请函?h5邀请函制作教程

  步骤一:打开设计官网,直接搜索“H5”,或者从模板中心进入H5的分类。

  步骤二:进入相关界面后,选择“邀请函”的分类。

  步骤三:点击心仪的邀请函模板,开启今天的邀请函制作。

  步骤四:双击文字部分即可进行修改,还可在右侧调整文字的样式、字体、颜色及其他内容。

  步骤五:点击右侧的“动画”工具,还可变换进场动画、强调动画及退场动画。

  步骤六:大家还可根据需要选择交互功能哦,目前包含跳转链接、拨打电话、发送邮件三种。

  步骤七:双击图片部分同样可以进行修改,还可以直接进行抠图可裁剪的操作哦~

  步骤八:点击右上角的“预览”按钮,可以提前查看在手机上的播放效果哦。

  步骤九:最后只需点击右上角的“发布”即可进行保存啦,大家还可根据需要选择下载切片作品或者复制整个作品~

  h5怎么制作邀请函?如何制作H5类型的邀请函?

  步骤1:添加素材

  在“舞台”上添加一个长形图片素材,使用“变形”工具调整长图大小位置。

  在“舞台”空白部分添加一个矩形,调整矩形宽高、颜色使其符合“舞台”。

  点击在“舞台”上添加一个文本框、两个矩形、两个输入框,“提交”按钮,分别在其“属性”面板下调整其颜色、大小、位置。

  点击选中第一个输入框,在其“属性”面板下修改“提示文字”为“请输入姓名”,同理,选中第二个输入框,在其“属性”面板下修改“提示文字”为“请输入电话”,“类型”为“电话号码”,“必填项”为“是”。

  分别为两个输入框命名为“姓名”“电话”。

  步骤2:添加行为

  点击“提交”按钮右边的“添加/编辑行为”按钮,在“编辑行为”对话框内选择“属性控制”→“提交表单”→触发条件:“点击”,点击“编辑”按钮。

  在“参数”对话框内,选择“提交目标”为“默认数据服务”,勾选“提交对象”为“姓名”“电话”,点击“确认”。

  点击添加第2页,使用Alt键吸取第1页背景图片的颜色,统一舞台颜色。

  在第2页点击添加文本框,输入文字内容如下图,并在其“属性”面板下修改文本框文字大小、字体、颜色等属性。

  回到第1页,复制“提交”按钮,粘贴进第2页(按照Ctrl+Shift+V粘贴至当前位置)。

  修改文本框文字内容为“我想再看看活动时间”。

  在按钮“属性”面板下找到“动作”,选择“无”,取消掉表单行为。

  复制第2页至第3页面,修改文本框“老朋友 提交失败 再来一次吧”,修改按钮文字内容为“OK,再来一次”,点击“保存”并填写名称为“邀请卡”。

  回到第1页,点击选中第1帧,即全选第一页素材,右键→“组”→“组合”,将第1页第1帧上的所有元素合并成一个组。

  在该组合的“属性”面板下找到“拖动/旋转”选项,选择“垂直拖动”。

  按照Shift键将组合往下拖动,手动使其顶部与“舞台”顶部对齐,也可在“属性”面板下调整其“上”值为“0”,使其顶部与“舞台”顶部对齐。

  双击“组”进入组页面,点击“提交”按钮右边的“添加/编辑行为”按钮,在“编辑行为”对话框内点击“提交表单”行为的“编辑”按钮。

  在“参数”对话框选择“操作成功后”为“跳转到页”,点击其右边的“编辑”按钮。

  在新弹出的“参数”对话框内选择“页号”为“2”,“翻页方式”为“平移”,点击“确认”。

  同理,选择“操作失败后”为“跳转到页”,“页号”为“3”,“翻页方式”为“平移”,点击“确认”。

  接下来,在“舞台”上添加一个矩形,点击矩形“添加/编辑行为”按钮,添加“禁止翻页”行为。

  在第2页面,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,设置“点击跳转到第1页”行为。

  回到第1页,选中“组”,为其命名为“首页”。

  在第2页,点击“我想再看看活动时间”按钮的“添加/编辑行为”按钮,进入“编辑行为”对话框,添加“改变元素属性”行为:选择“属性控制”→“改变元素属性”→触发条件:“点击”,点击该行为的“编辑”按钮。

  在“参数”对话框内设置:元素名称:“首页”元素属性:“上”赋值方式:“用设置的值替换现有的值”取值:“-370”。

  点击选中第3页失败页面,点击“ok,再来一次”按钮的“添加/编辑行为”按钮,在“编辑行为”对话框设置“点击跳转到第1页”行为。

h5怎么制作邀请函

  步骤3:添加背景音乐

  点击“素材库”,选择添加已上传的“声音”素材至“舞台”。

  将音频移至“舞台”之外,鼠标点击“舞台”空白处,在“舞台”的“属性”面板下选择“背景音乐”为“音乐1”(即刚刚添加的音乐素材),即设置了背景音乐。

  步骤4:设置“加载”界面

  点击“加载”界面,选择“样式”为“进度条”,“提示”为“嘿,老朋友,好久不见”,并修改文字大小,是否为动态文字以及文字颜色、进度颜色、进度背景等其他自定义形式。

  点击“分享”界面,填写分享信息,上传添加分享图标等。

  步骤5:发布

  点击“发布”按钮。

  在“发布动画”页面输入“备注名”为“邀请卡”,勾选同意书,点击“下一步”。

  发布成功。

  注意事项

  该邀请函步骤比较繁琐,需要耐心,一步一步地做!

  如何制作H5界面年会邀请函

  方法/步骤

  首先我们先选定H5页面设计的网站,这里我用的是WPS旗下的H5页面设计平台,每家的H5页面设计平台可能都略有不同,但大多制作方法都大同小异,这里大家可以多多尝试后选择自己喜欢的一家;

  要制作H5年会邀请函,我们必须要找到一个合适的年会邀请函模板,这里我们点击“更多模板”——“场景”——“邀请函”,在众多的邀请函里面挑选出合适的年会邀请函模板即可;

  选定年会邀请函好模板后,我们将鼠标移动至模板上方,会出现“预览”、“立即使用”两个选项,这里我们可以先点击“预览”,查看整个模板,觉得合适的话点击“立即使用”就可以了;

  点击“立即使用”后跳转至下图所示的H5后台编辑页面,大家可以在此编辑,从下图可以看出我们的编辑后台,主要分为“预览区”、“编辑区”、“菜单栏”三部分组成;

  左侧的“预览区”我们可以看到每一页旁有四个小图标,分别是:“删除”、“收藏”、“克隆页”、“模板”,分别对应页面的相应操作,这里说一下“克隆页”和“模板”,我们可以使用“克隆页”制作出一个和本页面一模一样的页面,而“模板”是可以给我们提供其他版式模板供我们替换本页面;

  接下来我们进入H5年会邀请函的制作;首页,作为第一个向大家展示的页面,重要性不言而喻,回归主题我们说说首页的3要素主要有:企业logo、企业全称、活动主题;活动主题模板自带不需改动了,只需把公司全称、logo放入即可;

  那怎么把logo放到首页上呢?具体操作:点击“菜单栏”——“图片”——“我的图片”——“上传图片”,然后在电脑上选择自己准备好的图片将其上传至“我的图片”,然后点击该图片就自动添加至首页页面了,再自行调整位置及大小就可以了;

  接着我们将“领导寄语”放在第二位,表示对于邀请的宾客的尊重及礼遇,将之前准备好的内容复制、粘贴替换掉模板内容即可,记得做好文字的字体、颜色调整;第三页我们添加进一年公司的具有代表性的大事记,以此来展示公司雄厚的实力;

  第四页,为受邀宾客奉上年会的流程,方便他们了解年会的活动过程;第五页,将年会召开地点、时间、联系人等相关信息填写好;最后一页,向所有受邀宾客送上温馨祝福,并切记公司全称及公司logo。

  h5怎么制作邀请函?通过以上的内容,我们已经了解了h5制作邀请函的方法了,可见,h5制作邀请函的步骤比较多,大家一定要认真谨慎,如果还有疑问的话,可以咨询遇柬你邀请函制作公司。

推荐模板

查看更多

猜你想找

最新文章

随机文章