第5章 超级链接课件

《第5章 超级链接课件》由会员分享，可在线阅读，更多相关《第5章 超级链接课件（47页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver 网页设计,第5章超级链接,本章学习目标,掌握超级链接的作用及类型 掌握文本和图片链接的创建方法 掌握E-mail、锚点链接的创建方法 掌握热区链接的创建方法 掌握链接效果的编辑方法,5.1超级链接的基本知识,超级链接是WWW的魅力所在。超级链接简称链接。是指从一个网页到另一个网页对象的链接关系。超链接是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。 在浏览器中，超链接通常以带下划线的文本以及特定的颜色区别于网页内的其他内容，当鼠

2、标指向它的时候，会变成手形，单击即可打开超链接。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。,1什么是超链接,5.1.1超级链接,(1)内部链接：即在同一个站点内的不同页面之间相互联系的超链接。 (2)锚点链接：可以链接到网页中某个特定位置的链接。 (3)邮件链接：电子邮件链接。 (3)外部链接：把网页与Internet中的目标相联系的链接。 如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等,2. 超级链接的类型 网页中的超级链接一般分为外部链接、内部链接、邮件链接和锚

3、点链接等四种类型。,合理安排超链接在网页的制作中是非常重要的。采用什么结构的链接会直接影响到网页的布局。建议 ： 避免孤立文件的存在 在网页中避免使用过多的超链接 网页中的超链接不要超过4层 页面较长时可以使用书签 设置主页或上一层的链接,3合理安排超链接,5.1.2路径 每个网页都有一个惟一的地址，称作统一资源定位器(URL)。链接路径一般有三种类型，绝对路径、相对路径、站点根目录相对路径。 1、绝对路径 绝对路径由http:/、ftp:/等开始的，它不仅提供所链接文档的完整 URL，而且包括所使用的协议（如对于 Web服务为http:/，FTP服务为ftp:/）。比如 注意： 使用绝对路径

4、时要确保绝对路径有效，比如 当这个URL地址不存在了，浏览器用户访问时就会报错。要链接其它服务器上的文档，就必须使用绝对路径。尽管对本地链接也可使用绝对路径链接，但强烈建议不要采用这种方式，因为一旦此站点变更域名或改变地址，则所有本地绝对路径链接都将断开。对本地链接最好使用相对路径，以提供更大的灵活性。,协议绝对路径的格式： http:/域名/网页 ftp:/IP地址,文件绝对路径的格式： file:/盘符|/文件夹/./文件名,2、相对路径 相对路径是指省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。比如E:eshopindex.html链接到E:eshopb

5、mabout.html，可以把E:eshop去掉，只用bmabout.html。 假设一个站点的结构如下：,图5-1 站点结构,当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名。 当要链接到当前文档所在文件夹的子文件夹文档时，先要有子文件夹名称，然后跟符号“/”，在加文件名。 反过来，当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“./”。 当要链接到非同一目录的文档时，要先加“./”，后加文件夹名再加链接到的文件名。,3、站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理使用多个服务器的 Web 站点，或者在使用承载有多个不同站点的服

6、务器时，则可能考虑使用这种类型的路径。不过，如果您不太熟悉此类型的路径，最好使用上面提到的相对路径。 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。比如，/inf/info.html 是文件的站点根目录相对路径，该文件位于站点根文件夹的inf子文件夹中。 但是，如果移动或重命名根目录相对链接所链接的文档，即使文档彼此之间的相对路径没有改变，仍必须更新这些链接。例如，如果移动某个文件夹，则指向该文件夹中文件的所有根目录相对链接都必须更新。,5.2.1 创建文本超链接,1建立文本超链接,在浏览网页时，鼠标指针经过某些文本时，指针的形状发生变化，同时文本也会发生变化（如出现下划

7、线、文本的颜色发生变化、字体发生变化等），提示这是带链接的文本。此时点击鼠标，就会打开所链接的网页，这就是文本超链接。,5.2 创建超链接,（1）在网页上选择需要添加超链接的文本，打开文本的属性面板。 （2）在属性面板上指定文字的链接目标。 （3）在“目标”下拉列表框中选择目标文件打开的方式。 设置结束后，在网页中被选择的文字改变了颜色，且在文字底部出现一条下划线，即文字的超链接设置完成。在键盘上按“F12”键，即可将网页在浏览器中打开。单击链接的文字，即可打开目标文件。,在Dreamweaver MX中创建文本超链接的步骤为：,在默认情况下，被链接的文件在当前窗口或框架内打开。要使被链接的文

8、档显示在其他窗口或新的窗口或框架内，则需设置属性面板中的“目标(R)”选项，如图5-1-11所示。,目标选项,“目标(R)”的各选项设置如下： _blank。 将链接的文档在一个新的、未命名的浏览器窗口中打开。 _parent。 将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。 _self。 将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。 _top。 将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。,创建内部超级链接的步骤如下。 （1）打开文件“d

9、axuexxq.html”文件，选择文字“首页”，然后执行【插入】-【超级链接】命令（如图5-4所示），打开“超级链接”对话框，如图5-5所示。,图5-4 应用菜单命令插入超级链接,图5-5 “超级链接”对话框,例1：创建文字链接,（3）设置“超级链接”选项，内容如下： 文本：输入要在文档中作为超级链接显示的文本，因为选中的是文字“首页”，所以文本项自动显示为“首页”，此项保守默认设置。 链接：此项也可以直接输入要链接到的文件名，上面选择的文件是“index.html”。 目标： 链接打开窗口的样式 标题：超级链接的标题，本例为“学校首页”。 访问键：输入键盘等价键，通常为一个字母，以便在浏览

10、器中选择该超级链接，本例为“a”。预览时，可以按快捷键【Alt+A】来选择它。 Tab 键索引：输入 Tab 键顺序的编号，本例为“0”。,（4）设置完毕后，单击“确定”按钮。如图5-7所示，文档中可以看到文字“首页”显示为蓝色，说明超级链接已经建立。 （5）保存网页，按快捷键【F12】预览，当鼠标移动到文字“首页”时，鼠标样式为手形。单击打开另一个网页，如图5-10所示。,图5-7设置“超级链接”选项,1创建图像超链接,5.2.2 创建图像超链接,给图像添加链接，使其指向其他的网页或者文档，就是图像超链接。 （1）选中需要建立超链接的图像，此时属性面板显示图像的属性 。 （2）在属性面板中为

11、图像添加文档相对路径的链接。 （3）按“F12”预览网页。,2.创建图像映像 图像映像是指已被分为热区的图像，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。创建图像映像的步骤如下： （1）打开上面创建的文档“daxuexxq.html”。在“文档”窗口中，选择一幅图像。 （2）根据需要，选择热区工具按钮 （矩形）、 （圆形）、 （多边形）。本例在图像上创建3种热区链接。若要定义这3种图像热区，执行下列操作： 选择圆形工具，并将鼠标指针拖至显示为“太阳湖”的圆形区域上，创建一个圆形热区。 选择矩形工具，并将鼠标指针拖至显示“城市广场”矩形区域上，创建一个矩形热区。 选择多边形工具，并

12、将鼠标指针拖至显示“运动场”的不规则区域上，在各个顶点上单击一下，定义一个不规则形状的热区。然后单击箭头工具封闭此形状。 文档中显示效果如图5-27所示。,图5-27 文档中显示热区,（3）然后利用上面讲述的方法分别给这3个热点区域创建超级链接，比如通过拖动“指向文件”按钮来给不规则型区域创建超级链接，如图5-28所示，当然也可以用其他方法。属性面板的其它选项比如“目标”设置为“_blank”，“替换”设置为“运动场”。,图5-28 设置链接,锚记，也称为书签或锚点，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置，免去浏览者翻阅网页寻找信息的麻烦。在网页中加入锚记包括

13、两方面的工作，一是在网页中创建锚记，另一个就是为锚记建立链接。,5.2.3 创建锚记超链接,创建锚记的步骤如下： （1）将光标移到需要加入锚记的地方，一般是将光标放置在一行或是一段文字的开头部分。 （2）单击插入“常用”面板上的按钮，或是选择主窗口的菜单“插入”|“命名锚记”命令，将弹出“命名锚记”对话框。 （3）在对话框的“锚记名称”文本框输入锚记的名称。 （4）单击“确定”按钮。,1创建锚记,在命名锚记时，必须遵循以下规定： 只能使用字母和数字，锚记命名不支持中文。虽然在插入锚记对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚记添加链接的时候，也无法工作。 锚记名称的第1个字

14、符最好是英文字母，一般不要以数字作为锚记名称的开头。 锚记名称区别英文字母的大小写。 锚记名称间不能含有空格，也不能含有特殊字符。,创建锚记后，还必须链接锚记。选择想要链接到锚记的文字或图片，然后按如下方法中的任意一种进行操作。,2链接锚记,（1）在属性面板上的“链接”文本框中输入符号# 和锚记名称。 （2）选择文字或图片后，按住Shift键，然后拖动鼠标指向锚记。,在链接锚记时，应注意以下事项： 在#和锚记名之间不要留有空格，否则链接会失败。 在不同文件夹中为锚记创建链接时，其文件名后缀必定是“.htm”，而不能写成“.html”，否则链接也会失败。 符号#必须是半角符号，而不能为全角符号。

15、,实例：锚点链接 创建锚记链接的步骤如下： （1）打开文档“st.html”，选择下面的文字“晚餐”或在文字的附近定位光标，然后执行【插入】-【命名锚记】命令或单击“插入”栏的“常用”类别中的“命名锚记”按钮（如图5-19所示）。打开“命名锚点”对话框，如图5-20所示。,图5-19工具栏中的“命名锚记”按钮,图5-20命名锚记,（2）设置“锚记”项为“wc”，单击“确定”按钮，如图5-21所示。,图5-21 锚记图标,（3）选择上面的文字“晚餐”，然后在属性面板上“链接”项文本框中输入文字“#wc” （注意“#”不能丢掉!），如图5-22所示。,图5-22 创建锚点链接,（4）选择最上面的文

16、字“晚餐”或在文字的附近定位光标，用上面的方法命名锚记为“wcs”，选择要创建锚点的文字，本例选择最下面的文字“返回”，拖动右边垂直滚动条以显示上面的锚记“wcs”。 （5）拖动“指向文件”按钮（）指向锚点“wcs”，如图5-23所示，属性面板上的“链接”项文本框中会自动出现文字“#wcs”。当然也可以直接在文本框中输入“#wcs”来创建锚点链接。,图5-23 拖动“指向文件”按钮,（6）保存网页，按快捷键【F12】预览网页，如图5-24所示。,图5-24 地址栏文件名显示“st.html”,在网页上创建电子邮件链接，可以让浏览者快速反馈自己的意见。当浏览者单击电子邮件链接时，可以立即打开浏览器默认的电子邮件处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接 。,5.2.4 创建电子邮件超链接,(1)将光标置于网页中要添加E-mail链接的地方，或选中文字，通过主窗口菜单“插入”|“电子邮件链接”命令，将弹出 “电子邮件链接”对