4.3 应用链接
链接存在多种类型，这主要是根据链接的对象和位置来划分的，具体介绍如下。
4.3.1 实战演练：定义锚点链接
锚点链接是指定向同一页面或者其他页面中的特定位置的链接。例如，在一个很长的页面，在页面的底部设置一个锚点，单击后可以跳转到页面顶部，这样避免了上下滚动的麻烦。另外，在页面内容的标题上设置锚点，然后在页面顶部设置锚点的链接，这样就可以通过链接快速地浏览具体内容。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中，把光标设置在要创建锚点的位置，或者选中要链接到锚点的文字、图像等对象。
第3步，在【属性】面板中设置锚点位置标签的ID值，如设置标题标签的ID值为c，如图4.8所示。
图4.8 设置锚点位置标签的ID值
给页面标签的ID锚点命名时不要含有空格，同时不要置于绝对定位元素内。
提示：要创建锚点链接，首先要创建用于链接的锚点。任何被定义了ID值的元素都可以作为锚点标记，然后就可以设置指向该位置点的锚点链接。这样当单击超链接时，浏览器会自动定位到页面中锚点指定的位置，这对于一个页面包含很多屏时，特别有用。
第4步，在编辑窗口中选中或插入并选中要链接到锚点的文字、图像等对象。
第5步，在【属性】面板的【链接】文本框中输入“#”+锚点名称，如输入“#c”，如图4.9所示。如果要链接到同一文件夹内其他文件中，如test.html，则输入“test.html#c”，可以使用绝对路径，也可以使用相对路径。要注意锚点名称是区分大小写的。
图4.9 设置锚点链接
第6步，保存网页，按F12键可以预览效果，如果单击超链接，则页面会自动跳转到顶部，如图4.10所示。
图4.10 锚点链接应用效果
4.3.2 实战演练：定义电子邮箱链接
定义超链接地址为邮箱地址即为E-Mail链接。通过E-Mail链接可以为用户提供方便的反馈与交流机会。当浏览者单击邮件链接时，会自动打开客户端浏览器默认的电子邮件处理程序（如Outlook Express），收件人邮件地址被电子邮件链接中指定的地址自动更新，浏览者不用手工输入。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中，将光标置于希望显示电子邮件链接的地方。
第3步，选择【插入】｜【电子邮件链接】命令，或者在【插入】面板【常用】选项卡中单击【电子邮件链接】选项。
第4步，在打开的【电子邮件链接】对话框的【文本】文本框中输入或编辑作为电子邮件链接显示在文件中的文本，中英文均可。在【电子邮件】文本框中输入邮件应该送达的E-mail地址，如图4.11所示。
图4.11 设置【电子邮件链接】对话框
第5步，单击【确定】按钮，则会插入一个超链接地址，如图4.12所示。单击E-Mail链接的文字，即可打开系统默认的电子邮件处理程序，如Outlook。
图4.12 电子邮件链接效果图
【拓展】
可以在【属性】面板中直接设置E-mail链接。选中文本或其他对象，在【属性】面板的【链接】文本框中输入“mailto:+namee@mysite.cn”，如图4.13所示。
图4.13 在面板中直接设置E-Mail链接
也可以在【属性】面板的【链接】文本框中输入“mailto:+电子邮件地址+?+subject=+邮件主题”，这样就可以快速输入邮件主题，例如，mailto:namee@mysite.cn?subject=意见和建议。在HTML中可以使用<a>标签创建电子邮件链接，代码如下：
<a href="mailto:namee@mysite.cn">namee@mysite.cn</a>
在该链接中多了"mailto:"字符，表示电子邮件，其他基本相同。
4.3.3 实战演练：定义脚本链接
脚本链接是一种特殊类型的链接，通过单击带有脚本链接的文本或对象，可以执行脚本代码（如JavaScript代码等），利用这种特殊的方法可以实现各种特殊的功能，如使用脚本链接进行确认或验证表单等。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中，选择要定义超链接的文本或其他对象。
第3步，在【属性】面板的【链接】文本框中输入“javascript”，接着输入相应的JavaScript代码或函数，如“javascript:alert（“谢谢关注，投票已结束。”）;”，如图4.14所示。
图4.14 设置脚本链接
第4步，在脚本链接中，由于JavaScript代码出现在一对双引号中，所以代码中原先的双引号应该相应改写为单引号。如果要创建更为复杂的脚本链接，请参考相关编程书籍。
第5步，按F12键浏览网页，单击脚本链接时，会弹出如图4.15所示的对话框。在HTML中可以使用<a>标签创建脚本链接，代码如下：
图4.15 脚本链接演示效果
4.3.4 实战演练：定义空链接
空链接就是没有指定路径的链接。利用空链接可以激活文档中链接文本或对象。一旦对象或文本被激活，则可以为之添加行为，以实现当鼠标移动到链接上时进行切换图像或显示分层等动作。有些客户端动作，需要由超链接来调用，这时就需要用到空链接。
在网站开发初级，设计师也习惯把所有页面链接设置为空链接，这样方便测试和预览。
【操作步骤】
第1步，启动Dreamweaver CC，新建文档，保存为test.html。
第2步，在编辑窗口中，选择要设置链接的文本或其他对象，在【属性】面板的【链接】文本框中只输入一个“#”符号即可，如图4.16所示。
图4.16 设置空链接
第3步，切换到【代码】视图，在HTML中可以直接使用<a>标签创建空链接，代码如下：
<a href="#">空链接</a>
4.3.5 实战演练：定义下载链接
当被链接的文件不被浏览器解析时，如二进制文件、压缩文件等，便被浏览器直接下载到本地计算机中，这种链接形式就是下载链接。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在本地站点文件夹内，使用压缩工具把准备下载的文件压缩打包。
第3步，在编辑窗口中，选择要定义超链接的文本或其他对象。在【属性】面板中，直接在【链接】文本框中输入文件名和后缀名，如Baofeng5-5.15.0730.exe，如图4.17所示，如果不在同一个文件夹还要指明路径。
图4.17 设置文件下载链接
第4步，保存网页，按F12键预览，单击这个链接，则会打开【文件下载】对话框，如图4.18所示，单击【保存】按钮，打开【另存为】对话框，选择要保存的路径和文件名，单击【保存】按钮即可下载。在HTML中可以使用<a>标签创建文件下载链接，代码如下：
<a href="images/Baofeng5-5.15.0730.exe"><img src="images/btn2.png" width="230" height="58" /></a>
图4.18 下载文件演示
4.3.6 实战演练：定义多链接
多链接包括双链接和多重链接。双链接就是在一个链接中包含两个指定路径，同理多重链接是在一个链接中包含多个指定路径。双链接常用来实现链接时两个框架页面内的内容都改变，多重链接并不常用，它使一个链接元素链接多个文档。下面示例演示如何设置双链接。
【操作步骤】
第1步，启动Dreamweaver CC，打开模板页面temp.html，另存为index.html。
第2步，在编辑窗口中选中要定义链接的文本，在【属性】面板的【链接】文本框中直接输入空链接符号“#”。
第3步，选择【窗口】｜【行为】命令，打开【行为】面板。然后单击【行为】面板中的“+”按钮，在弹出的下拉菜单中选择【打开浏览器窗口】选项，如图4.19所示。
图4.19 为链接定义行为
第4步，在打开对话框的【要显示的URL】文本框中输入一个有效的URL，如图4.20所示。注意，要设置增加的行为事件为onclick，如图4.21所示。
图4.20 设置打开的URL
图4.21 设置单击事件
第5步，重复上面步骤，只需把【要显示的URL】中的URL改为其他URL，即可设计在一个对象上定义多个链接。
第6步，保存页面，按F12键，在浏览器中预览，在链接文本上单击，即可同时打开两个网页，如图4.22所示。
图4.22 同时打开双页面效果