网页中使用超链接.docx

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

2、各种超的方法管理超下的方法5.1超基础511超的种类超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。超按源端点的划分,可分为超文本和非超文本两类。超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。512文档路径类型掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。文档路径类型

3、有绝对路径和相对路径两种。1.绝对路径绝对路径是包括服务器协议本例中为的完全路径,比发如洪恩在线电脑乐园,完全路径为; honggen /pe/index.htm.如果要当前站点之外的文档,就必须使用绝对路径。每个网页都有一个惟一的地址,称为统一资源定位器。绝对路径提供文档的完整URL,包括使用的协议。例如, macromedia /support/dreamweaver/contents.html 就是一个绝对路径。必须使用绝对路径来其他服务器上的文档。对本地文档在相同的站点中也可使用绝对路径,钽并不赞成这种用法,如果将站点移到另一个域中,所有的本地绝对路径都有将打断。当创建本地即从一个文档

4、到同一站点上另一个文档的时,通常不指定要到的文档的完整URL,而是指定一个从当前文档或站点根文件开始的相对路径。2.相对路径相对路径包括根相对路Site Root和文档相对路径两种。在本地磁盘上编辑网页时,需要选定一个文件夹来定义本地站点,模拟服务器上的根文件夹,系统就根据这个文件夹来确定所有的本地文件位置,而根相对路径中的根就是指这个文件夹。使用相对路径为在本地站点内移动文件提供了很大的灵活性。1根相对路径以也称相对根目不暇接录/开头,路径是从当前站点的根目录开始计算。如时D盘my web目录就是名为my web 的站点,这时/index.htm路径就表示文件位置为D:my webindex

5、.htm.根相对路径适用于内容频繁更换的文件,这样即使站点中的文件被移动了,其仍可经生效。如果目录结构过深,在引用根目录下有文件时,用根相对路径会更好些。比如某一个网页文件中引用根目录下img目录中的一个图片文件a.gif时,在当前网页中用文档相对路径表示为：././././img/a.gif,而用要根相对路径只要表示为/img/a.gif就行了.图5-1 将站点所在目录虚拟为一个盘注意：在预览文件时,用根相对路径的内容在本地浏览器中不会显示出来,这是因为浏览不会承认站点的根文件夹服务器。这时可以将站点的根目录虚拟不为一个盘。比如要浏览D:my web下的文件,可以选择Windows开始菜单中

6、的运行,弹出运行对话框,输入substh:d:my web,如图：5-1所示,D盘下的My we文件夹就被虚拟为H盘,在浏览器中查看H盘下网页,用根相对路径的内容都可以正常显示了。2文档相对路径文档相对路径对于大多数WEB站点的本地来说,是最合适的路径。在当前文档与的文档在同一文件夹中,而且很可能长久保留在一起时,文档相对是尤其有用的。文档相对路径还可用来到其他文件夹中的文档,方法是利用文件夹层次结构指定从当前文档到所的文档的路径。文档相对路径的基本思想是省略当前文档和的文档都有相同的绝对URL部分,而只提供不同的那部分路径。若要的文件与当前文档处在同一文档夹中,只需输入文件名即可。若要的文件

7、夹位于当前文档所在文件夹的父文件夹中,提供文件夹名,然后加上正斜线/和文件名。若要的文件位于当前文档所在文件夹的父文件夹中,文件名前加./ 文档相对于路径就是指包含当前文档所在文件夹,也就是当前网页所在文件夹为基础开始计算路径。比如：当前网页所在位置为D:my webmypic,则：a.htm就表示D:my webmypica.htm;./a.htm相当于D:my weba.htm;,其中./表示当文件夹上级文件夹。img/a.gif是指D:my webmypicimga.gif, 其中img意思是汉前文件夹下名为文件夹。文档相对路径是最简单的路径,一般多用于保存在同一文件夹中的文档。5.2

8、利用Dreamweaver 8创建超521 创建文字超如果想在Dreamweaver 8中为页面中的文本对象创建超,可以在文本属性面板中按如下方法进行操作。1.使用浏览文件图标1选中欲设置超级的文本对象。2在菜单栏中单击窗口属性或按Ctrl+F3键,打开如图5-2所示的文本属性面板。图5-2 文本属性面板3在属性面板上单击文本框右侧的浏览文件图标,打开图5-3所示的选择文件对话框。图5-3 选择文件对话框4设置选择文件对话框的参数。该对话框中具体参数的含义如下所述。URLURL地址：在选定相对于后,该处即会显示将出现在文本属性面板中文本框的地址。相对于：在该下拉列表中你可以选择路径的形式,有文

9、档和站点根目录两个选项。参数：单击参数按钮,可以打开如图5-4所示的参数设置窗口,不过需要注意的是该项只对数据库中的文档有效。图5-4 参数对话框在选择文件对话框中选择文本目标文件,单击确认按钮,则图5-2中文本框中将出现目标文件名。2.使用指向文件图标1选中欲设置超级的文本对象。2如果目标文档已经打开,则直接将指向文件图标拖动到目标文档窗口,拖动过程有一条从指向文件图标出发的箭头线,将其拖动到指定区域即可完成该,如图5-5所示。图5-5 拖动指向文件图标到目标窗口3如果目标文档没有打开,也可以将指向文件图标拖动到站点窗口中相应的位置,如图5-6所示。图5-6 拖动指向文件图标到站点文件4拖放

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

11、档载入整个浏览器窗口。_self在所在的同一框架或窗口中载入所的文档。_top在整个浏览器窗口中载入所的文档,但它会删除所有框架。标题：当鼠标指针指向超的文本对象时的提示文字。在超级对话框中设置参数,如图5-7所示。3设置具体的信息后单击确定按钮,即可在所需区域插入文本超级了,按F12键即可在浏览器中预览其效果,如图5-8所示。图5-8 当鼠标指针指向超文本后浏览器中所见的结果522 创建锚点超当一个网页的主题或文字较多时,可以在网页内建立多个标记点,将超指定到这些标记点上,能够使浏览者快速找到要阅读的内容,这些标记点称为锚记。在网页设计中,要创建某个网页的指定位置的超被称为创建网页的锚点超。

12、创建网页的锚点可分为两步完成：首先在网页的某个指定位置创建的目标端点即锚记,并为其命名。源端点处建立该锚记的超。在浏览网页时,用鼠标单击源端点,光标就会马上移到锚记的位置上。1.命名锚记在文档窗口的设计视图中,将插入点放在需要命名锚记的地方。在菜单栏中单击插入命名锚记命令,打开如图5-9 所示的以话框。图5-9 创建命令锚记在锚记名称文本框中输入该锚记的名称名称区分大小写,单击确定按钮。这时,锚记标记将在插入点处出现。若看不到锚记标记,则选择查看可视化助理不可见元素命令。在命名锚记时,应遵循以下规则。1只能使用字母和数字,锚记的命名不支持中文。虽然在命名锚记对话框中可以输入中文,但在属性面板中

13、显示的则是一堆乱码,并且在为锚记添加时,也无法工作。2锚记名称的第一个字母最好是英文字母,一般不要以数字作为锚记名称的开头。3锚记名称区别英文字母的大小写。4锚记名称间不能含有空格,也不能含有特殊的字符。注意：锚点不能放在层中。2到命名锚记在文档窗口的设计视图中,选择要从其创建的对象文本,图像等。在属性面板的文本框中输入一个数字符号和锚记名称。例如：如果要到当前文档中名为bottom的锚记,要键入bottom。如果要到同一文件夹内其他名为bottom的锚记,可键入filename.htmlbottom,如图5-10所示。图5-10 在属性面板中到命令锚记如果要使用指向到文件方法到命名锚记,可打

14、开所需命名锚记的文档。在文档窗口的设计视图中,选择要从其创建的对象文本、图像等。单击属性面板中文本框右侧的指向文件图标,然后将其拖动到要的锚记可以是同一文档的锚记或其他文档的锚记上。5.2.3创建电子在网页上创建,可以方便地让访问者反馈意见。访问者只需单击页面上的电子即可打开一个新的空白窗口使用的是与用户浏览器相关联的程序。在电子消息窗口中,收件人域自动更新为显示电子中指定的地址。在Dreamweaver 8中,可以使用如下方法在页面中创建电子。1.插入电子1在文档窗口的设计视图中,将插入点放在希望出现电子的位置,或者选择要作为电子出现的文本或图像。选择插入电子命令,将出现电子对话框,如图5-

15、11所示。图5-11 电子对话框2完成此对话框的相关内容。单击确定按钮。2.使用属性面板创建电子在文档窗口的设计视图中选择文本或图像。在属性面板的文本框中,键入mailto,后面跟电子地址。在冒号和电子地址之间不能键入任何空格。如键入mailto：abcsina ,如图5-12所示。图5-12 使用属性面板创建电子5.2.4创建空和脚本空是未指派的。空用于向页面上的对象或文本附加行为。当创建空后,可向空附加行为,以便当鼠标指针滑过该时交换图像或显示层。1.创建空为文本创建空时,只需在文档窗口中选定文本,然后在属性面板的文本框中键入#即可,如图5-13所示。建立空的目的主要是为了应用行为,在其他

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

17、pt:alertThis 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。5.2.5创建下载文件超如果想让提供文件下载的功能,可以建立下载文件超。实现文件下载的功能很简单,只需加入连接到文件的超就可以了。连接

18、中下载文件的超也属于内部超级中的一种。创建下载文件超的方法如下。道德选择主窗口中站点站点文件菜单命令,打开站点窗口,找到需要的目标文件。然后选择网页中需要建立超的文字,按下一步Shift键拖动鼠标指针到站点窗口中的目标文件。5.2.6图像地图图像地图指已被分为多个区域或称为热点的图像。当用户单击某个热点时,会发生某种操作如,打开一个或一个文件。使用图像属性面板可创建或编辑客房端图像地图。客户端图像地图将超文本信息存储在文档中,而不是像服务器端图像地图那样,存储在单独的地图文件中。当站点访问者单击图像中的热点时,相关被直接发送到服务器。这就是使得客户端图像地图要快,因为服务器不必解释访问者的单击

19、位置。Dreamweaver并不改变现有文档中对服务器端图像地图的引用。在同一文档中,可以同时使用客户端图像地图。不过,同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。若要在文档中包含服务器端图像地图,必须编写相应的代码。1.创建图像地图1选择图像在文档窗口中,选择图像。在属性面板中,单击右下角的展开箭头,查看所有属性。在地图名称域中,为此图像地图键入一个惟一的名称,如图5-16所示。注意：如果在同一文档中使用多个图像地图,要确保每个地图,要确保每个地图都有惟一名称,以便设置每个图像地图的超。2定义客户端图像地图中的优点图5-16 图像属性面板创建热点。若要定义图像地图区域,选择

20、下列方法之一。选择圆形工具,并将鼠标指针拖到图像上,创建一个圆形热点。选择矩形工具,并将鼠标指针拖至图像上,创建一个矩形热点。选择多边形工具,在各个顶点上单击一下,定义一个不规则的热点,然后单击箭头工具封闭此开头如图5-17所示。图5-17 定义图像地图区域定义热点属性选中其中一个热点,在热点属性面板设置其属性,如图5-18所示。图5-18 设置热点属性在热点属性检查的文本框中,单击文件夹图标,选择要的文件,可者键入此文件的名称。如果到同一站点内的文件,可输入相对于文档的路径以file开始的文件名,不是相对路径文件名。在目标弹出菜单的目标域中,选择应该用于打开该文件的窗口。当前文档中所有已命名

21、框架的名称都显示在此弹出列表中。如果指定的框架不存在,当文档在浏览器中打开时,所的页面将载入一个新窗口该窗口使用所指定的名称。也可选用保留目标名,如-blank,-paresnt,-self 和-top.在替换文本域中键入希望在纯文本浏览器或设为动手下载图像的浏览器中作为替换文本出现的文本。比如图5-18所示的head有些浏览器在用户鼠标指针暂停与该热点之上时,将此文本显示为工具提示。注意：只有当所算热点包含时,目标才可用。按F12键可以预览热点设置的效果,如图5-19所示。图5-19 热点预览效果2. 修改图像地图对在图像地图中所创建的热点进行编辑很容易。可以移动热点,调整热点大小,或者在层

22、之间向上或向下移动热点。1复制热点可以将含有热点的地图从一格文档拷贝到另一格文档,或者拷贝某图像中的一个或多个热点,然后将其粘贴到其他图像上,这样就将与该图像关联的热点也拷贝到了新文档中,如图像中有若干相同形状的热点,只需要创建一个,然后复制即可。2选择图像地图中的多个热点使用指针热点工具选择一个热点。按下Shift键的同时单击要选择的其他热点。按Ctrl+A键,选择所有的热点。3移动热点使用指针热点工具选择一个热点。拖动此热点到新区域,用Shift+箭头键将热点向选定方向一次移动10个像素；使用箭头键将热点向选定方向一次移动一个像素。4调整热点的大小用指针热点工具选择要调整大小的热点。拖动热

23、点选择手柄,可以更改热点的大小或形状。 5.3利用Dreamweaver 8编辑超5.3.1设置颜色在通常情况下,超默认的颜色为蓝色,活动超的颜色为红色,已访问过的超颜色为紫色。如果用户对这种默认的配色方案不满意,可以按自己的喜好随意修改颜色。更改配色方案的操作步骤如下。1在网页中单击鼠标右键,从弹出的快捷菜单中选择页面属性命令,打开页面属性对话框。2分别单击3种超的颜色右侧的按钮,在弹出的颜色面板中重新选择其颜色,如图5-20所示。图5-20 页面属性对话框3设置完成后单击确定按钮。注意：此方法只对当前网页生效,当建立新网页时,新网页的超级的配色方案还是最初的默认值。5.3.2设置字体不但的

24、颜色可以改变,而且的字体也能改变。可以直接在属性面板中字体下拉列表框中修改字体,如图5-21所示。图5-21 修改字体样例5.3.3删除超如果对网页中的超不满意或不想使用了,可以对其进行删除.删除超有两种方法:一是通过删除超对象来删除超；二是通过编辑超对话框中的删除超按来删除超。1删除超对象在普通视窗下选中超,然后按下Delete键,不但可以删除超,而且可以将超文本一同删除。2删除超如果删除超时想保留文本,可以执行以下操作。在网页中选定超文本。在工具栏中单击插入超按钮,打开编辑超对话框。单击删除超按钮。单击确定按钮。5.4创建导航条5.4.1认识导航条1. 导航条的作用通常在网页的首页上可设置

25、一个导航条,这样既可为浏览者浏览提供一个索引,又能引导浏览者浏览整个的不同页面。导航条可由一幅图像或多幅图像所组成,这些图像的显示内容随用户动作而变化.导航条通常为站点上的页面和文件之间移动提供一条捷径的途径,如图5-22所示。图5-22 页面中的导航条2.导航条的4种状态使用插入导航条命令之前,应首先为各个导航条项目的显示状态创建一组图像,这些图像分别表示导航条的4种状态.1一般：指用户尚未单击或尚未与此项目交互时所显示的图像,如图5-23所示此种项目看起来未被单击过。2滑过：指鼠标指针滑过一般图像时所显示的图像,如图5-24所示。图像的外观发生变化如变得更亮,以让用户知道可与这个项目进行交

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

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

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

29、0选中预先载入图像复选框,可在载入页面时下载图像。如果未选择此选项,在用户鼠标指针滑过图像时可会出现延迟。11如果选中页面载入时就显示鼠标按下图像复选框,则网页被浏览器载入后,将该按钮图像显示为按下状态。这主要用于该图像对应是当前页面的情形。12在插入下拉列表,可以设置导航条的放置方向。选择水平,则水平放置导航条；选择垂直,则垂直放置导航条。13如果希望导航条放置于表格中,可以选中使用表格复选框,这样可以利用表格控制页面中的文本。14按照上述操作可以向导航条中添加第一个本站首页按钮图像,单击对话框上的按钮,可以继续添加其他的按钮图像。单击对话框上的按钮,可以删除按钮图像。15所有导航条的元素设置完毕后,按下确定按钮,完成插入导航条操作,这时文档中就添加了一个导航条。5.4.3修改导航条为文档创建导航条后,可以使用修改导航条命令向导航条中添加图像,或者从导航条中删除图像,此命令可以用于更改图像或图像组,更改单击项目时打开文件,选择在不同的窗口或框架中打开文件以及重新排列图像等。选择修改导航