4.3.4 实例4

您所在的位置:网站首页 命令锚记 4.3.4 实例4

4.3.4 实例4

2024-07-10 22:57| 来源: 网络整理| 查看: 265

4.3 实战演练

前面介绍了超级链接的基本概念及创建链接的几种方法,下面通过几个实例来巩固所学的知识。

4.3.1 实例1——创建外部链接

外部链接是相对于本地链接而言的,与本地链接不同的是,外部链接的链接目标文件在远程服务器上。当单击所设置的链接时如图4.4所示,单击链接后,打开如图4.5所示的页面。创建外部链接的具体操作步骤如下。

图4.4 单击设置的链接

图4.5 单击链接后效果

1 打开原始文件CH04/4.3.1/index.htm,如图4.6所示。

图4.6 打开原始文件

2 选中要设置链接的文字,选择菜单中的【窗口】|【属性】命令,打开【属性】面板,如图4.7所示。

图4.7 打开【属性】面板

3 在【属性】面板中的【链接】文本框中直接输入外部链接的地址“http://www.baidu.com”,如图4.8所示。

图4.8 输入链接地址

4 保存文档,按F12键在浏览器中预览效果,如图4.4和4.5所示。

4.3.2 实例2——创建E-mail链接

E-mail链接也叫电子邮件链接,在制作网页时,有些内容需要创建电子邮件链接。当单击此链接时,将启动相关的邮件程序发送E-mail信息。

在Dreamweaver中,创建E-mail链接可以在【属性】面板中进行设置,也可以使用菜单命令进行设置,效果如图4.9所示。

图4.9 创建E-mail链接效果

1 打开原始文件CH04/4.3.2/index.html,如图4.10所示。

图4.10 打开原始文件

2 将光标放置在页面中相应的位置,选择菜单中的【插入】|【电子邮件链接】命令,打开【电子邮件链接】对话框,在对话框中的【文本】文本框中输入“E-mail”,【电子邮件】文本框中输入“mailto:[email protected]”,设置E-mail地址,如图4.11所示。

图4.11 【电子邮件链接】对话框

3 单击【确定】按钮,创建E-mail链接,如图4.12所示。

图4.12 创建E-mail链接

提示 在【常用】插入栏中单击【电子邮件链接】figure_0075_0133按钮,打开【电子邮件链接】对话框,创建电子邮件链接。

4 保存文档,按 F12 键在浏览器中预览效果,单击创建的 E-Mail 链接,打开如图 4.9所示的【新邮件】对话框。

4.3.3 实例3——创建下载文件的链接

如果要在网站中提供下载资料,就需要为文件提供下载链接,如果超级链接指向的不是一个网页文件,而是其他文件,如zip、mp3、exe文件等,单击链接的时候就会下载文件。创建下载文件的链接效果如图4.13所示,具体操作步骤如下。

图4.13 下载文件链接效果

1 打开原始文件 CH04/4.3.3/index.htm,需要选中文本然后对文本添加链接,如图 4.14所示。

图4.14 打开原始文件

2 打开【属性】面板,在面板中单击【链接】文本框右边的【浏览文件】figure_0076_0136按钮,打开【选择文件】对话框,如图4.15所示。

图4.15 【选择文件】对话框

3 在对话框中选择文件“新建文本文档.zip”,单击【确定】按钮设置链接,如图 4.16所示。

图4.16 设置链接

4 保存文档,按F12键在浏览器中预览效果,单击文字链接“download file”,打开【文件下载】对话框,如图4.13所示。

4.3.4 实例4——创建图像热点链接

在网页中,超链接可以是文字,也可以是图像。图像整体可以是一个超链接的载体,而且图像中的一部分或多个部分也可以分别成为不同的链接。创建图像热点链接的效果如图4.17所示,具体操作步骤如下。

图4.17 创建图像热点链接效果

1 打开原始文件CH04/4.3.4/index.html,如图4.18所示。

图4.18 打开原始文件

2 选中创建图像热点链接的图像,选择菜单中的【窗口】|【属性】命令,打开【属性】面板,在【属性】面板中单击【矩形热点工具】figure_0076_0139按钮,如图4.19所示。

图4.19 选择【矩形热点】工具

提示 在【属性】面板中有 3 种热点工具,分别是【矩形热点工具】、【椭圆形热点工具】和【多边形热点工具】,可以根据图像的形状来选择热点工具。

3 如将光标移动到要绘制的热点图像“网站首页”的上方,按住鼠标左键不放,拖动鼠标绘制一个矩形热点,如图4.20所示。

图4.20 绘制热点

4 选中矩形热点,在【属性】面板【链接】文本框中输入地址,如图4.21所示。

图4.21 设置链接

提示 或单击【链接】文本框右边的【浏览文件】figure_0078_0145按钮,打开【选择文件】对话框,在对话框中选择链接目标,单击【确定】按钮,创建链接。

5 按照步骤2~3的方法在图像的其他位置上绘制热点,并设置热点,如图4.22所示。

图4.22 绘制热区并设置热点链接

6 保存文档,按F12键在浏览器中预览效果,如图4.17所示。

4.3.5 实例5——创建锚点链接

如果一个页面的内容较多,篇幅很长的话,为了使用户浏览起来方便,可以在页面的某个分项内容的标题上设置锚点,然后在页面上设置锚点的链接,从而使用户通过锚点链接快速直接地跳转到感兴趣的内容,效果如图4.23所示,创建锚点链接的具体操作步骤如下。

图4.23 锚点链接效果

1 打开原始文件CH04/4.3.5/index.htm,如图4.24所示。

图4.24 打开原始文件

2 将光标放置在“抗病原微生物类”的前面,选择菜单中的【插入】|【命名锚记】命令,打开【命名锚记】对话框,在对话框中的【锚记名称】文本框中输入“a”,如图4.25所示。

图4.25 【命名锚记】对话框

3 单击【确定】按钮,插入锚记,如图4.26所示。

图4.26 插入锚记

4 选中顶部导航栏的文本“抗病原微生物类”,在面板中的【链接】文本框中输入“#a”,设置链接,如图4.27所示。

图4.27 设置锚记链接

5 将光标放置在文档中“抗寄生虫药”的前面,选择菜单中的【插入】|【命名锚记】命令,打开【命名锚记】对话框,在对话框中的【锚记名称】文本框中输入“b”,如图4.28所示。

图4.28 【命名锚记】对话框

提示 在【常用】插入栏中单击【命名锚记】figure_0080_0152按钮,打开【命名锚记】对话框,插入命名锚记。] 单击【确定】按钮,插入锚记,如图4.29所示。

图4.29 插入锚记

7 选中顶部导航栏的文本“抗寄生虫药”,在【属性】面板中的【链接】文本框中输入“#b”,设置链接,如图4.30所示。

图4.30 设置锚记链接

8 将光标放置在文档中“消毒剂类”的前面,选择菜单中的【插入】|【命名锚记】命令,打开【命名锚记】对话框,在对话框中的【锚记名称】文本框中输入“c”,如图4.31所示。

图4.31 【命名锚记】对话框

9 单击【确定】按钮,插入锚记,如图4.32所示。

图4.32 插入锚记

10 选中顶部导航栏的文本“消毒剂类”,在【属性】面板中的【链接】文本框中输入“#c”,设置链接,如图4.33所示。

图4.33 设置锚记链接

figure_0081_0159将光标放置在文档中“添加剂类”的前面,选择菜单中的【插入】|【命名锚记】命令,打开【命名锚记】对话框,在对话框中的【锚记名称】文本框中输入“d”,如图4.34所示。

图4.34 【命名锚记】对话框

figure_0081_0160单击【确定】按钮,插入锚记,如图4.35所示。

图4.35 插入锚记

figure_0082_0163选中顶部导航栏的文本“添加剂类”,在【属性】面板中的【链接】文本框中输入“#d”,设置链接,如图4.36所示。

图4.36 设置锚记链接

figure_0082_0165将光标放置在文档中“其他”的前面,选择菜单中的【插入】|【命名锚记】命令,打开【命名锚记】对话框,在对话框中的【锚记名称】文本框中输入“e”,如图4.37所示。

图4.37 【命名锚记】对话框

figure_0082_0166单击【确定】按钮,插入锚记,如图4.38所示。

图4.38 插入命名锚记

figure_0082_0169选中顶部导航栏中的文字“其它”,在【属性】面板中的【链接】文本框中输入“#e”,设置链接,如图4.39所示。

图4.39 创建链接

figure_0083_0171保存文档,按F12键在浏览器中预览效果,单击设置的锚记链接,将跳转到页面中相应的位置,如图4.23所示。

4.3.6 实例6——创建空链接

空链接用于向页面上的对象或文本附加行为,创建空链接的具体操作步骤如下。

1 打开要创建空链接的原始文件,选中文字,如图4.40所示。

图4.40 打开原始文件

2 选择菜单中的【窗口】|【属性】命令,打开【属性】面板,在【链接】文本框中输入“#”即可,如图4.41所示。

图4.41 输入链接

4.3.7 实例7——创建脚本链接

脚本超链接执行JavaScript代码或调用JavaScript函数,它非常有用,能够在不离开当前网页文档的情况下为访问者提供有关某项的附加信息。脚本超链接还可以用于在访问者单击特定项时,执行计算、表单验证和其他处理任务。下面利用脚本超链接创建关闭网页的效果,如图4.42所示,具体操作步骤如下。

图4.42 创建关闭网页的效果

1 打开原始文件CH04/4.3.7/index.htm,选中文本“关闭网页”,如图4.43所示。

图4.43 打开原始文件

2 在【属性】面板中的【链接】文本框中输入“javascript:window.close()”,如图 4.44所示。

图4.44 输入链接

3 保存文档,按F12键在浏览器中浏览效果,单击“关闭网页”超文本链接,会自动弹出一个提示对话框,询问是否关闭窗口,单击“是”按钮,即可关闭网页,如图4.42所示。

HTML代码分析

1.路径URL

路径URL用来定义一个文件、内容或者媒体等的所在地址,这个地址可以是相对链接,也可以是一个网站中绝对地址,关于路径的写法,因其所用的方式不同有相应的变换。

URL 就是网址,只要上网,就一定会用到。一般来说,URL 只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。

比如,世界上有英文字母的网址 “http://www.abc.com”,但是没有希腊字母的网址“http://www.aβγ.com”。

2.HTTP路径

HTTP路径,用来链接Web服务器中的文档。

链接到外部网站就是跳转到当前网站外部,这种链接一般情况下需要使用绝对的链接地址,经常使用HTTP协议进行外部链接。

语法:

链接内容

说明:

在该语法中,http://表明这是关于HTTP协议的外部链接,在其后输入网站的网址即可。

3.FTP路径

FTP路径,用来链接FTP服务器中的文档,使用FTP路径时,可以在浏览器中直接输入相应的 FTP 地址,打开相应的目录或下载相关的内容,也可以使用相关的软件,打开 FTP地址中相应的目录或者下载相关的内容。

4.邮件路径

在网页上创建 E-mail 链接,可以使浏览者快速反馈自己的意见。当浏览者单击 E-mail链接时,可以立即打开浏览器默认的E-mail程序,收件人邮件地址被E-mail超链接中指定的地址自动更新,无需浏览者输入。

语法:

链接内容

说明:

在该语法中,电子邮件地址后面还可以增加一些参数,如下表所示。

表4-1 邮件的参数



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3