第7章--在网页中使用超链接-《网页制作宝典》教学课件.ppt

《第7章--在网页中使用超链接-《网页制作宝典》教学课件.ppt》由会员分享，可在线阅读，更多相关《第7章--在网页中使用超链接-《网页制作宝典》教学课件.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.认识超链接认识超链接 2.Dreamweaver创建各种超连接的方法创建各种超连接的方法 3.Dreamweaver编辑各种超连接的方法编辑各种超连接的方法 4.HTML和和FrontPage第第7章章 在网页中使用超链接在网页中使用超链接 7.1 利用利用Dreamweaver 4.0处理超链接处理超链接 7.1.1 创建文字超链接创建文字超链接 1超链接简介超链接简介 超超链链接接是是WWWWWW技技术术的的核核心心，是是网网页页中中最最重重要要、最最根根本本的的元元素素之之一一。超超链链接接能能够够使使多多个个孤孤立立

2、的的网网页页之之间间产产生生一一定定的的相相互互联联系系，从从而而使使单单独的网页形成一个有机的整体。独的网页形成一个有机的整体。（1）什么是超链接）什么是超链接 所所谓谓的的超超链链接接是是指指从从一一个个网网页页指指向向一一个个目目标标的的连连接接关关系系，这这个个目目标标可可以以是是另另一一个个网网页页，也也可可以以是是相相同同网网页页上上的的不不同同位位置置，还还可可以以是是一一个个图图片片、一一个个电电子子邮邮件件地地址址、一一个个文文件件，甚甚至至是是一一个个应应用用程程序序。而而在在一一个个网网页页中中用用来来超超链链接接的的对对象象，可可以以是是一一段段文文本本或或者者是是一一

3、个个图图片片。当当浏浏览览者者单单击击已已经经链链接接的的文文字字或或图图片片后后，链链接接目目标标将将显显示示在在浏浏览器上，并且根据目标的类型来打开或运行。览器上，并且根据目标的类型来打开或运行。按按照照链链接接路路径径的的不不同同，网网页页中中超超链链接接一一般般分分为为以以下下3种种类类型型：内部链接、锚点链接和外部链接。内部链接、锚点链接和外部链接。如如果果按按照照使使用用对对象象的的不不同同，网网页页中中的的链链接接又又可可以以分分为为：文文本本超超链链接接、图图像像超超链链接接、E-mail链链接接、锚锚点点链链接接、多多媒媒体体文文件件链链接接、空空链链接等。接等。（2）合理安

4、排超链接）合理安排超链接 合理安排超链接在网页的制作中是非常重要的。采用什么结合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。构的链接会直接影响到网页的布局。在这里给大家一些设计链接的建议。在这里给大家一些设计链接的建议。1。避避免免孤孤立立文文件件的的存存在在：应应该该避避免免存存在在孤孤立立的的文文件件，这这样样能能使使将来在修改和维护链接时有清晰的思路。将来在修改和维护链接时有清晰的思路。2。在在网网页页中中避避免免使使用用过过多多的的超超级级链链接接：在在一一个个网网页页中中设设置置过过多多超超链链接接会会导导致致网网页页的的观观赏赏性性不不强强，文

5、文件件过过大大。如如果果避避免免不不了了过过多多的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。的超链接，可以尝试使用下拉列表框、动态链接等一些链接方式。3。网网页页中中的的超超链链接接不不要要超超过过4层层：链链接接层层数数过过多多容容易易让让人人产产生生厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过厌烦的感觉，在力求做到结构化的同时，应注意链接避免超过4层。层。4。页页面面较较长长时时可可以以使使用用书书签签：在在页页面面较较长长时时，可可以以定定义义一一个个书书签，这样能让浏览者方便地找到想要的信息。签，这样能让浏览者方便地找到想要的信息。5。设设置置主主页页或或上上一

6、一层层的的链链接接：有有些些浏浏览览者者可可能能不不是是从从网网站站的的主主页页进进入入网网站站的的，设设置置主主页页或或上上一一层层的的链链接接，会会让让浏浏览览者者更更加加方方便便地浏览全部网页。地浏览全部网页。2建立文本超链接建立文本超链接 在创建超链接之前，首先了解网站中在创建超链接之前，首先了解网站中3种类型的文档路径：绝种类型的文档路径：绝对路径、和根目录相对路径以及和文档相对路径。对路径、和根目录相对路径以及和文档相对路径。绝绝对对路路径径：是是包包含含服服务务器器协协议议（对对于于网网页页来来说说通通常常是是http:/或或）的的完完全全路路径径，绝绝对对路路径径包包含含的的是

7、是精精确确地地址址而而不不用用考考虑虑源源文文件件的的位位置置。但但是是如如果果目目标标文文件件被被移移动动，则则链链接接无无效效。创创建建外外部部超超链链接接时时必必须须使使用绝对路径。用绝对路径。和和根根目目录录相相对对的的路路径径：是是从从当当前前站站点点的的根根目目录录开开始始的的路路径径。站站点点上上所所有有可可公公开开的的文文件件都都存存放放在在站站点点的的根根目目录录下下。和和根根目目录录相相对对的的路径使用斜杠以告诉服务器从根目录开始。路径使用斜杠以告诉服务器从根目录开始。和文档相对的路径：是指和当前文档所在的文件夹相对的路和文档相对的路径：是指和当前文档所在的文件夹相对的路径

8、。这种路径通常是最简单的路径，可以用来链接和当前文档处于径。这种路径通常是最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。同一文件夹下的文档。（1）创建文本超链接）创建文本超链接 在网页上选择需要添加超链接的文本，此时属性面板成为文本在网页上选择需要添加超链接的文本，此时属性面板成为文本属性面板；属性面板；在在属属性性面面板板上上指指定定文文字字的的链链接接目目标标。可可按按以以下下4种种方方法法指指定定文文字的超链接：字的超链接：（2）编辑文本超链接）编辑文本超链接设置文本链接的状态设置文本链接的状态 一个未被访问过的链接与一个被激活的链接在形式上肯定会有一个未被访问过的链接与一

9、个被激活的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。可以使各个状态区别开来。设置不同的文本颜色的具体步骤如下：设置不同的文本颜色的具体步骤如下：打开包含文本链接的文档打开包含文本链接的文档“园丁乐园园丁乐园”，选择主菜单中的，选择主菜单中的“Modify（修改）（修改）”|“Page Properties（页面属性）（页面属性）”命令，打开命令，打开“Page P

10、roperties（页面属性）（页面属性）”对话框；对话框；单单击击“Links（链链接接）”项项右右边边的的图图标标，打打开开调调色色板板，选选取取一一种种颜颜色；色；同同样样为为“Visited Links（访访问问过过的的链链接接）”、“Active（活活动动链链接接）”项设置不同的颜色；项设置不同的颜色；单击单击“Ok”按钮，完成设置。按钮，完成设置。设置完成之后，按下设置完成之后，按下“F12”键，预览网页，链接的三种状态通键，预览网页，链接的三种状态通过不同的颜色区别开来。过不同的颜色区别开来。删除文本超链接删除文本超链接 在在Dreamweaver 4.0中要删除一个文本超链接很

11、容易，先用鼠中要删除一个文本超链接很容易，先用鼠标选定文本对象，将光标定位于属性面板的标选定文本对象，将光标定位于属性面板的“Link”文本框中，文本框中，用用“BackSpace”键或键或“Delete”键，将其显示的超链接对象文件键，将其显示的超链接对象文件名删除，再回车，或选择名删除，再回车，或选择“Modify”|“Remove Link”命令，都可命令，都可以删除超链接而保留原文本对象。以删除超链接而保留原文本对象。7.1.2 创建图片超链接创建图片超链接1创建图片超链接创建图片超链接 创建图片超链接的步骤如下：创建图片超链接的步骤如下：（1）选中所需建立超链接的图片，此时属性面板为

12、图片的属）选中所需建立超链接的图片，此时属性面板为图片的属性面板。性面板。（2）在在图图片片属属性性面面板板中中，为为图图片片添添加加文文档档相相对对路路径径的的链链接接。具具体方法可参考为文本添加超链接的操作；体方法可参考为文本添加超链接的操作；（3）按）按“F12”预览网页。预览网页。图像连接不像文本链接那样，会发生许多提示，图像本身不图像连接不像文本链接那样，会发生许多提示，图像本身不会发生改变，只是在预览网页时，当鼠标指针经过带链接的图像会发生改变，只是在预览网页时，当鼠标指针经过带链接的图像时，指针的形状变为时，指针的形状变为“手手”的形状。点击图像就会打开所链接的的形状。点击图像就

13、会打开所链接的文档。文档。7.1.3 创建锚点超链接创建锚点超链接 在在一一些些内内容容很很多多的的网网页页中中，设设计计者者常常常常在在该该网网页页的的开开始始部部分分以以网网页页内内容容的的小小标标题题作作为为超超链链接接。当当浏浏览览者者单单击击网网页页开开始始部部分分的的小小标标题题时时，网网页页将将跳跳到到内内容容中中的的对对应应小小标标题题上上，免免去去浏浏览览者者翻翻阅阅网网页页寻寻找找信信息息的的麻麻烦烦。其其实实，这这是是在在网网页页中中的的小小标标题题添添加加了了锚锚点点，再再通通过过对对锚点的链接来实现的。锚点的链接来实现的。锚点，也称为书签，用来标记文档中的特定位置，使

14、用其可以锚点，也称为书签，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括跳转到当前文档或其他文档中的标记位置。在网页中加入锚点包括两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。两方面的工作，一是在网页中创建锚点，另一个是为锚点建立链接。1创建锚点创建锚点 创建锚点的步骤如下：创建锚点的步骤如下：（1）将将光光标标移移到到需需要要加加入入锚锚点点的的地地方方，一一般般是是将将光光标标放放置置在在一一行行或或是一段文字的开头部分；是一段文字的开头部分；（2）单单击击对对象象面面板板“Invisibles”类类上上的的“插插入入锚锚点点”

15、按按钮钮，将将弹弹出出“Insert Named Anchor（插入命名锚点）（插入命名锚点）”对话框；对话框；（3）在对话框的）在对话框的“Anchor Name”文本框输入锚点的名称；文本框输入锚点的名称；（4）单击）单击“OK”按钮。按钮。执行完上述操作之后，则在光标处出现一个代表锚点的图标。执行完上述操作之后，则在光标处出现一个代表锚点的图标。在链接锚点时，应注意以下事项：在链接锚点时，应注意以下事项：在在#和锚点名之间不要留有空格，否则链接会失败。和锚点名之间不要留有空格，否则链接会失败。在在不不同同文文件件夹夹中中为为锚锚点点创创建建链链按按时时，其其文文件件名名后后缀缀必必定定是

16、是“htm”，而不能写成，而不能写成“html”，否则链接也会失败。，否则链接也会失败。符号符号#必须是半角符号，而不能为全角符号。必须是半角符号，而不能为全角符号。7.1.4 创建电子邮件超链接创建电子邮件超链接 如果希望浏览者给你发如果希望浏览者给你发E-mail时，只要浏览者单击时，只要浏览者单击E-mail链接链接时，就会在浏览端自动打开浏览器默认的时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人处理程序，收件人的地址将会被的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接。入，就需要创建电

17、子邮件链接。创建电子邮件链接如下：创建电子邮件链接如下：将光标置于网页中要添加将光标置于网页中要添加E-mail链接的地方，或选中文字，通链接的地方，或选中文字，通过对象面板过对象面板“Common”类上的类上的“Insert Email Link”按钮，弹出按钮，弹出“Insert Email Link”对话框。如果未选中文字，可以在对话框。如果未选中文字，可以在“Text”文本框中添加所需文字；如果已经选中超链接文字，将会在文本框中添加所需文字；如果已经选中超链接文字，将会在“Text”文本框中自动显示。然后在文本框中自动显示。然后在“E-mail”文本框中输入你的文本框中输入你的E-ma

18、il地址，单击地址，单击“OK”按钮，就可以了。按钮，就可以了。7.1.5 创建下载文件超链接创建下载文件超链接 如果想让网站提供文件下载的功能，就必须建立下载文件超链如果想让网站提供文件下载的功能，就必须建立下载文件超链接。实现文件下载的功能很简单，只需加入连接到文件的超链接就接。实现文件下载的功能很简单，只需加入连接到文件的超链接就可以了。首先选择主窗口的菜单可以了。首先选择主窗口的菜单“Site”|“Site file”命令，打开命令，打开站点窗口，找到需要链接的目标文件。然后选择网页中需建立超链站点窗口，找到需要链接的目标文件。然后选择网页中需建立超链接的文字，按下接的文字，按下“Sh

19、ift”键拖动鼠标到站点窗口中的目标文件。键拖动鼠标到站点窗口中的目标文件。7.1.6 创建空链接创建空链接 空链接是一个未指定目标的链接，空链接是一个未指定目标的链接，Dreamweaver 4.0的行为面板的行为面板中列出了许多行为，这些行为相当于使用中列出了许多行为，这些行为相当于使用JavaScript编写的程序或编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。有效。为文本建立超链接时，只要先在文档窗口选定文本，然后在属为文本建立超链接时，只要先在文档窗口选定文本，然后在属性面板中的性面板中的“链接链

20、接”栏中输入一个数值符栏中输入一个数值符“#”即可。建立空链接即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。的目的就是为了应用行为，其他情况下不必建立空链接。2锚点链接锚点链接 除除了了可可以以对对不不同同页页面面或或文文件件进进行行链链接接之之外外，用用户户还还可可以以对对同同一一网网页的不同部分进行链接。即建立锚点链接。页的不同部分进行链接。即建立锚点链接。如果要设置锚点超链接，首先应为页面中需要跳转到的位置命如果要设置锚点超链接，首先应为页面中需要跳转到的位置命名。命名时应使用名。命名时应使用A标记符的标记符的name属性。属性。例如，可以在页面开始处用以下例如，可以

21、在页面开始处用以下HTML语句进行标记：语句进行标记：目录目录 对对页页面面进进行行标标记记之之后后，就就可可以以用用A标标记记符符设设置置指指向向这这些些标标记记位位置置的超链接。的超链接。返回目录返回目录 这这样样设设置置之之后后，当当用用户户在在浏浏览览器器中中单单击击文文字字“返返回回目目录录”时时，将将显示显示“目录目录”文字所在的页面部分。文字所在的页面部分。3电子邮件链接电子邮件链接 如如果果将将href属属性性的的取取值值指指定定为为“mailto:电电子子邮邮件件地地址址”，那那么么就就可以获得电子邮件链接的效果。例如：可以获得电子邮件链接的效果。例如：作者邮箱作者邮箱 当浏

22、览网页的用户单击了指向电子邮件的超链接后，系统将自当浏览网页的用户单击了指向电子邮件的超链接后，系统将自动启动邮件客户程序（对于安装了动启动邮件客户程序（对于安装了Windows 982000操作系统的计操作系统的计算机，默认时启动算机，默认时启动Outlook Express），并将指定的邮件地址填写到），并将指定的邮件地址填写到“收件人收件人”栏中，用户可以编辑并发送该邮件。栏中，用户可以编辑并发送该邮件。2创建图片超级链接创建图片超级链接 具体操作步骤如下：具体操作步骤如下：（1）在网页中选择要创建超级链接的图片）在网页中选择要创建超级链接的图片；（2）单单击击工工具具栏栏中中的的“插插

23、入入超超链链接接”按按钮钮，打打开开“插插入入超超链链接接”对对话话框；框；（3）在）在“查找范围查找范围”下拉列表中选择要链接的网页的位置；下拉列表中选择要链接的网页的位置；（4）在显示的网页列表中选择要链接的网页；）在显示的网页列表中选择要链接的网页；（5）单击）单击“屏幕提示屏幕提示”按钮，弹出按钮，弹出“设置超链接屏幕提示设置超链接屏幕提示”对话框；对话框；（6）在）在“屏幕提示文字屏幕提示文字”输入提示的文本；输入提示的文本；（7）单击）单击“确定确定”按钮，回到按钮，回到“插入超链接插入超链接”对话框；对话框；（8）单击）单击“确定确定”按钮，图片超链接完成。按钮，图片超链接完成。

24、3创建电子邮件超链接创建电子邮件超链接 在在FrontPage 2002中创建电子邮件超链接的具体方法如下：中创建电子邮件超链接的具体方法如下：（1）选选中中要要建建立立超超链链接接的的文文本本或或图图片片，单单击击工工具具栏栏中中的的“插插入入超超链链接接”按钮，打开按钮，打开“插入超链接插入超链接”对话框；对话框；（2）单击）单击“电子邮件地址电子邮件地址”选项，对话框变成图选项，对话框变成图7.24所示；所示；（3）在在“要要显显示示的的文文字字”文文本本框框中中输输入入要要显显示示的的文文字字，在在“电电子子邮邮件件地址地址”文本框中输入邮件地址，在文本框中输入邮件地址，在“主题主题”

25、文本框中输入主题；文本框中输入主题；（4）单击）单击“确定确定”按钮。按钮。4创建书签超链接创建书签超链接 书签即锚点。书签即锚点。（1）创建书签）创建书签 在网页中创建书签的方法非常简单，可以执行以下的操作来实现：在网页中创建书签的方法非常简单，可以执行以下的操作来实现：将光标置于要插入书签处将光标置于要插入书签处 选择选择“插入插入”|“书签书签”命令，弹出命令，弹出“书签书签”对话框；对话框；在在“书签名称书签名称”文本框中输入书签的名称；文本框中输入书签的名称；单击单击“确定确定”按钮，书签创建完毕。按钮，书签创建完毕。（2）使用书签创建链接）使用书签创建链接 为书签创建超级链接可以执

26、行以下的操作步骤。为书签创建超级链接可以执行以下的操作步骤。选中要创建超级链接的文本；选中要创建超级链接的文本；单击工具栏中的单击工具栏中的“插入超链接插入超链接”按钮，打开按钮，打开“插入超链接插入超链接”对话框；对话框；单击单击“书签书签”按钮，弹出按钮，弹出“在文档中选择位置在文档中选择位置”对话框；对话框；选选择择要要链链接接的的书书签签，单单击击“确确定定”按按钮钮，回回到到“插插入入超超链链接接”对对话话框；框；单击单击“确定确定”按钮，完成书签的链接。按钮，完成书签的链接。除了文本可以链接到书签外，图片也可以链接到书签。将图片链除了文本可以链接到书签外，图片也可以链接到书签。将图

27、片链接到书签的方法与文本相同接到书签的方法与文本相同。6删除超级链接删除超级链接 如如果果对对网网页页中中创创建建的的超超链链接接不不满满意意，可可以以对对其其进进行行删删除除。删删除除时时可可以以使使用用两两种种方方法法：一一是是通通过过删删除除超超链链接接对对象象来来删删除除超超链链接接；另另一一种种是是通通过过“编编辑辑超超链链接接”对对话话框框中中的的“删删除除链链接接”按按钮钮来来删删除超链接。除超链接。（1）删除超链接对象）删除超链接对象 彻彻底底删删除除超超链链接接是是指指在在删删除除超超链链接接的的同同时时连连同同超超链链接接文文本本一一同同删删除除。可可以以在在“普普通通”视视窗窗下下选选中中超超链链接接，然然后后按按下下“Delete”键，删除超链接。键，删除超链接。（2）删除超链接）删除超链接 在在删删除除超超级级链链接接时时，若若要要保保留留超超级级链链接接文文本本，可可以以执执行行以以下下的的操作。操作。在网页中选中创建了超级链接的文本；在网页中选中创建了超级链接的文本；在在工工具具栏栏中中单单击击“插插入入超超链链接接”按按钮钮，打打开开“编编辑辑超超链链接接”对对话话框；框；单击单击“删除链接删除链接”按钮；按钮；单击单击“确定确定”按钮。按钮。