`
johnnyhg
  • 浏览: 348572 次
  • 来自: NA
社区版块
存档分类
最新评论

DW制作地图

    博客分类:
  • web
阅读更多

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

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

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

  操作步骤

  ( 1 )新建一个HTML文件取名为 map.htm 文件,在页面中插入一幅中国地图,如图 1 所示。

  提示:本实例所用到的中国地图china.jpg。

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

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

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

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

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

  在这里我只给大家绘制了3个省的区域!目的教给大家如何做这种网页,通过学习这个实例,是不是觉得很简单呢?当然你要想把整个地图都设置连接可是非常麻烦了啊!主要是浪费时间!这个教程就写到这了。

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

 

分享到:
评论

相关推荐

    dw 咖啡店的一个小网站

    【DW(Dreamweaver)与网站制作】 Dreamweaver,简称DW,是由Adobe公司开发的一款专业级网页设计软件。DW以其强大的代码编辑器、可视化设计界面以及对HTML、CSS、JavaScript等多种网页语言的支持,深受广大网页设计...

    dw教学源文件,带源代码

    Dreamweaver,简称DW,是Adobe公司推出的一款强大的网页制作和网站管理工具,尤其适合初学者和专业开发者进行网页设计。本教学源文件集合包含了"大学DW课设素材",旨在帮助学生深入理解和掌握DW的基本操作和高级技巧...

    DW100例之基础篇章

    Dreamweaver作为Adobe公司出品的专业级网页设计软件,广泛应用于网站开发和维护,尤其对网络新手来说,它是学习网页制作的理想选择。 本教程的"基础篇"部分主要涵盖了以下核心知识点: 1. **界面认识**:首先,你...

    Dreamweaver标签选择器的妙用

    iframe(Inline Frame)常用于在网页中嵌入其他页面或内容,比如地图、视频或者广告。使用 Dreamweaver 的标签选择器,用户可以直接通过菜单“插入”→“标签”来找到并插入 iframe 标签,无需手动编写任何代码。在...

    Dreamweaver CS3网页制作花店案例

    4. **联系我们**:提供联系方式,如电话、邮箱、地址地图,可能还包括在线表单方便用户发送咨询或订单。 5. **购物车**:如果案例涉及电商功能,购物车页面会处理商品添加、删除、结算等操作,涉及到数据库交互和...

    DW题库整理资料.pdf

    知识点:在 Dreamweaver 中,框架面板的主要作用是用来拆分框架页面结构,也可以用来给框架页面命名和制作链接。 10. 下面表单的工作过程说法错误的是:访问者在浏览有表单的网页时,填上必需的信息,然后按提交...

    dw教学课件第十一讲----网站建设与发布.ppt

    * 整理站点:整理站点包括查看站点地图、检查超链接情况等步骤。 * 申请域名:申请域名是指申请网站的域名,用于标识网站的身份和地址。 * 租用服务器:租用服务器是指租用服务器来存放网站的数据和内容。 * 网页...

    Dreamweaver考试题目

    - Dreamweaver主要负责网页的构建和设计,包括内容的组织和排版,但不涉及内容信息的搜集整理和美工图像的制作,这些通常是前期准备工作的部分。 - 它能够将各种元素组合成网页,并进行美工设计。 3. 网站策划: ...

    dreamweaver网页设计与网站建设景点介绍

    在网页设计和网站建设领域,Adobe Dreamweaver是一款广泛使用的专业工具,它为用户提供了直观的可视化界面和强大的代码编辑功能,使得网页制作变得更加便捷。针对标题"dreamweaver网页设计与网站建设景点介绍",我们...

    Dreamweaver 旅游网站

    在Dreamweaver中,我们可以利用“站点”管理功能,预先规划好网站的目录结构,方便后续的页面制作。 接下来是设计网页布局。Dreamweaver提供了多种预设的网页模板,可以作为设计的基础。对于旅游网站,可以选择清新...

    html学习之河畔林语

    4. **IFrame(内联框架)**:`<iframe>`标签允许在网页中嵌入另一个网页或资源,如视频、地图或其他网页。这有助于创建复合式的网页设计,将多个页面内容整合在一起。 5. **资源引用**:HTML文件可以链接到外部CSS...

    Dreamweaver教材

    Dreamweaver内置了强大的站点管理功能,包括文件上传/下载、FTP连接、站点地图生成和资源管理等。这些功能帮助开发者高效地管理项目文件和网站结构,简化了网站开发和维护的过程。 #### 三、Dreamweaver新增功能...

    Dreamweaver经典插件

    这款软件提供了丰富的功能,包括代码编辑、可视化布局、站点管理等,极大地提升了网页制作的效率。而"经典插件"则是指那些在Dreamweaver发展历程中起到了重要作用,深受用户欢迎的扩展工具。 1. **Dreamweaver插件...

    canvas JavaScript API学习

    在JavaScript的世界里,Canvas API是一个强大的工具,它允许开发者在网页上进行动态的图形绘制,创造出丰富的视觉体验。...无论是制作数据可视化图表,还是构建交互式游戏,Canvas API都是一个不可或缺的利器。

    Dreamweaver教程07

    不同于静态设计或传统印刷品的制作,Web站点的管理涉及到多个方面,例如文件的上传下载、错误链接的检查、文件版本控制等。这些任务对于确保网站正常运行、提高用户体验至关重要。 #### 3. Dreamweaver中的站点管理...

    国家行政区矢量图

    5. 可视化呈现:制作专题地图,突出显示特定行政区域的特征。 6. 网络分析:利用NIT文件中的网络信息,进行路径规划或服务区域分析。 7. 服务发布:将处理好的数据发布为Web服务,供其他应用或用户在线访问。 总...

Global site tag (gtag.js) - Google Analytics