如何在网页设计中定义图像映射

  • 2019-08-12 12:17:01
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

网页设计中,图像映射(Image Map)就是在一张图片的不同区域建立链接,指向不同的URL。图片上的区域也称为“热点(hotspots)”。当单击该热点区域时,会触发超链接,并跳转到其他网页或网页的某个位置。图像地图是一种特殊的超链接形式,常用来在网页设计时图像中设置局部区域导航。

【操作步骤】

第1步,插入图像,然后选中图像,打开【属性】面板,并单击该面板右下角的展开箭头,显示图像地图制作工具。使用【指针热点工具】、【矩形热点工具】、【椭圆热点工具】和【多边形热点工具】可以调整和创建热点区域。

 •【地图】文本框:输入热点区域名称,便于引用。   

•【指针热点工具】按钮:调整和移动热点区域。   

•【椭圆热点工具】按钮:在选定图像上拖动鼠标指针可以创建圆形热区。   

•【矩形热点工具】按钮:在选定图像上拖动鼠标指针可以创建矩形热区。   

•【多边形热点工具】按钮:在选定图像上,单击选择一个多边形,定义一个不规则形状的热区。单击【指针热点工具】按钮可以结束多边形热区定义。

第2步,在【属性】面板的【地图】文本框中输入热点区域名称。如果一个网页的图像中有多个热点区域,必须为每个图像热点区域起一个唯一的名称。

第3步,选择一个工具,根据不同部位的形状可以选择不同的热区工具,这里选择【矩形热点工具】,在选定的图像上拖动鼠标指针,便可创建出图像热区。第4步,热点区域创建完成后,选中热区。   

•【链接】文本框:可输入一个被链接的文件名或页面,单击【选择文件】按钮可选择一个文件名或页面。如果在【链接】文本框中输入“#”,表示空链接。   

•【目标】下拉列表框:要使被链接的文档显示在其他地方而不是在当前窗口或框架,可在【目标】下拉列表框中输入窗口名或选择一个框架名。   

•【替换】文本框:在该文本框中输入所定义热区的提示文字。在浏览器中当鼠标移到该热点区域中将显示提示文字。可设置不同部位的热区显示不同的文本。

第5步,用【矩形热点工具】创建一个热区,在【替换】文本框中输入提示文字,并设置好链接和目标窗口。

第6步,以相同的方法分别为各个部位创建热区,并输入不同的链接和提示文字,保存并预览,这时单击不同的热区就会跳转到对应的页面中。

管理链接

前面几节介绍了网页制作时单个链接的建立,而在一个网站里包含着形形色色的多个链接,如何安排和管理这些链接,关系到网站能否良好地运作。

设计结构清晰的链接

在网站中建立清晰的链接,既提供给浏览者一个良好的访问环境,也方便网站管理人员的管理与维护。为此,要考虑到以下几点。

1、设计一个清晰的网站结构图

首先要定位网站的主题,如个人网站、商业网站、知识类网站和娱乐类网站等,然后再来看这个网站要包含哪些内容,需要多少网页文件。可以画一个草图来理清思路。

2. 首页上的链接要“有去有回”

不论网站的链接多么丰富,都要随时给浏览者回到首页的可能,使之不会在互联网上迷失方向。

3. 给图像链接做文字说明简单的文字说明可以让浏览者了解要链接的目标。为图像链接做说明有两种方法。   

•把文字直接做在图像上,成为图像的一部分。   

•把文字直接写在【属性】面板的【替换】文本框中。

这样当鼠标指针指向图像时,就会出现文字提示。

当前文章标题:如何在网页设计中定义图像映射

当前URL:http://www.lyjtt.cn/news/wzzz/3072.html

上一篇:如何在网页设计中定义电子邮件链接

下一篇:在网页设计中使用【资源】面板管理链接

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)