《dreamweaver网页设计》第5章

《《dreamweaver网页设计》第5章》由会员分享，可在线阅读，更多相关《《dreamweaver网页设计》第5章（27页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver 网页设计,第5章 超级链接,【学习概述】,正是由于超级链接的存在，才使得使用网络资源如此的方便。可以说超级链接是网络最具特色的功能，如果没有了超级链接，也就没有了互连网络。本章介绍了超级链接的基本知识和创建超级链接的基本方法，管理超级链接、改变超级链接属性和测试超级链接等内容。读者要注重熟习基本概念，熟练基本操作。,5.1 【课堂讲解】超级链接基本知识,5.1.1 超级链接 超级链接是WWW的魅力所在。超级链接简称链接。是指从一个网页到另一个网页对象的链接关系。为了把百万数量级的Internet站点上众多分散的网页联系起来，构成一个整体，就必须在网页上加入链接。通过点击

2、网页上的链接，我们才能在信息的海洋中尽情遨游。 链接并不仅仅是网页与网页的链接，它还包括到图片、电子邮件、文档、媒体等的链接。 5.1.2 超级链接的类型 网页中的超级链接一般分为外部链接、内部链接、邮件链接和锚点链接等四种类型。 内部链接：在同一个站点内部网页文档之间的链接。 外部链接：在不同网站网页文档之间的链接。 邮件链接：电子邮件链接。 锚点链接：同一网页或不同网页指定位置的链接。,5.1.3 路径 每个网页都有一个惟一的地址，称作统一资源定位器（URL）。链接路径一般有三种类型，分别为： 绝对路径 绝对路径提供所链接文档的完整URL地址，而且包括所使用的协议类型，比如http:/ 使

3、用绝对路径时要确保绝对路径有效，比如http:/ 相对路径是指省略掉对于当前文档和所链接的文档都相同的绝对URL部分，而只提供不同的路径部分。比如E:eshopindex.html链接到E:eshopbbsabout.html，可以把E:eshop去掉，只用bbsabout.html。 假设一个站点的结构如下：,图5-1 站点结构,当要链接到与当前文档处于同一文件夹中的文档时，只需输入文件名。比如要从 aboutus.htm 链接到 yewu.htm（两个文件在同一文件夹“bm”中，且目录深度相同），则其相对路径为yewu.htm。 当要链接到当前文档所在文件夹的子文件夹文档时，先要有子文件夹

4、名称，然后跟符号“/”，在加文件名。比如要从 index.html 链接到 yewu.htm（两个文件在同一文件夹“eshop”中，index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为bm/yewu.htm。 反过来，当要链接到当前文档所在文件夹的父文件夹的文档时，在文档名前要加“/”。比如要从yewu.htm链接到index.html（两个文件在同一文件夹“eshop”中，index.html处于父目录中，而yewu.htm处于子目录bm中），则其相对路径为/ index.html。 当要链接到非同一目录的文档时，要先加“/”，后加文件夹名再加链接到的文件名

5、。比如要从 tupian.htm 链接到 aboutus.htm（两个文件在不同的目录中，tupian.htm在“album”目录中，aboutus.htm在“bm”目录中），则其相对路径为/bm/ aboutus.htm。,站点根目录相对路径 站点根目录相对路径是指从站点的根文件夹到文档的路径。当在处理使用多个服务器的 Web 站点，或者在使用承载有多个不同站点的服务器时，则可能考虑使用这种类型的路径。不过，如果您不太熟悉此类型的路径，最好使用上面提到的相对路径。 站点根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。比如，/inf/info.html 是文件的站点根目录相对路

6、径，该文件位于站点根文件夹的inf子文件夹中。 在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。当移动含有根目录相对链接的文档时，不需要更改这些链接；当移动该HTML文件后，其相关文件链接依然有效。 但是，如果移动或重命名根目录相对链接所链接的文档，即使文档彼此之间的相对路径没有改变，仍必须更新这些链接。例如，如果移动某个文件夹，则指向该文件夹中文件的所有根目录相对链接都必须更新。,5.2.1 内部超级链接 创建内部超级链接的步骤如下。 （1）选择文字“首页”，然后执行【插入】-【超级链接】命令（如图5-4所示），

7、打开“超级链接”对话框，如图5-5所示。,图5-4 应用菜单命令插入超级链接,图5-5 “超级链接”对话框,（2）单击“链接”项右边的文件夹图标，打开“选择文件”对话框，如图5-6所示，选择所需的文件名“index.html”，然后单击【确定】按钮。,图5-6 “选择文件”对话框,（3）设置“超级链接”选项，内容如下： 文本：输入要在文档中作为超级链接显示的文本，因为选中的是文字“首页”，所以文本项自动显示为“首页”，此项保守默认设置。 链接：此项也可以直接输入要链接到的文件名，上面选择的文件是“index.html”。 目标： 本例中有4项，意义分别为： _blank：单击链接，所链接的文件

8、将在一个新的浏览器窗口中打开。 _parent：单击链接，将所链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。 _self：单击链接，将所链接的文件载入该链接所在的同一框架或窗口中。此目标是默认值。 _top：单击链接，将所链接的文件载入整个浏览器窗口中，因而会删除所有框架。 标题：超级链接的标题，本例为“学校首页”。 访问键：输入键盘等价键，通常为一个字母，以便在浏览器中选择该超级链接，本例为“a”。预览时，可以按快捷键【Alt+A】来选择它。 Tab 键索引：输入 Tab 键顺序的编号，本例为“0”。,（4）设置完毕后，单

9、击“确定”按钮。如图5-7所示，文档中可以看到文字“首页”显示为蓝色，说明超级链接已经建立。 （5）保存网页，按快捷键【F12】预览，当鼠标移动到文字“首页”时，鼠标样式为手形。单击打开另一个网页，如图5-10所示。,图5-7设置“超级链接”选项,5.2.2 外部超级链接 外部超级链接也是比较常见的一种链接方式。比如经常在网络上看到的“友情链接”或“首页链接”都是用的外部链接形式，这种链接通常是指从一个网站跳转到另一个网站，链接多以“http:/”开头。 选择文字“清华大学”，然后在属性面板的“链接”项文本框中输入文字“http:/ ”。“目标”项设置为“_blank”。一般来说，外部超级链接

10、的目标项多为“_blank”，这样可以打开一个新的网页来显示链接到的网站。按快捷键【F12】预览，如图5-14所示，单击文字“清华大学”，新打开一个网页，显示清华大学网站的首页。,图5-14 预览外部链接,5.2.3 邮件链接 邮件链接可以让用户方便快速的与网站取得联系。一般是指添加一个收信人地址，当浏览者点击了邮件链接后，会打开默认的收发电子邮件程序。创建电子邮件链接步骤如下： （1）选择文字“”，然后执行【插入】-【电子邮件链接】命令或单击“插入”栏的“常用”类别中的“电子邮件链接按钮”（如图5-15所示），打开“电子邮件链接”对话框，如图5-16所示。,图5-15 电子邮件链接按钮,图5

11、-16 “电子邮件链接”对话框,“文本”：yourname “E-Mail”：yourname （3）单击“确定”按钮，属性面板显示如图5-17所示。从这里的显示可以知道，读者完全可以在 “链接”项文本框中直接输入文字“mailto: ”来创建邮件链接。,图5-17 属性面板电子邮件链接,（4）保存，按快捷键【F12】预览，如图5-18所示。单击文字“”，打开邮件接发程序。,图5-18 打开邮件接发程序,5.2.4 锚点链接 锚点链接也叫锚记链接。可以将文档中的文字或图像链接到文档中指定的位置，文档可以是同一文档，也可以是不同文档。创建锚记链接的步骤如下： （1）打开文档“st.html”

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

13、建锚点的文字，本例选择最下面的文字“返回”，拖动右边垂直滚动条以显示上面的锚记“wcs”。 （5）拖动“指向文件”按钮（）指向锚点“wcs”，如图5-23所示，属性面板上的“链接”项文本框中会自动出现文字“#wcs”。当然也可以直接在文本框中输入“#wcs”来创建锚点链接。,图5-23 拖动“指向文件”按钮,（6）保存网页，按快捷键【F12】预览网页，如图5-24所示。,图5-24 地址栏文件名显示“st.html”,5.2.5 创建图像映像 图像映像是指已被分为热区的图像，当用户单击某个热区时，会发生某种操作，比如打开链接网页等。创建图像映像的步骤如下： （1）打开上面创建的文档“daxue

14、xxq.html”。在“文档”窗口中，选择一幅图像。 （2）根据需要，选择热区工具按钮 （矩形）、 （圆形）、 （多边形）。本例在图像上创建3种热区链接。若要定义这3种图像热区，执行下列操作： 选择圆形工具，并将鼠标指针拖至显示为“太阳湖”的圆形区域上，创建一个圆形热区。 选择矩形工具，并将鼠标指针拖至显示“城市广场”矩形区域上，创建一个矩形热区。 选择多边形工具，并将鼠标指针拖至显示“运动场”的不规则区域上，在各个顶点上单击一下，定义一个不规则形状的热区。然后单击箭头工具封闭此形状。 文档中显示效果如图5-27所示。,图5-27 文档中显示热区,（3）然后利用上面讲述的方法分别给这3个热点区

15、域创建超级链接，比如通过拖动“指向文件”按钮来给不规则型区域创建超级链接，如图5-28所示，当然也可以用其他方法。属性面板的其它选项比如“目标”设置为“_blank”，“替换”设置为“运动场”。,图5-28 设置链接,5.4 实践检验,理论巩固 填空题 （1）超级链接的类型分为_。 （2）链接路径一般有3种，分别为_。 （3）孤立文件是指_。 （4）锚点链接是指_。 简答题 （1）简述如何在Dreamweaver中创建邮件链接。 （2）简述如何在Dreamweaver中创建锚点链接。,5.4 实践检验,上机操作 （1）在Dreamweaver中创建图像热点链接。 （2）在Dreamweaver中设置文字超级链接属性，各项属性设置如下： 链接字体：“华文仿宋”。 大