Dreamweaver网页设计与制作教程-电子教案-杨继 第4章 超级链接及其使用.ppt

第4章 超级链接及其使用,第1章 网页设计与制作概述,第3章 图像及其他媒体,内容提要 超级链接的概念和路径知识 创建超级链接的基本方法 从HTML角度理解超级链接第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.1超级链接概述 超级链接是指从一个网页（源文档）指向一个目标的连接关系,这个目标可以是另一个网页（目标文档）,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序本质上超级链接属于一个网页的一部分，它是一种允许浏览者同其他网页或站点之间进行连接的元素只有各个网页链接在一起后，才能真正构成一个网站 每个网页都有一个唯一的地址，称作统一资源定位器（URL），我们通过网页的URL将这些网页链接在一起但是，同一个网站下的每一个网页都属于同一个地址之下，这种情况下不需要为每一个链接都输入完全的地址，只要确定当前文档同其它文档或根目录之间的相对路径关系就可以因此，链接路径一般有三种类型，分别为绝对路径、相对路径、根目录相对路径第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.1超级链接概述 1.绝对路径 绝对路径提供所链接文档的完整URL地址，而且包括所使用的协议类型，比如 使用绝对路径时要确保绝对路径有效，比如 要链接其它服务器上的文档，必须使用绝对路径；本地链接也可使用绝对路径链接，但尽量不要采用这种方式，因为一旦此站点变更域名或改变地址，则所有本地绝对路径链接都将断开。

对本地链接最好使用相对路径，以提供更大的灵活性 2.相对路径 相对路径是指省略相对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分比如E：\F1\index.html链接到E:\F1\F2\about.html，可以把E:\F1\去掉，只用F2\about.html表示链接路径 当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名比如要从 yb.html 链接到 cc.html（两个文件在同一文件夹“JL”中，且目录深度相同），则其相对路径为cc.htm 当要链接到当前文档所在文件夹的子文件夹的文档时，先要有子文件夹名称，然后跟符号“/”，在加文件名比如要从 index.html 链接到 cc.htm（两个文件在同一文件夹“F1”中，index.html处于父目录中，而cc.htm处于子目录JL中），则其相对路径为JL/cc.html 当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“/”比如要从cc.htm链接到index.html（两个文件在同一文件夹“F1”中，index.html处于父目录中，而cc.htm处于子目录JL中），则其相对路径为/ index.html。

3.站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径当在处理承载有多个不同站点的服务器时，要考虑使用这种类型的路径 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹比如，/F1/index.html 是文件的站点根目录相对路径，该文件位于站点根文件夹的F1子文件夹中第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.2设置超级链接的方法 1.使用属性面板链接到文档 属性面板文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接执行以下操作： （1）在“文档”窗口的“设计”视图中选择要进行链接的文本或图像 （2）然后执行下列操作之一： 单击“属性”面板“链接”文本框右侧的文件夹图标，出现“选择文件对话框”， 如图4.1所示通过浏览选择一个文件，此时在 URL 文本框中显示了目标文档的路径使用“选择 HTML 文件”对话框中的“相对于”弹出菜单，指示该路径是文档相对路径还是根目录相对路径，然后单击 “选择”第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.2设置超级链接的方法 1.使用属性面板链接到文档 属性面板文件夹图标和“链接”文本框可用于创建从图像、对象或文本到其它文档或文件的链接。

执行以下操作： （1）在“文档”窗口的“设计”视图中选择要进行链接的文本或图像 （2）然后执行下列操作之一： 单击“属性”面板“链接”文本框右侧的文件夹图标，出现“选择文件对话框”， 如图4.1所示通过浏览选择一个文件，此时在 URL 文本框中显示了目标文档的路径使用“选择 HTML 文件”对话框中的“相对于”弹出菜单，指示该路径是文档相对路径还是根目录相对路径，然后单击 “选择” 在“链接”文本框中键入文档的路径和文件名,第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.2设置超级链接的方法 1.使用属性面板链接到文档 【_blank】： 将链接的文档载入一个新的、未命名的浏览器窗口 【_parent】： 将链接的文档载入该链接所在框架的父框架或父窗口如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口 【_self】： 将链接的文档载入链接所在的同一框架或窗口此目标是默认的，所以通常不需要指定它 【_top】： 将链接的文档载入整个浏览器窗口，从而删除所有框架第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.2设置超级链接的方法 2.使用“指向文件”图标链接文档 “指向文件”图标可用于创建从图像、对象或文本到其它文档或文件的链接。

若要使用“指向文件”图标链接文档，执行以下操作： （1）在“文档”窗口的“设计”视图中选择文本或图像 （2）拖动属性面板中“链接”文本框右侧的“指向文件”图标，然后指向另一个打开的文档、已打开文档中的可见锚记或指向“文件”面板中的一个文档“链接” （3）释放鼠标按钮 3.使用HTML标记创建超级链接 在HTML语言中，超文本链接标记通过锚标记和来实现这个标记需成对出现，以开始，结束常用的属性有： href：定义链接目标 title：定义当鼠标移动到链接上时出现的提示文字 target：设定链接目标显示的窗口，如target=“_bank“表示在新窗口中打开目标 例如： 吉林农业大学发展学院 这段代码表示当单击“吉林农业大学发展学院”这几个字时，将在新的浏览器窗口中打开网站主页第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.3 创建锚点链接 有时网页内容过多过长，浏览者要移动滚动条寻找内容不方便在制作网页的时候可以根据页面的内容，分为若干个主题，每个主题设置一个 “命名锚记”，创建这些“命名锚记”的链接，方便用户快捷定位网页的内容 命名锚记可以先在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。

1.创建命名锚记 要创建命名锚记，执行以下操作： （1） 在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方 （2）执行下列操作之一： 选择“插入” →“命名锚记” 按下 Ctrl+Alt+A 在“插入”栏的“常用”类别中，单击“命名锚记”按钮 出现“命名锚记”对话框 （3）在“锚记名称”文本框中，键入锚记的名称，并单击“确定”按钮 2.创建锚记链接 要链接到命名锚记，执行以下操作： （1）在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像 （2）在属性面板的“链接”文本框中，键入一个数字符号 （#） 和锚记名称例如： 要链接到当前文档中的名为“top”的锚记，键入 #top第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.4创建E-mail链接 单击电子邮件链接时，该链接打开一个新的空白信息窗口（使用的是与用户浏览器相关联的邮件程序）在电子邮件消息窗口中，“收件人”文本框自动更新为显示电子邮件链接中指定的地址 1.利用菜单创建电子邮件链接 要使用“插入电子邮件链接”命令创建电子邮件链接，执行以下操作： （1） 在“文档”窗口的“设计”视图中，将插入点放在希望出现电子邮件链接的位置，或者选择要作为电子邮件链接出现的文本或图像。

（2）执行下列操作之一，插入该链接： 选择“插入” →“电子邮件链接” 在“插入”栏的“常用”类别中，单击“插入电子邮件链接”按钮 出现“电子邮件链接”对话框 （3）在“文本”文本框中填写链接文字；在“E-Mail”文本框中填写链接的目标E-Mail地址 （4）单击“确定”按钮第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.4创建E-mail链接 2.使用属性面板创建电子邮件链接 执行以下操作： （1）在“文档”窗口的“设计”视图中选择文本或图像 （2）在属性面板的“链接”文本框中，如图4.6所示，键入 mailto:，后面输入电子邮件地址 在冒号和电子邮件地址之间不能键入任何空格例如，键入mailto:shine@第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.4创建E-mail链接 2.使用属性面板创建电子邮件链接 执行以下操作： （1）在“文档”窗口的“设计”视图中选择文本或图像 （2）在属性面板的“链接”文本框中，如图4.6所示，键入 mailto:，后面输入电子邮件地址 在冒号和电子邮件地址之间不能键入任何空格。

例如，键入mailto:shine@第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.5创建导航条,第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.5创建导航条 导航条项目有四种状态： 状态图像：用户尚未单击或尚未与此项目交互时所显示的图像例如，当前状态下的项目未被点击 鼠标经过图像：指鼠标指针滑过“一般”图像时所显示的图像项目的外观发生变化（例如变得更暗），以便让用户知道可与这个项目进行交互 按下图像：指项目被单击后所显示的图像例如，用户单击某项目后，载入一个新的页面，而导航条仍然显示，只是被单击的项目变暗，表示它曾被选择过 按下时鼠标经过图像：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像，例如，项目变淡或变灰第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.5创建导航条 1. 插入导航条 插入导航条时，需要命名导航条项目，并选择要用于它们的图像 （1）执行下列操作之一： 选择“插入” →“图像对象” → “导航条” 在“插入”栏的“常用”类别中，单击“图像”菜单并选择“插入导航条”按钮。

出现“插入导航条”对话框 （2）为默认的导航条元件“unnamed1”选择状态图像，根据需要选择“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”；替换文本中写入如果导航条图像没有正确显示时在该位置显示的替换文本；“按下时，前往的URL”中填入单击导航条时链接的目标网页地址；在“插入”下拉列表框中选择“水平”或“垂直”，来确定导航条在页面的显示方式完成一个按钮的添加后，单击顶部 “＋”按钮，在文本框中继续填入相应的文件，为导航条添加另一个按钮重复以上步骤，直至所需的按钮添加完毕 （3） 单击“确定”按钮,第1章 网页设计与制作概述,第4章 超级链接及其应用,4.1超级链接及其应用 4.1.5创建导航条 2.修改导航条 为文档创建导航。