网页制作超级链接

• 预览，看一下效果。
• 至此，我们已经完成了从目录到文章的锚 点链接。可以从目录随心所欲地跳转到长 文本的任意一段文章了。但是当我们看完 某一段文章之后，还不能返回到目录，怎 么办？
• 思考！！
设置从文章返回目录的链接
• 在每篇文章的后面增加几个文字“返回顶 部”； • 选中“返回顶部”这几个字； • 在 “链接”文本框中输入“#top‖；
使用“浏览a_05_01.htm中的标题文 字“星火其人”； • （2）点击属性面板上的“浏览文件”图标， 打开“选择文件”对话框中，选择页面文 件“autobiography.htm‖； • （3）点击“确认”按钮完成操作。
创建外部超级链接
学校公共选修课：《网页设计与制作》讲义
超级链接
北师大珠海分校信息技术学院 陈星火
学习目标
• 了解超级链接的概念 • 了解超级链接的类型 文字 • 掌握站点内部超级链接的方法 图片
按钮
页 面
• • • •
掌握电子邮件链接 掌握外部超级链接的方法 掌握锚点链接 掌握热点区域链接
文字 图片 按钮
页 面
什么是超级链接？
• 超级链接是指站点内不同网页之间、站点 与Web之间的链接关系，它可以使站点内 的网页成为一个有机的整体，还可以在不 同的站点之间建立联系。 • 下面以文本为链接载体，介绍在 Dreamweaver MX中如何创建各种类型的 超级链接。
创建超级链接的方法
• • • • • • 在站点管理器中编辑超级链接 创建锚点链接 创建E-MAIL链接 创建导航条 创建跳转菜单 创建映射图链接
使用属性面板创建电子邮件链接
• （1）把光标置于文档窗口的文字“Email：”右边； • （2）输入文字，并将其选中； • （3）在属性面板中的“链接”文本框中输 入“mailto: ABC@‖。
• （4）单击“确定”按钮，完成操作。
锚点链接
1. 什么是锚点？ 2. 为什么要设置锚点？ 3. 怎样实现锚点链接？
超链接的划分
• 按源端点的链接划分： • 超文本链接： • 源锚文本下方有下划线 • 非超文本链接： • 用除文本之外的其他对象 构建的链接(图像、表格、 列表、表单、多媒体等) • 按目标端点的链接划分： • • • • 外部链接 内部链接 电子邮件链接 局部链接
超级链接举例
• • • • • • 超文本链接 非超文本链接 外部链接 内部链接 电子邮件链接 局部链接
―统一资源定位符”----URL
• URL是英文Uniform Resource Location的缩写。 下面是几种常见的URL协议：
• 超文本传输协议Http://
• 文件传输协议Ftp:// • MailtoMailto:// • TelnetTelnet://
文档的绝对路径
• 即被链接文档的完整URL，包括所使用的 传输协议，对于网页通常是“http://‖。 • 例如， • /news/ default.asp • 就是一个绝对路径。
制作目标
• 制作一个预览效果图如图所示的网页页面。
创建内部超级链接
• 属性面板上的“链接定位”图标或者“浏览文件” 图标可以用来创建文件的内部超级链接。
使用“链接定位”图标创建内部超级链 接
• （1）选择页面中的标题文字“星火其人”； • （2）在编辑窗口的列表菜单中打开“站点” 管理器； • （3）拖动“链接定位”图标到站点管理器 中的页面文件“autobiography.htm‖上方， 文件的地址就会出现在属性面板的“链接” 文本框中； • （4）松开鼠标左键，完成内部链接的创建。
• 在创建外部链接时，必须使用绝对路径。
文档的相对路径
• 以当前文档所在位置为起点到被链接文档 经由的路径。 • 例如， “default.asp‖就是一个文档相对 路径。 • 同一网站内创建内部链接时，使用相对路 径比较方便。与同文件夹内的文件链接时 只写文件名即可，如果要与上一级文件夹 里的文件链接，在文件名前加上“../‖即可。
• 在同一网页内有长文档。比如，人物传记、 小说连载等。
锚点链接分两步来实现
• 第一步: 将网页的某一处设置为锚点， 并为其命名；
• 第二步: 在源端点处建立该锚点的超级 链接。
设置锚点的操作步骤如下
• 为灭绝师太设置锚点
• （1）把光标置于文章“最冷酷的尼姑—— 灭绝师太”的前面；
• （2）在菜单栏中选择“插入”→“命名锚 记”命令，或者在对象面板的“插入”栏 中选择“常用”选项卡，单击“命名锚记” 按钮；
根相对路径
• 是指从站点根文件夹到被链接文档经由的 路径，以前斜杠开头，例如， “/news/default.asp‖就是站点根文件夹下 的“news‖子文件夹中的一个页面文件 “default.asp‖的根相对路径。当我们移动 一个包含根相对链接的文档时，不需要对 原有的链接进行修改。
创建超级链接
给热点区域创建链接
• 在属性面板的“链接”文本框中输入被链 接的页面路径“../travel/guangdong.htm‖， 该页面就是单击热点时所要链接的去向。
创建导航条
• 在网页上选择插入导航条的位置 • 在插入菜单里选择插入交互式图像——》 导航条命令 • 屏幕上出现对话框 • 按屏幕提示操作（事先准备好作为按钮的 四张图片）
制作热点区域
• 在页面pra_05_03.htm中选择图像文件 “map.gif‖，单击图像属性面板右下角的 扩展箭头，单击“矩形热点工具”按钮， 在图像上画出矩形热点区域，
命名和添加链接
• 给图像热点区域命名 • 在页面pra_05_03.htm的中国地图文件上 上点击广东省的热点区域，此时图像属性 面板将变为热点属性面板，在属性面板的 “地图”文本框中输入图像名称 “Guangdong‖。由于在同一文档中有多 个图像热点区域，所以要给它们分别命名。
• 所谓链接（link）就是一个web资源到另一 个web资源的连接，建立链接的目的是为 了获取web的其他资源。
• 超级链接由两部分组成：链接载体（源端 点）和链接目标（目标端点）。
链接的基本概念
• 许多页面元素都可以作为链接载体，例如： 文本、图像、图像热区、轮替图像、动 画……
• 而链接目标可以是任意的网络资源，例如： 页面、图像、声音、程序、其他网站、 Email甚至是页面中的某个位置––––锚点等 等。
创建锚点链接的操作步骤如下
• （1）在目录部分选中标题“最冷酷的尼 姑——灭绝师太”；
• （2）在属性面板的“链接”文本框中输入 符号“#‖和锚点名“nigu01‖，
（3）重复上述操作步骤，实现其余的超级链 接： • • • • 最让人尊敬的尼姑——三定、 最让人怜爱的尼姑——仪琳、 最不能原谅的尼姑——圆性、 最前后不一的尼姑——九难；
• （3）系统自动打开“命名锚记”对话框， 在“锚点名称”文本框中输入“nigu01‖，
• （4）重复上述操作步骤，设置其余的锚点
• • • • 最让人尊敬的尼姑——三定 “nigu02‖、 最让人怜爱的尼姑——仪琳 “nigu03‖、 最不能原谅的尼姑——圆性 “nigu04‖、 最前后不一的尼姑——九难 “nigu05‖；
锚点及其作用
• 锚点是在网页文档中设置的一个标记，便 于以后引用。 • 通过创建锚点，可以使链接指向当前文档 中指定的位置。
• 使客户可以方便快捷地浏览长文本网页。
锚点链接应用的案例——尼姑篇
案例1：没有添加锚点链接的文章 案例2：添加了部分锚点链接的文章 案例3：添加了全部锚点链接的文章
使用锚点链接的前提条件
创建E-mail链接
• 在网页上创建电子邮件链接，方便用户意 见反馈。当浏览者单击电子邮件链接时， 可以及时打开浏览器默认的电子邮件程序 处理程序，收件人的邮件地址被电子邮件 链接中指定的地址自动更新，无需浏览者 手工输入。为页面添加E-mail地址链接， 可以有两种方法：
插入邮件链接命令创建电子邮件链接
• 链接外部网站的关键，是在链接域正确输 入外部网站的网址。 • 例题：为页面中的文字“信息技术与软件 工程学院”添加外部超级链接，地址为 “‖，并设置链接目 标为新窗口打开，
操作步骤如下：
• （1）选中页面中的文字“信息技术与软件 工程学院”； • （2）在属性面板的“链接”文本框中输入 地址“‖ ；
• （3）在“目标”域选择链接目标的载入位 置为“_blank‖ 。
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项： • _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该 链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中 打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除 所有框架。
超级链接的应用
• 超级链接可以为浏览者畅游网络提供方便。是 网页制作中使用得比较多的一种技术。 • 超级链接是用预先准备好的文本、图片、按钮 等对象与其他对象建立一种链接关系。也就是 在源端点和目标端点之间建立起一种链接。 • 源端点是超级链接的起始端点，也称为源锚， 目标端点是联结的对象，也称为目标锚。
创建跳转菜单
• 跳转菜单是一个下拉式菜单，其中的每一 个选项都是一个超级链接。 • 设计者可以用跳转菜单创建本站点与远程 站点的各种链接，实现网页的跳转链接。
课后作业要求
• 熟练掌握各种超级链接的方法和技巧，并 在期中作业中有所体现。 • 1 内部链接：网站内部的所有链接（文字、 图片、按钮） • 2 外部链接：著名网站的友情链接 • 3 自己的电子邮箱链接 • 4 锚点链接（长文本的快速跳转） • 5 热点区域链接（图片多区域链接） • 6 没有无效链接