第5章 超级链接.ppt

1、第1、5章超连结，教育挑战：绝对路径、相对路径和网站根目录相对路径的概念。超链接使您可以在文档之间跳转，包括创建链接和设置属性的各种方法，如文本链接、图像链接、锚点链接、电子邮件链接和空链接。使用CSS定义链接文本状态。鼠标创建图像和导航条和设置链接。教育重点和难点：创建各种常用超链接。向超连结管理链接添加提示。修改链接目标定义链接样式等。相对和绝对路径的定义和差异。2，超链接实质上是网页之一，是允许连接到其他网页或站点的元素类型。只有在每个网页徐璐连接后，才能真正配置一个网站。也称为超链接。超链接是从一个网页指向一个目标的连接关系，牙齿目标是另一个网页，同一网页的另一个位置，图片，电子邮件地

2、址，档案，甚至一个应用程序节目等。网页过程中用于超链接的对象可以是文本或图片。如果浏览器单击连接的文本或图片，链接目标将显示在浏览器中，并且打开或运行，具体取决于目标类型。因此，根据使用的对象，超链接可以分为文本链接、图像链接、锚点链接、空链接、电子邮件链接等。3，5.1网页链接路径，在网页编写中设置超链接的三个茄子表达：(1)绝对路径。(2)相对路径(相对于文档)。(3)网站根目录相对路径(基于根文件夹)。正确创建超链接之前，必须先学习路径。4，5.1.1绝对路径，我们都知道，要找到平时使用计算机时所需的文件，需要知道文件的位置，指示文件位置的方法是路径。例如，d:/mysite/mysit

3、e/mm指向完整配置文件位置的路径是绝对路径。无需知道其他信息即可基于绝对路径确定文件的位置。在网站中，类似于5，5.1.2“相对路径”(Relative Path)，相对路径表示由于牙齿文件所在的路径而与其他档案(或文件夹)的路径关系。使用相对路径会给我们带来很多方便。例如，需要徐璐超链接的本地硬盘文件有两个文件，如图5-1所示：g : site index.htm g : siteweb article 01.htm，6，index.htm要链接到01.htm牙齿文件，正确的链接必须是链接文本(即标准相对路径)，反之，要链接到01 . htm牙齿index . htm文件在这里./表示向上

4、一级。因此，路径中的“”./，表示父文件夹././”等。子文件夹包含“/.”中选择所需的构件。7，5.1.3网站根目录相对路径、网站根目录相对路径说明了从站点根文件夹到文档的路径。如果您正在处理承载多个服务器或多个站点的服务器，则可能需要使用这些路径。但是，如果您不熟悉牙齿路径类型，建议您继续使用文档相对路径。网站根目录相对路径以斜线开头，斜线表示网站根文件夹。例如，/article/index.htm是网站根文件夹的article子文件夹中档案(index.htm)的网站根目录相对路径。如果需要经常在网站上的多个文件夹之间移动HTML文件，网站根目录相对路径通常是指定链接的最佳方法。移动包含

5、网站根目录相对链接的文档时，无需更改链接。因为链接是网站根目录的相对关系，而不是文档本身。例如，如果HTML文件对相关文件(如图像)使用网站根目录相对链接，那么即使移动HTML文件，相关档案链接也将继续有效。8，但是，如果移动或重命名网站根目录相对链接指向的文档，即使文档之间的相对路径没有更改，也必须更新链接。例如，如果移动文件夹，则必须更新指向该文件夹中文件的所有网站根目录相对链接。使用“档案”面板移动或重命名文件时，所有相关链接都会自动更新。)、9，5.2链接设置和超链接由两部分组成：源端点和目标端点。超链接中包含链接的端点称为链接的源端点，跳转到的页面或页面的位置称为链接的目标端点。设置

6、超链接的一般想法：超链接的开始位置(源端点)链接目标位置(目标端点)、10，5.2.1文本链接、网页中最常用的链接之一的文本链接、源端点是文本，目标端点可以是网站内部或网站外部的网页之一。设置文本链接的方法如下：方法1:创建新的index.htm文件，输入文本“文本超连结”，选择文本，然后从菜单栏中选择“插入”超连结命令，并对话框弹出以在对话框中进行设置，如图所示。11，方法2:在“属性”面板中，使用“链接”首先选择要在网页中设置链接的文本，然后使用链接文本框右侧的“查找档案”按钮或“档案浏览”按钮，或者直接在文本框内输入链接网页文档的路径，以设置文本链接。12，在“属性”面板(如图所示)中，

7、目标列表包含四个茄子属性，您可以从中进行选择。_blank:超链接的网页在另一个窗口中打开。_parent:超链接的网页名称显示在父框架或父窗口中。_self:超链接的网页显示在当前网页所在的窗口或框架中。这是默认设置。_top:超链接的网页显示在父窗口中。13，5.2.2使用CSS定义链接文本状态，使用“CSS样式”面板定义链接文本的四个茄子状态。(1)在“CSS样式”面板中，设置“新建CSS规则”按钮(单击，在弹出的插图中显示的对话框中)。14，(2)单击“确定”按钮，a:link上的“CSS规则定义”对话框弹出窗口，如图所示设置，文本说明和选择“无”，15，(3)单击提示：您还可以将其他

8、三个茄子链接文本状态设置为相同的状态，但是请记住，在预览之前，您无法在浏览器窗口中看到效果。16，5.2.3锚点链接(称为锚点链接)表示同一页面中的不同位置链接。例如，页面底部有“返回页首”文本的长页面在单击链接后可以跳转到页面顶部。这是最常用的锚定连结。创建锚点链接的过程分为两个步骤。下面，我们创建页面的“返回页首”链接。第一步是在文档中设置占位符，并创建命名位置的命名锚点，以便引用。1)将光标放在要设置标记的位置。例如，将光标放在页面顶部。2)在“插入”面板的“常规”模式下，选择“命名锚记”按钮，如下图所示。17，提示：还可以通过从菜单栏中选择“插入”命名锚记命令(快捷键)来创建命名锚记。

9、18，3)在弹出的“命名锚记”对话框(如top)中输入锚记的名称(如top)，然后单击“确定”按钮(请参阅区分大小写)，将在文档中的相应位置插入名为TOP的锚记如图所示。步骤19，2:建立至具名锚定的连结。下面，我们创建页面的“返回页首”链接。1)选择要创建链接的文本或图像。例如，选择单词“返回页首”。2)在“属性”面板的“链接”文本框中，输入编号和锚点名称“top”。如图所示，连接代码20返回顶部3)，或在浏览对话框中，选择要链接的文件，然后添加和锚定名称。21，5.2.4电子邮件链接所谓的“电子邮件链接”，是指我们单击时浏览器默认使用的邮件客户端节目(outlook)自动调用以传输电子邮件

10、。创建电子邮件链接的步骤包括：1)在“文档”窗口的“设计”视图中，将插入点放在要显示电子邮件链接的位置，或者选择要显示为电子邮件链接的文本或图像。2)通过执行以下操作之一插入链接：(1)从菜单栏中选择“插入”“电子邮件链接”命令。(2)“插入”面板的“常规”模式下的单击“电子邮件链接”按钮。22，(3)首先选择文本“给我写信”，然后在“属性”面板的“链接”文本框中输入“mailto:”、“mailto 3360”和“电子邮件地址”，22在“文本”右侧的文本框中，输入或编辑电子邮件链接的源端点文本。4)在“电子邮件”右侧的文本框中输入电子邮件地址，然后单击单击“确定”按钮。24，连接代码为：成功

11、生成电子邮件链接后，按F12键进行预览，按单击电子邮件链接后，浏览器将自动打开相应的节目(系统默认为OutLook)。图：25，5.2.5下载链接和超链接指向档案类型(例如zip、rar、exe、MP3等)而不是网页文档时，单击链接将提示您选择是否下载档案。选择“下载软件”文本，然后在“属性”面板中，从单击、弹出“选择档案”对话框中选择档案“ch05/5.2.9/imaggs”，26，保存网页文档，然后选择F12下载单击下载链接文本“软件下载”时，将弹出以下档案下载对话框弹出窗口，提示您打开或保存文件：连接代码是软件下载与其他档案或节目下载链接设置相同。27，2。空链接空链接也称为无地址链接。

12、也就是说，没有链接对象的链接是未分配链接，空链接用目标URL牙齿“#”表示。也就是说，创建链接时，只要在“属性”板的链接输入框中输入#标记，便是空链接。图：28，连接代码为：空链接示例空链接的出现包括多个茄子元素，例如一些未定期完成的页面。还可以使用它来保持页面显示的一致性(链接样式不同于普通文字样式)。空链接还经常用于将行为附加到页面上的对象或文本。例如，您可以将行为附加到空链接，以便在指针滑过该链接时交换图像或显示绝对位置元素(AP元素)。1)在“文档”窗口的“设计”视图中，选择文本、图像或对象。2)在“属性”面板的“链接”框中，键入javascript:(JavaScript一词后跟冒号

13、，再跟分号。)要创建包含警告消息的链接，请在属性面板的“链接”框中选择“javascript:alert”(单击空链接后重新选择！)；，29，连接代码是空连接的样例。效果如下：30，5.2.6常规图像链接、Dreamweaver中的图像链接主要包括常规图像链接、图像热点链接、鼠标遍历图像超连结等。创建常规图像超连结的步骤：插入要链接的网页图像。从菜单栏中选择“插入”“图像”命令。或者，在“插入”面板的“常规”模式下，单击“图像”按钮。出现对话框弹出窗口，选择图像源文件，如图所示。31，在“属性”面板的“链接”框中，输入链接的目标地址，如下所示：连接代码是32，5.2.7图像热点链接，热点链接也

14、称为热点链接，也称为图像地图。图像热点链接是区分同一图像的多个区域的超链接。图像热点是包含指向其它文档或锚点的链接的预定义区域的图像。例如，如果网页版本中国地图中单击的一周的名称，则打开新网页并显示该周的地图或简介。1.运行Dreamweaver CS4，打开网页文件，然后选择档案中的图像，如下图所示。选择图像后，在“属性”面板中选择“矩形热点”工具、“圆形热点”工具、“多边形热点”工具之一，以便在图像的相应位置的四个直辖市(四个热点或热点)上分别绘制不同的区域，如下图所示。33，使用热点工具绘制热点，34，设置图像热点的热点工具，35，“属性”面板中四个茄子热点工具按钮的名称如下表所示：36

15、，2。选取北京市上方的热点。其他三个直辖市的热点也分别链接到其他网页(tainjin.htm、shanghai.htm和chongqin.htm)。4.保存和预览效果。37，5.2.8鼠标通过图像、鼠标通过图像是在浏览器中查看并使用鼠标指针移动时更改的图像。必须创建两个茄子图像：主图像(第一次加载页面时显示的图像)和次图像(鼠标指针移过主图像时显示的图像)。鼠标通过图像的两个图像必须大小相同。如果两个图像大小不同，Dreamweaver会自动调整第二个图像的大小以匹配第一个图像的属性。鼠标通过图像将自动设置为响应onMouseOver事件。您可以设置图像以响应其他事件(例如鼠标单击)，或更改通

16、过鼠标的图像。步骤如下：在“文档”窗口中，将插入点放在要显示鼠标经过图像的位置。38，使用以下方法之一插入鼠标遍历图像：在“插入”面板的“常规”模式下，选择单击“图像”扩展按钮，然后选择“鼠标经过图像”图标按钮。当“插入”面板显示“经过鼠标的图像”图标按钮时，还可以将图标拖动到“文档”窗口中。从菜单栏中选择“插入”“图像对象”“经过鼠标的图像”命令。39，执行上述方法之一时，将弹出下图：40，设置选项，然后单击单击“确定”按钮。影像名称：鼠标穿越影像的名称。原始图像：加载页面时显示的图像。在“文本框”下，输入路径或单击浏览以选择图像。滑鼠指向效果影像鼠标：鼠标指标滑过原始影像时要显示的影像。输入路径或单击“浏览”以选择图像。预先加载鼠标遍历图像：将图像预先加载到浏览器的缓存中，以避免用户将鼠标指针移到图像上时出现延迟。替代文本：(可选)为使用仅显示文本的浏览器的访问者描述图像的文本。单击以转到URL。使用者单击鼠标影像经过时要开启的连