2014超链接设置.docVIP

教 案 《网页设计与制作》教案 序号：5 本次课程备课笔记 网 页 链 接 超链接是WWW的魅力所在。为了把Internet上众多分散的网站和网页联系起来，构成一个有机的整体，就要在网页上加入链接。通过简单地点击网页上的链接，用户就可以在信息海洋中尽情遨游。 超链接的分类，如图2.26所示。 下面将通过一些小例子讲述锚记链接、站点链接、图形热点链接等内容，同时结合【文件】面板，介绍一些创建链接的高级技巧。 图2.26 超链接的种类 一、相对路径和绝对路径 先看最传统的链接创建方法。如果要给文字或图像创建链接，应先将文字或图像选中，直接在如图2.27所示的【链接】下拉列表框中输入要链接的网页文件路径和名字即可。 图2.27 链接下拉列表 单击【属性】面板中链接框旁的【浏览文件】图标，打开【选择文件】对话框，从中选择要链接的网页也可创建链接。【选择文件】对话框下面有【相对于】下拉列表框，里面有【文档】和【站点根目录】两项，如图2.28所示。 【文档】表示以文档相对路径方式链接；【站点根目录】表示以根绝对路径方式链接。相对路径与绝对路径是非常重要的概念，一定要掌握它们之间的区别。 1. 绝对路径 绝对路径是包括服务器协议(在本例中为HTTP协议)的完全路径，比如“网虫乐园——软件大观园”，绝对路径为“/web/softroom”，如果所要链接当前站点以外的文档，就必须使用绝对路径。 图2.28 【选择文件】对话框 2. 相对路径 相对路径又可分为与根目录相对的路径和与文档相对的路径两种。 在本地磁盘上编辑网页时，需要选定一个文件夹来定义本地站点，模拟服务器上的根文件夹，系统就根据这个文件夹来确定所有链接的本地文件位置，而根相对路径中的根就是指这个文件夹。 提示：根相对路径(也称相对根目录)的路径以“/”开头，路径是从当前站点的根目录开始计算。例如D盘myweb目录就是名为“myweb”的站点，这时“/index.htm”路径就表示文件位置为D:\myweb\index.htm。根相对路径适用于链接内容需频繁更换的文件，这样即使站点中的文件被移动了，其链接仍可以生效。 如果目录结构过深，在引用根目录下的文件时，用根相对路径会更好些。例如某一个网页文件中引用根目录下img目录中的一个图，在当前网页中用文档相对路径表示为：“../../../../../img/a.gif ”，而用根相对路径只要表示为“/img/a.gif ”即可，其关系如图2.29所示。 图2.29 相对路径与绝对路径 注意：在预览文件时，用根相对路径链接的内容在本地浏览器中不会显示出来。这是因为浏览器不承认站点的根文件夹为服务器。 文档相对路径是指包含当前文档的文件夹，也就是以当前网页所在文件夹为基础开始计算路径。例如，当前网页所在位置为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/”意思是当前文件夹下名为img的文件夹。 文档相对路径是最简单的路径，一般多用于文档保存在同一文件夹中或者拥有相同的上层目录的情况。 二、制作链接 1．创建文字链接 以文字作为媒体的链接称为文字链接，是网页中最常用的链接方式，具有制作简单和维护简便的特点。 Dreamweaver中，在文档窗口选择文本或图片后，可以用下列方法之一建立超链接。 用链接属性面板上【链接文本框】的按钮拖动到所要链接的对象。 在【链接文本框】中单击文件夹按钮查找相关的链接等。 使用【修改】|【创建链接】命令来制作到某个文件的链接。 选择插入栏中的【常用】选项卡，单击按钮，通过弹出的【超级链接】对话框进行设置。 2．使用指向文件图标创建链接 在【属性】面板的链接框旁有一个【指向文件】图标，称为文件定位图标，利用这个图标可以迅速创建超链接。 使用【指向文件】图标创建链接的具体方法如下： (1) 在文件窗口内选中要创建超链接的文字，例如选中图中的“网页编程”。 (2) 用鼠标拖动【属性】面板上的【指向文件】图标，鼠标指针从图标处引出一条线。 图2.30 创建链接 (3) 拖动文件定位图标到【文件】面板上的网页文件上时，文件外显示一个黑框，表示可以创建链接。 (4) 将鼠标指针移到所对应的文件上，释放鼠标，链接就完成了，如图2.30所示。 技巧：制作链接也不一定非得用【指向文件】图标，Shift键也可以帮助用户直接创建链接。只要选中编辑窗口中的文字或图形，然