1、第第4 4章章 超级链接及其使用超级链接及其使用第第1章章 网页设计与制作概述网页设计与制作概述第第3 3章章 图像及其他媒体图像及其他媒体内容提要内容提要 超级链接的概念和路径知识。超级链接的概念和路径知识。创建超级链接的基本方法。创建超级链接的基本方法。从从HTMLHTML角度理解超级链接。角度理解超级链接。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.14.1.1超级链接概述超级链接概述超级链接是指从一个网页(源文档)指向一个目标的连接关系超级链接是指从一个网页(源文档)指向一个目标的连
2、接关系,这个这个目标可以是另一个网页(目标文档)目标可以是另一个网页(目标文档),也可以是相同网页上的不也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。本质上超级链接属于一个网页的一部分,它至是一个应用程序。本质上超级链接属于一个网页的一部分,它是一种允许浏览者同其他网页或站点之间进行连接的元素。只有是一种允许浏览者同其他网页或站点之间进行连接的元素。只有各个网页链接在一起后,才能真正构成一个网站。各个网页链接在一起后,才能真正构成一个网站。每个网页都有一个唯一的地址,称作统一资源定位器(每
3、个网页都有一个唯一的地址,称作统一资源定位器(URLURL),我们),我们通过网页的通过网页的URLURL将这些网页链接在一起。但是,同一个网站下的将这些网页链接在一起。但是,同一个网站下的每一个网页都属于同一个地址之下,这种情况下不需要为每一个每一个网页都属于同一个地址之下,这种情况下不需要为每一个链接都输入完全的地址,只要确定当前文档同其它文档或根目录链接都输入完全的地址,只要确定当前文档同其它文档或根目录之间的相对路径关系就可以。因此,链接路径一般有三种类型,之间的相对路径关系就可以。因此,链接路径一般有三种类型,分别为分别为绝对路径、相对路径、根目录相对路径。绝对路径、相对路径、根目录
4、相对路径。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.14.1.1超级链接概述超级链接概述1.1.绝对路径绝对路径绝对路径提供所链接文档的完整绝对路径提供所链接文档的完整URLURL地址,而且包括所使用的协议类型,比如地址,而且包括所使用的协议类型,比如http:/www.sina.chttp:/ E:F1index.htmlF1index.html链接到链接到E:F1F2about.htmlE:F1F2about.html,可以把,可以把E:F1E:F1去掉,只用去掉,只用F2aF2abo
5、ut.htmlbout.html表示链接路径。表示链接路径。当要链接到与当前文档处于同一文件夹中的文档时,只需输入文件名。比如要从当要链接到与当前文档处于同一文件夹中的文档时,只需输入文件名。比如要从 yb.html yb.html 链接链接到到 cc.htmlcc.html(两个文件在同一文件夹(两个文件在同一文件夹“JL”JL”中,且目录深度相同),则其相对路径为中,且目录深度相同),则其相对路径为cc.htmcc.htm。当要链接到当前文档所在文件夹的子文件夹的文档时,先要有子文件夹名称,然后跟符号当要链接到当前文档所在文件夹的子文件夹的文档时,先要有子文件夹名称,然后跟符号“/”/”,
6、在加文件名。比如要从在加文件名。比如要从 index.html index.html 链接到链接到 cc.htmcc.htm(两个文件在同一文件夹(两个文件在同一文件夹“F1”F1”中,中,indindex.htmlex.html处于父目录中,而处于父目录中,而cc.htmcc.htm处于子目录处于子目录JLJL中),则其相对路径为中),则其相对路径为JL/cc.htmlJL/cc.html。当要链接到当前文档所在文件夹的父文件夹的文档时,在文档名前要加当要链接到当前文档所在文件夹的父文件夹的文档时,在文档名前要加“./”./”。比如要从。比如要从cc.htcc.htm m链接到链接到inde
7、x.htmlindex.html(两个文件在同一文件夹(两个文件在同一文件夹“F1”F1”中,中,index.htmlindex.html处于父目录中,而处于父目录中,而cc.htcc.htm m处于子目录处于子目录JLJL中),则其相对路径为中),则其相对路径为./index.html./index.html。3.3.站点根目录相对路径站点根目录相对路径站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理承载有多个不同站点的服务站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理承载有多个不同站点的服务器时,要考虑使用这种类型的路径。器时,要考虑使用这种类型的路径。站点根目录
8、相对路径以一个正斜杠站点根目录相对路径以一个正斜杠“/”/”开始,该正斜杠表示站点根文件夹。比如,开始,该正斜杠表示站点根文件夹。比如,/F1/index.h/F1/index.html tml 是文件的站点根目录相对路径,该文件位于站点根文件夹的是文件的站点根目录相对路径,该文件位于站点根文件夹的F1F1子文件夹中。子文件夹中。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.24.1.2设置超级链接的方法设置超级链接的方法1.1.使用属性面板链接到文档使用属性面板链接到文档属性面板文件夹图标和
9、属性面板文件夹图标和“链接链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。文本框可用于创建从图像、对象或文本到其它文档或文件的链接。执行以下操作:执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中选择要进行链接的文本或图像。视图中选择要进行链接的文本或图像。(2 2)然后执行下列操作之一:)然后执行下列操作之一:单击单击“属性属性”面板面板“链接链接”文本框右侧的文件夹图标,出现文本框右侧的文件夹图标,出现“选择文件对话框选择文件对话框”,如图如图4.14.1所示。所示。通过浏览选择一个文件,此时在通过浏览选择一个文件,此时在 URL URL 文本框中显示
10、了目标文档的路径。使用文本框中显示了目标文档的路径。使用“选择选择 HTML HTML 文件文件”对话框中的对话框中的“相对于相对于”弹出菜单,指示该路径是文档相对路径还是根目录相对路径,弹出菜单,指示该路径是文档相对路径还是根目录相对路径,然后单击然后单击“选择选择”。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.24.1.2设置超级链接的方法设置超级链接的方法1.1.使用属性面板链接到文档使用属性面板链接到文档属性面板文件夹图标和属性面板文件夹图标和“链接链接”文本框可用于创建从图像、对象
11、或文本到其它文档或文本框可用于创建从图像、对象或文本到其它文档或文件的链接。执行以下操作:文件的链接。执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中选择要进行链接的文本或图像。视图中选择要进行链接的文本或图像。(2 2)然后执行下列操作之一:)然后执行下列操作之一:单击单击“属性属性”面板面板“链接链接”文本框右侧的文件夹图标,出现文本框右侧的文件夹图标,出现“选择文件对话框选择文件对话框”,如图如图4.14.1所示。通过浏览选择一个文件,此时在所示。通过浏览选择一个文件,此时在 URL URL 文本框中显示了目标文档的文本框中显示了目标文档的路径。路径。使用使用“选
12、择选择 HTML HTML 文件文件”对话框中的对话框中的“相对于相对于”弹出菜单,指示该路径是弹出菜单,指示该路径是文档相对路径还是根目录相对路径,然后单击文档相对路径还是根目录相对路径,然后单击“选择选择”。在在“链接链接”文本框中键入文档的路径和文件名文本框中键入文档的路径和文件名 第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.24.1.2设置超级链接的方法设置超级链接的方法1.1.使用属性面板链接到文档使用属性面板链接到文档【_blank_blank】:将链接的文档载入一个新的、未命名
13、的浏览器窗口。将链接的文档载入一个新的、未命名的浏览器窗口。【_parent_parent】:将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。【_self_self】:将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,所以将链接的文档载入链接所在的同一框架或窗口。此目标是默认的,所以通常不需要指定它。通常不需要指定它。【_top_top】:将链接的文档载入整个浏览器窗口,从而删除所有框架。将链接的文档载入整个
14、浏览器窗口,从而删除所有框架。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.24.1.2设置超级链接的方法设置超级链接的方法2.2.使用使用“指向文件指向文件”图标链接文档图标链接文档“指向文件指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的链接。若要使图标可用于创建从图像、对象或文本到其它文档或文件的链接。若要使用用“指向文件指向文件”图标链接文档,执行以下操作:图标链接文档,执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中选择文本或图像。视图中选择文本或
15、图像。(2 2)拖动属性面板中)拖动属性面板中“链接链接”文本框右侧的文本框右侧的“指向文件指向文件”图标,然后指向另一个打图标,然后指向另一个打开的文档、已打开文档中的可见锚记或指向开的文档、已打开文档中的可见锚记或指向“文件文件”面板中的一个文档面板中的一个文档“链接链接”。(3 3)释放鼠标按钮。)释放鼠标按钮。3.3.使用使用HTMLHTML标记创建超级链接标记创建超级链接在在HTMLHTML语言中,超文本链接标记通过锚标记语言中,超文本链接标记通过锚标记和和来实现。这个标记需成对出现,来实现。这个标记需成对出现,以以a 开始,开始,结束。常用的属性有:结束。常用的属性有:hrefhr
16、ef:定义链接目标。:定义链接目标。titletitle:定义当鼠标移动到链接上时出现的提示文字。:定义当鼠标移动到链接上时出现的提示文字。targettarget:设定链接目标显示的窗口,如:设定链接目标显示的窗口,如target=_banktarget=_bank表示在新窗口中打开目标。表示在新窗口中打开目标。例如:例如:吉林农业大学发展学院吉林农业大学发展学院/a这段代码表示当单击这段代码表示当单击“吉林农业大学发展学院吉林农业大学发展学院”这几个字时,将在新的浏览器窗口中这几个字时,将在新的浏览器窗口中打开网站主页。打开网站主页。第第1章章 网页设计与制作概述网页设计与制作概述第第4
17、4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.3 4.1.3 创建锚点链接创建锚点链接有时网页内容过多过长,浏览者要移动滚动条寻找内容不方便。在制作网页的时候可以根据页面有时网页内容过多过长,浏览者要移动滚动条寻找内容不方便。在制作网页的时候可以根据页面的内容,分为若干个主题,每个主题设置一个的内容,分为若干个主题,每个主题设置一个“命名锚记命名锚记”,创建这些,创建这些“命名锚记命名锚记”的链接,的链接,方便用户快捷定位网页的内容。方便用户快捷定位网页的内容。命名锚记可以先在文档中设置标记,这些标记通常放在文档的特定主题处或顶部,然后可以创建命名
18、锚记可以先在文档中设置标记,这些标记通常放在文档的特定主题处或顶部,然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。1.1.创建命名锚记创建命名锚记要创建命名锚记,执行以下操作:要创建命名锚记,执行以下操作:(1 1)在在“文档文档”窗口的窗口的“设计设计”视图中,将插入点放在需要命名锚记的地方。视图中,将插入点放在需要命名锚记的地方。(2 2)执行下列操作之一:)执行下列操作之一:选择选择“插入插入”“”“命名锚记命名锚记”。按下按下 Ctrl+Alt+A Ctrl+Alt+A 在在“插入插入”栏的栏的“常用常用
19、”类别中,单击类别中,单击“命名锚记命名锚记”按钮。按钮。出现出现“命名锚记命名锚记”对话框。对话框。(3 3)在)在“锚记名称锚记名称”文本框中,键入锚记的名称,并单击文本框中,键入锚记的名称,并单击“确定确定”按钮。按钮。2.2.创建锚记链接创建锚记链接要链接到命名锚记,执行以下操作:要链接到命名锚记,执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中,选择要从其创建链接的文本或图像。视图中,选择要从其创建链接的文本或图像。(2 2)在属性面板的)在属性面板的“链接链接”文本框中,键入一个数字符号文本框中,键入一个数字符号 (#)和和锚记名称。例如:锚记名称。例如:要
20、链接到当前文档中的名为要链接到当前文档中的名为“top”top”的锚记,键入的锚记,键入#top#top。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.44.1.4创建创建E-mailE-mail链接链接单击电子邮件链接时,该链接打开一个新的空白信息窗口(使用的是与用户浏览器相关联的邮件单击电子邮件链接时,该链接打开一个新的空白信息窗口(使用的是与用户浏览器相关联的邮件程序)。在电子邮件消息窗口中,程序)。在电子邮件消息窗口中,“收件人收件人”文本框自动更新为显示电子邮件链接中指定的文本框自动
21、更新为显示电子邮件链接中指定的地址。地址。1.1.利用菜单创建电子邮件链接利用菜单创建电子邮件链接要使用要使用“插入电子邮件链接插入电子邮件链接”命令创建电子邮件链接,执行以下操作:命令创建电子邮件链接,执行以下操作:(1 1)在在“文档文档”窗口的窗口的“设计设计”视图中,将插入点放在希望出现电子邮件链接的位置,或者选视图中,将插入点放在希望出现电子邮件链接的位置,或者选择要作为电子邮件链接出现的文本或图像。择要作为电子邮件链接出现的文本或图像。(2 2)执行下列操作之一,插入该链接:)执行下列操作之一,插入该链接:选择选择“插入插入”“”“电子邮件链接电子邮件链接”。在在“插入插入”栏的栏
22、的“常用常用”类别中,单击类别中,单击“插入电子邮件链接插入电子邮件链接”按钮。按钮。出现出现“电子邮件链接电子邮件链接”对话框。对话框。(3 3)在)在“文本文本”文本框中填写链接文字;在文本框中填写链接文字;在“E-Mail”E-Mail”文本框中填写链接的目标文本框中填写链接的目标E-MailE-Mail地址。地址。(4 4)单击)单击“确定确定”按钮。按钮。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.44.1.4创建创建E-mailE-mail链接链接2.2.使用属性面板创建电子邮件
23、链接使用属性面板创建电子邮件链接执行以下操作:执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中选择文本或图像。视图中选择文本或图像。(2 2)在属性面板的)在属性面板的“链接链接”文本框中,如图文本框中,如图4.64.6所示,键入所示,键入 mailto:mailto:,后面输入电子,后面输入电子邮件地址。邮件地址。在冒号和电子邮件地址之间不能键入任何空格。例如,键入在冒号和电子邮件地址之间不能键入任何空格。例如,键入mailto:mailto:。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用
24、超级链接及其应用4.1.44.1.4创建创建E-mailE-mail链接链接2.2.使用属性面板创建电子邮件链接使用属性面板创建电子邮件链接执行以下操作:执行以下操作:(1 1)在)在“文档文档”窗口的窗口的“设计设计”视图中选择文本或图像。视图中选择文本或图像。(2 2)在属性面板的)在属性面板的“链接链接”文本框中,如图文本框中,如图4.64.6所示,键入所示,键入 mailto:mailto:,后面,后面输入电子邮件地址。输入电子邮件地址。在冒号和电子邮件地址之间不能键入任何空格。例如,键入在冒号和电子邮件地址之间不能键入任何空格。例如,键入mailto:shinesmailto:。第第
25、1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.54.1.5创建导航条创建导航条第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.54.1.5创建导航条创建导航条导航条项目有四种状态:导航条项目有四种状态:状态图像:用户尚未单击或尚未与此项目交互时所显示的图像。例如,状态图像:用户尚未单击或尚未与此项目交互时所显示的图像。例如,当前状态下的项目未被点击。当前状态下的项目未被点击。鼠标经过图像:指鼠标指针
26、滑过鼠标经过图像:指鼠标指针滑过“一般一般”图像时所显示的图像。项目图像时所显示的图像。项目的外观发生变化(例如变得更暗),以便让用户知道可与这个项目进的外观发生变化(例如变得更暗),以便让用户知道可与这个项目进行交互。行交互。按下图像:指项目被单击后所显示的图像。例如,用户单击某项目后,按下图像:指项目被单击后所显示的图像。例如,用户单击某项目后,载入一个新的页面,而导航条仍然显示,只是被单击的项目变暗,表载入一个新的页面,而导航条仍然显示,只是被单击的项目变暗,表示它曾被选择过。示它曾被选择过。按下时鼠标经过图像:指在项目被单击后,鼠标指针滑过按下时鼠标经过图像:指在项目被单击后,鼠标指针
27、滑过“按下按下”图图像时,所显示的图像,例如,项目变淡或变灰。像时,所显示的图像,例如,项目变淡或变灰。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.54.1.5创建导航条创建导航条1.1.插入导航条插入导航条插入导航条时,需要命名导航条项目,并选择要用于它们的图像。插入导航条时,需要命名导航条项目,并选择要用于它们的图像。(1 1)执行下列操作之一:)执行下列操作之一:选择选择“插入插入”“”“图像对象图像对象”“”“导航条导航条”。在在“插入插入”栏的栏的“常用常用”类别中,单击类别中,单
28、击“图像图像”菜单并选择菜单并选择“插入导航条插入导航条”按钮。出按钮。出现现“插入导航条插入导航条”对话框。对话框。(2 2)为默认的导航条元件)为默认的导航条元件“unnamed1”unnamed1”选择状态图像,根据需要选择选择状态图像,根据需要选择“鼠标经过图鼠标经过图像像”、“按下图像按下图像”、“按下时鼠标经过图像按下时鼠标经过图像”;替换文本中写入如果导航条图;替换文本中写入如果导航条图像没有正确显示时在该位置显示的替换文本;像没有正确显示时在该位置显示的替换文本;“按下时,前往的按下时,前往的URL”URL”中填入单击中填入单击导航条时链接的目标网页地址;在导航条时链接的目标网
29、页地址;在“插入插入”下拉列表框中选择下拉列表框中选择“水平水平”或或“垂垂直直”,来确定导航条在页面的显示方式。完成一个按钮的添加后,单击顶部,来确定导航条在页面的显示方式。完成一个按钮的添加后,单击顶部“”按钮,在文本框中继续填入相应的文件,为导航条添加另一个按钮。重复以上步按钮,在文本框中继续填入相应的文件,为导航条添加另一个按钮。重复以上步骤,直至所需的按钮添加完毕。骤,直至所需的按钮添加完毕。(3 3)单击单击“确定确定”按钮按钮 第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.54.
30、1.5创建导航条创建导航条2.2.修改导航条修改导航条为文档创建导航条后,可使用为文档创建导航条后,可使用“修改导航条修改导航条”命令向导航条添加图像、删除图像,执命令向导航条添加图像、删除图像,执行以下操作:行以下操作:(1 1)在活动页面中选择导航条。)在活动页面中选择导航条。(2 2)选择)选择“修改修改”“”“导航条导航条”,出现,出现“修改导航条修改导航条”对话框。对话框。(3 3)在在“导航条项目导航条项目”列表中,选择要编辑的项目重新编辑。列表中,选择要编辑的项目重新编辑。(4 4)按需要进行更改后,单击)按需要进行更改后,单击“确定确定”按钮。按钮。第第1章章 网页设计与制作概
31、述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.64.1.6创建跳转菜单创建跳转菜单跳转菜单是文档中的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。跳转菜单跳转菜单是文档中的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。跳转菜单可以创建到整个可以创建到整个 Web Web 站点内文档的链接、到其它站点内文档的链接、到其它 Web Web 站点上文档的链接、电子邮件链接、站点上文档的链接、电子邮件链接、到图形的链接,也可以创建到可在浏览器中打开的任何文件类型的链接。到图形的链接,也可以创建到可在浏览器
32、中打开的任何文件类型的链接。1.1.插入跳转菜单插入跳转菜单若要插入跳转菜单,执行以下操作:若要插入跳转菜单,执行以下操作:(1 1)打开一个文档,然后将插入点放在)打开一个文档,然后将插入点放在“文档文档”窗口中。窗口中。(2 2)执行下列操作之一:)执行下列操作之一:选择选择“插入插入”“”“表单表单”“”“跳转菜单跳转菜单”,出现出现“插入跳转菜单插入跳转菜单”对话对话框。框。在在“插入插入”栏的栏的“表单表单”类别中单击类别中单击“跳转菜单跳转菜单”按钮,出现按钮,出现“插入跳转菜插入跳转菜单单”对话框。对话框。图图4.10“4.10“插入跳转菜单插入跳转菜单”对话框对话框(3 3)在
33、)在“文本文本”文本框中输入跳转菜单的菜单项名称;在文本框中输入跳转菜单的菜单项名称;在“选择时,转到选择时,转到URL”URL”文本文本框中输入单击该菜单文本跳转到的网页;框中输入单击该菜单文本跳转到的网页;“菜单名称菜单名称”文本框中输入菜单的名字文本框中输入菜单的名字(不显示在网页中);(不显示在网页中);“菜单之后插入选项按钮菜单之后插入选项按钮”者确定在跳转菜单后是否加入者确定在跳转菜单后是否加入按钮。单击顶部加号按钮。单击顶部加号“”按钮,在文本框中继续填入相应的菜单项目,重复以按钮,在文本框中继续填入相应的菜单项目,重复以上步骤,直至所需的按钮添加完毕。顶部的用以调整菜单项目的显
34、示顺序。上步骤,直至所需的按钮添加完毕。顶部的用以调整菜单项目的显示顺序。(4 4)单击单击“确定确定”按钮。按钮。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.64.1.6创建跳转菜单创建跳转菜单2.2.编辑跳转菜单编辑跳转菜单 跳转菜单是文档中的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。跳转菜单是文档中的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。跳转菜单可以创建到整个跳转菜单可以创建到整个 2.2.编辑跳转菜单编辑跳转菜单(1 1)在在“文档文档”窗口的窗口
35、的“设计设计”视图中,单击跳转菜单对象来选定它。在属性面板视图中,单击跳转菜单对象来选定它。在属性面板中出现中出现“列表列表/菜单菜单”图标。图标。(2 2)在属性面板中,单击)在属性面板中,单击“列表值列表值”按钮。出现按钮。出现“列表值列表值”对话框。对话框。(3 3)根据需要对菜单项进行更改,然后单击根据需要对菜单项进行更改,然后单击“确定确定 第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.14.1超级链接及其应用超级链接及其应用4.1.74.1.7创建热点链接创建热点链接 创建热点链接是指在一张图片上实现多个局部区域,单击这创建热点
36、链接是指在一张图片上实现多个局部区域,单击这些区域时指向不同的网页链接,这些区域称作热区。比如一张中些区域时指向不同的网页链接,这些区域称作热区。比如一张中国地图的图片,如图国地图的图片,如图4.114.11所示。在中国地图加一些链接,当鼠标所示。在中国地图加一些链接,当鼠标移动移动到省份的热区,会显示提示,如果有预先设置的网站,点击到省份的热区,会显示提示,如果有预先设置的网站,点击会进入相应的网站。会进入相应的网站。(1 1)插入图片,单击图片,利用展开的属性面板上的绘图工具)插入图片,单击图片,利用展开的属性面板上的绘图工具在画面上绘制热区在画面上绘制热区,(2 2)属性面板改换为热点面
37、板,填写其中的相关项目:)属性面板改换为热点面板,填写其中的相关项目:链接输入框:填入相应的链接。链接输入框:填入相应的链接。替代框:填入提示文字说明。替代框:填入提示文字说明。目标框:不作选择则默认在新浏览器窗口打开。目标框:不作选择则默认在新浏览器窗口打开。(3 3)保存页面,预览设置的热区检验效果。)保存页面,预览设置的热区检验效果。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理 一个网站往往包含大量的文档,文档之间可能存在着复杂的链接一个网站往往包含大量的文档,文档之间可能存在着复杂的链接关系,当
38、移动或重命名某个文档时,会造成其它文档中以此文档关系,当移动或重命名某个文档时,会造成其它文档中以此文档为链接目标的链接失效,这种失效的链接称为断链接。为避免站为链接目标的链接失效,这种失效的链接称为断链接。为避免站点中出现断链接,可以使用点中出现断链接,可以使用Dreamweaver 8Dreamweaver 8的链接管理功能,在移的链接管理功能,在移动或重命名文档后自动更新相关链接。动或重命名文档后自动更新相关链接。4.2.1 4.2.1 启用连接管理启用连接管理在在 Dreamweaver 8 Dreamweaver 8 中启用链接管理,执行以下操作:中启用链接管理,执行以下操作:(1
39、1)选择选择“编辑编辑”“”“首选参数首选参数”,显示,显示“首选参数首选参数”对话框。对话框。(2 2)从左侧的从左侧的“类别类别”列表中选择列表中选择“常规常规”(3 3)在)在“文档选项文档选项”部分,从部分,从“移动文件时更新链接移动文件时更新链接”弹出菜单中弹出菜单中选择选择“总是总是”或者或者“提示提示”。若选择若选择“总是总是”,则每当移动或重命名选定文档时,则每当移动或重命名选定文档时,Dreamweaver 8 Dreamweaver 8 将自动更新起自和指向该文档的所有链接;如果选择将自动更新起自和指向该文档的所有链接;如果选择“提示提示”,D Dreamweaver 8
40、reamweaver 8 将显示一个对话框,列出此更改影响到的所有文件。将显示一个对话框,列出此更改影响到的所有文件。单击单击“更新更新”可更新这些文件中的链接,而单击可更新这些文件中的链接,而单击“不更新不更新”将保将保留原文件不变。留原文件不变。(4 4)单击)单击“确定确定”按钮。按钮。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理 4.2.2 4.2.2 创建站点缓存创建站点缓存 为了加快链接的更新操作,可以使用站点缓存。站点缓存是由为了加快链接的更新操作,可以使用站点缓存。站点缓存是由Dream
41、weaver 8Dreamweaver 8创建的缓存文件,用以存储有关本地文件夹中所有链接的信息。在添加、更改或创建的缓存文件,用以存储有关本地文件夹中所有链接的信息。在添加、更改或删除指向本地站点上的文件的链接时,该缓存文件可以加快更新操作。删除指向本地站点上的文件的链接时,该缓存文件可以加快更新操作。为站点创建缓存文件,执行以下操作:为站点创建缓存文件,执行以下操作:(1 1)选择选择“站点站点”“”“管理站点管理站点”,出现,出现“编辑站点编辑站点”对话框。对话框。(2 2)选择一个站点,然后单击选择一个站点,然后单击“编辑编辑”,出现,出现“站点定义站点定义”对话框,如图对话框,如图4
42、.164.16所示。所示。(3 3)单击单击“高级高级”选项卡显示选项卡显示“站点定义站点定义”对话框的对话框的“高级高级”类别。类别。(4 4)从左侧的类别列表中选择)从左侧的类别列表中选择“本地信息本地信息”,“站点定义站点定义”对话框显示对话框显示“本地信息本地信息”选项。选项。(6 6)在在“本地信息本地信息”类别中,选中类别中,选中“启用缓存启用缓存”复选框。复选框。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理4.2.34.2.3在站点地图中修改链接在站点地图中修改链接可以通过在站点地图中添加
43、、更改和删除链接来修改站点的结构。可以通过在站点地图中添加、更改和删除链接来修改站点的结构。DreamweaDreamweaver 8 ver 8 自动更新站点地图可以显示对站点所做的更改。自动更新站点地图可以显示对站点所做的更改。更改链接,执行以下操作:更改链接,执行以下操作:(1 1)在站点地图中,选择要更改的链接所指向的页面(以便当前链接到此)在站点地图中,选择要更改的链接所指向的页面(以便当前链接到此页面的文档指向其它页面),右键单击,从上下文菜单中选择页面的文档指向其它页面),右键单击,从上下文菜单中选择“改变链改变链接接”,弹出,弹出“选择选择HTMLHTML文件对话框文件对话框”
44、(2 2)通过浏览找到希望链接指向的文件,或者直接键入)通过浏览找到希望链接指向的文件,或者直接键入 URLURL。(3 3)单击)单击“确定确定”按钮。按钮。4.2.44.2.4删除链接删除链接删除链接,执行以下操作:删除链接,执行以下操作:(1 1)在站点地图中选择页面。)在站点地图中选择页面。(2 2)右键单击,从上下文菜单中选择)右键单击,从上下文菜单中选择“移除链接移除链接”。删除链接不会删除该文件,删除链接不会删除该文件,但会从指向该链接的页面上的但会从指向该链接的页面上的 HTML HTML 源代码中源代码中删除该链接。删除该链接。第第1章章 网页设计与制作概述网页设计与制作概述
45、第第4 4章章 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理1.1.在站点地图中修改链接在站点地图中修改链接可以通过在站点地图中添加、更改和删除链接来修改站点的结构。可以通过在站点地图中添加、更改和删除链接来修改站点的结构。Dreamweaver 8 Dreamweaver 8 自动更新站点自动更新站点地图以显示对站点所做的更改。地图以显示对站点所做的更改。若要更改链接,执行以下操作:若要更改链接,执行以下操作:(1 1)在站点地图视图中,选择要更改的链接所指向的页面(以便当前链接到此页面的文档指向其)在站点地图视图中,选择要更改的链接所指向的页面(以便当前链接到此
46、页面的文档指向其它页面),右键单击从上下文菜单中选择它页面),右键单击从上下文菜单中选择“改变链接改变链接”。弹出选择。弹出选择HTMLHTML文件对话框。文件对话框。(2 2)通过浏览找到希望链接指向的文件,或者直接键入通过浏览找到希望链接指向的文件,或者直接键入 URLURL。(3 3)单击)单击“确定确定”按钮。按钮。2.2.在整个站点范围内更改链接在整个站点范围内更改链接除了每当移动或重命名文件时让除了每当移动或重命名文件时让 Dreamweaver 8 Dreamweaver 8 自动更新链接外,还可以手动更改所有链接(包自动更新链接外,还可以手动更改所有链接(包括电子邮件链接、括电
47、子邮件链接、FTP FTP 链接、空链接和脚本链接),以指向其它位置。链接、空链接和脚本链接),以指向其它位置。若要在整个站点范围内更改链接,执行以下操作:若要在整个站点范围内更改链接,执行以下操作:(1 1)在在“文件文件”面板的面板的“本地本地”视图中选择一个文件。视图中选择一个文件。(2 2)选择选择“站点站点”“”“更改整个站点链接更改整个站点链接”。出现。出现“更改整个站点链接更改整个站点链接”对话框。对话框。(3 3)完成对话框中的网页链接地址选择。完成对话框中的网页链接地址选择。(4 4)单击单击“确定确定”按钮按钮 第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章
48、 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理4.2.6 4.2.6 检查链接检查链接“检查链接检查链接”功能用于在打开的文件、本地站点的某一部分或者功能用于在打开的文件、本地站点的某一部分或者整个本地站点中查找断链接和未被引用的(也称作孤立的)文件整个本地站点中查找断链接和未被引用的(也称作孤立的)文件(文件仍然位于站点中,但没有其它文件链接到该文件)。(文件仍然位于站点中,但没有其它文件链接到该文件)。DreaDreamweaver 8 mweaver 8 只验证那些指向站点内文档的链接;将出现在选定文只验证那些指向站点内文档的链接;将出现在选定文档中的外部链接
49、编辑成一个列表,但并不验证它们。档中的外部链接编辑成一个列表,但并不验证它们。第第1章章 网页设计与制作概述网页设计与制作概述第第4 4章章 超级链接及其应用超级链接及其应用4.24.2超级链接的管理超级链接的管理4.2.6 4.2.6 检查链接检查链接“检查链接检查链接”功能用于在打开的文件、本地站点的某一部分或者功能用于在打开的文件、本地站点的某一部分或者整个本地站点中查找断链接和未被引用的(也称作孤立的)文件整个本地站点中查找断链接和未被引用的(也称作孤立的)文件(文件仍然位于站点中,但没有其它文件链接到该文件)。(文件仍然位于站点中,但没有其它文件链接到该文件)。DreaDreamwe
50、aver 8 mweaver 8 只验证那些指向站点内文档的链接;将出现在选定文只验证那些指向站点内文档的链接;将出现在选定文档中的外部链接编辑成一个列表,但并不验证它们。档中的外部链接编辑成一个列表,但并不验证它们。1.1.检查当前文档内链接。检查当前文档内链接。(1 1)将此文件保存在本地将此文件保存在本地 Dreamweaver 8 Dreamweaver 8 站点中的某个位置。站点中的某个位置。(2 2)选择选择“文件文件”“”“检查页检查页”“”“检查链接检查链接”。“断链接断链接”报告出现在报告出现在“链接检查器链接检查器”面板中,如图面板中,如图4-184-18所示。所示。图图4