Question

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

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

我是否必须从头开始并使用HTML构建它？或者是否有一种方法可以使用覆盖我的按钮的隐形盒（在图像中），以便它可以点击？

我试着寻找自己，但我找不到一个anwser，我认为我缺乏知识让我很紧张。我真的非常感谢你的帮助！非常感谢你！

Answer 1

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

<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，可以从免费的visual / WYSIWYG HTML编辑器开始，如：

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

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

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

2 个答案: