Download presentation
Presentation is loading. Please wait.
1
网页设计与制作 Dreamweaver CS6 标准教程
第5章 超链接 网页设计与制作 Dreamweaver CS6 标准教程
2
本章学习的主要内容： 1. 超链接的概念与路径知识 2. 文本超链接 3. 图像超链接 4. 热点链接 5. 锚点超链接 6. 链接管理
3
5.1 超链接的概念与路径知识 超级链接由两个端点和一个方向构成，通常将 起始端点（即鼠标单击的位置）称为源端点 （或源锚），将跳转到的目标位置称为目标端 点（或目标锚）。 源端点可以是文本、按钮、图像等对象，目标 端点可以是同一页面的不同位置，也可以是一 个其他页面、一幅图像、一个文件或一段程序 等。
4
5.1 超链接的概念与路径知识 5.1.1 按超链接端点分类 5.1.2 按超链接路径分类
5
5.1.1按超链接端点分类 按照源端点来划分，超级链接可以分为文本超链 接和非文本超链接两种。文本超链接是把文本作 为源端点，而非文本超链接是用除文本外的其他 对象作为源端点。 按照目标端点来划分，超级链接可分为外部链接、 内部链接和电子邮件链接等
6
5.1.2按超链接路径分类 超级链接根据链接路径的不同分为相对链接和 绝对链接。
相对链接无需给出目标端点完整的URL地址， 只要给出相对于源端点的位置即可，如 bbs/index.html。 绝对链接给出链接目标端点完整的URL地址， 包括使用的协议（网页中常用 如
7
5.2 文本超链接 文本超链接是以文本为对象构建的超级链接，链 接的源端点是文本。文本超链接是网页中最常使 用的一种链接方式。
8
5.2 文本超链接 5.2.1 课堂案例—婚礼公司 5.2.2 创建文本链接 5.2.3 页面文本链接的状态 5.2.4 下载文件链接
5.2.5 电子邮件链接 5.2.6 空链接
9
5.2.1课堂案例—婚礼公司 案例学习目标：学习创建内部链接、外部链接、 下载文件链接和电子邮件链接等多种文本超链接。
案例知识要点：使用【属性】面板、【插入】菜 单和直接拖曳等方法创建文本超链接。 素材所在位置：光盘/案例素材/ch05/课堂案例 -婚礼网站。 案例效果如图5-1所示。
11
5.2.2 创建文本链接 1．直接输入要链接文件的路径和文件名 2．使用【浏览文件】按钮 3．使用【指向文件】图标 4．设定链接【目标】
12
5.2.3 页面文本链接的状态 可通过【页面属性】设置文本链接状态，操作步 骤如下。
选择菜单【修改】|【页面属性】，打开【页面属 性】对话框，在【分类】列表中选择【链接 （CSS）】。 单击【链接颜色】右侧的图标 ，打开调色板，选 择一种颜色来设置链接文字的颜色。 采用同样的方式，分别设置【已访问链接】、 【变换图像链接】和【活动链接】的颜色。 单击【下划线样式】下拉列表，设置链接文字是 否带有下划线。
13
5.2.4 下载文件链接 下载文件链接是通过单击链接来实现文件下载， 建立方法和文字链接建立方法类似，所不同的 是所链接的文件不是网页文件而是其他文件， 如.rar压缩文件等，单击链接后并不是打开网页， 而是实现下载。 具体创建步骤如下： 在【文档】窗口中选择需要添加下载文件链接 的对象。 在【属性】面板的【链接】下拉文本框中设置 链接的文件。
14
5.2.5 电子邮件链接 电子邮件链接是当单击链接时打开邮件收发 软件，并自动将设定好的邮箱地址作为收信 人，方便浏览者发送邮件。
建立电子邮件链接有以下两种方法。 1．使用【电子邮件链接】对话框 2．使用【属性】面板
15
5.2.6 空链接 空链接是一种特殊的链接，它实际上并没有指定 具体的链接目标。创建空链接的步骤如下：
在【文档】窗口中选择需要设置链接的文本、 图像或其他对象； 在【属性】面板的【链接】文本框中输入“#” 。
16
5.3 图像超链接 网页设计中经常需要实现单击图像打开链接 的效果，这就需要给图像建立超链接。图像 超链接可以分为普通图像链接和鼠标经过图 像超链接。
17
5.3 图像超链接 5.3.1课堂案例-手机商城 5.3.2创建图像超链接 5.3.3鼠标经过图像链接
18
5.3.1课堂案例-手机商城 案例学习目标：学习建立图像超链接和鼠标经 过图像超链接。
案例知识要点：使用【属性】面板为图像设置 超链接，使用菜单【插入】|【图像对象】| 【鼠标经过图像】建立鼠标经过图像超链接。 素材所在位置：光盘/案例素材/ch05/课堂案 例-手机商城。 案例效果如图5-23所示。
20
5.3.2创建图像超链接 建立图像超链接的操作步骤如下。 在【文档】窗口中选择需要建立超链接的图 像。
在【属性】面板中，单击【链接】项文本框 后的【浏览文件】按钮 ，为图像添加链接。 在【替换】项中可以输入替换文字。设置替 换文字后，当图像不能正常显示时，会在图像 的位置显示替换文字；浏览时把鼠标悬停在图 像上也会显示替换文字。
21
5.3.3鼠标经过图像链接 鼠标经过图像是指当鼠标指针经过一幅图像时， 图像的显示会变为另一幅图像。
鼠标经过图像实际上是由两张图像组成，一张 称为原始图像，另一张称为鼠标经过图像。 一般来说，原始图像和鼠标经过图像尺寸必须 相同，如果图像的大小不同，Dreamweaver 会自动调整鼠标经过图像的大小，使之与原始 图像匹配。
22
5.3.3鼠标经过图像链接 建立鼠标经过图像的操作步骤如下。 在【文档】窗口中将光标置于需要添加鼠标经过 图像的位置。
选择菜单【插入】|【图像】|【鼠标经过图像】， 在【插入鼠标经过图像】对话框中分别单击【原始 图像】和【鼠标经过图像】文本框右侧的【浏览】 按钮设置图像路径。 在【替换文本】文本框中设置替换文字。 在【按下时，前往的URL】文本框中设置跳转的 网页文件路径，当浏览者单击图像时打开此网页。 单击【确定】按钮，按<F12>键预览网页效果。
23
5.4热点链接 在一个图像中创建的不同几何图形区域 称为热点或热区，以这些区域为超链接 的源端点，建立的不同超链接被称为热 点链接。
24
5.4热点链接 5.4.1课堂案例-儿童课堂 5.4.2 创建热点链接
25
5.4.1课堂案例-儿童课堂 案例学习目标：学习创建热点链接。 案例知识要点：使用【属性】面板创建热点链 接。
素材所在位置：光盘/案例素材/ch05/课堂案 例-儿童课堂。 案例效果如图5-32所示。
27
5.4.2 创建热点链接 创建热点链接的操作步骤如下。 在【文档】窗口中单击选择一张图像，在【属性】 面板的【地图】选项中选择热点工具。
鼠标放在图像上，指针变成“+”，在图像上拖曳 出相应形状的蓝色区域。可以通过【指针热点工具】 选择不同的热区，并通过热区边框的控制点调整热 区大小，还可以通过复制得到多个相同的热区，建 立多个矩形热区。 用【指针热点工具】 选取某个热区，出现【属性】 面板，在【链接】文本框中输入链接地址，在【替 换】文本框中输入替换文字，这样就在一个图像上 创建了几个热点链接。
28
5.5 锚点链接 锚点链接是指目标端点位于网页中某个指定 位置的一种超链接。创建锚点链接可分两步 完成，首先在网页的某个指定位置创建超链 接的目标端点（即锚点），并为其命名；然 后在超链接的源端点处建立指向该锚点的超 链接。
29
5.5 锚点链接 5.5.1练习案例-数码商城 5.5.2创建锚点链接
30
5.5.1 练习案例-数码商城 案例学习目标：学习建立锚点链接。 案例知识要点：使用菜单【插入】|【命名锚 记】和【属性】面板创建锚点链接。
素材所在位置：光盘/案例素材/ch05/课堂 案例-数码商城。 案例效果如图5-43所示。
32
5.5.2 创建锚点链接 创建锚点链接的步骤如下。 1．创建锚点 2．链接到锚点
33
5.6 链接管理 网站链接设置好后，Dreamweaver还提供 了自动更新链接和链接检查功能，以便对网 站内的链接进行管理。
34
5.6 链接管理 5.6.1练习案例-百适易得商城 5.6.2自动更新链接 5.6.3链接检查 5.6.4修复链接
35
5.6.1练习案例-百适易得商城 案例学习目标：学习网站的链接管理。
案例知识要点：使用菜单【窗口】|【结果】| 【链接检查器】，打开【链接检查器】面板管 理网站链接。 素材所在位置：光盘/案例素材/ch05/课堂案 例-百事易得商城。 案例效果如图5-58所示。
37
5.6.2自动更新链接 新建一个站点后，有时需要修改文件的名称或 调整文件的位置。文件名或位置变了，其相关 的超链接如果不发生相应的变化，就会出现 “断链”。 如果采用手动逐个修改链接，工作量很大， Dreamweaver提供的自动更新链接功能可以在 文件名修改或文件位置移动时自动进行相关链 接更新。
38
5.6.2自动更新链接 1．更改站内文件名称 2．更改站内文件位置
39
5.6.3链接检查 网站制作好之后，在上传到服务器之前，必须 对站点中所有链接进行检查，如果发现存在中 断的链接，则需要进行修复。
如果在各个网页文件中手工逐一单击进行链接 检查，工作量将会很大，也不可避免会出现疏 漏，Dreamweaver提供的链接检查器功能可以 快速地对某一页面、部分页面和整个站点的链 接进行检查。
40
5.6.3链接检查 1．检查当前文档中的链接 2．检查站点中所选文件的链接 3．检查整个当前本地站点的链接
41
5.6.4修复链接 修复链接是对检查出的断掉链接进行重新设置， 可以通过以下两种方法完成。
（1）双击【链接检查器】面板右侧列表中断掉 链接的【文件】中的文件名，Dreamweaver会 在【代码】窗口和【设计】窗口中定位到链接 出错的位置，同时【属性】面板也会指示出链 接，可以进行修改，如图5-74所示。 （2）在【链接检查器】面板的【断掉的链接】 下面单击鼠标左键，直接修改链接路径，或单 击【浏览文件】按钮重新定位链接文件，如图 5-75所示。
42
5.7练习案例 5.7.1练习案例-室内设计网 5.7.2练习案例-多美味餐厅 5.7.3练习案例-生物科普网
43
5.7.1练习案例-室内设计网 案例练习目标：练习创建文字超链接。 案例操作要点：
1. 分别选择文字“网站首页”和“设为首页”创 建链接均为index.html，选择文字“设计论坛” 创建外部链接到 文字“联系我们”创建电子邮件链接为 下载链接链为“设计资料.rar”，选择文字“网站 地图”创建空链接。 2. 在页面属性中，设置链接颜色和已访问链接为 #333，变换图像链接为#871D0D，并始终有下 划线。 素材所在位置：光盘/案例素材/ch05/练习案例- 室内设计网，效果如图5-76所示。
45
5.7.2练习案例-多美味餐厅 案例练习目标：练习创建鼠标经过图像超链接和 热点超链接。 案例操作要点：
1．在页面顶部导航位置，创建“网站首页”、 “最新消息”、“会员地带”、“餐厅位置”和 “联系我们”鼠标经过图像，并为“最新消息” 设置链接为news.html。 2．在页面的左下角，为“送货上门”和“餐厅动 态”创建两个热点链接，分别链接到文件 sale.html和文件news.html。 素材所在位置：光盘/案例素材/ch05/练习案例- 多美味餐厅，效果如图5-77所示。
47
5.7.3练习案例-生物科普网 案例练习目标：练习创建锚点链接。 案例操作要点：
1．在网页scie.html中的文字“鸟类”、“昆虫类” 和“植物类”前面，分别插入锚点bird、insect、 plant；在页面底部“快速导航”区域内，分别为“鸟 类”、“昆虫类”和“植物类”建立锚点链接指向锚 点bird、insect、plant。 2．在网页contact.html中的文字“联系我们”前插入 锚点us，在网页scie.html底部“快速导航”区域内， 为文字“联系我们”建立指向us的锚点链接。 3．在网页contact.html底部“快速导航”区域内，分 别为“鸟类”、“昆虫类”和“植物类”建立指向锚 点bird、insect、plant的锚点链接。 素材所在位置：光盘/案例素材/ch05/练习案例-生物 科普网，效果如图5-78所示。
Similar presentations
