插入超级链接和导航栏

时间：2023-08-25 百科知识版权反馈

【摘要】：现以“网上逛世博”以及“世博服务”网页站点的制作过程来掌握多种超级链接插入和对多种元素添加链接的方法。“网上逛世博”网站的首页效果如图3-114所示。外部超级链接很常见，譬如网络上的“友情链接”等。此时，图像周围出现蓝色边框，表示超级链接已经创建好。

项目5　插入超级链接和导航栏——制作“网上逛世博”网站

项目描述

一张网页，无论内容多么丰富，即使包括图文并茂的效果、Flash动画、视频和音频元素，它的表现力还是有限的。网页中只有通过超级链接才能使用其他网络资源，正是因为有了超链接才成就了互联网。现以“网上逛世博”以及“世博服务”网页站点的制作过程来掌握多种超级链接插入和对多种元素添加链接的方法。“网上逛世博”网站的首页效果如图3-114所示。

图3-114　“网上逛世博”首页效果

项目分析

完成该项目，需通过创建站点、制作首页空白网页、制作其他分页、向网页中添加多种类型的超级链接（包括内部链接、外部链接、邮件链接、锚点链接以及脚本链接等）以及对多种网页元素添加超级链接（包括文本链接、图像链接、Flash按钮或Flash文本链接等）等操作实现，因此，本项目可分解为以下任务：

任务1　创建“网上逛世博”网页

任务2　创建文字超级链接

任务3　创建图像超级链接

任务4　创建空链接

任务5　创建图像热点超级链接

任务6　创建外部超级链接

任务7　创建电子邮件超级链接

任务8　创建文件下载超级链接

任务9　创建脚本超级链接

任务10　制作“世博服务”网页

项目目标

●了解网页中超级链接的类型

●了解网页中超级链接的路径

●掌握在网页中创建各种超级链接的方法

任务1　创建“网上逛世博”网页

操作步骤

在F盘根目录下新建一个sitelx35文件夹，作为站点文件存放的位置；将“素材”文件夹“单元3”下“项目5”中的素材复制到sitelx35文件夹中。

执行【开始】→【所有程序】→【Adobe Dreamweaver CS3 】命令，打开Dreamweaver CS3工作窗口；在起始页“新建”栏中单击“Dreamweaver站点”选项，在弹出的【站点定义】对话框的“高级”标签中定义站点名称为“网上逛世博”，并指定站点根目录及图片文件的目录，如图3-115所示。

图3-115　【站点定义】对话框

单击【确定】按钮，在【文件】面板中即显示新建站点“网上逛世博”，如图3-116所示。

图3-116　【文件】面板

在Dreamweaver CS3 中打开“素材”中的网页index.html，另存为wsgsb.html，如图3-117所示。

图3-117　“index.html”网页

任务2　创建文字超级链接

操作步骤

选中文字“首页”，执行【插入记录】→【超级链接】命令，或者在【插入】栏【常用】类别中单击“超级链接”按钮，打开【超级链接】对话框；单击“链接”右边的文件夹图标，打开【选择文件】对话框；选择所需的文件“wsgsb.html”，“标题”设为“网上逛世博”，“Tab键索引”设为0，如图3-118所示；单击【确定】按钮，即可看到文字“首页”变成带下划线的蓝色文字，说明超级链接已经建立。

图3-118　【超级链接】对话框

贴心提示

（1）“目标”下拉列表有4个选项，含义如下：

●＿blank：表示所链接的文件将在一个新的浏览器窗口中打开。

●＿parent：表示将所链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。

●＿self：表示将所链接的文件载入该链接所在的同一框架或窗口中。

●＿top：表示将所链接到的文件载入整个浏览器窗口中，因此会删除所有框架。

（2）“标题”为超级链接的标题。

（3）“访问键”：可以输入一个字母，如a，则使用Alt＋A就可以选中该对象。

（4）“Tab键索引”：Tab键编号。

重复以上步骤，对文字“世博历史、历届世博会、上海世博会、世博服务、世博园地图”文字依次建立超级链接，分别链接至sbls.html、ljsbh.html、shsbh.html、sbfw.html、sbydt.html网页。

贴心提示

（1）除上述方法外，也可以选中文字“世博历史”，设置其【属性】面板上的“链接”属性和“目标”属性来建立超级链接，如图3-119所示。

（2）也可以先选中文字，单击右键，在弹出的快捷菜单中选择“创建链接”命令来创建超级链接，如图3-120所示。

图3-119　【属性】面板

图3-120　快捷菜单

任务3　创建图像超级链接

操作步骤

选中图像“中国馆”，设置其【属性】面板上的“链接”属性和“目标”属性；单击“链接”栏右边文件夹图标，选择“a.html”网页，“目标”设为＿blank，即可建立图像的超级链接，如图3-121所示。

图3-121　图像的【属性】面板

贴心提示

除了上述方法外，还可以先选中图像，再单击右键，在弹出的快捷菜单中选择“创建链接”命令，创建超级链接。

同上操作，设置其他图像的超级链接，如图像“沙特馆”“日本馆”链接至站点目录下files文件夹下的a.html网页，而设置“俄罗斯馆”“英国馆”“美国馆”链接至站点目录下files文件夹下的c.html网页。创建图像超级链接后，黑色的图像边框变为蓝色，如图3-122所示。

图3-122　建立超级链接后的图像边框

任务4　创建空链接

操作步骤

创建空链接。如果链接的目标文件还没有编辑好，可以首先创建空链接，将来再重新指定链接文件即可。空链接的创建方法很简单，即在“链接”后的对话框中输入“＃”。

按照上述方法，依次给6组鼠标经过图像创建空链接；按F12键预览网页，光标移到图像上时变为，单击链接为空，如图3-123所示。

图3-123　建立空链接后的图像预览效果

任务5　创建图像热点超级链接

操作步骤

上述一幅图像只能创建一个超级链接，即链接至一个文件。要想在一幅图像上设置多个超级链接，就需要设置图像的热点超级链接。选中“世博地图1.png”图片，在【属性】面板左下角的4个热点工具（如图3-124所示）中选择“矩形热点工具”，在图像上按住鼠标左键不放，在周围拖动鼠标创建一个矩形热点区域，如图3-125所示。

图3-124　选择图像热点工具

图3-125　绘制矩形热点区域

单击“指针热点工具”，调节热点位置和大小。

在【属性】面板上设置热点的“链接”为a.html，“目标”为＿blank，“替换”为A区展馆，如图3-126所示。

图3-126　设置热点属性

采用同样的方法，选择“多边形热点工具”，设置B、C、D、E区域的热点链接，分别设置“链接”为b.html、c.html、d.html和e.html，“目标”均为＿blank，“替换”分别为B区展馆、C区展馆、D区展馆和E区展馆。按F12键预览网页，当光标移到图像上热点区域时变为，单击即可链接至目标网页，如图3-127所示。

图3-127　预览图像热点超级链接效果

任务6　创建外部超级链接

操作步骤

与上述超级链接不同，外部超级链接通常是从一个网站链接至另一个网站，而上述超级链接都是在站点目录下的链接，即内部链接。外部超级链接很常见，譬如网络上的“友情链接”等。选中网页中的图像，在【属性】面板上设置“链接”属性为http：//www.expo2010.cn/，“目标”为＿blank，如图3-128所示。此时，图像周围出现蓝色边框，表示超级链接已经创建好。

图3-128　设置外部超级链接

保存该网页，按F12键预览网页；单击图像，即可链接至世博网官方网站，如图3-129所示。

图3-129　外部超级链接预览效果

采用同样方法，分别设置图像、、和链接至相应的官方网站，如图3-130所示。

图3-130　建立外部链接的图像

任务7　创建电子邮件超级链接

操作步骤

电子邮件超级链接一般指添加一个邮箱地址，单击后，会打开默认的收发电子邮件程序。选中文档中的文字“expoweb＠expo2010.gov.cn”，执行【插入记录】→【电子邮件链接】命令，或者在【插入】栏【常用】类别中单击“电子邮件链接”按钮，打开【电子邮件链接】对话框，输入E-Mail地址expoweb＠expo2010.gov.cn，如图3-131所示。

图3-131　【电子邮件链接】对话框

贴心提示

除了上述方法外，还可以在【属性】面板的“链接”栏内输入“mailto：expoweb＠ex-po2010.gov.cn”来创建电子邮件链接，“目标”为“＿blank”，如图3-132所示。

图3-132　【属性】面板上设置电子邮件链接

单击【确定】按钮，保存网页；按F12键预览，单击文字“expoweb＠expo2010.gov.cn”，打开邮件收发程序，如图3-133所示。

图3-133　电子邮件链接预览效果

任务8　创建文件下载超级链接

操作步骤

选择文字“下载中心”，在【属性】面板上设置“链接”属性为站点目录下other文件夹下的“上海世博会主题内容手册.rar”文件，如图3-134所示。

图3-134　设置下载文件超级链接

保存文件，按F12键预览。单击文字“下载中心”，会显示【文件下载】对话框，如图3-135所示。

图3-135　下载文件超级链接预览效果

任务9　创建脚本超级链接

操作步骤

脚本链接是指调用脚本代码进行的特殊链接。譬如网上经常使用的“关闭窗口”就可以调用javascript脚本实现。选中文档中的文字“关闭窗口”，在【属性】面板的“链接”栏输入“javascript：window.close（）”来实现脚本链接，如图3-136所示。

图3-136　设置脚本链接

保存文件，按F12键预览网页效果。如图3-137所示，此时将弹出一个信息框，可以选择“是”或者“否”来关闭窗口或者取消关闭。至此，“网上逛世博”网页就制作完成了。

图3-137　预览关闭窗口

任务10　制作“世博服务”网页

操作步骤

打开“素材”sbfw0.html网页，另存为sbfw.html。由于该页面比较长，这里通过插入锚点链接，将文档中的文字或图像链接到文档中指定的位置。文档可以是当前文档，也可以是不同文档。

将光标定位至“世博服务”附近，执行【插入记录】→【命名锚记】命令，或者在【插入】栏【常用】类别中单击“命名锚记”图标，打开【命名锚记】对话框，在“锚记名称”栏输入top，如图3-138所示。

单击【确定】按钮，即可在“世博服务”附近插入命名锚记符号，如图3-139所示。

图3-138　【命名锚记】对话框

图3-139　命名锚记插入后的效果

采用同样的方法，分别在页面下方的“购票电话”附近插入命名锚记gpdh，“交通服务”附近插入命名锚记jtfw，“服务点服务”附近插入命名锚记fwdfw，“园区餐饮”附近插入命名锚记yqcy，“预约服务”附近插入命名锚记yyfw，“特许商品”附近插入命名锚记txsp，“天气服务”附近插入命名锚记tqfw。

建立锚点链接。选中页面顶部的文字“购票电话”，在其【属性】面板的“链接”栏输入＃gpdh，就可以实现锚点链接了，如图3-140所示。

图3-140　建立锚点链接

设置完成后，文字“购票电话”变为带下划线的蓝色文字，如图3-141所示。预览网页，单击“购票电话”，就会链接到本页面的gpdh锚点位置，地址栏显示sbfw.html＃gpdh，如图3-142所示。

图3-141　锚点链接预览效果

图3-142　单击锚点链接效果

采用同样方法，设置文字“交通服务”的“链接”属性为＃jtfw，设置文字“服务点服务”的“链接”属性为＃fwdfw，设置文字“园区餐饮”的“链接”属性为＃yqcy，设置文字“预约服务”的“链接”属性为＃yyfw，设置文字“特许商品”的“链接”属性为＃txsp，设置文字“天气服务”的“链接”属性为＃tqfw。

将所有文字的“返回”“链接”属性设置为＃top；保存网页，按F12键预览网页；单击任意链接文字，如“园区餐饮”，页面将链接至锚点yqcy的位置，地址栏显示sbfw.html＃yqcy，如图3-143所示；单击“返回”，页面返回顶端，地址栏显示sbfw.html＃top，如图3-144所示。至此，“世博服务”网页就全部制作完成了。

图3-143　单击“园区餐饮”锚点链接效果

图3-144　单击“返回”锚点链接效果

知识百科

1.超级链接概述

1）超级链接

超级链接是指从一个网页到另一个网页对象的链接关系。这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超级链接的对象，可以是一段文本或者是一幅图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

2）超级链接的类型

按照链接路径的不同，网页中超链接一般分为以下3种类型：内部链接、外部链接和锚点链接。

●内部链接：在同一个站点内部网页文档之间的链接。

●外部链接：在不同网站网页文档之间的链接。

●锚点链接：同一网页或不同网页指定位置的链接。

如果按照使用对象的不同，网页中的链接又可以分为：文本链接、图像链接、电子邮件链接、锚点链接、文件下载链接、脚本链接以及空链接等。

2.链接路径

在网页上唯一定位一张网页地址的是URL（Uniform Resource Locator），称其为统一资源定位符。网页上的链接路径一般分为两种：一种是绝对URL，另一种是相对URL。

1）绝对URL

绝对URL提供所链接文档的完整URL地址，而且包括所使用的网络协议的类型。如http：//www.baidu.com/就是一个绝对URL，所使用的协议类型是HTTP；ftp：//10.41.181.10也是一个绝对URL，所使用的协议是FTP。

2）相对URL

相对URL是指省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的部分，比如F：\sitelx35\wsgsb.html链接到F：\sitelx35\files\shibohui.html，可以把F：\sitelx35去掉，只用files\shibohui.html。