手机网站设计超级链接.ppt

1、,第五章 超级链接,5.1 超链接的建立,利用超级链接可以实现文档间或文档中的跳转，超级链接由两部分组成：链接的载体以及链接的目标地址。许多页面元素可以作为链接载体，如：文本、图像、图像热区、轮替图像、动画。而链接目标可以是任意网络资源，如：页面、图像、声音、程序、其他网站、Email、锚点(书签，即页面中的某个位置)。,qq1007938190,5.1.1链接文档的位置与路径,链接文档的位置与路径 每个网页都有一个唯一的地址，称之为统一资源定位器(URL)。在创建一个本地链接(链接文档与被链接文档处于相同的站点中)时，通常并不需要指定要链接到的文档的整个URL，而使用相对路径。下面是三种类型

2、的链接路径:,一、绝对路径 绝对路径提供链接文档的完整URL，包括使用的协议(对于网页通常是http:/)。例如 二、文档相对路径 文档相对路径是用于本地链接的最合适的路径。在当前文档与链接的文档在同一文件夹中时，文档相对链接是尤其有用的。文档相对路径所包含是省略对于当前文档和链接的文档都相同的绝对URL部分，而只提供不同的那部分路径。,要链接的文件与当前文档处在同一文件夹中，只需输入文件名。 要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线(/)和文件名。 要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加 ./ (其中.表示文件夹分层结构中的上一级文件

3、夹).,三. 根相对路径 根相对路径提供从站点根文件夹到文档所经过的路径。如果工作于一个使用数台服务器的大型网站或者一台同时作为数个不同站点主机的服务器，那么可能需要使用根相对路径。不过，如果不是很熟悉这类路径，还是应该继续使用文档相对路径。 根相对路径以领头的正斜线开始，代表站点的根文件夹。例如，/support/tips.html 是一个指向文件tips.html(该文件位于站点根文件夹的support子文件夹中)的根相对路径。 注:以浏览方式创建链接可以保证得到正确的路径。,5.1.2 超级链接的类型,（1）按照转移的范围 内部链接，锚点链接，外部链接。 （2）按实现的链接的对象 文本链

4、接、图像链接、图像映射链接。 （3）按照实现的功能 文本超链接，图像超链接，E-mail链接，锚点链接多媒体文件链接，空链接等。,5.1.3 制作超链接 制作超链接，可使用以下方法。 1)在文档窗口的设计视图中选中一文本或图像。 2)打开属性检查器并执行以下任一操作: 点击链接域右边的文件夹图标浏览并选取文件。浏览找到被链接文档，路径出现在URL域中。 点击链接域右边的指向文件按钮，将其拖至一个文件创建链接。 在链接域中，输入文档的路径与文件名。要链接到本站点中的某一文档，输入一个文档相对或根相对路径要链接到当前站点之外的文档，输入包括协议名的绝对路径(比如 )。,3)选择文档打开的位置。要使

5、被链接文档不出现在当前窗口或帧中，从属性检查器的目标弹出菜单中选取一个选项。 _blank 装入链接的文档到一个新建的无名浏览器窗口。 _parent 装入链接的文档到包含链接的帧的父帧或父窗口中。如果包含链接的帧是非嵌套的(无父帧)，那么链接的文档将装入到整个浏览器窗口中。 _self 装入链接的文档到与链接相同的帧或窗口中。这是默认的目标指向。所以通常不用特意指定它。 _top 装入链接的文档到整个浏览器窗口，从而去除所有的帧。,锚点是一种网页内的超链接。锚点使你能够更精确地控制访问者在其单击超链接之后到达的位置。没有利用锚点的链接将把访问者带到目标网页的顶端。当访问者单击了一个引向锚点的

6、超链接时，将直接跳转到这个锚点所在的位置。 创建对命名锚点的链接需两步过程。首先，创建一个命名的锚点，然后创建对该命名锚点的链接。,5.1.4 链接到文档内的指定位置(锚点),一、创建锚点 1)在文档窗口的设计视图中，置插入点到需要命名锚点的地方。 2)执行以下任一操作: 选择插入命名的锚点。 在“插入”栏的“常用”类别中，单击“命名锚记”按钮。 3)在插入命名的锚点对话框的锚点名域中，输入锚点名。 如果锚点标记没有出现在插入点位置，选择查看 可视化助理 不可见元素。 注意: 锚点名不能包含空白字符，不要使用中文或全角字符。,二.链接到命名的锚点 方法一：用输入锚点名方法链接 1)在文档窗口的

7、设计视图中，选中要从中创建链接的文本或图像。 2)在属性检查器的链接域中，输入数值符(#)和锚点名。例如: 要链接到当前文档中一名为top的锚点，输入#top。 要链接到处于同一文件夹的另一文档中一名为top的锚点，输入filename.html#top。,方法二:用指向文件方法链接到命名的锚点: 1)打开包含需要的命名锚点的文档。 2)选择查看 可视化助理 不可见元素以使锚点可见。 3)在文档窗口的设计视图中，选中要从中链接的文本或图像4)点击属性检查器链接域右边的指向文件图标，并拖动至要链接的锚点:可以是同一文档中的锚点，也可是另一打开文档中的锚点。,5.1.5 创建电子邮件链接 当点击电

8、子邮件链接时，将打开一个与用户的浏览器关联的邮件程序。在该e-mail 消息窗口中，收件人域自动更新为在e-mail链接中指定的地址。 创建电子邮件链接方法: 1) 将插入点置于e-mail链接出现的地方，或选中要作为e-mail链接出现的文本或图像。然后执行以下任一操作: 选择插入 电子邮件链接。 在对象面板的常用类别中，选择插入E-Mail链接。 2) 在插入E-Mail链接对话框的文本域中，输入或编辑作为e-mail链接出现在文档中的文本。 3)在E-Mail域中，输入邮件将发送到的e-mail地址，点击OK。,5.1.6 创建跳转菜单 跳转菜单是文档中站点访问者可见的一个弹出菜单，列出

9、链接到文档或文件的选项。一个跳转菜单可包含有三个基本的组件: 菜单选择提示，比如菜单项的类别描述或说明，比如“请选择：”(可选) 链接菜单项列表:用户选择一菜单项，该菜单项链接的文档或文件被打开。(必需) 一个前住按钮。(可选),一.创建跳转菜单 1)选择插入表单对象跳转菜单。出现插入跳转菜单对话框。 2)如果需要创建选择提示，则在对话框的文本域中键入提示文本。在选项中选取URL更改后选择第一个项目，然后点击(+)按钮添加一个菜单项。 3)在插入跳转菜单对话框的文本域中输入需要在菜单列表中显示的文本。 4)在选择时, 前往的URL域中通过点击浏览，选取要打开的文件或键入要打开的文件路径。,5)

10、 在打开URL于弹出式菜单中选取文件要在什么地方打开:选取主窗口将在同一窗口中打开文件。 选取要打开文件的框架(要求是框架网页，并且框架必须已命名。6) 若要在菜单后加入前往按钮，而不是直接选取时就打开文件，则在选项中，选取菜单之后插入前往按钮选项。 7)若要添加其他的菜单项，点击(+)按钮并重复第3到第6步。 8)点击确定。,二.编辑跳转菜单项目 1) 在属性检查器中选择窗口属性。 2) 在文档窗口的设计视图中，选取跳转菜单对象。列表/菜单图标出现在属性检查器中。 3) 在属性检查器中，点击列表值按钮。 4) 对菜单项进行修改，然后点击确定。,5.1.7 创建空链接及脚本链接 所谓空链接，就

11、是没有目标的链接。利用空链接，可以激活文档中链接对应的对象和文本。一旦对象和文本被激活，则可以为之添加一个行为，以实现当鼠标移动到链接上时进行切换图像或显示图层等动作。 建立空中链接的操作步骤如下： 1）在文档窗口中，选中要设置链接的文本、图像和其他对象。 2）在属性面板的链接中只输入一个“#”。 注：“#”号必须为半角状态下的符号，否则会产生错误链接。,脚本链接是另外一种特殊形式的链接，通过单击带有脚本的文本或其他对象，可以运行相应的脚本和函数，从而为浏览者提供许多附加信息。脚本链接还可以被用来确认表单。,5.3 管理超链接 一、在“页面属性”对话框修改链接样式 1）打开文档，选择“修改”“

12、页面属性”，弹出“页面属性”对话框，选择“分类”“链接”， 2）在链接颜色域中，可以单击右下角带小三角形的小方框，打开颜色选择器，然后用吸管直接拾取颜色，或直接输入颜色值，都可以确定建立链接后的颜色。 3）按同样的方法，设置翻转链接、活动链接、访问过的链接的颜色。 4）设置好以后，点击“确定”按钮。,二、通过CSS样式表修改链接的样式 1）单击“窗口”“CSS样式”，在CSS样式面板中单击“新建CSS样式”，弹出“新建CSS样式”对话框。 2）在类型中选择“高级”单选按钮，在“定义在”选择“仅对该文档”，在“选择器”下拉列表中选择下列选项之一： a：link：没有被访问的链接的显示效果 a：v

13、isited：被访问的链接的显示效果 a：hover：鼠标移动到一个链接上时的显示效果 a：active：激活一个链接时的显示效果 3）在”分类“中选择”类型”，弹出“类型”面板，修改文字的字体、大小、颜色、下划线等属性；在“分类”中选择“扩展”，弹出“扩展”面板，在“光标”下拉列表中选择鼠标的样式，单击“确定”。,5.3 管理超链接 当在本地站点中移动或重命名文档时，Dreamweaver可以更新指向文档间的超链接。 一、Dreamweaver中的链接管理设置方法 1) 选择编辑参数选择，然后选中常规类别。 2) 从移动文件时更新链接弹出菜单中选择总是或提示，并点击确定。 如果选择的是总是，Dreamweaver在移动或重命名选中的文档时，自动更新所有指向和来自选中文档的链接。 如果选择提示，Dreamweaver首先显示一个对话框列出所有被该变动影响的文件。点击更新则更新这些文件中的链接，点击不更新则保持这些文件不变。,二.修改链接 1) 选中要修改链接的文本或图象 2) 使用属性面板的链接框重新设定；或点鼠标右键，在快捷菜单中选择