如何从图像创建HTML可点击原型

Question

我有一个完整的网页图像（视觉设计）（包括菜单等）。

通常我会使用InvisionFree，但学校要求我用HTML制作原型。我在HTML方面的经验很少。

我必须从头开始并用HTML构建它吗？或者，有没有一种方法可以让我使用不可见的框来覆盖我的按钮（在图像中），这样它就可以点击了？

我试着自己找，但找不到答案，我想我缺乏知识让我很紧张。我真的，真的很感谢你的帮助！非常感谢！

Answer 1

您可以使用和<area>标记创建图像映射，并将其应用于具有usemap属性的<img>。

<map name="mymap">
  <area shape="rect" coords="20,20,50,90" href="foo.html">
  <area shape="rect" coords="60,20,110,90" href="bar.html">
</map>
<img usemap="#mymap" src="image.png">

然而，这只适用于将图像转换为几乎不可用的交互式原型。

• 链接可以导航到其他页面，但您需要用HTML或其他图像创建这些其他页面。（您可以使用href="javascript:..."链接执行JavaScript，但不清楚该JavaScript将做什么，因为您的页面只是一个巨大的图像，而不是您可以操作的文档。）
• 页面上的文本将不可选择，只能由文本浏览器或屏幕阅读器读取（例如，对于视障用户），或由搜索引擎抓取
• 如果用户调整窗口大小或尝试调整文本大小，则页面内容将无法换行或调整大小。图像只能整体缩放
• 您将无法动态更改页面的外观，因为它们没有文档结构。这只是一个带有几个可点击部分的图像，可以导航到其他页面

如果你的学校要求用HTML编写演示，你可能应该用HTML来满足你的学校需求，而不是试图使用HTML标记来修饰图像。如果你这样做只是为了向观众进行互动演练，这可能还不够好，但还不清楚你会得到什么好处，这比简单地向观众展示模型图像更好。

Answer 2

您可以使用任何图形软件（如Gimp）从视觉设计中切片实际图像(http://www.gimp.org/)

如果你不熟悉HTML/CSS，你可以从一个免费的可视化/WYSIWYG HTML编辑器开始，比如：

KompoZer：http://kompozer.net/或免费试用DreamWeaver：https://creative.adobe.com/products/download/dreamweaver

在这些编辑器中，您可以像在Microsoft Word中编辑文档一样编写HTML页面。您可以插入文本、图像、设置颜色和路线。它将为您生成HTML标记。您既可以编辑标记，也可以通过界面编辑，您将立即看到结果。