第5章 超级链接

1第5章超级链接超链接是网页之间建立联系的基本途径，通常网页上都会有很多超链接，指向各种相关的文件。通过超链接可以将Internet上的各种相关信息有机地联系起来，能很方便地从一个网页跳转到另一个网页，从而可以更加方便地查询到所需的资源。本章介绍超级链接在网页中的应用，主要内容包括：超级链接基础网页中常见的超级链接在网页中创建导航条网页相册25.1超级链接基础一个网站是由多个网页组成的，站点和页面具备一定的链接关系才能正常运行，在制作网站时，需要建立站点与网页、网页与网页之间的链接关系。所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页（同一个网站内部的网页或者其他网站的网页），也可以是同一个网页的不同位置，还可以是一个电子邮件地址、一个文件等。35.1.1课堂实例――给文字和图片创建超级链接在网页中最常见的就是在文字或者图片上建立超链接，下面通过一个实例介绍给文字和图片创建超链接的方法。1．给文字创建超级链接2．给图片创建超级链接45.1.2超级链接详解前面通过实例介绍了在网页中给文字和图片添加超级链接的基本方法，本小节对超级链接的类型、路径、链接目标等知识进行详细的介绍。1．超级链接的组成与分类图5-9超级链接的链接载体和链接目标52．路径每个网页甚至每个独立的网页元素（图像、声音、动画、视频等），都有一个唯一的地址，称为统一资源定位符（URL）。在网页的超链接中，正是以统一资源定位路径的方式来链接的。一般情况下，路径有3种表示方法：绝对路径、文档相对路径和站点根目录相对路径。6下拉列表中有4个选项，它们的功能分别如下所述。_blank：将链接的文档载入一个新的、未命名的浏览器窗口。_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。3．链接目标75.2网页中常见的超级链接通过前面的学习，对超级链接已经有了概括的了解。本节介绍在网页中常见的几种超级链接的制作方法。5.2.1创建软件下载超级链接5.2.2创建电子邮件链接85.2.3利用“锚记”功能移动到特定位置当浏览很长的网页页面时，需要不断拖动浏览器的滚动条才能浏览下面的内容，很不方便。如果需要寻找特定的内容就会比较麻烦。可以建立一些锚点链接，但浏览者单击锚点链接时就能自动跳转到相应的位置，这样能使浏览者快速找到相应的内容。1．创建命名锚记2．创建到该命名锚记的链接95.2.4课堂实例――图片地图图片地图主要用来在一幅图片内部的不同区域上设置超链接，设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。矩形热点工具：创建一个矩形热点。椭圆形热点工具：创建一个圆形热点。多边形热点工具：创建一个不规则形状的热点。1．绘制矩形热点2．绘制椭圆形热点3．绘制多边形热点105.2.5创建脚本链接链接不仅能够用来实现页面之间的跳转，也可以用来直接调用JavaScript语句，这种单击链接，执行JavaScript语句的链接称为脚本链接。在【属性】面板的【链接】文本框中输入“javascript:”，然后再输入一些简单的JavaScript代码或函数调用就能创建一个脚本链接。1．创建弹出对话框的脚本链接2．创建收藏网站的脚本链接115.3在网页中创建导航条导航条是网页中的重要元素，在几乎所有的网站设计中，页面上都需要导航条。本节通过实例介绍两种制作导航条的方法。125.3.1课堂实例――创建文字导航条1．创建布局表格2．输入导航文字并定义超链接135.3.2课堂实例――应用Dreamweaver预设功能创建导航条Dreamweaver预设了一个创建导航条的功能，利用这个预设功能可以创建功能强大的网页导航条。1．添加导航条2．设置导航项目3．添加更多的导航条项目4．修改导航条14本章习题上机练习15练习1脚本链接――关闭网页窗口制作一个关闭网页窗口的脚本链接。当单击网页中的“关闭窗口”文字链接时，弹出一个提示关闭窗口的对话框，效果如图5-52所示。单击“是”按钮即可关闭网页窗口。图5-52关闭网页窗口的脚本链接在这个练习中定义脚本链接时，需要在【属性面板】的【链接】文本框中直接输入：javascript:window.close()16练习2纵向文字导航条制作一个纵向文字导航条，效果如图5-53所示。在制作这个实例时，需要先用表格布局并设置表格属性，然后输入纵向的导航文字，最好添加超级链接。图5-53纵向文字导航条17练习3纵向动态导航条利用Dreamweaver预设的插入导航条功能，制作一个动态的纵向导航条，效果如图5-54所示。图5-54纵向动态导航条18练习4网页相册使用Dreamweaver提供的网页相册功能，制作一个电子相册网页。相册首页效果如图5-55所示，页面中显示一些图片的缩略图，每行显示5个。图5-55相册首页效果19单击缩略图将显示完整图片，并且页面中会出现“前一个”、“首页”、“下一个”的导航链接，单击链接可以在图片之间进行切换，如图5-56所示。这个练习中的网页相册是用Dreamweaver自动生成的。选择【命令】|【创建网站相册】命令，在弹出【创建网站相册对话框】对话框中设置必要的参数即可。图5-56浏览相册中的图片