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

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

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

　　用ps等图像处理软件选取并制作素材（一张背景图、一张触发按钮图标）。并将图片保存为png或者jpg格式。

　　为了保证导入的文件足够精细，在保存和选取素材时应该尽量增加素材的像素。

　　当然为了考虑到手机加载图片的流畅性，一般像素尺寸以640*1008px附近为宜。

　　打开ih5的操作页面，新建一个项目，导入选取好的素材。并且将素材分别命名为“背景”和“跳转按钮”。

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

　　调整好素材的大小和位置后，在“跳转按钮”之下插入一个“透明按钮”。

特别注意，用ih5制作HTML5中的大部分事件都是通过配合透明按钮完成的。

　　用透明按钮选框框中了“跳转按钮”素材后，在“透明按钮”下添加一个事件，到此，建立跳转之前的准备工作基本上告一段落。

　　ih5中的页面跳转链接分为两大部分。第一部分为页面外跳转。支持网页、程序和微信等。另外一部分为页面内部跳转，主要是为了丰富HTML5本身的互动性。

　　首先说明一下页面外跳转的制作方法。

　　在步骤三之后，复制需要跳转的网页。

　　点击“事件”，可以看到左上角的命令选框。

　　依次按照需要勾选触发的方式。

　　这里，为了演示的方便依次勾选“手机轻触>舞台”

　　需要注意的是所有的跳转都需要支持舞台，否则没有办法实现。

　　选择“舞台”后，会出现具体的选框。

　　在选框中选择“跳转网页”。

　　复制网址。Ih5中只支持快捷键粘贴“Ctrl+v”

设置好了之后，保存HTML5进行预览测试。确定跳转成功后可以保存退出。页面外的链接跳转也就完成了。

　　页面内的跳转和链接跳转的制作方法极其相似。

　　只需在步骤四的基础上勾选“跳转页面”即可。

　　为了操作的方便，这里另外新建页面二。并且在页面二内导入不同的素材或者做出以示区别的标记。

　　选择跳转到页面二。同样保存预览，这样一来页面内的跳转也就成功实现了。