第5章网页设计与制作

• 2）在【属性】面板中，在“链接”框中键入 javascript:; （ javascript 一词后依次接一个冒号和一个分号）。如制作一个 带警告提示的链接，只要在属性面板的“链接”框中输入： “javascript:alert('您点击的是空链接，请返回重新选择！ ');”
28
• 链接代码是：<a href="javascript:alert('您点击的是空 链接，请返回重新选择！');">空链接示例</a>。 • 效果如图所示：
15
5.2.3锚点链接
• 所谓锚点链接，是指同一页面中的不同位置链接。例 如，一个很长的页面，在页面的最下方有一个“返回 顶部”的文字，单击链接后，可以跳转到这个页面最 顶端，这就是一种最典型的锚点链接。 • 创建锚点链接的过程分两步。下面就来制作页面中的 “返回顶部”链接。 • 第一步：创建命名锚记，就是在文档中设置位置标记 ，并给该位置一个名称，以便引用。 • 1）将光标定位在要设置标记的位置，例如把光标放在 页面的最上方； • 2）在【插入】面板的【常用】模式中，选择【命名锚 记】按钮 ，如下图所示。
• _parent：超链接的网页会显示在父框架或父窗口中 。
• _self：超链接的网页会显示在当前网页的同一窗口 或框架中，这是默认设置。 • _top：超链接的网页会显示在父窗口中。
12
5.2.2 用CSS定义链接文本状态
• 用【CSS样式】面板来定义链接文本的四种状态： • （1）在【CSS样式】面板中单击【新建CSS规则】按 钮 ，在弹出的如图所示的对话框中进行设置。
• 1）在“文档”窗口的“设计”视图中，将插入点放在 希望出现电子邮件链接的位置，或者选择要作为电子邮 件链接出现的文本或图像。 • 2）执行下列操作之一，插入该链接： • （1）在菜单栏中选择【插入】→【电子邮件链接】命令 。 • （2）在【插入】面板的【常用】模式中，单击 【电子邮件链接】按钮 。
7
• 但是，如果移动或重命名由站点根目录相对链接所 指向的文档，则即使文档之间的相对路径没有改变， 也必须更新这些链接。例如，如果移动某个文件夹， 则必须更新指向该文件夹中文件的所有站点根目录 相对链接。（如果使用【文件】面板移动或重命名 文件，则 Dreamweavendex.htm要想链接到01.htm这个文件，正确的链接 应该是：<a href=web/article/01.htm>链接文字</a> ，这是标准的相对路径。 • 反过来，01.htm要想链接到index.htm这个文件 ，在01.htm文件里面应该写上这句：<a href=../../index.htm>返回首页</a>。这里的../表示向 上一级。
21
• （3）先选中文本“写信给我”，在【属性】面板的 “链接”文本框中，键入“mailto:abc@”， 即“mailto:”加上电子邮件地址，如图所示。
22
• 3）在执行（1）或（2）之后，会弹出如图所示的【 电子邮件链接】对话框。在“文本”右侧的文本框 中，键入或编辑电子邮件链接的源端点文本。 • 4）在“E-mail” 右侧的文本框中，键入电子邮件地 址，然后单击【确定】按钮。
25
• 保存网页文档，按【F12】键预览网页效果。单击下 载链接文字“软件下载”时，将会弹出如图所示的 【文件下载】对话框，提示浏览者打开或保存文件。
• 链接代码是：<a href=" images/dweamweaver8.0.rar "> 软件下载</a> • 其他文件或程序下载链接设置与之一样。
8
5.2 链接的设置
• 超链接由源端点和目标端点两个部分组成。超链接 中有链接的一端称为链接的源端点，跳转到的页面 或页面中的某个位置称为链接的目标端点。 • 设置超链接的总体思路： • 选择超链接的开始位置（源端点）——链接到目标 位置（目标端点）
9
5.2.1 文本链接
• 文本链接是网页中最常见的一种链接，这种链接的 源端点是文本，目标端点可以是站点内或站点外的 网页。 • 设置文本链接的方法如下： • 方法一：新建一个index.htm文件，并输入文字“文 本超链接”，选中该文本，在菜单栏中选择【插入 】→【超级链接】命令，弹出如图所示的对话框， 在该对话框中进行设置。
2
5.1 网页链接路径
• 在网页制作中，设置超链接有三种表示方式： (1)绝对路径。 (2)相对路径（相对于文档）。 (3)站点根目录相对路径（基于根文件夹）。 • 在正确创建超链接之前，我们有必要先来学习一下 路径。
3
5.1.1绝对路径（Absolute Path）
• 大家都知道，在我们平时使用计算机时要找到需要 的文件就必须知道文件的位置，而表示文件的位置 的方式就是路径，例如只要看到这个路径： D:/mysite/music/123.mp3，我们就知道123.mp3文件 是在D盘的mysite文件夹下的music子文件夹中。类 似于这样完整的描述文件位置的路径就是绝对路径。 我们不需要知道其他任何信息就可以根据绝对路径 判断出文件的位置。而在网站中类似于 /imgs/123.jpg来确定文件位置 的方式也是绝对路径。
26
• 2.空链接
• 空链接也叫无址链接，也就是没有链接对象的链接 即是未指派的链接，在空链接中，目标URL是用 “#”来表示的。也就是说制作链接时，只要在【属 性】板的链接输入框中录入#标记，它就是个空链接 了。如图所示：
27
• 链接代码是：<a href="#">空链接示例</a>
• 空链接的出现涉及到多方面的因素，比如一些没有定期完成 的页面，又为了保持页面显示上的一致（链接样式与普通文 字样式的不同），就可以使用它了。 • 空链接也常用于向页面上的对象或文本附加行为。例如，可 向空链接附加一个行为，以便在指针滑过该链接时会交换图 像或显示绝对定位的元素（AP元素）。 • 1）在“文档”窗口的“设计”视图中选择文本、图像或对 象。
23
• 链接代码是：<a href="mailto:abc@">写信给我</a>
• 电子邮件链接创建成功后，按【F12】键预览，单击电子邮 件链接，浏览器会自动打开相应的程序(系统默认为 OutLook)，如图所示：
24
5.2.5下载链接与空链接 • 1.下载链接
• 如果要在网页中提供资源下载服务，就需要设置下载链接。如 果超级链接指向的不是一个网页文档，而是zip、rar、exe、 mp3等类型的文件，这样单击链接时就会提示是否选择下载文 件。 • 选中“软件下载”文字，然后在【属性】面板中，单击“链接 ”右侧的【浏览文件】按钮，在弹出的【选择文件】对话框中 选择文件“ch05/5.2.9/images/dweamweaver8.0.rar”，最后单 击【确定】按钮返回【属性】面板，如图所示。
29
5.2.6一般图像链接
• Dreamweaver中的图像链接主要包括：一般图像链接、 图像热点链接、鼠标经过图像超链接等。
• 创建一般图像超链接步骤：
• 在网页中插入一张要用来做链接的图片；
• 在菜单栏中选择【插入】→【图像】命令；或在【插入 】面板的【常用】模式中，单击【图像】按钮 。会弹出 如图所示的对话框，选择图像源文件。
4
5.1.2相对路径（Relative Path）
• 相对路径就是指由这个文件所在的路径引起的跟其 它文件(或文件夹)的路径关系。使用相对路径可以为 我们带来非常多的便利。下面举实例详解： 一、例如在本地硬盘有如下两文件，它们要互做 超链接，如图5-1所示。 • • G:\site\index.htm G:\site\web\article\01.htm
• 因此在相当路径中我们使用“../”来表示上一级文 件夹，“../../”表示上上级的文件夹，以此类推。 下级文件夹则用“/..”表示。
6
5.1.3站点根目录相对路径
• 站点根目录相对路径描述从站点的根文件夹到文档的路径 。如果在处理使用多个服务器的大型 Web 站点，或者在使 用承载多个站点的服务器，则可能需要使用这些路径。不 过，如果您不熟悉此类型的路径，最好坚持使用文档相对 路径。
13
• （2）单击【确定】按钮，弹出a:link的【CSS规则定 义】对话框，进行如图所示的设置，在Textdecoration（文本修饰）与选择“none”,即“无下 划线”。
14
• （3）单击【确定】按钮，网页中的链接文本即变为 无下划线，如图所示。
• 提示：剩下三种链接文本状态也可同样设置，不过 要注意的是：要预览后在浏览器窗口中才可看到效 果。
• 相对路径与绝对路径的定义与区别。
1
• 超级链接（Hyperlink）在本质上属于一个网页的一部分， 它是一种允许我们同其他网页或站点之间进行连接的元 素。各个网页链接在一起后，才能真正构成一个网站。 超级链接又简称为超链接。所谓的超链接是指从一个网 页指向一个目标的连接关系,这个目标可以是另一个网页, 也可以是相同网页上的不同位置，还可以是一个图片， 一个电子邮件地址，一个文件，甚至是一个应用程序等。 而在一个网页中用来超链接的对象，可以是一段文本或 者是一个图片。当浏览者单击已经链接的文字或图片后, 链接目标将显示在浏览器上，并且根据目标的类型来打 开或运行。因此，超链接根据使用对象的不同可以分为 文本链接、图像链接、锚点连接、空链接、电子邮件链 接等。
10
• 方法二：使用【属性】面板中的“链接”，先在网 页中选择要进行链接设置的文本，再通过链接文本 框右侧的【指向文件】按钮 或【浏览文件】按钮 或直接在文本框中输入被链接的网页文档的路径， 来进行文本链接的设置，如图所示。
11
• 在【属性】面板中（如图所示），目标列表中有4个 属性供选择： • _blank：超链接的网页会在另外一个窗口中打开显 示。