如何制作H5页面？_微吾H5自助工具_新浪博客
如何制作H5页面？
H5页面是微信当前使用广泛的一种传播手段。
下面给大家介绍借助微吾H5自助工具这个在线制作工具，简易制作出H5页面。
​工具：微信H5页面制作素材，包含图片、文案、音乐、视频等。
1、根据主题选择合适模板（此处以“旅行相册”例子）
鼠标上移到模板，点击“预览”按钮，可查看模板；
2、点击“立即使用”按钮，可复用模板，进入创作页面。
创作页面分五大模块：
单页切换：用于将不同的页面设置为当前编辑页。
编辑菜单：支持插入文本、图片、形状、视频、特效、表单、地图、音乐。
详情编辑：对选中的模块，展示相应可修改的属性。
页面预览：预览当前编辑页。
保存发布：保存页面；设置当前H5标题和描述；发布生成链接、二维码。
&3、基础功能——添加修改文字
点击菜单栏按钮“文本”，会生成文字模块。选中文字，可对其文本内容、位置、大小、颜色、透明度等进行设置。
4、基础功能——添加修改图片
添加修改背景：选择背景——在详情编辑模块点击“替换”按钮，替换新图片。
添加修改图片：进入“我的图片”，上传并选择需要替换的图片，点击“设置为背景”按钮
(注意:可批量上传20张图片，单张图片需小于1M)
5、装饰功能——添加装饰蒙层
选中形状，拖动改变大小和位置。并将颜色，透明度设置为自己所需。
6、装饰功能——添加配饰
点击菜单栏的“图片”按钮，进入公共素材库，选择-相应配饰，添加到页面上。
7、特效功能——添加修改动画
选择需要添加动画的模块（图片/文字），点击“动画”按钮。设置动画。
点击“播放动画”按钮可实时看到动画效果。
微吾H5自助工具
博客等级：
博客积分：0
博客访问：2,929
关注人气：0
荣誉徽章：推荐这篇日记的豆列
······0)?'':'disabled' ]" title="图集" @click="addWebPicLayerClick($event)">
0)?'':'disabled' ]" @click="addPicLayerClick($event)" title="{{ (userInfo.mid!='')?'添加图片':'登录后才能添加图片' }}">
0)?'':'disabled' ]" @click="addTxtLayerClick($event)" title="添加文字">
0)?'':'disabled' ]" title="添加图形" @click="shapeBtnClick($event)">
{{ (indexi + 1) + "、" + group._name }}
{{ layer.val }}
欢迎使用在线制作工具
场景属性区
{{ curLayer._typeName }}属性区
0)?'':'disabled']" @click="playLayerEffectClick($event)">播放
{{ effect.name }}
{{ effect.name }}
边框及背景
声音属性区
{{ sound.name }}
分享属性区
场景模板区
复合图层属性区
90)? (winsize.height - 513)/2 : 90)-31)
+ 'px'}, {'z-index': 1000}, {background: 'rgba(0,0,0,.5)'},{ left: '81px'},{ top: '31px'}, { 'pointer-events': 'none'}]">
90)? (winsize.height - 513)/2 : 90) + 'px'}, { 'pointer-events': 'none'}]">
90)? (winsize.height - 513)/2 : 90) + 'px'}, { 'pointer-events': 'none'}]">
90)? (winsize.height - 513)/2 : 90) + 480) + 'px'}, { 'pointer-events': 'none'}]">
90)? (winsize.height - 513)/2 : 90)
+ 'px' }]">
{{ clayer.link.txt }}
90)? (winsize.height - 513)/2 : 90) + 'px' }]">
90)? ((winsize.height - 513)/2 - 16) : (90 - 16) ) + 'px' }]">
90)? (winsize.height - 513)/2 : 90) + 'px' }]">
90)? (winsize.height - 513)/2 : 90) + 'px' },{'z-index': 11}, {width: '0px'}, { height: '480px'}, {'border-left': '1px dashed #f00'} ]">
90)? (winsize.height - 513)/2 : 90) + 'px' }, {'z-index': 11}, {width: '0px'}, { height: '480px'}, {'border-left': '1px dashed #f00'} ]">
90)? ((winsize.height - 513)/2 - 24) : (90 - 24) )
+ 'px' }]">
动画播放中...
90)? ((winsize.height - 513)/2 - 56) : (90 - 56) ) + 'px' }]" >
90)? ((winsize.height - 513)/2 - 56) : (90 - 56) ) + 'px' }]" >
90)? ((winsize.height - 513)/2 - 56) : (90 - 56) ) + 'px' }]">
{{ curLayer.val }}
{{ clayer.link.txt }}
{{ curLayer._isLock?"固定":"移动" }}如何编辑出逼格十足微信公众号？ - 91运营网
如何编辑出逼格十足微信公众号？
以上看起来酷炫中带有些高冷的格式是咋整的？微信官方日前披露公众号已超580万，并每天以万计增长！那么，如何在数以百万计的公众号中脱颖而出并博得用户青睐？那些有助于提高公众号逼格的微信运营冷知识，你又知道多少？
看看STC为大家分享的几门高逼格冷知识(简称高冷知识)，绝对有效。
冷知识 No.1DIY微信图文格式
作为公众号与粉丝勾搭的唯一途径，图文实在是运营的重中之重。微信团队为了规范图文并保证微信平台的“健康发展”，对图文编辑设置了诸多限制——不允许外链，不允许加音频，极度有限的图文编辑功能……
但是，公众号运营群众的智慧是无穷的，大家可以发现很多图文都带有非常精美的各种格式，他们是怎么做到的呢？下面将由浅入深为你介绍几种玩法，看看哪种适合你吧：
★ 入门级玩法——收藏各种格式，用到的时候复制粘贴。
这应该算是最原始的方法了，首先你要在平时多收藏一些带有精美图文格式的文章，用到的时候在网页上打开，选中你要的格式，复制到微信编辑器里，将文字替换即可，如下图所示：
★★ 中级玩法——善用各种在线编辑器。
除了到处搜刮别人的“劳动成果”以外，目前网络上也有一些免费的图文编辑软件，这些软件提供可编辑的模板，只需要在编辑器上编完格式之后复制粘贴到微信后台编辑器就行了。比如以下是用各种编辑器格式做的例子：
有兴趣的朋友可以查看《如何让公众号文章排版更漂亮？ 》（链接屏蔽，可阅读原文查看），里面推荐了几个功能强大的编辑器！
★★★ 骨灰级玩法——传说中的HTML+CSS
关于HTML和CSS，简单来说就是网页技术，如果把搭建网页比喻成盖房子，那么HTML技术是负责把房子盖起来，CSS则负责装修。需要了解更详细的知识，可以公众号回复“CSS入门经典”可免费获取《HTML与CSS入门经典》。
其实你看到的这些带有精美格式的内容都是用HTML和CSS做的，我们通过修改这些格式的参数就可以得到任意我们想要的样子，那么如何修改这些图文格式呢，不懂技术也可以吗？是的，以下的方法适合任何零技术基础的运营者：
Step 1 首先你要装一个Chrome浏览器(Opera和Firefox也可以，但是Chrome是最佳选择)。在浏览器中打开带有你想要的格式的网页，选中你要用的格式对应的内容块，如下图所示，我们选中这个带有圆角矩形背景的内容块。
Step 2 右击出现菜单，选择“审查元素”。你会看到浏览器下方出现了一个窗口，这些就是内容块对应的代码，如果你认真观察，可以看到代码中有内容块对应的文字，而文字以外的那些英文字母就是控制文字格式的，比如文字的颜色、背景、下划线等等，都是这些代码控制的。接下来就是通过修改代码中相应的参数来修改格式。
Step 3 如何修改参数呢？你需要在这些选中的代码上右击选择“Edit as HTML”，此时你会发现这些代码成了可编辑的状态。然后找到background-color: rgb(255, 255,255)这一串代码，这里是跟背景颜色有关的。此时我们将数字改为(255,0,0)，然后按下ESC或者鼠标点击网页空白处，矩形背景的颜色成功变成了红色！如下图所示：
至此你已经学会如何更改格式的颜色了，如果你还想改成其他颜色，只需调整rgb()中的数值。除了改变颜色以外，你还可以改变其他的格式，比如矩形的边框border，矩形的圆角radius等等，根据单词的中文意思修改对应属性，实在不知道逐一修改看看哪些格式产生变化就行了。
对于木木个人而言，比较懒，真要操作修改这些样式格式的时候，也懒得搬到网页制作工具中去，一般都是直接用360浏览器，然后按F12进入到开发人员工具，如下图：
然后选中要修改的样式，点击“审核元素”或直接点击下面的放大镜寻找要修改的样式，选中之后在右边就可以直接去点击修改样式了，和上面一样，如下我把圆角、背景颜色、大小都改了一下：
冷知识 No.2哪来那么多炫酷的GIF动画
为了改善微信图文略显单调的表现形式，现在很多公众号的用上了GIF动画，但是这些动画都是哪来的呢？以下介绍几种简单的方法，供大家参考：
★ 入门级方法——传统的搜索方式。
采用传统的搜索方式，建议关键词：GIF动画，动画表情。这是最简单直接的办法了，现在网上有很多免费的资源，不过质量一般而且是在太多太杂，筛选成本非常高。
★ ★中级方法——社交工具表情包。
大家应该都用过微信、QQ或者其他社交工具和论坛的表情包，制作非常精美。实际上这些表情都是一些gif动画，我们可以通过一些非常简单的技术手段把表情转换为GIF文件。
以微信为例，我们来看看如何得到微信炫酷表情的GIF文件。
首先，你需要在你的微信中安装好你想要的表情。然后将你的手机连接电脑进入手机的SD卡，进入这个文件路径/tencent/MicroMsg，此时你可以看到有个文件夹的名称是一串数字和字母的组合，进入这个乱码文件夹并找到emoji文件夹。
emoji里面就是表情包的文件了，每个表情包都对应一个文件夹，比如小黄人(Minion)系列的就是com.tencent.xin.emoticon.minion这个文件夹。
进去以后你会发现还是很多乱码文件，但是请不要着急，仔细观察以后，你会发现这些文件中大部分末尾都是带有0123这些数字的，事实上这些带有数字的文件就是各个gif的帧，这些都是静态图片。现在你需要把末尾不带数字的那些文件复制出来，放到本地的文件夹中。最后你只需要将文件重命名为xxx.gif，就能看到gif的效果。
这样方式可以得到很好GIF图片，而对于微信公众号以及朋友圈常见的emoji表情，那些你经常看到别人使用在公众号标题的表情，在《微信标题特殊符号大全 ? 》一文中已经给大家推荐了，可以很大一定程度上提升公众号图文点击率。
★ ★★高级方法——制作GIF图片。
如果你觉得一些免费可商用的资源还不足以满足你的需求，除了收集以外，你也可以自己制作。现在有很多免费的GIF制作工具，方法非常简单，只需简单添加准备好的图片并设置播放快慢等参数即可。需要GIF制作工具的，博客里倒是有几款，可以留言。
冷知识 No.3带链接的文字消息
如下图所示，蓝色字体的文字是带链接的，点击可跳转到相应页面。
这是如何实现的呢?对于你要加上链接的文字，你只需要在编辑消息的时候添加一段HTML代码，具体的格式是。a
href=”跳转的链接”&需要添加链接的文字 /a&。通过这样的代码，你就不用把一大串影响美感的地址放到回复消息中了。
具体关于微信公众号中文字链接的利用这里不多说，之前《如何巧妙的在公众号利用文字链接？ 》一文中就有讲解。
冷知识 No.4引导关注技巧：让H5网页带有公众号信息
目前用户关注公众号的途径主要有两个：图文标题下方的公众号名称(“蓝色小字”)，以及在右上角菜单中“查看公众号”。第一种方法不多说了，很多公众号都有各种各样引导关注的尝试。
这里要介绍的是如何让普通的H5网页也带有“查看公众号”的信息。请先看下面两个截图的对比，能看到什么区别吗。
一般来说，在图文的页面是能够在右上角菜单中出现“查看公众号”一项的，但在普通网页中就没有，因为图文是带有公众号信息的，所以品牌自己做的网页，微信并无法识别到底是哪个公众号。那右侧的网页为什么有公众号信息呢？
原因就在于右边的网页是图文的“阅读原文”访问的，左边的网页则没有。所以，如果你希望你的网页带有公众号的信息，那就把他放到“阅读原文”中，并通过“阅读原文”访问，以此转发给朋友。而且值得一提的是，当它被朋友二次转发的时候，还是会带有公众号信息。
很多H5网页最后会提示用户通过右上角菜单关注公众号，但却怎么找也找不到任何关注公众号的入口，最后也只能放弃关注了。所以这里也是要提醒大家，如果在你制作的H5网页中有引导用户通过“查看公众号”关注的提示，那么确保你的网页带有公众号信息，否则本来想关注你的用户如果找不到“查看公众号”这一项，就白白流失了。所以，以后转发品牌的H5网页时，请通过“阅读原文”的方式访问再转发吧！
来源：公众号：mumuseo
勾搭小编微信号gaojier912,加入91运营官方社群，会运营的人都在这里了