Dreamweaver制作地图链接综合实例

  在浏览网页时,经常能看到一些图片上的特殊超链接,即在一张图片上有多个局部区域与不同的网页链接,比如本实例的地图链接。

  效果说明

  地图中标示出了中国的各个省市和直辖市,当在地图上单击某个特定区域时,就会跳转到相应地图区的说明页面,如图 39-1 所示。


  创作思想

  本实例将利用 Dreamweaver 的图像热点功能完成地图链接实例。

  操作步骤

  ( 1 )打开本实例源文件夹中的 map.htm 文件,在页面中插入一幅中国地图,如图 39-2 所示。


  提示:本实例所用到的中国地图放在本实例素材文件夹中的 iamges 文件夹中,图片名称为 map.gif 。

  ( 2 )绘制热点区域。单击页面上的中国地图,然后利用属性栏中的【矩形热点】工具在地图上绘制热点区域,如图 39-3 所示。


  ( 3 )当绘制完矩形热点区域后,图像属性面板将变成热点属性面板,如图 39-4 所示。在链接栏处选择热点区域所要链接的目标网页,在【替代】框中填入相关的提示说明,并使链接的网页在新窗口中打开。


  提示:在这里将【目标】设置为 _blank 代表在新 的浏览器窗口中打开被链接的文档,并保持当前窗口可用。【目标】框中其他各选项的含义是, _parent 代表在链接所在的父框架集中打开链接文档; _self 代表在当前框架中打开链接文档,替换该框架中的内容; _top 代表在当前文档的最外层框架集中打开链接文档,替换所有框架中的内容。

  ( 4 )绘制其他热点区域。使用属性面板中的另外两个热点工具【椭圆形热点】工具和【多边形热点】工具同样可以在地图上绘制热点并设置相关的热点属性,其使用方法和【矩形热点】工具相同。读者可利用这 3 个热点工具在地图上继续绘制其他热点区域并设置链接,最终效果如图 39-5 所示。


  ( 5 )保存页面文件并按 F12 键进行预览。至此,本实例操作完毕。

  本实例的操作相对简单,但在制作过程中,必须细心的绘制各个区域;各个区域间最好留有一点空隙,以免在选择时出现错误。

时间: 2024-12-26 20:18:20

Dreamweaver制作地图链接综合实例的相关文章

巧妙运用Dreamweaver制作地图连接的方法

dreamweaver 在浏览网页时,经常能看到一些图片上的特殊超链接,即在一张图片上有多个局部区域与不同的网页链接,比如地图链接. 效果说明:地图中标示出了中国的各个省市和直辖市,当在地图上单击某个特定区域时,就会跳转到相应地图区的说明页面. 创作思想:本实例将利用 Dreamweaver 的图像热点功能完成地图链接实例. 操作步骤 ( 1 )新建一个HTML文件取名为 map.htm 文件,在页面中插入一幅中国地图,如图 1 所示. 提示:本实例所用到的中国地图china.jpg. ( 2

用Dreamweaver制作动态链接的Flash按钮

dreamweaver|按钮|动态|链接 Dreamweaver 4.0 以上的版本都提供了"插入Flash按钮"功能.如下面演示中的flash按钮,就是由Dreamweaver制作并插入的. 这里先介绍一下普通的flash按钮的制作方法,以Dreamweaver MX为例:新建一个HTML文件,并先保存它.然后在"Insert(插入)"菜单的"Media(多媒体)"标签中,点击"Flash Button(Flash 按钮)"

网页制作技巧:Dreamweaver快速图片链接批处理

dreamweaver|技巧|链接|网页 对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了.假如页面内容很多的话,那么所做的工作只能用恐怖来形容.记得几天前,笔者就曾在很短的时间内为一个客户做了300个图片和相应的链接.正好是Dreamweaver和Fireworks结合的一个很好的实例典范,下面我们就来学习一下自动制作许多链接并处理图片的方法. 首先启动Dreamweaver,建立好站点后,选择Command(命令)>Create Web Photo Album(制作Web

【百度地图API】如何自定义地图图层?实例:制作麻点图(自定义图层+热区)

原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来学习,当地图上有大量标注,比如600万个的时候,我们如何用"麻点图"来实现标注的展示. -----------------------------------------------------------------------------------------------------

用Dreamweaver制作电子相册的详细方法(图文)

Dreamweaver  中增加了Flash Element功能,这使Dreamweaver和Flash的关联更加紧密了.这个Flash Element究竟有什么特别的呢?它可以帮你方便快捷地制作一个Flash动画版本的图片浏览器!下面我们通过具体的实例来了解这个新鲜玩意. 下面是制作完成的电子相册实例演示. 详细制作过程如下. 1.首先在Dreamweaver的菜单栏下找到Flash Element这个功能图标,如图. 2.选择这个按钮之后,在Dreaweaver中生成一个Flash文件,需要

Dreamweaver快速图片链接批处理

对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了.假如页面内容很多的话,那么所做的工作只能用恐怖来形容.记得几天前,笔者就曾在很短的时间内为一个客户做了300个图片和相应的链接.正好是Dreamweaver和Fireworks结合的一个很好的实例典范,下面我们就来学习一下自动制作许多链接并处理图片的方法. 首先启动Dreamweaver,建立好站点后,选择Command(命令)>Create Web Photo Album(制作Web影集),打开Create Web Phot

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

Dreamweaver制作网页经典问题大整理

dreamweaver|网页|问题    1> 在DW中,如何输入一个空格呢?    输入空格的问题,在DW似乎已成了一个老生常谈的问题,我们可能在许多介绍DW使用方面的书籍或文章中看到过N次.    DW中对空格输入的限制是针对"半角"文字状态而言的,因此通过将输入法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能ABC为例),按Shift+Space切换到全角状态,现在应该没问题了.    此外,你还可以通过许多"变通"的方法达到录入空格的目

Dreamweaver ,email链接

  制作网页时,我们经常需要添加邮箱链接,今天小编就为大家介绍一下在dreamweaver中如何链接email链接. 首先在"插入"菜单中选择电子邮件链接,如下图所示.   在"电子邮件链接"对话框中,输入email地址,输入完成后点击"确定"按钮.   这样电子邮件地址链接就添加完成咯.            注:更多精彩教程请关注三联办公软件教程栏目,三联电脑办公群:189034526欢迎你的加入