Dreamweaver CC教程:插入客户端图像地图
Dreamweaver CC教程:插入客户端图像地图
了解如何在 Dreamweaver 中使用图像地图为您的网站创建交互式热点。
图像地图 指已被分为多个区域(称为热点)的图像;当用户单击某个热点时,会发生某种动作(例如,打开一个新文件)。
客户端图像地图将超文本链接信息存储在 HTML 文档中,而不是像服务器端图像地图那样,存储在单独的地图文件中。当站点访问者单击图像中的热点时,相关 URL 被直接发送到服务器。这样使得客户端图像地图比服务器端图像地图要快,因为服务器不必解释访问者的单击位置。
Dreamweaver 并不改变现有文档中对服务器端图像地图的引用;在同一文档中,可以同时使用客户端图像地图和服务器端图像地图。不过,同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。若要在文档中包含服务器端图像地图,必须编写相应的 HTML 代码。
插入客户端图像地图
在插入客户端图像地图时,请创建一个热点,然后定义用户单击此热点时所打开的链接。
注意:
可以创建多个热点,但它们是同一图像地图的一部分。
1、在“文档”窗口中,选择图像。
2、在属性检查器中,单击右下角的展开箭头,查看所有属性。
3、在“地图”字段中,为该图像地图输入一个唯一的名称。如果在同一文档中使用多个图像地图,要确保每个地图都有唯一名称。
4、若要定义图像地图区域,请执行下列操作之一:
创建热点后,出现热点属性检查器。
5、在“链接”字段中,单击文件夹图标以浏览到并选择在用户单击该热点时要打开的文件,或者键入其路径。
6、在“目标”下拉列表中,选择应在其中打开该文件的窗口或键入其名称。
当前文档中所有已命名框架的名称都显示在此弹出列表中。如果指定的框架不存在,所链接的页面会加载到一个新窗口,该窗口使用您所指定的名称。也可选用下列保留目标名:
注意:
只有当所选热点包含链接后,目标选项才可用。
7、在“替换文本”框中,键入在纯文本浏览器或手动下载图像的浏览器中显示的替换文本。有些浏览器在用户将指针滑过热点时,将此文本显示为工具提示。
8、重复第 4 步到第 7 步,定义该图像地图中的其他热点。
9、完成绘制图像地图后,在文档中的空白区域单击以更改属性检查器。
相关内容
-
Dreamweaver CC教程:Dreamweaver 支持的编程语言
Dreamweaver CC教程:Dreamweaver 支持的编程语言,编程语言,支...
-
Dreamweaver CC教程:正则表达式
Dreamweaver CC教程:正则表达式,正则表达式,搜索,换行符,教程,...
-
Dreamweaver CC教程:设置代码外观
Dreamweaver CC教程:设置代码外观,设置,选项,缩进,教程,视图,...
-
Dreamweaver CC教程:默认在代码视图中打开文件
Dreamweaver CC教程:默认在代码视图中打开文件,默认,视图,打开...
-
Dreamweaver CC教程:设置代码改写首选参数
Dreamweaver CC教程:设置代码改写首选参数,设置,参数,标签,选...
-
Dreamweaver CC教程:在Dreamweaver中处理代码
Dreamweaver CC教程:在Dreamweaver中处理代码,工作区,拆分,文...
-
Dreamweaver CC教程:服务器行为代码
Dreamweaver CC教程:服务器行为代码,服务器,教程,检测,显示,代...
-
Dreamweaver CC教程:XHTML 代码
Dreamweaver CC教程:XHTML 代码,清理,文档,元素,教程,属性,标...
-
Dreamweaver CC教程:自定义键盘快捷键
Dreamweaver CC教程:自定义键盘快捷键,快捷键,教程,自定义键盘...
-
Dreamweaver CC教程:使用“插入”面板
Dreamweaver CC教程:使用“插入”面板插入代码,教程...
-
Dreamweaver CC教程:使用“环绕标签”
Dreamweaver CC教程:使用“环绕标签”,标签,教程,文...
-
Dreamweaver CC教程:设置颜色主题和代码主题
Dreamweaver CC教程:设置颜色主题和代码主题,设置,教程,选择,...
-
Dreamweaver CC教程:使用“编码”上下
Dreamweaver CC教程:使用“编码”上下文菜单,编码,...
-
Dreamweaver CC教程:充分利用编码功能
Dreamweaver CC教程:充分利用编码功能,编码,教程,建新,中创,文...
-
Dreamweaver CC教程:使用“快捷文档”
Dreamweaver CC教程:使用“快捷文档”,文档,教程,查...