Skip to main content

如何使用Dreamweaver创建图像映射

73.创建切片 (六月 2025)

73.创建切片 (六月 2025)
Anonim

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

示例:想象一下,有一个带有美国图像的图形文件。如果您希望每个州都是“可点击”的,那么他们会转到有关该特定州的页面,您可以使用图像映射进行此操作。同样,如果您有一个乐队的图像,您可以使用图像映射使每个单独的成员可以点击关于该乐队成员的后续页面。

图像地图听起来有用吗?他们当然是,但他们已经在今天的网络上失宠了。这至少部分是因为图像映射需要特定的坐标才能工作。今天的网站可以根据屏幕或设备的大小进行响应和图像缩放。这意味着当网站缩放并且图像改变大小时,预设坐标(即图像地图的工作方式)会分开。这就是为什么今天很少在图像地图上使用图像地图的原因,但它们对于演示页面大小的演示或实例仍有优势。

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

入门

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

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

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

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

图像映射的缺点

再一次,请注意图像映射有几个缺点,即使在上述缺乏对响应式网站的支持之外。首先,可以在图像映射中模糊小细节。例如,地理图像地图可以帮助确定用户来自哪个大陆,但是这些地图可能不够详细以精确定位用户的原籍国。这意味着图像映射可以帮助确定用户是来自亚洲而不是来自柬埔寨。

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

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

底线

在尝试整理设计的快速演示及其工作原理时,请不时使用图像映射。例如,如果您正在模拟移动应用程序的设计,并且您希望使用图像映射来创建热点以模拟应用程序的交互性。这比编写应用程序要容易得多,甚至可以构建使用HTML和CSS构建的当前标准的虚拟网页。但是将它们放入生产站点或应用程序是非常棘手的,应该可以在今天的网站上避免使用它们。