第4章 在网页中建立各种超级链接

网页设计与制作
在对话框中输入相应的锚点名称， 在对话框中输入相应的锚点名称，单击 “OK”，结束锚点的制作保存网页。 OK ，结束锚点的制作保存网页。
注意：锚点名字最好不要用中文， 注意：锚点名字最好不要用中文，可以用英文和数字
网页设计与制作
页面中出现锚点的标记（预览时不显示）。拖动 页面中出现锚点的标记（预览时不显示）。拖动 ）。 锚点标记，可以改变锚点的位置。 锚点标记，可以改变锚点的位置。 选中锚点，可以在属性面板上修改锚点的名字。 选中锚点，可以在属性面板上修改锚点的名字。
链接到其它文件
DW中被链接的对象不仅可以是网页文件，还 可以是其它文档 （.doc、.exe、.mp3、.mpeg、.rar）可以 提供软件下载等。特别是当链接的文件为zip 或rar时，单击链接就会下载文件（.mp3点击 就会自动打开播放器播放）
网页设计与制作
许多网站提供了文件下载的功能， 许多网站提供了文件下载的功能，实现文件 下载的功能很简单， 下载的功能很简单，就是建立一个到文件的超级 链接！（ ！（下载的文件和其它网页文件都放在本地 链接！（下载的文件和其它网页文件都放在本地 站点中。） 站点中。）
网页设计与制作
创建空链接的步骤如下： 创建空链接的步骤如下：
（1）选择需要创建链接的文本或图像 （2）在属性面板中的“Link”文本框中输入空链接符号 “#”， 即创建了一个空链接
创建空链接
网页设计与制作
四、创建脚本链接
利用脚本链接可以执行JavaScript代码或者 调用JavaScript函数。当来访者单击了某个指定 项目时，脚本链接也可以用于执行计算、表单确 认和其它任务。
网页设计与制作
练习： 完成含有超链接功能 的网页，要求： 点击“1.html”时 链接到新的一个网页， 点击“word文档”时链 接到一个word文档，点 击“mp3音乐”时链接 到mp3音乐，点击“图 片”时打开一个图片。
网页设计与制作
创建锚点链接
所谓锚点链接，常用于包含大量文本信息的 网页，通过在这样的网页上设置锚点，再通过锚 点链接，就可以实现页内跳转，直接浏览到相应 的网页内容，大大提高浏览速度。
之前我们的链接都是在当前窗口中打开的，下面 就介绍如何在新窗口中打开网页 在属性面板上的“target（目标）”项中进行设 置（只有在属性面板中设置了超级链接 “target(目标)”文本框才能被激活）。
设置链接目标
网页设计与制作
说明： 在“Target（目标）”文本框的下拉列表中 “_blank”表示在新的未命名的浏览器窗口中打 开链接文档。 “_parent”、 “_self”、 “_top”选项的含义与 框架有关。
网页设计与制作
B、链接锚点 、
a）选中要建立锚链接的文字 b）执行下列操作之一： i) 在属性面板中的link文本框中，输入“#”号 和锚点名字“mao1”。 ii) 在属性面板中拖拽瞄总准器到mao1锚点上 面，直到属性面板上的Link文本框中出现 “#mao1”为止。此时选中的文字会变成超级链 接的颜色，下面有一条下划线，表示锚点链接制 作完成。
网页设计与制作
（3）素材准备：创建四个实例性的简单网页，备 用。（这四个网页文件存放到html目录下面名字 为e1.htm到e4.htm） （4）创建超级链接
1、直接输入 、 文件地址 和文件名
2、拖向链接文件 、
3、直接打开指向的文件 、
4、选中文本后单击右键，快捷方式创建 、选中文本后单击右键， 5、菜单修改 创建链接 、 网页设计与制作
网页设计与制作
方法二：使用DW的配色方案 方法三：通过CSS选择器样式设置文本的链接颜 色（推荐大家使用这种方法。我们在后面的章节 中将会学到）
网页设计与制作
制作Image Map 制作
给图像添加超级链接一般是将单幅图像作为一个 整体进行链接，如果要对一幅图像的不同区域与不同 页面进行链接，那么就要用到Image Map(图像映射)。 图像映射是指在一张图像上实现多个局部区域指 向不同的网页链接。比如一张中国地图照片，单击各 个省会就会跳转到不同的网页。这张图就是映射图， 图像上可点击的区域就是热区（hotspot）。
网页设计与制作
网页设计与制作
通过锚点链接，可以使链接指向当前网页或 不同网页中的指定位置。通常利用锚点跳转到特 定的主题或页面的顶部，使访问者能够方便地浏 览感兴趣的内容，加快信息检索速度。
网页设计与制作
练习：完成以下含有锚点功能的网页。 练习：完成以下含有锚点功能的网页。
网页设计与制作
设置链接颜色
文本链接色彩有：未访问过链接的文本颜色、已 访问链接的文本颜色以及正在访问的链接的文本 颜色。 DW中默认颜色，未访问过的是蓝色，访问过的 是紫红色
网页设计与制作
创建E-mail链接 创建 链接
打开浏览器默认的E-mail处理软件，并且自 动设置收件人的邮件地址（由邮件链接中指定的 地址自动设置）无需发件人手工输入。 例如， 设计目标：在网页中为“与我联系”文本创建 E-mail链接，其E-mail地址为yiiz@
网页设计与制作
网页设计与制作
创建超级链接
一、创建内部超级链接 所谓内部超级链接：就是在同一个站点内的 不同页面之间建立一定的相互关系。 注：DW中，为图像和文本添加超级链接的方 法是一样的。
网页设计与制作
链接网页文件
（1）设计目标：链接样式，当鼠标移动到带有下 划的文本上时就会变成手形，同时在浏览器下方 的状态栏中显示链接的路径，单击时会跳转到链 接页面。 （2）页面分析：文件均为本地站点下，即添加的 均为内部超级链接。（在internet上常见的就是 这种链接）
网页设计与制作
注意： 注意：在“#”号和锚点名称之间不要留空格，否 则链接会出现错误。 说明：锚点的超级链接地址是“#”开头后面加 上一个锚点名称。若是其它网页文件链接到锚点 mao1，则在文件的Link文本框中输入 “e4.htm#mao1”。
网页设计与制作
小技巧
快速返回首页的方法： 将光标定位到文章尾部，输入“go top”选中， 在属性面板中‘Link’文本框中输入“#top”便可 快速返回页首。
网页设计与制作
此时单击确定即可。
未保存时以“file://”开头的绝对路径
注意： 注意：当文件保存后，则自动转换成为相对路径 （从本地站点根目录下开始） 网页设计与制作
说明： 说明： 给图像添加链接的方法与文字完全相同， 给图像添加链接的方法与文字完全相同， 请下去自己试试。 请下去自己试试。
Hale Waihona Puke 网页设计与制作第4章 在网页中建立各种超级链接 章
学 习 目 标
学习建立和使用超级链接使独立的网页彼此 联系起来。通过使用超级链接将网页构成一个 有机的整体。本章将通过实例向大学介绍多种 超级链接的创建方法。
网页设计与制作
本 章 重 点
超链接的基本知识 超链接的分类以及制作过程 锚点链接 锚点链接 图象热区 导航栏
网页设计与制作
二、创建外部超级链接
所谓外部超级链接：即链接了本地站点以外 的网页文件。我们平时常见的“友情链接”就是 外部超级链接，当单击“友情链接”中的某个链 接时，浏览器将打开相应网站。
网页设计与制作
1.设计目标： 在页面中单击“友情链接”将打开中华网。 2.页面分析：由于中华网的首页不属于本地站点，我们 使用外部超级链接来实现。 3.实现步骤：建立“友情链接”的文本，选中;在属性栏里 的“Link”文本框中输入完整的网址： 即可。记住保存网页 按F12预览。
注意：在创建外部链接时输入的网址必须是包含协议 类型（如http://）的绝对路径。如果没有包含协 议就会出现“该页无法显示”的提示信息。
网页设计与制作
三、创建空链接
所谓空链接，即是一个没有指向对象的链接。 利用空链接通常是为了激活网页中的广告或图像 等对象，以便给它附加一个行为（行为我们将在 后面的章节学习），当鼠标经过该链接时触发相 应行为事件，比如交换图像或者显示某个层。
网页设计与制作
例如，实现关闭本窗口的功能。 例如，实现关闭本窗口的功能。 建立“关闭窗口”文本，选中，在属性面板 里LINK文本框中输入javascript代码： “javascript:self.close()”或者 “javascript:window.close()”即可。
网页设计与制作
在新的浏览窗口中打开链接文件
预览时，单击“与我联系”就自动打开 outlook express，收件人的地址 yiiz@ 已自动出现在收件人的文本框中 了。
注意： 注意：“mailto”是连写的，分开写成“mail
to”则会出现“该页无法显示”的错误。（为图像 创建E-mail链接方法与文本方式一样，请自己试 试）
网页设计与制作
创建锚点链接
1. 设计目标：实现页内跳转 2. 素材准备：准备一个需要创建锚点的网页文件 3. 实现步骤： A、在页面中插入锚点 B、为锚点建立链接
网页设计与制作
A、插入锚点 、
命名锚点用于在网页中标记和命名链接的跳转位置， 以便于引用。在插入点的位置单击鼠标，执行下列操作 之一： i) 打开insert named anchor (插入命名锚点)对话框。 ii) 菜单栏插入（insert） invisible tags Named anchor命令（DW4.0） iii) 菜单栏插入（insert） Named anchor（命名锚记） 命令（高版本中） iv) 快捷键：ctrl+alt+A v) 插入浮动面板上：常用 命名锚记（图标） vi) 或者从对象面板上把命名锚记拖到页面上想要插入的位 置。
网页设计与制作
左图为F12预览的效果
在这里输入脚本链接
网页设计与制作
注意： 注意：