07 在网页中使用超链接.ppt

通过本章学习,应该掌握以下内容:
认识超链接
利用Dreamweaver创建各种超连接的方法
利用Dreamweaver编辑各种超连接的方法
利用HTML和FrontPage创建、编辑超链接的方法网页制作的基本步骤
第7章在网页中使用超链接
利用Dreamweaver
创建文字超链接

超链接是、最根本的元素之一。超链接能够使多个孤立的网页之间产生一定的相互联系,从而使单独的网页形成一个有机的整体。
(1)什么是超链接
所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮件地址、一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。
按照链接路径的不同,网页中超链接一般分为以下3种类型: 内部链接、锚点链接和外部链接。
如果按照使用对象的不同,网页中的链接又可以分为:文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等。
(2)合理安排超链接
合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。
在这里给大家一些设计链接的建议。
1。避免孤立文件的存在:应该避免存在孤立的文件,这样能使将来在修改和维护链接时有清晰的思路。
2。在网页中避免使用过多的超级链接:在一个网页中设置过多超链接会导致网页的观赏性不强,文件过大。如果避免不了过多的超链接,可以尝试使用下拉列表框、动态链接等一些链接方式。
3。网页中的超链接不要超过4层:链接层数过多容易让人产生厌烦的感觉,在力求做到结构化的同时,应注意链接避免超过4层。
4。页面较长时可以使用书签:在页面较长时,可以定义一个书签,这样能让浏览者方便地找到想要的信息。
5。设置主页或上一层的链接:有些浏览者可能不是从网站的主页进入网站的,设置主页或上一层的链接,会让浏览者更加方便地浏览全部网页。

在创建超链接之前,首先了解网站中3种类型的文档路径:绝对路径、和根目录相对路径以及和文档相对路径。
绝对路径:是包含服务器协议(对于网页来说通常是http://或ftp://)的完全路径,绝对路径包含的是精确地址而不用考虑源文件的位置。但是如果目标文件被移动,则链接无效。创建外部超链接时必须使用绝对路径。
和根目录相对的路径:是从当前站点的根目录开始的路径。站点上所有可公开的文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉服务器从根目录开始。
和文档相对的路径:是指和当前文档所在的文件夹相对的路径。这种路径通常是最简单的路径,可以用来链接和当前文档处于同一文件夹下的文档。
(1)创建文本超链接
①在网页上选择需要添加超链接的文本,此时属性面板成为文本属性面板;
②在属性面板上指定文字的链接目标。可按以下4种方法指定文字的超链接:
· 单击“Link”文本框右侧的文件夹按钮,在弹出的“选择文件”对话框中选择链接的目标文件。
· 在文本框中直接输入目标的绝对路径。
· 利用属性面板上的“Point to File(指向文件)”按钮,为文字加入超链接。但必须要建立本地站点,且本地站点上还要有文件存在,才能使用此方法。
· 选择“Modify”|“Make Link”命令,也可打开“选择文件”对话框。
③确定完链接目标之后,在“Link”文本框中出现文字的链接目标。在“Target”下拉列表框中选择目标文件打开的方式
Target表示所链接的目标文件在浏览器中打开的方式,在其下拉列表框中一共有4个选项:
blank:将目标文件载入到新的未命名浏览器窗口中。
parent:将目标文件载入到父框架集或包含该链接的框架窗口中。
self:将目标文件载入与该链接相同的框架或窗口中。
top:将目标文件载入到整个浏览器窗口并删除所有框架。
_parent、_self、_top只有在使用框架页面时才有效。
设置结束后,在网页中被选择的文字颜色变为蓝色,且在文字底部出现一条下划线,即文字的超链接设置完成。
(2)编辑文本超链接
①设置文本链接的状态
一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别,链接被访问过了也会发生变化,提示用户这是一个已经点击过的链接,所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。
设置不同的文本颜色的具体步骤如下:
· 打开包含文本链接的文档“园丁乐园”,选择主菜单中的“Modify(修改)”|“Page Properties(页