1、第9章 点哪去哪的超链接,9.1 任务一：创建几种基本的超链接 9.2 任务二：设置锚链接和空链接 9.3 任务三：设置导航条 9.4 小结,9.1 任务一：创建几种基本的 超链接,9.1.1 创建文本和图像超链接 1为文字创建文本的链接 （1）打开文档的设计窗口，在其中选择你想要链接的文本，如图9-3所示，我们选择文本“CPU简介”。 （2）为文字添加超链接，实现的效果是单击页面上做好链接的文字，就可以跳转到其他的网页文件。 （3）在【链接】文本框中键入文档的路径和文件名。,下一页,9.1 任务一：创建几种基本的 超链接,绝对路径 绝对路径就是被链接文档的完整URL，包括所使用的传输协议（对
2、于网页通常是http：/）。 文档相对路径（也称相对根目录） 以当前文档所在位置为起点到被连接文档经由的路径。这是用于本地链接的最适宜的路径。 根相对路径 根相对路径是指从站点根文件夹到被链接文档经由的路径。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,（4）做完上面两步还没有完成链接，还要选择被链接文档的打开位置，这要在文字属性查看器的【目标】菜单中选择文档打开的位置，如图9-6所示。 在默认情况下，被链接文档打开在当前窗口或框架中。如果要使你所链接的文档出现在当前窗口或框架以外的其他位置 (例如另外一个浏览器)，可从属性检查器的【目标】下拉菜单中选择一个选项。,下一页,上一页,
3、9.1 任务一：创建几种基本的 超链接,2为图像设置超链接 （1）打开文档的设计窗口，在其中单击选择你要链接的图像。我们选择关于显示器里的一张显示器图像。 （2）这次不再在【链接】文本框中输入文档的路径和文件名，而是在图像属性查看器中单击【链接】文本框右侧的文件夹图标，单击后会打开如图9-10所示的选择对话框，这是为链接选择文件的对话框。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,（3）同样，也要在属性查看器的【目标】下拉菜单中选择被链接文档打开的位置，我们将它设为“_blank”。 （4）在图像的属性面板上还有【边框】一项，它的默认值为0。 3创建图形热区链接 （1）首先插入预
4、先准备好的一张有许多硬件的图像，如图9-12所示。 （2）单击图像，展开图像属性面板。在属性面板的左下角有一些绘图工具。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,（3）在画面上绘制热区以后，属性面板自动会改换为热点面板，如图9-13所示。其中的【链接】域填入相应的链接。 （4）依次给图像上的每个硬件创建一个热区链接。保存网页后，按F12键预览看一看效果。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,9.1.2 创建E-mail链接 方法一：使用插入邮件链接命令创建电子邮件链接 （1）把光标置于文档窗口你希望显示电子邮件链接的地方，或者选定希望显示为电子邮件链接的文本
5、和图像，如图9-15所示，在个人主页里加入了邮件链接的图像和文字。 （2）选择【插入】菜单项中的【电子邮件链接】选项，如图9-16所示，或者单击常用下拉菜单中的电子邮件链接按钮。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,方法二：使用属性面板创建电子邮件链接 （1）在文档窗口中选择文本或图像作为链接的对象。 （2）在属性面板的【链接】框中输入mailto：后加上你的电子邮件地址，例如你的电子邮件地址是，就输入mailto：。,下一页,上一页,9.1 任务一：创建几种基本的 超链接,9.1.3 设置链接的颜色 （1）打开页面属性框，如图9-19所示，我们曾在里面设置过标题、背景和字
6、体颜色。 （2）在页面属性框中的链接选项对话框中，以设定链接的颜色、变换图像链接的颜色、已经访问链接颜色以及活动链接的颜色。 （3）按F12键进入浏览器中，可以看到超链接字显示为红色，将鼠标放在超链接字体上时显示为绿色，单击一下，再回到当前页面，可以看到当前超链接变为黄色了。,返 回,上一页,9.2 任务二：设置锚链接和空链接,9.2.1 为网页加入锚记链接 （1）把光标放在要锚记的位置，我们选择文字“LCD液晶显示器”的后面。 （2）单击【确定】按钮，这时在光标位置会出现一个锚记图标，如图9-22所示，当然，有时候它也会看不见的。 （3）在文档窗口的设计视图中，选择需要创建的文本或图像。 （
7、4）在所选图像属性查看器上的【链接】框中输入“#”，再输入锚记的名称，例如上面创建的“#haha”，如图9-24所示。,下一页,9.2 任务二：设置锚链接和空链接,9.2.2 为网页加入空链接脚本链接 1创建空链接 2创建脚本链接 脚本链接是执行JavaScript代码或调用JavaScript函数。它非常有用，能够在不离开当前网页的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务。,下一页,上一页,9.2 任务二：设置锚链接和空链接,9.2.3 管理链接 下面来练习在Dreamweaver中如何打开链接管理。其步骤如下。 （1）选择
8、【编辑】【首选参数】命令，如图9-31所示，则会弹出【首选参数】对话框。 （2）从左侧的分类列表中选择【常规】，出现【常规】首选参数选项，如图9-32所示。 （3）在【文档选项】部分，从【移动文件时更新链接】下拉菜单中选择【总是】或者【提示】。,返 回,上一页,9.3 任务三：设置导航条,9.3.1 插入导航条 下面就动手在市场行情页面的报价单中做一个导航条，其步骤如下。 （1）打开硬件报价的整机页面。在文档的设计窗口中，将插入点放置在要显示导航条的位置，如图9- 35所示。 （2）选择【插入】【图像对象】【导航条】命令，则会弹出一个【插入导航条】对话框，如图9-36所示。 （3）在【项目名称
9、】文本框中输入按钮的名称，我们输入“整机”。,下一页,9.3 任务三：设置导航条,（4）单击【状态图像】文本框旁边的【浏览】按钮，然后浏览到站点images文件夹中的4321.JPG文件。 （5）单击【鼠标经过图像】文本框旁边的【浏览】按钮，然后选择一个到站点images文件夹中的文件。 （6）在【替换文本】文本框中输入“整机”。 （7）在【按下时，前往的URL】文本框中输入zhengji.html。,下一页,上一页,9.3 任务三：设置导航条,（8）确保选中了【预先载入图像】选项，这样，当在浏览器中打开该页时，就载入鼠标经过图像，保证了当访问者将鼠标移到原始图像时图像间的快速转换。 （9）至
10、此，我们才做完了导航条里的一个按钮，如图9-39所示。 （10）在【插入导航条】对话框底部的【插入】下拉菜单中，选择【水平】选项。,下一页,上一页,9.3 任务三：设置导航条,9.3.2 编辑导航条 （1）选择【修改】【导航条】命令（确定页面中有导航条才可以修改），如图9-43所示 （2）在【导航条元件】选择框中选择元件的项目名称后，可以对该元件的【项目名称】、【状态图像】、【鼠标经过图像】、【按下图像】、【按下时鼠标经过图像】等进行修改。,下一页,上一页,9.3 任务三：设置导航条,（3）若要增加一个导航条元件，则单击导航条元件选择框左上方的按钮，则会出现一个名为unnamed1的新导航条元
11、件。 （4）若要调整导航条元件在网页中的先后位置，则先选择要调整的导航条元件，然后利用导航条元件选择框右上方的按钮来进行调整。 （5）修改和编辑完后，单击【确定】按钮完成编辑。,下一页,上一页,9.3 任务三：设置导航条,9.3.3 复制和粘贴导航条 （1）在文档的设计窗口中，打开含有导航条的index.html文件，选定导航条的状态图像，如图9-45所示。 （2）在标签选择器中，选择标签。包含横幅徽标和导航条鼠标经过图像的div标签将被选中。 （3）选择【编辑】【复制】命令（右键功能也可以使用）。 （4）切换到news.html文件，打开CPU. html文件。,返 回,上一页,9.3 任务
12、三：设置导航条,（5）把鼠标放到想要插入导航条的地方，然后选择【编辑】【粘贴】命令，则导航条就被插入到新的网页里了。如图9-46所示，该导航条鼠标经过图像，以及支持鼠标经过图像行为所需的代码，将被粘贴到该文件中。 （6）保存news.html页面。,下一页,上一页,9.4 小结,通过本章大量范例的介绍，相信大家有兴趣和能力将本地站点中创建的各种内容的网页轻松地链接到站点首页上，从而实现首页和各个内容页面之间的跳转。当然，也可以在一个页面中创建锚链接，并学会管理和更新链接。另外，大家也学会了在首页中插入导航条以及导航条的编辑，还学会了导航条的复制和粘贴。为了检查对这些内容的熟悉和掌握程度如何，可
13、以进行以下练习。,返 回,图9-3 选择链接的文本,返 回,图9-6 选择目标,返 回,图9-10 选择链接的文件,返 回,图9-12 图像属性面板,返 回,图9-13 拖出链接范围,返 回,图9-15 自我介绍页面,返 回,图9-16 自我介绍页面,返 回,图9-19 链接颜色编辑框,返 回,图9-22 光标位置显示锚记图标,返 回,图9-24 创建锚记链接,返 回,图9-31 选择【首选参数】命令,返 回,图9-32 【首选参数】对话框,返 回,选择【总是】或者【提示】,图9-35 主页导航条插入点,返 回,导航条插入点,图9-36 【插入导航条】对话框,返 回,图9-39 导航条基本设置,返 回,图9-43 选择【导航条】命令,返 回,图9-45 选定导航条的状态图像,返 回,图9-46 复制和粘贴导航条,返 回,被粘贴的导航条,
