使用Dreamweaver创建图像地图的技巧

使用图像映射的优点和缺点

在网页设计的历史中,有许多网站使用了一种称为“图像映射”的功能。 这是附加到页面上特定图像的坐标列表。 这些坐标在该图像上创建超链接区域,必要时为图形添加“热点”,每个图形都可以编码以链接到不同的地方。 这与仅向图像添加链接标记的方式大不相同,这会导致整个图形成为到单个目标的大链接。

示例 - 想像一下带有美国图像的图形文件。 如果你希望每个状态都是“可点击的”,以便他们转到有关特定状态的页面,可以使用图像映射来完成此操作。 同样,如果您有一个音乐乐队的图像,您可以使用图像映射让每个成员都可以点击该乐队成员的后续页面。

图像地图听起来有用吗? 他们当然是,但他们已经在今天的网络上失宠了。 这至少部分是因为图像映射需要特定的坐标才能工作。 今天网站建立在响应和图像缩放基础上的屏幕或设备的大小 。 这意味着当网站缩放并且图像尺寸发生变化时,预先设置的坐标(图像地图的工作方式)会分崩离析。 这就是为什么图像地图目前很少用在制作网站上,但是它们对于演示或强制大小页面的实例仍然有优势。

想知道如何创建图像映射,具体如何使用Dreamweaver进行创建? 。 这个过程并不是特别困难,但也不是那么容易,所以在开始之前你应该有一些经验。

入门

让我们开始吧。 您需要采取的第一步是将图像添加到您的网页。 然后你会点击图片来突出显示它。 从那里,你需要进入属性菜单(点击三个热点绘图工具之一:矩形,圆形或多边形。不要忘了命名你的图像,你可以在属性栏中进行命名。它就是你想要的任何东西。以“map”为例。

现在,使用这些工具之一在图像上绘制所需的形状。 如果您需要矩形斑点,请使用矩形。 圆圈也一样。 如果您想要更复杂的热点形状,请使用多边形。 这是美国地图的例子中可能使用的,因为该多边形将允许您放置点并在图像上创建非常复杂和不规则的形状

在热点的属性窗口中,输入或浏览到热点应链接的页面。 这是创建该可链接区域的原因。 继续添加热点直到您的地图完成,并添加您想要添加的所有链接。

完成后,请在浏览器中查看您的图像地图,以确保其正常工作。 点击每个链接以确保它转到正确的资源或网页。

图像映射的缺点

再一次,请注意,映像图有几个缺点,即使上述缺乏对响应式网站的支持也是如此。 冷杉,小的细节可能在图像映射中被遮蔽。 例如,地理图像地图可能有助于确定用户来自哪个大陆,但这些地图可能不够详细以查明用户的原籍国。 这意味着图像地图可能有助于确定用户是来自亚洲,而不是来自柬埔寨。

图像地图也可能加载缓慢。 它们不应该在网站上多次使用,因为它们占用了太多空间用于网站的每个页面。 单个页面上过多的图像映射会造成严重的瓶颈和对网站性能的巨大影响。

最后,对于有视觉问题的用户访问图像地图可能并不容易。 如果您确实使用了图像映射,则还应该为这些用户创建另一个导航系统作为替代。

底线

当我试图组装一个设计的快速演示以及它如何工作时,我会不时使用图像映射。 例如,我可能正在模拟移动应用程序的设计,我想使用图像映射来创建热点来模拟应用程序的交互性。 这比编写应用程序更容易,甚至可以用HTML和CSS构建按照当前标准构建的虚拟网页。 在这个特定的例子中,因为我知道什么设备可以演示设计,并且可以将代码扩展到该设备,但映射图可以工作,但将它们放入生产站点或应用程序非常复杂,应该避免在今天网站。

Jennifer Krynin的原创文章。 9/7/17由Jeremy Girard编辑。