网页中使用超链接.docx
《网页中使用超链接.docx》由会员分享，可在线阅读，更多相关《网页中使用超链接.docx（27页珍藏版）》请在冰豆网上搜索。
网页中使用超链接
第五章网页中使用超
超是的魅力所在。
为了把Internet上众多分散的的网页联系起来,构成一个有机的整体,就是在网页上加入。
通过点击网页上的,才能真正实现网络无国界,我们才可以在信息海洋中尽情遨游。
MacromediaDreamweaver8提供多种创建超文本的方法,可创建到文档、图像、多媒体文件或下载软件的,可以建立到文档内任意位置的任何文本或图像〔包括标题列表、表、层或框中的文本或图像〕的。
本章主要介绍利用Dresmweaver创建的编辑各种超的方法。
通过本章的学习,读者应该掌握以下内容；
●认识超
●掌握利用Dreamweaver创建各种超的方法
●掌握利用Dreamweaver编辑各种超的方法
●管理超下的方法
5.1超基础
5．1．1超的种类
超为畅游网络提供了方便,它是网页制作中使用比较多的一种技术。
超是用预先准备的好文本、按钮、图像等对象与其他对象建立的一种,也就是源端和目标端点之间的建立一种。
源端点是超的超始端点,也称为源锚；目标端点是的像,也签名为目标锚。
超按源端点的划分,可分为超文本和非超文本两类。
超文本的源锚文本下方有下划线,而非超文本是用除文本之外的其他对象构建的,其源锚可以是图像、表格、列表、表单、多媒体等对象。
超按目标端点的划分,可分为外部、内部、电子、局部、脚本等。
5．1．2文档路径类型
掌握从作为起点的文档到作为目标文档之间的文件路径,对于创建至关重要。
文档路径类型有绝对路径和相对路径两种。
1.绝对路径
绝对路径是包括服务器协议〔本例中为〕的完全路径,比发如"洪恩在线——电脑乐园",完全路径为;honggen/pe/index..htm.如果要当前站点之外的文档,就必须使用绝对路径。
每个网页都有一个惟一的地址,称为统一资源定位器。
绝对路径提供文档的完整URL,包括使用的协议<对于网页通常是>。
例如,macromedia/support/dreamweaver/contents.html就是一个绝对路径。
必须使用绝对路径来其他服务器上的文档。
对本地〔文档在相同的站点中〕也可使用绝对路径,钽并不赞成这种用法,如果将站点移到另一个域中,所有的本地绝对路径都有将打断。
当创建本地〔即从一个文档到同一站点上另一个文档的〕时,通常不指定要到的文档的完整URL,而是指定一个从当前文档或站点根文件开始的相对路径。
2.相对路径
相对路径包括根相对路〔SiteRoot〕和文档相对路径两种。
在本地磁盘上编辑网页时,需要选定一个文件夹来定义本地站点,模拟服务器上的根文件夹,系统就根据这个文件夹来确定所有的本地文件位置,而根相对路径中的根就是指这个文件夹。
使用相对路径为在本地站点内移动文件提供了很大的灵活性。
〔1〕根相对路径以〔也称相对根目不暇接录〕"/"开头,路径是从当前站点的根目录开始计算。
如时D盘myweb目录就是名为"myweb"的站点,这时"/index.htm"路径就表示文件位置为D:
\myweb\index.htm.根相对路径适用于内容频繁更换的文件,这样即使站点中的文件被移动了,其仍可经生效。
如果目录结构过深,在引用根目录下有文件时,用根相对路径会更好些。
比如某一个网页文件中引用根目录下img目录中的一个图片文件"a.gif"时,在当前网页中用文档相对路径表示为：
./../../../img/a.gif,而用要根相对路径只要表示为"/img/a.gif"就行了.
图5-1将站点所在目录虚拟为一个盘
注意：
在预览文件时,用根相对路径的内容在本地浏览器中不会显示出来,这是因为浏览不会承认站点的根文件夹服务器。
这时可以将站点的根目录虚拟不为一个盘。
比如要浏览D:
myweb下的文件,可以选择Windows"开始"菜单中的"运行",弹出运行对话框,输入"substh:
d:
\myweb",如图：
5-1所示,D盘下的Mywe文件夹就被虚拟为H盘,在浏览器中查看H盘下网页,用根相对路径的内容都可以正常显示了。
〔2〕文档相对路径
文档相对路径对于大多数WEB站点的本地来说,是最合适的路径。
在当前文档与的文档在同一文件夹中,而且很可能长久保留在一起时,文档相对是尤其有用的。
文档相对路径还可用来到其他文件夹中的文档,方法是利用文件夹层次结构指定从当前文档到所的文档的路径。
文档相对路径的基本思想是省略当前文档和的文档都有相同的绝对URL部分,而只提供不同的那部分路径。
若要的文件与当前文档处在同一文档夹中,只需输入文件名即可。
若要的文件夹位于当前文档所在文件夹的父文件夹中,提供文件夹名,然后加上正斜线〔/〕和文件名。
若要的文件位于当前文档所在文件夹的父文件夹中,文件名前加../<其中".."表示"文件夹分层结构中的上一级文件夹">
文档相对于路径就是指包含当前文档所在文件夹,也就是当前网页所在文件夹为基础开始计算路径。
比如：
当前网页所在位置为D:
\myweb\mypic,则：
"a.htm"就表示D:
\myweb\mypic\a.htm;
"../a.htm"相当于D:
\myweb\a.htm;,其中"../"表示当文件夹上级文件夹。
"img/a.gif"是指D:
\myweb\mypic\img\a.gif,其中"img"意思是汉前文件夹下名为文件夹。
文档相对路径是最简单的路径,一般多用于保存在同一文件夹中的文档。
5.2利用Dreamweaver8创建超
5．2．1创建文字超
如果想在Dreamweaver8中为页面中的文本对象创建超,可以在文本"属性"面板中按如下方法进行操作。
1.使用"浏览文件"图标
〔1〕选中欲设置超级的文本对象。
〔2〕在菜单栏中单击"窗口"→"属性"〔或按Ctrl+F3键〕,打开如图5-2所示的文本"属性"面板。
图5-2文本"属性"面板
〔3〕在"属性"面板上单击""文本框右侧的"浏览文件"图标
打开图5-3所示的"选择文件"对话框。
图5-3"选择文件"对话框
〔4〕设置"选择文件"对话框的参数。
该对话框中具体参数的含义如下所述。
URL〔URL地址〕：
在选定"相对于"后,该处即会显示将出现在文本"属性"面板中""文本框的地址。
相对于：
在该下拉列表中你可以选择路径的形式,有"文档"和"站点根目录"两个选项。
参数：
单击"参数"按钮,可以打开如图5-4所示的参数设置窗口,不过需要注意的是该项只对数据库中的文档有效。
图5-4"参数"对话框
在"选择文件"对话框中选择文本目标文件,单击"确认"按钮,则图5-2中""文本框中将出现目标文件名。
2.使用"指向文件"图标
〔1〕选中欲设置超级的文本对象。
〔2〕如果目标文档已经打开,则直接将"指向文件"图标
拖动到目标文档窗口,拖动过程有一条从"指向文件"图标出发的箭头线,将其拖动到指定区域即可完成该,如图5-5所示。
图5-5拖动"指向文件"图标到目标窗口
〔3〕如果目标文档没有打开,也可以将"指向文件"图标拖动到站点窗口中相应的位置,如图5-6所示。
图5-6拖动"指向文件"图标到站点文件
〔4〕拖放到目标地址后,释放鼠标即可在属性"面板"的""文本框中看到目标端文档的URL地址。
图5-7"超级"对话框
3.使用"超级"对象
〔1〕把光标置于欲设置超级的地方,选择"插入"→"超级"菜单命令,或者直接单击"插入"面板上"常用"选项卡下的"超级"图标
弹出"超级"对话框,如图5-7所示。
〔2〕"超级"对话框中各项参数的含义如下。
文本：
欲设置超级的文本对象。
：
文本对象的目标地址。
目标：
从目标的下拉列表框中选择文档的打开位置。
若要使所的文档出现在当前窗口或框架以外的其他位置,可以从下拉列表框中选择一个选项。
●_blank——在一个未命名的新浏览器窗口中载入所的文档。
●_parent——在该所在框架的父框架或父窗口中载入所的文档。
如果包含的框架不是嵌套框架,则所的文档载入整个浏览器窗口。
●_self——在所在的同一框架或窗口中载入所的文档。
●_top——在整个浏览器窗口中载入所的文档,但它会删除所有框架。
标题：
当鼠标指针指向超的文本对象时的提示文字。
在"超级"对话框中设置参数,如图5-7所示。
〔3〕设置具体的信息后单击"确定"按钮,即可在所需区域插入文本超级了,按F12键即可在浏览器中预览其效果,如图5-8所示。
图5-8当鼠标指针指向超文本后浏览器中所见的结果
5．2．2创建锚点超
当一个网页的主题或文字较多时,可以在网页内建立多个标记点,将超指定到这些标记点上,能够使浏览者快速找到要阅读的内容,这些标记点称为锚记。
在网页设计中,要创建某个网页的指定位置的超被称为创建网页的锚点超。
创建网页的锚点可分为两步完成：
首先在网页的某个指定位置创建的目标端点〔即锚记〕,并为其命名。
源端点处建立该锚记的超。
在浏览网页时,用鼠标单击源端点,光标就会马上移到锚记的位置上。
1.命名锚记
在文档窗口的设计视图中,将插入点放在需要命名锚记的地方。
在菜单栏中单击"插入"→"命名锚记"命令,打开如图5-9所示的以话框。
图5-9创建命令锚记
在"锚记名称"文本框中输入该锚记的名称〔名称区分大小写〕,单击"确定"按钮。
这时,锚记标记
将在插入点处出现。
若看不到锚记标记,则选择"查看"→"可视化助理"→"不可见元素"命令。
在命名锚记时,应遵循以下规则。
〔1〕只能使用字母和数字,锚记的命名不支持中文。
虽然在"命名锚记"对话框中可以输入中文,但在"属性"面板中显示的则是一堆乱码,并且在为锚记添加时,也无法工作。
〔2〕锚记名称的第一个字母最好是英文字母,一般不要以数字作为锚记名称的开头。
〔3〕锚记名称区别英文字母的大小写。
〔4〕锚记名称间不能含有空格,也不能含有特殊的字符。
注意：
锚点不能放在层中。
2．到命名锚记
在文档窗口的设计视图中,选择要从其创建的对象〔文本,图像等〕。
在属性面板的""文本框中输入一个数字符号〔﹟〕和锚记名称。
例如：
如果要到当前文档中名为"bottom"的锚记,要键入﹟bottom。
如果要到同一文件夹内其他名为"bottom"的锚记,可键入filename.html﹟bottom,如图5-10所示。
图5-10在属性面板中到命令锚记
如果要使用指向到文件方法到命名锚记,可打开所需命名锚记的文档。
在文档窗口的设计视图中,选择要从其创建的对象〔文本、图像等〕。
单击属性面板中""文本框右侧的"指向文件"图标
然后将其拖动到要的锚记〔可以是同一文档的锚记或其他文档的锚记〕上。
5.2.3创建电子
在网页上创建,可以方便地让访问者反馈意见。
访问者只需单击页面上的电子即可打开一个新的空白窗口〔使用的是与用户浏览器相关联的程序〕。
在电子消息窗口中,"收件人"域自动更新为显示电子中指定的地址。
在Dreamweaver8中,可以使用如下方法在页面中创建电子。
1.插入电子
〔1〕在"文档"窗口的"设计"视图中,将插入点放在希望出现电子的位置,或者选择要作为电子出现的文本或图像。
选择"插入"→"电子"命令,将出现"电子"对话框,如图5-11所示。
图5-11"电子"对话框
〔2〕完成此对话框的相关内容。
单击"确定"按钮。
2.使用属性面板创建电子
在"文档"窗口的"设计"视图中选择文本或图像。
在属性面板的""文本框中,键入mailto,后面跟电子地址。
在冒号和电子地址之间不能键入任何空格。
如键入mailto：
abcsina,如图5-12所示。
图5-12使用属性面板创建电子
5.2.4创建空和脚本
空是未指派的。
空用于向页面上的对象或文本附加行为。
当创建空后,可向空附加行为,以便当鼠标指针滑过该时交换图像或显示层。
1.创建空
为文本创建空时,只需在文档窗口中选定文本,然后在属性面板的""文本框中键入"#"即可,如图5-13所示。
建立空的目的主要是为了应用行为,在其他情况下不必创建空。
图5-13创建空
2.创建脚本
在"文档"窗口的"设计"视图中选择文本、图像或对象。
在属性面板的""文本框中键入javaScript：
；,即可创建空,如图5-14所示。
图5-14创建脚本空
脚步本执行JavaScript代码或调用JavaScript函数。
脚本非常有用,能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。
脚本还可用于在访问者单击特定选项时,执行计算、表单验证和其他处理任务。
创建脚本操作方法如下。
在"文档"窗口的"设计"视图中选择文本、图像或对象。
在属性面板的""文本框中,键入JavaScript：
后面跟一些JavaScript代码或函数调用。
如在""文本框中键入javascript:
alert<"Thislinkleadstotheindex〕可生成这样一个：
单击该时,会显示一个含有消息Thislinkleadstotheindex的javascript警告框,如图5-15所示。
图5-15创建脚本样例
注意：
因为在HTML中JavaScript代码放在双引号中〔作为href属性的值〕,所以在脚本代码中必须合用单引号,或者可通过在双引号前添加反斜杠,将所有双引号"转义"〔例如\"Thislinkleadstotheindex\"〕。
5.2.5创建下载文件超
如果想让提供文件下载的功能,可以建立下载文件超。
实现文件下载的功能很简单,只需加入连接到文件的超就可以了。
连接中下载文件的超也属于内部超级中的一种。
创建下载文件超的方法如下。
道德选择主窗口中"站点"→"站点文件"菜单命令,打开站点窗口,找到需要的目标文件。
然后选择网页中需要建立超的文字,按下一步Shift键拖动鼠标指针到站点窗口中的目标文件。
5.2.6图像地图
图像地图指已被分为多个区域〔或称为热点〕的图像。
当用户单击某个热点时,会发生某种操作〔如,打开一个ＵＲＬ或一个文件〕。
使用图像属性面板可创建或编辑客房端图像地图。
客户端图像地图将超文本信息存储在ＨＴＭＬ文档中,而不是像服务器端图像地图那样,存储在单独的地图文件中。
当站点访问者单击图像中的热点时,相关ＵＲＬ被直接发送到服务器。
这就是使得客户端图像地图要快,因为服务器不必解释访问者的单击位置。
Dreamweaver并不改变现有文档中对服务器端图像地图的引用。
在同一文档中,可以同时使用客户端图像地图。
不过,同时支持这两种图像地图类型的浏览器赋予客户端图像地图以优先权。
若要在文档中包含服务器端图像地图,必须编写相应的ＨＴＭＬ代码。
1.创建图像地图
〔1〕选择图像
在"文档"窗口中,选择图像。
在属性面板中,单击右下角的展开箭头▽,查看所有属性。
在"地图名称"域中,为此图像地图键入一个惟一的名称,如图5-16所示。
注意：
如果在同一文档中使用多个图像地图,要确保每个地图,要确保每个地图都有惟一名称,以便设置每个图像地图的超。
〔2〕定义客户端图像地图中的优点
图5-16图像属性面板
①创建热点。
若要定义图像地图区域,选择下列方法之一。
●选择圆形工具,并将鼠标指针拖到图像上,创建一个圆形热点。
●选择矩形工具,并将鼠标指针拖至图像上,创建一个矩形热点。
●选择多边形工具,在各个顶点上单击一下,定义一个不规则的热点,然后单击箭头工具封闭此开头如图5-17所示。
图5-17定义图像地图区域
②定义热点属性
选中其中一个热点,在热点属性面板设置其属性,如图5-18所示。
图5-18设置热点属性
在热点属性检查的""文本框中,单击文件夹图标,选择要的文件,可者键入此文件的名称。
如果到同一站点内的文件,可输入相对于文档的路径〔以file开始的文件名,不是相对路径文件名〕。
在"目标"弹出菜单的"目标"域中,选择应该用于打开该文件的窗口。
当前文档中所有已命名框架的名称都显示在此弹出列表中。
如果指定的框架不存在,当文档在浏览器中打开时,所的页面将载入一个新窗口该窗口使用所指定的名称。
也可选用保留目标名,如-blank,-paresnt,-self和-top.
在"替换文本"域中键入希望在纯文本浏览器或设为动手下载图像的浏览器中作为替换文本出现的文本。
比如图5-18所示的"head"有些浏览器在用户鼠标指针暂停与该热点之上时,将此文本显示为工具提示。
注意：
只有当所算热点包含时,目标才可用。
按F12键可以预览热点设置的效果,如图5-19所示。
图5-19热点预览效果
2.修改图像地图
对在图像地图中所创建的热点进行编辑很容易。
可以移动热点,调整热点大小,或者在层之间向上或向下移动热点。
〔1〕复制热点
可以将含有热点的地图从一格文档拷贝到另一格文档,或者拷贝某图像中的一个或多个热点,然后将其粘贴到其他图像上,这样就将与该图像关联的热点也拷贝到了新文档中,如图像中有若干相同形状的热点,只需要创建一个,然后复制即可。
〔2〕选择图像地图中的多个热点
使用指针热点工具选择一个热点。
按下Shift键的同时单击要选择的其他热点。
按Ctrl+A键,选择所有的热点。
〔3〕移动热点
使用指针热点工具选择一个热点。
拖动此热点到新区域,用Shift+箭头键将热点向选定方向一次移动10个像素；使用箭头键将热点向选定方向一次移动一个像素。
〔4〕调整热点的大小
用指针热点工具选择要调整大小的热点。
拖动热点选择手柄,可以更改热点的大小或形状。
5.3利用Dreamweaver8编辑超
5.3.1设置颜色
在通常情况下,超默认的颜色为蓝色,活动超的颜色为红色,已访问过的超颜色为紫色。
如果用户对这种默认的配色方案不满意,可以按自己的喜好随意修改颜色。
更改配色方案的操作步骤如下。
〔1〕在网页中单击鼠标右键,从弹出的快捷菜单中选择"页面属性"命令,打开"页面属性"对话框。
〔2〕分别单击3种超的颜色右侧的"▼"按钮,在弹出的颜色面板中重新选择其颜色,如图5-20所示。
图5-20"页面属性"对话框
〔3〕设置完成后单击"确定"按钮。
注意：
此方法只对当前网页生效,当建立新网页时,新网页的超级的配色方案还是最初的默认值。
5.3.2设置字体
不但的颜色可以改变,而且的字体也能改变。
可以直接在属性面板中字体下拉列表框中修改字体,如图5-21所示。
图5-21修改字体样例
5.3.3删除超
如果对网页中的超不满意或不想使用了,可以对其进行删除.删除超有两种方法:
一是通过删除超对象来删除超；二是通过"编辑超"对话框中的"删除超"按来删除超。
〔1〕删除超对象
在"普通"视窗下选中超,然后按下Delete键,不但可以删除超,而且可以将超文本一同删除。
〔2〕删除超
如果删除超时想保留文本,可以执行以下操作。
●在网页中选定超文本。
●在工具栏中单击"插入超"按钮,打开"编辑超"对话框。
●单击"删除超"按钮。
●单击"确定"按钮。
5.4创建导航条
5.4.1认识导航条
1.导航条的作用
通常在网页的首页上可设置一个导航条,这样既可为浏览者浏览提供一个索引,又能引导浏览者浏览整个的不同页面。
导航条可由一幅图像或多幅图像所组成,这些图像的显示内容随用户动作而变化.导航条通常为站点上的页面和文件之间移动提供一条捷径的途径,如图5-22所示。
图5-22页面中的导航条
2.导航条的4种状态
使用"插入导航条"命令之前,应首先为各个导航条项目的显示状态创建一组图像<可将导航条项目视为按钮,因为当单击它时,导航条项目会将用户带到其他页面中>,这些图像分别表示导航条的4种状态.
〔1〕一般：
指用户尚未单击或尚未与此项目交互时所显示的图像,如图5-23所示此种项目看起来未被单击过。
〔2〕滑过：
指鼠标指针滑过"一般"图像时所显示的图像,如图5-24所示。
图像的外观发生变化〔如变得更亮〕,以让用户知道可与这个项目进行交互。
图5-23导航条的一般状态图5-24导航条的滑过状态
〔3〕按下：
指项目被单击后所显示的图像。
如,用户单击某项目后而导航条仍然显示,只是被单击的项目变暗,表示它曾被选择过。
〔4〕按下时鼠标经过：
指在项目被单击后,鼠标指针滑过"按下"图像时所显示的图像,如项目变淡或变灰,此状态可作为一个用户的可视提示,告诉用户在站点的这一部分,此项目不能再被单击。
在设计中不必包括所有这4种状态的导航图像。
如,可以只选用"一般"和"按下"这两种状态。
5.4.2插入导航条
要在文档中插入导航条,可以按照如下方法进行操作。
〔1〕在菜单栏中单击"插入"——"交互式图像"——"导航条",或在插入栏的"常用"选项卡中单击"导航条"图标
这时会打开如图5-25所示的对话框。
图5-25"插入导航条"对话框
〔2〕在"项目名称"文本框中为导航条第一项选择名称。
例如,可以输入"本站首页"。
单击"浏览"按钮,可以从磁盘上选择图片文件。
〔3〕在"状态图像"文本框中,输入导航按钮图像弹起状态〔即正常显示状态〕。
单击"浏览"按钮,可以从磁盘上选择图片文件。
状态图像为必需项,其他图像的状态选项为可选项。
〔4〕在"鼠标经过图像"本框中,输入导航按钮图像在鼠标指针经过的图像文件的URL。
单击"浏览"按钮,可以从磁盘上选择图片文件。
〔6〕在"按下图像"文本框中,输入导航按钮图像按下状态示的图像文件。
单击"浏览"按钮,可以从磁盘上选择图片文件。
〔5〕在"按下时鼠标经过图像"文本框中,输入导航按钮图像按下状态时的轮替图像文件的URL。
单击"浏览"按钮,可以从磁盘上选择图片文件。
〔7〕在"替换文本"文本框中,输入项目的描述性名称。
替换文本在纯文本浏览器或设为手动下载的图像的浏览器中,替代图像出现在应显示图的位置。
屏幕阅读器读取替换文本,而且有的浏览器在用户鼠标指针滑过导航条项目时显示替换文本。
〔8〕在"按下时,前往的URL"文本框中,输入单击导航按钮图像时跳转的URL地址。
单击"浏览"按钮,可以从磁盘上选择目标端点的文档。
〔9〕在"按下时,前往的URL"文本框右边的下拉列表框中可以选择文档被打开的目标窗口。
选择"主窗口",则表明在同一窗口中打开目标端点文档。
如果当前使用了框架,还可以从其中选择目标框架的名称。
如果希望选择的框架尚未命名,则需要先命名,然后再在这里进行选择。
〔10〕选中"预先载入图像"复选框,可在载入页面时下载图像。
如果未选择此选项,在用户鼠标指针滑过图像时可会出现延迟。
〔11〕如果选中"页面载入时就显示‘鼠标按下图像’"复选框,则网页被浏览器载入后,将该按钮图像显示为按下状态。
这主要用于该图像对应是当前页面的情形。
〔12〕在"插入"下拉列表,可以设置导航条的放置方向。
选择"水平",则水平放置导航条；选择"垂直",则垂直放置导航条。
〔13〕如果希望导航条放置于表格中,可以选中"使用表格"复选框,这样可以利用表格控制页面中的文本。
〔14〕按照上述操作可以向导航条中添加第一个"本站首页"按钮图像,单击对话框上的
按钮,可以继续添加其他的按钮图像。
单击对话框上的
按钮,可以删除按钮图像。
〔15〕所有导航条的元素设置完毕后,按下"确定"按钮,完成插入导航条操作,这时文档中就添加了一个导航条。
5.4.3修改导航条
为文档创建导航条后,可以使用"修改导航条"命令向导航条中添加图像,或者从导航条中删除图像,此命令可以用于更改图像或图像组,更改单击项目时打开文件,选择在不同的窗口或框架中打开文件以及重新排列图像等。
选择"修改"——"导航
升级会员 