发布时间:2020-05-20 10: 12: 25
作为一个网页制作者,大家在制作网页的时候,一般需要对网页效果进行预览,才能了解网页效果是否达到个人预期,以便于接下来的设计制作。另外,当大家制作好网页以后,也会需要对网页文件进行导出得到最终成品。
因此,下面小编就利用交互动效设计软件Hype 4,通过一篇教程,教大家如何来对网页进行预览和导出。
1、网页端网页预览
默认情况下, 系统默认的浏览器图标就是“预览”按钮,如下图1红框所示,这里小编Mac默认的浏览器为Safari浏览器,单击该按钮可在默认浏览器中打开当前文档。
单击“预览”按钮旁边的下拉菜单,将显示所有已安装的常见浏览器的列表,选择任意一个浏览器都能在该被选择的浏览器中进行网页预览,并且预览按钮图标变为该浏览器的图标,如下图2所示。
选择好浏览器以后,点击“预览”按钮,系统就会自动打开浏览器并进行网页预览。
2、手机端网页预览
那么,如果做的是手机端的网页,如何在大家自己的iOS设备中进行预览呢?具体操作步骤如下:
第一步,从iOS设备的 App Store中,搜索并下载Hype Reflect,如下图3所示。
第二步,确保Mac电脑和iOS设备连接到同一个Wi-Fi网络中。
第三步,在Hype预览按钮中,找到自己的iOS设备,点击该设备,如下图4所示,然后点击“预览”。
导出网页为HTML文件,首先需要打开Hype的“文件”菜单,然后选择“导出为HTML5”,再点击“文件夹”,如下图5所示。
选择导出HTML5文件的存储位置,然后勾选上“一并保存.html文件”,最后点击“存储”即可导出网页。
导出完成以后,会得到2个文件,如下图7所示。其中一个是网页HTML文件,另外一个是一个文件夹,保存了网页中存储的图像,视频和文件资源。
好了,这就是小编整理的关于使用这款交互动效设计软件预览和导出网页的具体教程,之后还会有更多更有趣、有用的Hype教程发布在中文网站上,欢迎大家前往关注!
作者署名:包纸
展开阅读全文
︾
读者也喜欢这些内容:
怎么在Hype中设置掉落弹起的动画效果
如果使用Hype制作球体掉落弹起的效果,是不是只能通过绘制运动路径的方法?其实,我们有更加便捷的方法,就是在关键帧过渡方式中选择弹起的方式,让元素在开始帧与结束帧之间呈现弹跳的动画。...
阅读全文 >
如何在Hype制作3秒后出现下一步的页面(场景设置)
为了让浏览者在阅读页面内容时,花费足够的时间阅读,减少因阅读过快造成信息遗漏,一些页面会设置倒计时按钮。浏览者需要在倒计时完成后,才能看到“下一步”、“下一页”等切换页面的按钮。...
阅读全文 >
利用Hype制作汽车驾驶的动态路线图
在一些电视节目里,为了保护隐私,经常会使用动画来展现当前地点与目的地的行走路径,比如图1所示的简单汽车驾驶路径。...
阅读全文 >
利用Hype制作鼠标移至切换图片的效果(场景设置)
在一些图库网站里,我们经常会使用到滑动切换图片的功能。该功能可帮助我们快速地浏览图库中的图片,避免进行繁琐的打开、关闭图片的操作。...
阅读全文 >