第11章添加超链接和导航工具条

1、Dreamweaver CS3中文版应用教程第11章 添加超链接和导航工具条重点内容： 设置内部超链接 设置外部超链接 设置E-mail超链接 创建与链接锚记 创建导航条Dreamweaver CS3中文版应用教程一、 什么是超链接1.超链接的概念 超链接是指从一个网页指向一个目标对象的连接关系，该目标对象可以是网页，也可以是当前网页上的其他位置，还可以是图片、电子邮件地址、文件，甚至可以是应用程序。网页中常见的超链接一般分为3类：内部链接、外部链接与锚记。内部链接的目标是同一网站内的网页，外部链接的目标是其他网站的网页，锚记则链接到当前网页中特定的位置。Dreamweaver CS3中文版应

2、用教程一、 什么是超链接2.链接路径 绝对路径:是指包括服务器协议，并且提供链接文档的完整地址的路径。 文档相对路径：文档相对路径是针对当前打开的网页而言的，即省略掉当前文档和所链接文档相同的绝对路径部分，只提供不同部分。 站点根目录相对路径：站点根目录相对路径是针对当前站点而言的，它描述的是从站点的根文件夹到当前网 页或对象的路径。Dreamweaver CS3中文版应用教程二、 内部超链接1.为文字添加超链接 直接在属性检查器上的“链接”文本框中输入链接目标的路径。 拖动属性检查器上的“指向文件”图标至链接目标。 在属性检查器上单击“链接”文本框右侧的文件夹图标，从打开的对话框中选择链接目

3、标对象。，从打开的对话框中选择链接目标对象。 Dreamweaver CS3中文版应用教程二、 内部超链接2.设置文字超链接的属性 单击属性检查器中的“页面属性”按钮，打开“页面属性”对话框。选择“分类”列表框中的“链接”选项，切换至“链接”选项卡，在此可设置链接文本的颜色、不同状态下字体颜色及下画线样式。Dreamweaver CS3中文版应用教程二、 内部超链接3.为图片添加超链接 为图片添加超链接可分为两类：一是为整张图片添加超链接，一是为图片中的任意部分添加超链接。选择要设置链接的图片，应用属性检查器热点工具在图片上拖动热点区域，并根据需要设置“链接”等选项即可。Dreamweaver

4、 CS3中文版应用教程三、 外部超链接 外部超链接是指将站点中的文字或图片等对象链接至Internet中目标的超链接。Internet上的目标非常多，其中最常用到的外部超链接是链接到Internet网页。如下图的“友情链接”。Dreamweaver CS3中文版应用教程四、 为E-mail和下载文件添加超链接1.添加E-mail超链接 在网页中确定插入E-mail超链接位置，然后单击“常用”工具栏中的“电子邮件链接”按钮，打开“电子邮件链接”对话框。在“文本”文本框中输入所需文本，在“E-mail”文本框中输入收件人地址，然后单击“确定”按钮。Dreamweaver CS3中文版应用教程四、

5、为E-mail和下载文件添加超链接2.为下载文件添加超链接 选择网页中需建立超链接的文字，然后将属性检查器中的“链接”文本框右侧的“指向文件”图标拖动到“文件”面板中要下载的目标文件上。Dreamweaver CS3中文版应用教程五、 使用锚记1.创建锚记 确定要添加锚记的位置，单击“常用”工具栏中的“命名锚记”按钮，或选择“插入记录”|“命名锚记”命令，打开“命名锚记”对话框。在“锚记名称”文本框中输入名称，单击“确定”按钮。Dreamweaver CS3中文版应用教程五、 使用锚记2.链接锚记 选择要链接到锚记的文字或图片，拖动属性检查器中的“指向文件”图至已创建的锚记。 在属性检查器中的

6、“链接”文本框中输入符号“#锚记名称”，如“#xiangjiao”。值得注意的是其中的“#”为半角符号，且“#”与“锚记名称”之间不存在空格。 选择要创建链接锚记的文字，按住Shift键将鼠标指 针指向锚记，在属性检查器上的“链接”文本框中自动显示“#锚记名称”。Dreamweaver CS3中文版应用教程六、 使用导航工具条导航条的4种状态 一般：未单击时显示的图像。 滑过：指鼠标指针移至“一般”图像时显示的图像。 按下：被单击后所显示的图像。 按下时鼠标经过：单击后鼠标指针移出图像时显示的图像，可作为提示提醒用户该项目已经被单击。Dreamweaver CS3中文版应用教程六、 使用导航工具条1.插入导航条 要在文件中插入导航条，前提条件为站点中必须有一组可用的图像，然后单击“常用”工具栏中的“图像”按钮右侧的三角按钮，从弹出的菜单中选择“导航条”命令，或选择”插入记录”|“图像对象”|“导航条”命令，打开“插入导航条”对话框，进行所需设置后单击“确定”按钮。Dreamweaver