H5页面如何制作？ / 木子杰软件教程

H5页面是随着移动互联网发展以及html定稿，特别是微信影响范围扩大而发展起来的，H5页面以其低成本、炫酷、方便的特点，受到了不少品牌推广者的欢迎。在这里就给大家介绍如何借助兔展平台，不懂代码也可以制作出H5页面。

进入平台

01

选择模板首先进入网站后注册账号并登录后，即可进入制作界面。在界面上可以看很多可供使用的模板，根据自己的需要，点击相应的模板。
02

进入制作平台选择完模板后，会自动进入制作平台。在制作平台上，主要分三大区域：左侧的作品结构显示区域，中间的是作品制作区域，右侧的是组件属性修改区域。

功能介绍

01

文字 1、功能定义：用于展示文字内容，通过修改文字的显示属性，可以生成各式各样的显示效果。 2、操作方法：点击右侧的文字选项，编辑面板的右上角会出现文字输入框，双击输入框可以修改文字内容；修改右侧的属性选项，可以改变文字的显示样式。 3、属性说明： 1）字体：改变文字的字体，提供的是兔展数据库的字体，非电脑本地字体。 2）字号：修改文字的显示大小。 3）行距：修改两行文字间的间距。 4）调色板：修改文字颜色。 5）宽度：修改文字输入框的宽度，单位像素。 6）高度：修改文字输入框的高度，单位像素。 7）透明度：修改文字的透明度，100%为不透明，0%为全透明。 8）旋转：调整文字与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。
02

图片 1、功能解释：用于显示图片，通过修改图片的显示属性，可以改变图片的大小、透明度、角度等。 2、操作方法： 1）激活功能：点击右侧的图片选项，编辑面板的右上角会出现兔展的logo图片。 2）上传新图片：点击属性栏中的上传按钮，上传本地电脑中的图片进入替换。 3）图片库中的图片：如果之前已经上传过图片，可以从图片库中选择需要显示的图片。 4）截图：按住鼠标左键拖动选择图片区域，然后点击截图按钮或者双击选中的图片区域，便可以裁剪出选中的图片区域。 3、属性说明： 1）宽度：修改图片的宽度。 2）高度：修改图片的高度。 3）原比例：此选项打上勾好，图片的宽度和高度将按照图片原来的比例显示，修改其中的一个数值，另外一个数值会除之改变。 4）透明度：修改图片的透明度，100%为不透明，0%为全透明。 5）旋转：调整图片与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。
03

按钮 1、功能解释：用于添加链接按钮，可以添加一切页面的链接，如:微博链接、微信公众号关注链接、官网链接、淘宝链接等等。 2、操作方法：点击右侧的按钮选项，编辑面板的右上角会出现文字输入框；修改右侧的属性选项，可以改变按钮的参数和样式。 3、属性说明： 1）文字：修改按钮上显示的文字。 2）链接：需要按钮链接到的页面，注意链接开头要包含“ http:// ”。 3）填充色：按钮上的背景颜色。 4）边框色：按钮的边框颜色。 5）形状-边框：修改边框的宽度，“0”代表按键无边框。 6）边框-圆角：修改边框边角的圆润程度，数值越大，按钮边角越圆润。 7）宽度：修改按钮的宽度。 8）高度：修改按钮的高度。 9）透明度：修改按钮的透明度，100%为不透明，0%为全透明。 10）旋转：调整按钮与水平线的夹角，正数为顺时针旋转，负数为逆时针旋转。
04

表单 1、功能解释：是允许用户在表单中输入并提交文本信息的功能组件，用户提交的信息可以在帐户栏目下的表单数据中显示。表单中，可以自定义每个选项的名称和项目的数量。 2、操作方法：点击右侧的表单选项，弹出新建表单窗口，对表单内容进入添加。 3、属性说明： 1）表单标题：添加表单的标题。 2）行标题：添加表单的行标题。 3）按钮内容：添加按钮的显示文字。
05

底图 1、功能解释：设置页面的背景颜色或者图片。 2、操作方法：点击右侧的背景选项，对具体属性进行修改。 3、属性说明： 1）背景色：修改背景颜色，背景颜色将以纯色显示。 2）上传新图片：点击属性栏中的上传按钮，上传本地电脑中的图片作为背景。 3）图片库中的图片：如果之前已经上传过图片，可以从图片库中选择需要显示的图片作为背景。 4）截图：按住鼠标左键拖动选择图片区域，然后点击截图按钮或者双击选中的图片区域，便可以裁剪出选中的图片区域作为背景。
06

音乐 1、功能解释：设置修改当前作品的背景音乐。 2、操作方法：点击右侧的配置选项，点击选择文件按钮，从弹出的窗口中选择出本地电脑的音频文件，点击确定，然后点击上传按钮。
07

扩展 1、功能解释：设置当前页面切换效果和扩展菜单。 2、操作方法：点击右侧的配置选项，选择须要的效果进行修改。
08

动画 1、功能解释：用于设置组件的动画效果，使展示显得更酷炫。 2、操作方法：选中需要设置动画效果的组件，点击右侧的动画选项，选择需要的动画效果。 3、可设置动画的组件：文字、图片、按钮。