创建锚记超级链接的方法课件

创建锚记超级链接的方法课件1在因特网中，超级链接就好比桥梁，浏览者每单击一次鼠标就好比是从桥的这一端走到了桥的那一端。超级链接将整个因特网关联了起来，构成了纷繁复杂的Web世界。本章将介绍超级链接的基本知识以及创建超级链接的基本方法。第6章创建超级链接在因特网中，超级链接就好比桥梁，浏览者每单击一次鼠标就好比是2学习目标了解超级链接的概念。掌握设置文本和图像超级链接的方法。掌握设置图像热点超级链接的方法。掌握设置电子邮件超级链接的方法。掌握设置下载超级链接和空链接的方法。掌握设置锚记超级链接的方法。掌握设置鼠标经过图像和导航条的方法。掌握设置Flash文本和Flash按钮的方法。掌握设置跳转菜单和脚本链接的方法。学习目标了解超级链接的概念。36.1超级链接的概念URL的概念和格式 URL地址的类型超级链接的分类6.1超级链接的概念URL的概念和格式 46.1.1URL的概念和格式

URL，英文全称为“UniformResoureLocator”，即统一资源定位器，是因特网中网页的地址。URL的地址格式为：scheme://host:port/path/file。scheme：Internet资源类型，又称通信协议，如http、ftp、telnet等，分别表示WWW服务器、FTP服务器、TELNET服务器。host：服务器主机，指出服务器在网络中的IP地址（如“18”）或域名（如“”）。port：端口，对某些资源的访问需要给出服务器相应的端口号，但许多时候不需要。path：路径，指明服务器上资源的位置，有时不需要。file：文件，指明服务器上资源的文件名称，有时不需要。6.1.1URL的概念和格式URL，英文全称为“Uni56.1.2URL地址的类型在超级链接中，URL地址有绝对地址和相对地址之分。一、绝对地址绝对地址就是某个文件在网络上的完整地址，包括所使用的传输协议、服务器名、路径和文件名等。当创建的超级链接要连接到网站以外的其他网站的某个文件时，必须使用绝对地址，例如“/special/00052FJJ/rocketteam.html”。二、相对地址相对地址又可分为文档相对地址和站点根目录相对地址两种。(1) 文档相对地址文档相对地址就是指以当前文档所在位置为起点到被链接文档经由的路径。当创建的链接要连接到网站内部文件时通常使用文档相对路径。6.1.2URL地址的类型在超级链接中，URL地址有绝对66.1.2URL地址的类型

通过文档相对路径构建超级链接的两个文件之间的相对关系，不会受到站点文件夹所处的服务器位置的影响，可以省略绝对地址中的相同部分。这种方式可以确保在站点文件夹所在的服务器地址发生改变的情况下，文件夹的所有内部链接都不会出现错误。而且，在Dreamweaver的站点管理器内进行文件和文件夹的重命名、文件和文件夹的移动等操作时，使用文档相对地址创建的超级链接都会动态地自动进行更新，这对站点管理带来了方便。与同一文件夹内的文件建立链接只写文件名即可，例如“rocketteam.html”。与下一层文件夹内的文件建立链接，只写文件夹名称和文件名即可，例如“00052FJJ/rocketteam.html”。与上一层文件夹内的文件建立链接，只需在文件名前加上“../”即可，例如“../rocketteam.html”。如果与上一层文件夹的再上一层文件夹内的文件建立链接，需要在上一层文件夹名前加上“../”，例如“../00052FJJ/rocketteam.html”。“../”表示在文件夹层次结构中上移一层。6.1.2URL地址的类型通过文档相对路径构建超级链接76.1.2URL地址的类型(2) 站点根目录相对地址站点根目录相对地址就是指所有路径都开始于当前站点的根目录，以“/”开始，“/”表示站点根目录，如“/special/00052FJJ/rocketteam.html”。通常只有在站点的规模非常大、文件需要放置在几个服务器上，或者是在一个服务器上放置多个站点时才使用站点根目录相对地址。移动包含站点根目录相对地址链接的文档时，不需要更改这些链接。另外，站点根目录相对地址只能由站点服务器软件（例如IIS）来解释，因此在硬盘上打开一个带有根目录相对地址链接的网页时，上面所有的链接都是失效的。这是因为在硬盘目录中不存在站点根目录，而只有文件夹。6.1.2URL地址的类型(2) 站点根目录相对地址86.1.3超级链接的分类超级链接通常由源端点和目标端点两部分组成。根据源端点的不同，超级链接可分为文本超级链接、图像超级链接和表单超级链接。文本超级链接以文本作为超级链接源端点，图像超级链接以图像作为超级链接源端点，表单超级链接比较特殊，选择某个选项后会自动跳转到目标端点，或需要单击相应按钮会自动跳转到目标端点。根据目标端点的不同，超级链接可分为内部超级链接、外部超级链接、电子邮件超级链接和锚记超级链接等。内部超级链接是使多个网页组成为一个网站的一种链接形式，目标端点和源端点是同一网站内的网页文档。外部超级链接指的是目标端点与源端点不在同一个网站内，外部超级链接可以实现网站之间的跳转，从而将浏览范围扩大到整个网络。电子邮件超级链接将会启动邮件客户端程序，可以写邮件并发送到链接的邮箱中。利用锚记超级链接，在浏览时网页时可以跳转到当前网页或其他网页中的某一指定位置。6.1.3超级链接的分类超级链接通常由源端点和目标端点两96.2普通超级链接文本和图像超级链接图像热点超级链接下载超级链接和空链接电子邮件超级链接锚记超级链接6.2普通超级链接文本和图像超级链接106.2.1文本和图像超级链接一、文本超级链接用文本做链接载体就是文本超级链接，它是最常见的超级链接类型。创建文本超级链接比较常用的方式主要有两种：一种是在【属性】面板中创建超级链接，另一种是在【超级链接】对话框中设置超级链接。对于文本超级链接，还可以通过【页面属性】对话框设置文本的颜色、下划线等样式。1、通过【属性】面板创建超级链接。6.2.1文本和图像超级链接一、文本超级链接116.2.1文本和图像超级链接2、通过【超级链接】对话框设置超级链接。选择【插入记录】／【超级链接】命令，打开【超级链接】对话框进行设置。[目标]：_blank:将链接的文档载入一个新的浏览器窗口_parent：载入父框架或窗口_self：载入同一框架或窗口，是默认的。_top：载入整个浏览器窗口。6.2.1文本和图像超级链接2、通过【超级链接】对话框设置126.2.1文本和图像超级链接3、通过【页面属性】对话框设置文本超级链接的状态。6.2.1文本和图像超级链接3、通过【页面属性】对话框设置136.2.1文本和图像超级链接二、图像超级链接用图像作为链接载体就是图像超级链接。了解了通过【属性】面板创建文本超级链接的方法，也就等于掌握了创建图像超级链接的方法，因为操作方法都是一样，只是链接载体由文本变成了图像。图像超级链接不像文本超级链接那样会发生许多提示性的变化，图像本身不会发生改变，只是鼠标在指向图像超级链接时会变成手形（默认状态）。6.2.1文本和图像超级链接二、图像超级链接146.2.2图像热点超级链接图像热点，又称图像地图、图像热区，实际上就是为图像绘制一个或几个特殊区域，并为这些区域添加超级链接。创建图像热点超级链接必须使用图像热点工具，它位于图像【属性】面板的左下方，包括（矩形热点工具）、（椭圆形热点工具）和（多边形热点工具）3种形式。创建图像热点超级链接的方法是：（1）使用图像热点工具绘制热点区域（2）接着在【属性】面板中设置链接地址、目标窗口等6.2.2图像热点超级链接图像热点，又称图像地图、图像热156.2.3下载超级链接和空链接在实际应用中，链接目标也可以是其他类型的文件，如压缩文件、Word文件等。如果要在网站中提供资料下载，就需要为文件提供下载超级链接。下载超级链接并不是一种特殊的链接，只是下载超级链接所指向的文件是特殊的。空链接是一个未指派目标的链接。建立空链接的目的通常是激活页面上的对象或文本，使其可以应用行为。给页面对象添加空链接很简单，在【属性】面板的【链接】文本框中输入“#”即可。6.2.3下载超级链接和空链接在实际应用中，链接目标也可以166.2.4电子邮件超级链接电子邮件超级链接与一般的文本和图像链接不同，因为电子邮件链接要将浏览者的本地电子邮件管理软件（如OutlookExpress、Foxmail等）打开，而不是向服务器发出请求，因此它的添加步骤也与普通链接有所不同。使用以下两种方法打开【电子邮件链接】对话框进行设置。选择【插入记录】/【电子邮件】命令在【插入】/【常用】面板中单击（电子邮件链接）按钮6.2.4电子邮件超级链接电子邮件超级链接与一般的文本和176.2.5锚记超级链接一般超级链接只能从一个网页文档跳转到另一个网页文档，使用锚记超级链接不仅可以跳转到同一网页中的指定位置，还可以跳转到其他网页中指定的位置，包括同一站点内的和不同站点内的。创建锚记超级链接，需要经过两步：首先需要命名锚记，即在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后在【属性】面板中设置指向这些锚记的超级链接。创建锚记超级链接的方法：（1）使用以下两种方式之一打开【命名锚记】对话框来插入锚记。选择【插入记录】/【命名锚记】命令在【插入】/【常用】面板中单击（命名锚记）按钮（2）选中链接文本，在【属性】面板的【链接】下拉列表中输入锚记名称，或者选择【插入记录】/【超级链接】命令，打开【超级链接】对话框进行设置。6.2.5锚记超级链接一般超级链接只能从一个网页文档跳转186.2.5锚记超级链接6.2.5锚记超级链接196.2.5锚记超级链接关于锚记超级链接目标地址的写法应该注意以下几点。• 如果链接的目标锚记位于同一文档中，只需在【属性】面板的【链接】文本框中输入一个“#”符号，然后输入链接的锚记名称，如“#a”。• 如果链接的目标锚记位于同一站点的其他网页中，则需要先输入该网页的路径和名称，然后再输入“#”符号和锚记名称，如“index.htm#a”、“bbs/index.htm#a”。• 如果链接的目标锚记位于因特网上某一站点的网页中，则需要先输入该网页的完整地址，然后再输入“#”符号和锚记名称，如“/yx/20080326.htm#b”等。6.2.5锚记超级链接关于锚记超级链接目标地址的写法应该206.3特殊超级链接鼠标经过图像和导航条Flash文本和Flash按钮跳转菜单和脚本链接6.3特殊超级链接鼠标经过图像和导航条216.3.1鼠标经过图像和导航条鼠标经过图像是指在网页中，当鼠标经过或者单击图像时，图像的形状、颜色等属性会随之发生变化，如发光、变形或者出现阴影，使网页变得生动有趣。鼠标经过图像是基于图像的比较特殊的链接形式，属于图像对象的范畴。鼠标经过图像有以下两种状态。• 原始状态：在网页中的正常显示状态。• 变换图像状态：当鼠标经过或者单击图像时显示变化图像。在设置鼠标经过图像时，两幅图像的尺寸大小必须是一样的。Dreamweaver将以第1幅图像的尺寸大小作为标准，在显示第2幅图像时，将按照第1幅的尺寸大小来显示。如果第2幅图像比第1幅图像大，那么将缩小显示；反之，则放大显示。为避免第2幅图像可能出现的失真现象，因此，在制作和选择两幅图像时，尺寸应保持一致。6.3.1鼠标经过图像和导航条鼠标经过图像是指在网页中，当226.3.1鼠标经过图像和导航条导航条是由一组按钮或者图像组成的，这些按钮或者图像链接各分支页面，起到导航的作用。导航条也是基于图像的比较特殊的链接形式，属于图像对象的范畴。导航条通常包括以下4种状态。• 【状态图像】：用户还未单击图像或图像未交互时显现的状态。• 【鼠标经过图像】：当光标移动到图像上时，元素发生变换而显现的状态。例如，图像可能变亮、变色、变形，从而让用户知道可以与之交互。• 【按下图像】：单击 图像后显现的状态。例如，当用户单击按钮时，新页面被载入且导航条仍是显示的；但被单击过的按钮会变暗或者凹陷，表明此按钮已被按下。• 【按下时鼠标经过图像】：单击按钮后，光标移动到被按下元素上时显现的图像。例如，按钮可能变暗或变灰，可以用这个状态暗示用户：在站点的这个部分该按钮已不能被再次单击。6.3.1鼠标经过图像和导航条导航条是由一组按钮或者图像组236.3.1鼠标经过图像和导航条6.3.1鼠标经过图像和导航条246.3.2Flash文本和Flash按钮将鼠标光标置于文档中，然后选择【插入记录】/【媒体】/【Flash文本】命令，打开【插入Flash文本】对话框进行参数设置即可。在保存路径中不能出现中文字符，保存的Flash动画文件如果使用的是相对路径，应该和网页文档放在同一目录下。6.3.2Flash文本和Flash按钮将鼠标光标置于文档256.3.2Flash文本和Flash按钮

将鼠标光标置于文档中，然后选择【插入记录】/【媒体】/【Flash按钮】命令，打开【插入Flash按钮】对话框并进行参数设置即可。在保存的路径和文件名中也不能含有中文字符。保存的Flash动画文件如果使用的是相对路径，应该和网页文档放在同一目录下。6.3.2Flash文本和Flash按钮将鼠标266.3.3跳转菜单和脚本链接跳转菜单是利用表单元素形成各种选项的列表。当选择列表中的某个选项时，浏览器会立即跳转到一个新网页。选择【插入记录】/【表单】/【跳转菜单】命令，或在【插入】/【表单】工具栏中单击（列表/菜单）按钮，打开【插入跳转菜单】对话框进行参数设置即可。6.3.3跳转菜单和脚本链接跳转菜单是利用表单元素形成各种276.3.3跳转菜单和脚本链接超级链接不仅可以用来实现页面之间的跳转，也可以用来直接调用JavaScript语句。这种单击链接便执行JavaScript语句的超级链接通常称为JavaScript链接。创建JavaScript链接的方法是，首先选定文本或图像，然后在【属性】面板的【链接】文本框中输入“JavaScript:”，后面跟一些JavaScript代码或函数调用即可。6.3.3跳转菜单和脚本链接超级链接不仅可以用来实现页面之286.3.3跳转菜单和脚本链接经常用到的脚本链接JavaScript代码。•JavaScript:alert('字符串')•JavaScript:history.go(1)：前进•JavaScript:history.go(-1)：后退•JavaScript:history.forward(1)：前进•JavaScript:history.back(1)：后退•JavaScript:history.print()：打印•JavaScript:window.external.AddFavorite(‘’,‘老虎工作室’)：收藏指定的网页•JavaScript:window.close()：关闭窗口6.3.3跳转菜单和脚本链接经常用到的脚本链接JavaSc296.4 综合小实例━━设置“宇宙速度”网页超级链接设置“宇宙速度”网页中的超级链接，具体要求如下。(1)设置文本和图像超级链接：设置文本“直接阅读英文全文”的链接目标文件为“English.htm”，设置网页中图像“images/sudus.jpg”的链接目标文件为“picture.htm”，打开目标窗口的方式均为在新窗口中打开。(2)设置电子邮件超级链接：给文本“联系我们”添加电子邮件超级链接，链接地址为“yx2008@”。(3)设置脚本链接：给文本“前进”、“后退”、“打印本页”和“关闭窗口”依次添加相应的脚本链接。(4)创建锚记超级链接：在文档“cosmicspeed”（即文件English.htm）中每段的开头依次添加锚记“a”、“b”、“c”、“d”、“e”、“f”、“g”、“h”，