5.2 超链接 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

网页设计与制作 第05章 Dreamweaver CS5高级应用 本章内容 表格 超链接 框架 使用Div+CSS布局页面 表单 2 网页设计与制作 5.2 超链接 超链接是网页中最重要的元素之一，也是应用最多的一项功能。一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。有了超链接的存在，浏览者可以通过点击网页中的某个元素轻松地实现网页之间的转换、下载文件、收发邮件等。 3 网页设计与制作 5.2.1 超链接基本概念 超链接的分类 如果按链接目标分类，可以分为以下主要几种类型： 内部超链接：同一网站文档之间的链接。 外部超链接：不同网站文档之间的链接。 锚点超链接：同一网页或不同网页中指定位置的链接。 电子邮件超链接：启动邮件客户端程序，可以写邮件并发送到链接的邮箱中。 4 网页设计与制作 2．链接路径概念 在建立链接之前，需要弄清链接与被链接对象的路径，这样才能正确跳转到链接目标上。路径通常有三种表示方法。 （1）绝对路径：指某个文件在网络上的完整路径，包括适用的协议（如http、ftp、rtsp等）、Web服务器、路径和文件名等。 （2）根目录相对路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头。 （3）文档目录相对路径：以当前文档所在的位置为起点到被链接文档经过的路径。相对路径最适合网站的内部链接。相对路径的优点是移植性强，只要整个站点的结构和文件的位置不变，改变站点的路径不会影响链接路径的效果。但是当链接对象和链接载体的相对位置变化后，同样需要改变路径。 5 网页设计与制作 5.2.2 创建内部超链接 1. 内部超链接格式 （1）如果是同一目录内的网页文件 <a href="目标文件名.html">链接载体</a> （2）如果链接到下一级目录中的网页文件 <a href="目录名/目标文件名.html">链接载体</a> （3）如果链接到上一级目录中的网页文件 <a href="../目标文件名.html">链接载体</a> （4）如果链接到同级目录中的网页文件 <a href="../目录名/目标文件名.html">链接载体</a> 6 网页设计与制作 2. 文本超链接 所谓的文本超链接，是把文本作为链接载体的超链接形式。操作方法如下。 （1）在文档窗口“设计”视图中选择文字。如首页中的导航条信息“乐山概况”。 （2）在对应的属性面板中，执行下列操作之一： 单击“链接”文本框右侧的文件夹图标 ，浏览并选择一个目标文件。 使用“指向文件”图标 ，将链接目标指向“文件”面板中的网页文件，如图所示。 7 网页设计与制作 3. 图片超链接 图片超链接有两种形式，整个图像作为链接载体的图像超链接和图像局部区域作为链接载体的热点超链接。 （1）图像超链接 如果将整个图像作为链接载体，其操作方法和创建文字超链接一致，只是选中的超链接热点是图像而不是文字。 （2）图像热点超链接 图像热点也叫做图像地图或图像映射，是指在同一幅图像中定义多个区域，每个区域指定一个不同的超链接，当单击不同区域时可以跳转到指定的目标网页。创建图像热点的方法如下。以“学习中心”studycenter.html为例。 8 网页设计与制作 5.2.3 创建外部超链接 外部链接是指对网站以外的目标文件的链接。其格式如下。 <a href="网站URL地址">链接载体</a> “启梦教育”网站的“学习中心”版块的校外学习中心，可以实现外部超链接。如选择“四川成都学习基地”文本信息，在属性面板的“链接”文本框内输入URL地址http://www.chengdu.edu.cn/。 9 网页设计与制作 5.2.4 锚点超链接 当网页内容很长时，为了浏览更快捷，可以使用锚点链接来实现在同一页的定位。所谓锚点链接，是指在文档中设置位置标记，并在该位置定义一个名称以方便引用。锚点链接可以链接到同一个页面中指定的不同位置，也可以链接到其他网页中指定的位置。 要在页面内实现锚点超链接，需要定义两个标记，一个是超链接标记，另一个是书签标记。超链接标记格式为： <a href="#书签名">链接载体</a> 当单击链接载体后，将定位到“书签名”的位置。书签标记的格式为： <a name="书签名">目标位置</a> “目标位置”可以包含文本、图像等，也可以不包含任意内容，只是一个位置的命名而已。 本小节将以“招生报名”网页为大家介绍锚点超链接的实现。(步骤详见书P110) 10 网页设计与制作 5.2.5 其他类型超链接 1．电子邮件超链接 电子邮件链接指向一个电子邮件（E-mail）邮箱，当单击邮件链接时会打开计算机上与浏览器相关的邮件软件，给链接目标发送邮件。其格式为： <a href="m