【平面设计必备】ih5中的页面跳转和链接【百科全说】

用ih5制作HTML5过程中，我们经常需要页面跳转或者网页载入，增加HTML5的互动性。于是乎制作页面跳转和链接成为了许多平面设计师的首选。今天，变幻的不等式就跟各位迷友们聊聊，如何在ih5中制作页面跳转和链接。

操作方法

01

用ps等图像处理软件选取并制作素材（一张背景图、一张触发按钮图标）。并将图片保存为png或者jpg格式。为了保证导入的文件足够精细，在保存和选取素材时应该尽量增加素材的像素。当然为了考虑到手机加载图片的流畅性，一般像素尺寸以640*1008px附近为宜。
02

打开ih5的操作页面，新建一个项目，导入选取好的素材。并且将素材分别命名为“背景”和“跳转按钮”。导入素材之前，为了防止页面次序杂糅，务必先行新建一个页面。并且按照图中所示意的结构进行分别导入。有需要调整层次父子关系的，也可以将“跳转按钮”放置于“背景”之下。
03

调整好素材的大小和位置后，在“跳转按钮”之下插入一个“透明按钮”。特别注意，用ih5制作HTML5中的大部分事件都是通过配合透明按钮完成的。用透明按钮选框框中了“跳转按钮”素材后，在“透明按钮”下添加一个事件，到此，建立跳转之前的准备工作基本上告一段落。
04

ih5中的页面跳转链接分为两大部分。第一部分为页面外跳转。支持网页、程序和微信等。另外一部分为页面内部跳转，主要是为了丰富HTML5本身的互动性。首先说明一下页面外跳转的制作方法。在步骤三之后，复制需要跳转的网页。点击“事件”，可以看到左上角的命令选框。依次按照需要勾选触发的方式。这里，为了演示的方便依次勾选“手机轻触>舞台” 需要注意的是所有的跳转都需要支持舞台，否则没有办法实现。选择“舞台”后，会出现具体的选框。在选框中选择“跳转网页”。
05

复制网址。Ih5中只支持快捷键粘贴“Ctrl+v” 设置好了之后，保存HTML5进行预览测试。确定跳转成功后可以保存退出。页面外的链接跳转也就完成了。
06

页面内的跳转和链接跳转的制作方法极其相似。只需在步骤四的基础上勾选“跳转页面”即可。为了操作的方便，这里另外新建页面二。并且在页面二内导入不同的素材或者做出以示区别的标记。选择跳转到页面二。同样保存预览，这样一来页面内的跳转也就成功实现了。

【平面设计必备】ih5中的页面跳转和链接

操作方法

相关推荐