OmniGraffle

Omnigraffle导出HTML图像映射教程

发布时间:2019-02-08 14:13:31

Omnigraffle是一款专为Mac设计的原型设计软件,这篇文章就向大家介绍一下Omnigraffle导出HTML图像映射的方法。

HTML图像映射已经存在了很长时间,并且仍然是Web上有用的界面元素。HTML图像映射通常在网站上显示为单个,有凝聚力的图像,当鼠标悬停时,会向用户显示单击某个区域然后转到该网站的其他部分的选项。

在当时,没有很好的工具来创建HTML图像映射; 你必须自己计算坐标并定义点击区域。值得庆幸的是,OmniGraffle消除了这种痛苦,因此您可以专注于您的设计工作。

HTML图像映射不同于您在OmniGraffle中执行的任何其他图像导出。原因是它们利用了Actions的强大功能,您可以使用它来定义设计中可点击区域的URL。此外,OmniGraffle会导出HTML以与图像一起使用,这样您就可以将资源上传到您的网站并立即投入使用。

例如,假设您需要为您的网站创建一个导航栏。您可以在OmniGraffle中进行设计,如下所示:

一个网站的导航栏

导航栏左侧有一个“主页”按钮,还有四个文本区域,可以让您更深入地访问网站。您可以使用“ 操作”检查器为导航栏中的每个可单击项目分配链接; 例如,以下是“Home”按钮的配置方式:

配置方式

使用“操作”检查器为导航栏中的“主页”图标指定URL

准备好导出文件后,选择文件▸导出(Option-Command-E),然后在导出面板顶部的文件类型行中选择HTML图像映射:

导出HTML图像映射

导出文件时,OmniGraffle会根据您在面板左侧的选择生成HTML文件和HTML图像类型。原始OmniGraffle文档中的URL操作将作为链接编码到图像映射中,以便可以单击图像以跟随它们。(请注意,行中的操作不包括在内,但行标签上的操作是。)

导出

源文件保存到文件夹,然后您可以测试该文件夹并与您的网站设计集成。

以上就是本文的全部内容,Omnigraffle还有许多其他功能,例如:Omnigraffle使用画笔工具复制样式教程,如果您对我们的软件感兴趣,请到中文网http://www.omnigraffle.cc购买正版


Copyright © 2019 - OmniGraffle中文网

广告位.png

×
在线客服
1516196057
客服邮箱
客服电话
17051276424