网页中使用超链接_第1页
网页中使用超链接_第2页
网页中使用超链接_第3页
网页中使用超链接_第4页
网页中使用超链接_第5页
已阅读5页,还剩15页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、第五章网页中使用超链接超链接是WWW的魅力所在。为了把Internet上众多分散的网站的网页联系起来,构成一个有机的整体,就是在网页上加入链接。通过点击网页上的链接,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。Macromedia Dreamweaver 8提供多种创建超文本链接的方法,可创建到文档、图像、多媒体文件或下载软件的链接,可以建立到文档内任意位置的任何文本或图像(包括标题列表、表、层或框中的文本或图像)的链接。本章主要介绍利用Dresmweaver 创建的编辑各种超链接的方法。通过本章的学习,读者应该掌握以下内容;l 认识超链接l 掌握利用Dreamweaver创建各种

2、超链接的方法l 掌握利用Dreamweaver编辑各种超链接的方法l 管理超链接下的方法5.1超链接基础511超链接的种类超链接为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。超链接是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种链接,也就是源端和目标端点之间的建立一种链接。源端点是超链接的超始端点,也称为源锚;目标端点是链接的像,也签名为目标锚。超链接按源端点的链接划分,可分为超文本链接和非超文本链接两类。超文本链接的源锚文本下方有下划线,而非超文本链接是用除文本之外的其他对象构建的链接,其源锚可以是图像、表格、列表、表单、多媒体等对象。超链接按目标端点的链接划分,可分为

3、外部链接、内部链接、电子邮件链接、局部链接、脚本链接等。512文档路径类型掌握从作为链接起点的文档到作为链接目标文档之间的文件路径,对于创建链接至关重要。文档路径类型有绝对路径和相对路径两种。1.绝对路径绝对路径是包括服务器协议(本例中为HTTP)的完全路径,比发如“洪恩在线电脑乐园”,完全路径为如果要链接当前站点之外的文档,就必须使用绝对路径。每个网页都有一个惟一的地址,称为统一资源定位器(URL)。绝对路径提供链接文档的完整URL,包括使用的协议(对于网页通常是http:/ )。例如就是一个绝对路径。必须使用绝对路径来链接其他服务器上的文档 。对本地链接(文档在相同的站点中)也可使用绝对路

4、径链接,钽并不赞成这种用法,如果将站点移到另一个域中,所有的本地绝对路径链接都有将打断。当创建本地链接(即从一个文档到同一站点上另一个文档的链接)时,通常不指定要链接到的文档 的完整URL,而是指定一个从当前文档或站点根文件开始的相对路径。2.相对路径相对路径包括根相对路(Site Root)和文档相对路径(Document)两种。在本地磁盘上编辑网页时,需要选定一个文件夹来定义本地站点,模拟服务器上的根文件夹,系统就根据这个文件夹来确定所有链接的本地文件位置,而根相对路径中的根就是指这个文件夹。使用相对路径链接为在本地站点内移动文件提供了很大的灵活性。(1)根相对路径以(也称相对根目不暇接录

5、)“/”开头,路径是从当前站点的根目录开始计算。如时D盘my web目录就是名为“my web ”的站点,这时“/index.htm”路径就表示文件位置为D:my webindex.htm.根相对路径适用于链接内容频繁更换的文件,这样即使站点中的文件被移动了,其链接仍可经生效。如果目录结构过深,在引用根目录下有文件时,用根相对路径会更好些。比如某一个网页文件中引用根目录下img目录中的一个图片文件”a.gif”时,在当前网页中用文档相对路径表示为:././././img/a.gif,而用要根相对路径只要表示为”/img/a.gif”就行了.图5-1 将站点所在目录虚拟为一个盘注意:在预览 文件

6、时,用根相对路径链接的内容在本地浏览器中不会显示出来,这是因为浏览不会承认站点的根文件夹服务器。这时可以将站点的根目录虚拟不为一个盘。比如要浏览D:my web下的文件,可以选择Windows“开始”菜单中的“运行”,弹出运行对话框,输入“substh:d:my web”,如图:5-1所示,D盘下的My we文件夹就被虚拟为H盘,在浏览器中查看H盘下网页,用根相对路径链接的内容都可以正常显示了。(2)文档相对路径文档相对路径对于大多数WEB站点的本地链接来说,是最合适的路径。在当前文档与链接的文档在同一文件夹中,而且很可能长久保留在一起时,文档相对链接是尤其有用的。文档相对路径还可用来链接到其

7、他文件夹中的文档,方法是利用文件夹层次结构指定从当前文档到所链接的文档的路径。文档相对路径的基本思想是省略当前文档和链接的文档都有相同的绝对URL部分,而只提供不同的那部分路径。若要链接的文件与当前文档处在同一文档夹中,只需输入文件名即可。若要链接的文件夹位于当前文档 所在文件夹的父文件夹中,提供文件夹名,然后加上正斜线(/)和文件名。若要链接的文件位于当前文档所在文件夹的父文件夹中,文件名前加./ (其中”.”表示”文件夹分层结构中的上一级文件夹”)文档相对于路径就是指包含当前文档所在文件夹,也就是当前网页所在文件夹为基础开始计算路径。比如:当前网页所在位置为D:my webmypic,那么

8、: “a.htm”就表示D:my webmypica.htm;“./a.htm”相当于D:my weba.htm;,其中”./”表示当文件夹上级文件夹。“img/a.gif”是指D:my webmypicimga.gif, 其中“img”意思是汉前文件夹下名为 文件夹。文档相对路径是最简单的路径,一般多用于链接保存在同一文件夹中的文档。 5.2 利用Dreamweaver 8创建超链接521 创建文字超链接如果想在Dreamweaver 8中为页面中的文本对象创建超链接,可以在文本“属性”面板中按如下方法进行操作。1.使用“浏览文件”图标(1)选中欲设置超级链接的文本对象。(2)在菜单栏中单击

9、“窗口”“属性”(或按Ctrl+F3键),打开如图5-2所示的文本“属性”面板。图5-2 文本“属性”面板(3)在“属性”面板上单击“链接”文本框右侧的“浏览文件”图标,打开图5-3所示的“选择文件”对话框。图5-3 “选择文件”对话框(4)设置“选择文件”对话框的参数。该对话框中具体参数的含义如下所述。URL(URL地址):在选定“相对于”后,该处即会显示将出现在文本“属性”面板中“链接”文本框的地址。相对于:在该下拉列表中你可以选择链接路径的形式,有“文档”和“站点根目录”两个选项。参数:单击“参数”按钮,可以打开如图5-4所示的链接参数设置窗口,不过需要注意的是该项只对数据库中链接的文档

10、有效。图5-4 “参数”对话框在“选择文件”对话框中选择文本链接目标文件,单击“确认”按钮,则图5-2中“链接”文本框中将出现链接目标文件名。2.使用“指向文件”图标(1)选中欲设置超级链接的文本对象。(2)如果链接目标文档已经打开,则直接将“指向文件”图标拖动到目标文档窗口,拖动过程有一条从“指向文件”图标出发的箭头线,将其拖动到指定区域即可完成该链接,如图5-5所示。图5-5 拖动“指向文件”图标到目标窗口(3)如果目标文档没有打开,也可以将“指向文件”图标拖动到站点窗口中相应的位置,如图5-6所示。图5-6 拖动“指向文件”图标到站点文件(4)拖放到目标地址后,释放鼠标即可在属性“面板”

11、的“链接”文本框中看到链接目标端文档的URL地址。图5-7 “超级链接”对话框3.使用“超级链接”对象(1)把光标置于欲设置超级链接的地方,选择“插入”“超级链接”菜单命令,或者直接单击“插入”面板上“常用”选项卡下的“超级链接”图标,弹出“超级链接”对话框,如图5-7所示。(2)“超级链接”对话框中各项参数的含义如下。文本:欲设置超级链接的文本对象。链接:文本对象链接的目标地址。目标:从目标的下拉列表框中选择文档的打开位置。若要使所链接的文档出现在当前窗口或框架以外的其他位置,可以从下拉列表框中选择一个选项。l _blank在一个未命名的新浏览器窗口中载入所链接的文档。l _parent在该

12、链接所在框架的父框架或父窗口中载入所链接的文档。如果包含链接的框架不是嵌套框架,则所链接的文档载入整个浏览器窗口。l _self在链接所在的同一框架或窗口中载入所链接的文档。l _top在整个浏览器窗口中载入所链接的文档,但它会删除所有框架。 标题:当鼠标指针指向超链接的文本对象时的提示文字。 在“超级链接”对话框中设置参数,如图5-7所示。(3)设置具体的链接信息后单击“确定”按钮,即可在所需区域插入文本超级链接了,按F12键即可在浏览器中预览其效果,如图5-8所示。图5-8 当鼠标指针指向超文本链接后浏览器中所见的结果522 创建锚点超链接当一个网页的主题或文字较多时,可以在网页内建立多个

13、标记点,将超链接指定到这些标记点上,能够使浏览者快速找到要阅读的内容,这些标记点称为锚记。在网页设计中,要创建某个网页的指定位置的超链接被称为创建网页的锚点超链接。创建网页的锚点链接可分为两步完成:首先在网页的某个指定位置创建链接的目标端点(即锚记),并为其命名。源端点处建立该锚记的超链接。在浏览网页时,用鼠标单击源端点,光标就会马上移到锚记的位置上。1.命名锚记在文档窗口的设计视图中,将插入点放在需要命名锚记的地方。在菜单栏中单击“插入”“命名锚记”命令,打开如图5-9 所示的以话框。图5-9 创建命令锚记在“锚记名称”文本框中输入该锚记的名称(名称区分大小写),单击“确定”按钮。这时,锚记

14、标记将在插入点处出现。若看不到锚记标记,则选择“查看”“可视化助理”“不可见元素”命令。在命名锚记时,应遵循以下规则。(1)只能使用字母和数字,锚记的命名不支持中文。虽然在“命名锚记”对话框中可以输入中文,但在“属性”面板中显示的则是一堆乱码,并且在为锚记添加链接时,也无法工作。(2)锚记名称的第一个字母最好是英文字母,一般不要以数字作为锚记名称的开头。(3)锚记名称区别英文字母的大小写。(4)锚记名称间不能含有空格,也不能含有特殊的字符。注意:锚点不能放在层中。2链接到命名锚记在文档窗口的设计视图中,选择要从其创建链接的对象(文本,图像等)。在属性面板的“链接”文本框中输入一个数字符号()和

15、锚记名称。例如:如果要链接到当前文档中名为“bottom”的锚记,要键入bottom。如果要链接到同一文件夹内其他名为“bottom”的锚记,可键入filename.htmlbottom,如图5-10所示。图5-10 在属性面板中链接到命令锚记如果要使用指向到文件方法链接到命名锚记,可打开所需命名锚记的文档。在文档窗口的设计视图中,选择要从其创建链接的对象(文本、图像等)。单击属性面板中“链接”文本框右侧的“指向文件”图标,然后将其拖动到要链接的锚记(可以是同一文档的锚记或其他文档的锚记)上。创建电子邮件链接在网页上创建邮件链接,可以方便地让访问者反馈意见。访问者只需单击页面上的电子邮件链接即

16、可打开一个新的空白邮件窗口(使用的是与用户浏览器相关联的邮件程序)。在电子邮件消息窗口中,“收件人”域自动更新为显示电子邮件链接中指定的地址。在Dreamweaver 8中,可以使用如下方法在页面中创建电子邮件链接。1.插入电子邮件链接(1)在“文档”窗口的“设计”视图中,将插入点放在希望出现电子邮件链接的位置,或者选择要作为电子邮件链接出现的文本或图像。选择“插入”“电子邮件链接”命令,将出现“电子邮件链接”对话框,如图5-11所示。图5-11 “电子邮件链接”对话框(2)完成此对话框的相关内容。单击“确定”按钮。2.使用属性面板创建电子邮件链接在“文档”窗口的“设计”视图中选择文本或图像。

17、在属性面板的“链接”文本框中,键入mailto,后面跟电子邮件地址。在冒号和电子邮件地址之间不能键入任何空格。如键入mailto:,如图5-12所示。图5-12 使用属性面板创建电子邮件链接创建空链接和脚本链接空链接是未指派的链接。空链接用于向页面上的对象或文本附加行为。当创建空链接后,可向空链接附加行为,以便当鼠标指针滑过该链接时交换图像或显示层。1.创建空链接为文本创建空链接时,只需在文档窗口中选定文本,然后在属性面板的“链接”文本框中键入“#”即可,如图5-13所示。建立空链接的目的主要是为了应用行为,在其他情况下不必创建空链接。图5-13 创建空链接2.创建脚本链接在“文档”窗口的“设

18、计”视图中选择文本、图像或对象。在属性面板的“链接”文本框中键入java Script:;(javascript一词后依次一个冒号和一个分号),即可创建空链接,如图5-14所示。图5-14 创建脚本空链接脚步本链接执行JavaScript代码或调用JavaScript函数。脚本链接非常有用,能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定选项时,执行计算、表单验证和其他处理任务。创建脚本链接操作方法如下。在“文档”窗口的“设计”视图中选择文本、图像或对象。在属性面板的“链接”文本框中,键入JavaScript:,后面跟一些JavaScript代码或函

19、数调用。如在“链接”文本框中键入javascript:alert(“This link leads to the index)可生成这样一个链接:单击该链接时,会显示一个含有消息This link leads to the index的javascript警告框,如图5-15所示。图5-15 创建脚本链接样例注意:因为在HTML中JavaScript代码放在双引号中(作为href属性的值),所以在脚本代码中必须合用单引号,或者可通过在双引号前添加反斜杠,将所有双引号“转义”(例如“This link leads to the index”)。创建下载文件超链接如果想让网站提供文件下载的功能,可

20、以建立下载文件超链接。实现文件下载的功能很简单,只需加入连接到文件的超链接就可以了。连接网站中下载文件的超链接也属于内部超级链接中的一种。创建下载文件超链接的方法如下。道德选择主窗口中“站点”“站点文件”菜单命令,打开站点窗口,找到需要链接的目标文件。然后选择网页中需要建立超链接的文字,按下一步Shift键拖动鼠标指针到站点窗口中的目标文件。图像地图图像地图指已被分为多个区域(或称为热点)的图像。当用户单击某个热点时,会发生某种操作(如,打开一个或一个文件)。使用图像属性面板可创建或编辑客房端图像地图。客户端图像地图将超文本链接信息存储在文档中,而不是像服务器端图像地图那样,存储在单独的地图文

21、件中。当站点访问者单击图像中的热点时,相关被直接发送到服务器。这就是使得客户端图像地图要快,因为服务器不必解释访问者的单击位置。Dreamweaver并不改变现有文档中对服务器端图像地图的引用。在同一文档中,可以同时使用客户端图像地图。不过,同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。若要在文档中包含服务器端图像地图,必须编写相应的代码。1.创建图像地图(1)选择图像在“文档”窗口中,选择图像。在属性面板中,单击右下角的展开箭头,查看所有属性。在“地图名称”域中,为此图像地图键入一个惟一的名称,如图5-16所示。注意:如果在同一文档中使用多个图像地图,要确保每个地图,要确保每

22、个地图都有惟一名称,以便设置每个图像地图的超链接。(2)定义客户端图像地图中的优点图5-16 图像属性面板创建热点。若要定义图像地图区域,选择下列方法之一。l 选择圆形工具,并将鼠标指针拖到图像上,创建一个圆形热点。l 选择矩形工具,并将鼠标指针拖至图像上,创建一个矩形热点。l 选择多边形工具,在各个顶点上单击一下,定义一个不规则的热点,然后单击箭头工具封闭此开头如图5-17所示。 图5-17 定义图像地图区域定义热点属性选中其中一个热点,在热点属性面板设置其属性,如图5-18所示。图5-18 设置热点属性在热点属性检查的“链接”文本框中,单击文件夹图标,选择要链接的文件,可者键入此文件的名称

23、。如果链接到同一站点内的文件,可输入相对于文档的路径(以file:/开始的文件名,不是相对路径文件名)。在“目标”弹出菜单的“目标”域中,选择应该用于打开该文件的窗口。当前文档中所有已命名框架的名称都显示在此弹出列表中。如果指定的框架不存在,当文档在浏览器中打开时,所链接的页面将载入一个新窗口该窗口使用所指定的名称。也可选用保留目标名,如-blank,-paresnt,-self 和-top.在“替换文本”域中键入希望在纯文本浏览器或设为动手下载图像的浏览器中作为替换文本出现的文本。比如图5-18所示的“head”有些浏览器在用户鼠标指针暂停与该热点之上时,将此文本显示为工具提示。注意:只有当

24、所算热点包含链接时,目标才可用。按F12键可以预览热点设置的效果,如图5-19所示。图5-19 热点预览效果2. 修改图像地图对在图像地图中所创建的热点进行编辑很容易。可以移动热点,调整热点大小,或者在层之间向上或向下移动热点。(1)复制热点可以将含有热点的地图从一格文档拷贝到另一格文档,或者拷贝某图像中的一个或多个热点,然后将其粘贴到其他图像上,这样就将与该图像关联的热点也拷贝到了新文档中,如图像中有若干相同形状的热点,只需要创建一个,然后复制即可。(2)选择图像地图中的多个热点使用指针热点工具选择一个热点。按下Shift键的同时单击要选择的其他热点。按Ctrl+A键,选择所有的热点。(3)

25、移动热点使用指针热点工具选择一个热点。拖动此热点到新区域,用Shift+箭头键将热点向选定方向一次移动10个像素;使用箭头键将热点向选定方向一次移动一个像素。(4)调整热点的大小用指针热点工具选择要调整大小的热点。拖动热点选择手柄,可以更改热点的大小或形状。 5.3利用Dreamweaver 8编辑超链接设置链接颜色在通常情况下,超链接默认的颜色为蓝色,活动超链接的颜色为红色,已访问过的超链接颜色为紫色。如果用户对这种默认的配色方案不满意,可以按自己的喜好随意修改颜色。更改配色方案的操作步骤如下。(1)在网页中单击鼠标右键,从弹出的快捷菜单中选择“页面属性”命令,打开“页面属性”对话框。(2)

26、分别单击3种超链接的颜色右侧的“”按钮,在弹出的颜色面板中重新选择其颜色,如图5-20所示。图5-20 “页面属性”对话框(3)设置完成后单击“确定”按钮。注意:此方法只对当前网页生效,当建立新网页时,新网页的超级链接的配色方案还是最初的默认值。设置链接字体不但链接的颜色可以改变,而且链接的字体也能改变。可以直接在属性面板中字体下拉列表框中修改链接字体,如图5-21所示。图5-21 修改字体样例删除超链接如果对网页中的超链接不满意或不想使用了,可以对其进行删除.删除超链接有两种方法:一是通过删除超链接对象来删除超链接;二是通过“编辑超链接”对话框中的“删除超链接”按来删除超链接。(1)删除超链

27、接对象在“普通”视窗下选中超链接,然后按下Delete键,不但可以删除超链接,而且可以将超链接文本一同删除。(2)删除超链接如果删除超链接时想保留文本,可以执行以下操作。l 在网页中选定超链接文本。l 在工具栏中单击“插入超链接”按钮,打开“编辑超链接”对话框。l 单击“删除超链接”按钮。l 单击“确定”按钮。5.4创建导航条认识导航条1. 导航条的作用通常在网页的首页上可设置一个导航条,这样既可为浏览者浏览网站提供一个索引,又能引导浏览者浏览整个网站的不同页面。导航条可由一幅图像或多幅图像所组成,这些图像的显示内容随用户动作而变化.导航条通常为站点上的页面和文件之间移动提供一条捷径的途径,如

28、图5-22所示。图5-22 页面中的导航条2.导航条的4种状态使用"插入导航条"命令之前,应首先为各个导航条项目的显示状态创建一组图像(可将导航条项目视为按钮,因为当单击它时,导航条项目会将用户带到其他页面中),这些图像分别表示导航条的4种状态.(1)一般:指用户尚未单击或尚未与此项目交互时所显示的图像,如图5-23所示此种项目看起来未被单击过。(2)滑过:指鼠标指针滑过“一般”图像时所显示的图像,如图5-24所示。图像的外观发生变化(如变得更亮),以让用户知道可与这个项目进行交互。 图5-23 导航条的一般状态 图5-24 导航条的滑过状态(3)按下:指项目被单击后所显示

29、的图像。如,用户单击某项目后而导航条仍然显示,只是被单击的项目变暗,表示它曾被选择过。(4)按下时鼠标经过:指在项目被单击后,鼠标指针滑过“按下”图像时所显示的图像,如项目变淡或变灰,此状态可作为一个用户的可视提示,告诉用户在站点的这一部分,此项目不能再被单击。在设计中不必包括所有这4种状态的导航图像。如,可以只选用“一般”和“按下”这两种状态。插入导航条要在文档中插入导航条,可以按照如下方法进行操作。(1)在菜单栏中单击“插入”“交互式图像”“导航条”,或在插入栏的“常用”选项卡中单击“导航条”图标,这时会打开如图5-25所示的对话框。图5-25 “插入导航条”对话框(2)在“项目名称”文本

30、框中为导航条第一项选择名称。例如,可以输入“本站首页”。单击“浏览” 按钮,可以从磁盘上选择图片文件。(3)在“状态图像”文本框中,输入导航按钮图像弹起状态(即正常显示状态)。单击“浏览”按钮,可以从磁盘上选择图片文件。状态图像为必需项,其他图像的状态选项为可选项。(4)在“鼠标经过图像”本框中,输入导航按钮图像在鼠标指针经过的图像文件的URL。单击“浏览”按钮,可以从磁盘上选择图片文件。(6)在“按下图像”文本框中,输入导航按钮图像按下状态示的图像文件。单击“浏览”按钮,可以从磁盘上选择图片文件。(5)在“按下时鼠标经过图像”文本框中,输入导航按钮图像按下状态时的轮替图像文件的URL。单击“

31、浏览”按钮,可以从磁盘上选择图片文件。(7)在“替换文本”文本框中,输入项目的描述性名称。替换文本在纯文本浏览器或设为手动下载的图像的浏览器中,替代图像出现在应显示图的位置。屏幕阅读器读取替换文本,而且有的浏览器在用户鼠标指针滑过导航条项目时显示替换文本。(8)在“按下时,前往的URL”文本框中,输入单击导航按钮图像时跳转的URL 地址。单击“浏览”按钮,可以从磁盘上选择目标端点的文档。(9)在“按下时,前往的URL”文本框右边的下拉列表框中可以选择文档被打开的目标窗口。选择“主窗口”,则表明在同一窗口中打开目标端点文档。如果当前使用了框架,还可以从其中选择目标框架的名称。如果希望选择的框架尚

32、未命名,则需要先命名,然后再在这里进行选择。(10)选中“预先载入图像”复选框,可在载入页面时下载图像。如果未选择此选项,在用户鼠标指针滑过图像时可会出现延迟。(11)如果选中“页面载入时就显示鼠标按下图像”复选框,则网页被浏览器载入后,将该按钮图像显示为按下状态。这主要用于该图像对应链接是当前页面的情形。(12)在“插入”下拉列表,可以设置导航条的放置方向。选择“水平”,则水平放置导航条;选择“垂直”,则垂直放置导航条。(13)如果希望导航条放置于表格中,可以选中“使用表格”复选框,这样可以利用表格控制页面中的文本。(14)按照上述操作可以向导航条中添加第一个“本站首页”按钮图像,单击对话框

33、上的按钮,可以继续添加其他的按钮图像。单击对话框上的按钮,可以删除按钮图像。(15)所有导航条的元素设置完毕后,按下“确定”按钮,完成插入导航条操作,这时文档中就添加了一个导航条。修改导航条为文档创建导航条后,可以使用“修改导航条”命令向导航条中添加图像,或者从导航条中删除图像,此命令可以用于更改图像或图像组,更改单击项目时打开文件,选择在不同的窗口或框架中打开文件以及重新排列图像等。选择“修改”“导航条”,将出现“修改导航条”对话框,如图5-26所示。图5-26 “修改导航条”对话框在“导航条元素”列表中,选择要编辑的项目。根据需要进行更改后单击“确定”按钮即可。如果要修改导航条中项目的顺序

34、,可在图5-26所示的“修改导航条”对话框中单击或按钮来调整导航条中项目的顺序。 5.5管理超链接 设计一个清晰的超链接在网站中建立清晰的超链接,既提供给浏览者一个良好的访问环境,也方便网站管理人员的管理与维护。为此,要考虑以下几点。1 设计一个清晰的超链接首先要定位网站的主题,如个人网站、商业网站、知识类网站和娱乐类网站等。然后就来看看这个网站包含哪些内容,需要多少网页文件,可以画一个草图来理清思路。2. 首页上的超链接要“有去有回”不论网站的链接多么的丰富,都要给浏览者随时回到首页的可能,使之不会在Internet上迷失方向。3. 给图像超链接做文字说明简单的文字说明可以让浏览者知道要链接

35、的目标。为图像做超链接有两种方法:一是把文字直接做在图像上,成为图像的一部分;二是把文字直接写在属性面板上的Alt文本框中,这样当鼠标指针指向图像时,就会出现文字提示。6.5.2 利用站点地图管理超链接 站点地图上的树状结构显示了网站上的超链接状况,因此通过站点地图可以建立、更改、删除超链接。1. 建立网页间的超链接(1)在菜单栏中单击“站点”-“站点地图”,或Alt+F8键打开站点窗口(按F8键,可快速打开站点窗口),如图5-27所示(2)选中需要链接的文件,比如index.html,在鼠标右键捷菜单中选择链接到磨擦文件“链接到已有文件”即可建立网页的超链接,如图5-28所示。2移除网页间的

36、超链接对于不需要的链接关系,在站点地图的树状结构上可以非常轻松地移除。(1)树状结构上选择要移除链接关系的对象图标,如图:5-28中的Shp.htm (2(2)在右键快捷菜单中选择“移除链接后的站点地图如图书所示。3更新超链接 在制作网页的过程中,可能为了某种特定的需要,必须改变站点中某个文件夹的文件名。可是这样的话,那些链接此网页的链接目标名称也必须更换,如果一个个地手动更新的话,不仅麻烦而且极易产生差错。在Dreamweaver 8中利用站点地图,此项操作则变得非常简单。在“站点“浮动面板的站点地图上更改文件的名称与Windows下的操作基本相同。(1) 首先单击选中欲更改名称的文件。(2

37、) 再次单击该文件的文件名,输入新的文件名后,输入新的文件名后按一下回车键即可(3) 当文档被更名后,系统会弹出如图5-30所示的“更新文件”对话框,询问站点中被链接的网页名称是否也作修改。(4)在该对话框中单击“更新”按钮即可完成操作。4检查超链接Dreamweaver 8提供“结果”浮动面板组,除了具有检查浏览器兼容性、代码兼容性等强大功能外,还可以利用它来检查甚至修改站点中的超链接。(1)自动对整个站点的超链接情况进行检查。1) 可以在Dreamweaver 8的“站点”浮动面板组上选择“文件”检查站点范围的链接命今,也可以直接使用键盘快捷键Shift+F8,可以在“结果”浮动面板组的“

38、链接检查器”面板中单击位于左边的绿色箭头的下拉菜单中的“为整个站点检查链接”选项。2) Dreamweaver 8会自动对整个站点的超链接情况进行检查,而且在打开的“链接检查器”面板中还可以显示详细的检查信息。需要注意的是,还可以在该面板“显示”标识符后的下拉列表框中设置检查后在列表栏中显示的链接状态。l 断掉的链接:显示包含有断裂超链接的网页名称。l 外部链接:显示包含外部超链接的网页名称。l 孤立文件:显示网站中没有被使用到的或没有被链接的文件。()修复站点中的超链接如果在“链接检查器”浮动面板的“显示”标识符的下拉列表框中选择“断掉的链接”选项,则Dreamweaver 8将自动列出网站

39、中所有的断裂链接。在该浮动面板的列表栏中,关于超链接的“断掉的链接”选项如下。l 文件:此栏列出了所有断裂的超链接的文件名。l 无效链接:原来断裂的超链接是连在此栏中的相应文件上的。出现断裂的原因可能是此文件已经不存在或是此文件已经改了名称。如果你想修复此链接,在该浮动面也有两种方法。 双击“文件”栏中的文件名,打开网页(在打开的网页时断裂的超链接会被自动选择),然后就可以使用属性面板中的“链接”选项进行修改。 单击“无效链接”栏中的文件名,在文件名的右侧即出现一个文件夹按钮,单击此按钮重新选择链接目标,如图5-3所示。(3)处理外部超链接 如果在“结果”面板中“链接检查器”选项卡的“显示”标

40、识符后的下拉列表中选择“外部链接“选项,则Dreamweaver 8并不会自动列出网站中所有的外部超链接文件,如图5-34所示。但是Dreamweaver 8并不会自动检查这些外部超链接是否正常,所以必须亲自动手链接外部网站进行检查。通常,在此面板列表中检查外部超链接有如下两种方法。 双击网页文档名称,打开网页查看是否有出错的超链接。 单击列表栏中的超链接,则此超链接的地址被选中,可以把它复制到浏览器的地址输入框中检查是否能正确地连接到该网站。(4)处理孤立文件 所谓孤立文件并不是指没有用的文件,而是指没有与其他网页发生链接的文件。 如果在“结果”面板中“链接检查器”选项卡的“显示”标识符后的下拉列表中选择“孤立文件”选项,则Dreamweaver 8将自动列出网站中所有孤立的文件,如图5-35所示。对于该列表中的文件,除非是经过检查后确定这些文件是没有用的,才可以删除,否则,最好不要一次全部删除,以免追悔莫及。5.6利用HTML创建超链接页面链接用HTML创建超链接需要使用A标记符(结束标记符/A不能省略),它的最基本属性是href,用于指定超链接的目标。通过为href指定不同的值,可以创建不同类型的超链接。另外,在A和/A之间可以用任何可单击的对象作为超链接的源,例如文字或图像。最常见的超链接

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论