网页制作技术（第二版） - 万水书苑-出版资源网

全文

(1)任务四制作网站链接. 学习目标    . 理解相对路径和绝对路径的概念掌握内部链接和外部链接的创建方法掌握各种特殊链接的创建方法掌握图像链接的制作方法任务分析. Dreamweaver CS4 可以为对象、文本或图像创建超链接，链接到其他文档或文件，或链接到单个文档的指定位置。创建超链接的 HTML 标记称为“锚记”或“a”标记。要正确设置链接地址，首先要理解绝对路经与相对路径的概念，然后掌握设置链接的方法和技巧，在网页中实现超链接。知识准备. 知识 1. 绝对路经与相对路径. 一般说来，链接的路径可以使用 3 种表示方式，即：绝对路径、相对路径和基于站点根目录的路径。 1．绝对路径在链接中，绝对路径提供了链接文档的完整 URL 地址，例如：http://www.whsvc.com.cn/ index.asp；http://www.163.com。使用绝对路径与链接的源端点无关，只要站点地址不变，无论文档在站点中如何移动都可以正常实现跳转而不会发生错误。在链接不同站点上的文档时，必须使用绝对路径。 2．相对路径相对路径可以表述源端点同目标端点之间的相互位置，它同源端点的位置密切相关。如果链接中源端点和目标端点位于一个目录下，则在链接路径中只需要指明目标端点名称即可。例如在图 2-26 所示的站点中，如果在 index.htm 文档中创建指向 news1.html 的链接，可以使用相对路径：news/news1.html。 3．站点根目录相对路径基于站点根目录的相对路径从站点的根目录开始，同源端点的位置无关。通常使用“/”表示根目录，所有基于站点根目录相对路径都以“/”开始，例如，在图 2-26 中，要创建指向 aboutus 目录下的 aboutus.html 文档的链接，可以使用站点根目录相对路径：/aboutus/aboutus.html。如果要创建指向主页的链接，可使用站点根目录相对路径：/index.html。由此可见，基于站点根目录.

(2) 58. 网页制作技术（第二版）. 的相对路径，同绝对路径非常相似，只是它省去了绝对路径带有协议的地址部分。站点根目录相对路径与绝对路径的源端点位置无关，解决了绝对路径在测试上的麻烦，在测试基于根目录的链接时，可以在本地站点中进行测试，而无须连接到 Internet 上。. 知识 2. 内部链接与外部链接. Dreamweaver CS4 创建超链接最常用的就是外部链接和内部链接。提示：在本地站点内移动或重命名文档时，Dreamweaver 可自动更新指向文档的链接。 1．内部链接内部链接指网站内部页面之间的相互链接关系，创建内部链接一般采用“属性”面板设置和拖动指向链接页面的方法，如图 4-1 所示。. 图 4-1. 创建内部链接. 2．外部链接创建外部链接的方法比较简单，不论是图像还是文本，都可以创建链接到绝对地址的外部链接。方法 1：选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址 http://www.163.com，如图 4-2 所示，然后同样可以从属性检查器的“目标”中设置这个链接的目标窗口。. 图 4-2. 创建外部链接. 方法 2：选择插入栏中的“常用”选项卡，然后单击“超级链接”按钮。通过设置“超级链接”对话框创建超链接，如图 4-3 所示。这种方法也可用来设置内部链接。. 图 4-3. 超级链接对话框. 方法 3：选择“插入”|“超级链接”菜单命令，打开“超级链接”对话框进行设置。.

(3) 任务四制作网站链接. 知识 3. 其他特殊链接. 1．邮件链接 Email 链接是一种特殊的链接，单击这种链接，将打开一个空白通信窗口。在 Email 通信窗口中，允许用户创建电子邮件，并发送到指定的地址。方法 1：选中文字或图像之后，直接在属性面板的“链接”文本框中输入 mailto:后面再输入电子邮件地址，如：mailto:xlwhvcse@163.com，如图 4-4 所示。. 图 4-4. 电子邮件链接. 方法 2：选择插入栏中的“常用”选项卡，然后单击“插入电子邮件链接”按钮设置“电子邮件链接”对话框创建电子邮件链接，如图 4-5 所示。. 图 4-5. 。通过. 电子邮件链接. 方法 3：选择“插入”|“电子邮件链接”菜单命令，打开“电子邮件链接”对话框进行设置。 2．下载链接链接到下载文件的方法，和链接到网页的方法完全一样。当被链接的文件是 exe 文件或 zip 文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法，如图 4-6 所示。选中要设置链接的文字，直接在属性面板中将链接指向站点面板中的文件即可，单击该链接，将打开“文件下载”对话框，如图 4-7 所示。. 图 4-6. 图 4-7. 文件链接. 文件下载对话框. 3．脚本链接脚本链接是指执行 JavaScript 代码或调用 JavaScript 函数。该方式可使用户在不离开当前. 59.

(4) 60. 网页制作技术（第二版）. 页面的情况下了解关于某个项目的一些附加信息。此外，该方式还用于执行计算、表单验证或其他任务。选中要制作脚本链接的对象，在属性面板的“链接”文本框中直接输入 JavaScript 代码或函数调用就可以了。例如，可键入 javascript:alert（'你好！欢迎光临本网站！'），如图 4-8 所示。. 图 4-8. 设置脚本链接. 在浏览器中测试链接后，单击链接，浏览器会打开如图 4-9 所示的警告窗口。 4．空链接空链接实际上是一个未设计的链接，利用该链接可激活页面图 4-9 弹出警告窗口上的对象或文本。一旦对象或文本被激活，当鼠标指针经过该链接时，用户可为其附加行为，如交换图片或显示层。访问者单击网页中的空链接，将不会打开任何文件。选中要制作空链接的对象（文本或图像），在属性面板的“链接”文本框中直接输入#，就制作了一个空链接，如图 4-10 所示。. 图 4-10. 设置空链接. 任务实施. 任务 1. 制作网站链接. 在 index.html 文档中创建超链接。操作步骤如下：（1）选中如图 4-11 所示的 index.html 页面中的文字“新闻专递” ，直接在属性面板中单击“链接”文本框右侧的文件夹图标，通过浏览选择一个文件。这里选择 news1.htm，如图 4-12 所示。. 图 4-11 选中页面中的文字.

(5) 任务四制作网站链接. 还可以使用拖动鼠标指向文件的方法，拖动“链接”后的按钮到站点面板上相应网页文件，则链接到这个网页，如图 4-13 所示，拖动鼠标时会出现一条带箭头的线，指向要拖动的位置。指向文件后只需释放鼠标，即会自动生成链接。. 图 4-12. 图 4-13. 选择链接文件. 拖动指向链接页面. （2）从“目标”弹出式菜单中，选择文档的打开位置，如图 4-14 所示。其中各选项的含义为： _blank：在一个未命名的新浏览器窗口中载入所链接的网页。 _parent：如果是嵌套的框架，链接会在父框架或窗口中打开，如果不是嵌套的框架，则等同于 top，在整个浏览器窗口中显示。 _self：浏览器的默认值，在当前网页所在的窗口或框架中打开链接的网页。 _top：在完整的浏览器窗口中打开网页。. 图 4-14. 设置文档的目标窗口. 61.

(6) 62. 网页制作技术（第二版）. 任务 2. 制作锚点链接. 锚点（又称命名锚记）链接指同一页面不同位置的链接关系。用户可以通过命名锚记，在文档中指定位置上创建链接锚点。通过对该点的命名，允许利用链接打开目标文档时，直接跳转到相应的命名位置。因此，使用命名锚记，不仅可以跳转到其他文档中的指定位置，也可以跳转到当前文档的指定位置。创建到锚点（命名锚记）的链接过程分为两步：首先创建命名锚记，然后创建到命名锚记的链接。例如为如图 4-15 所示 news1.htm 文档创建锚点链接。操作步骤如下：. 图 4-15 news1.htm 文档页面. （1）首先将光标放在页面最上方，在插入栏中选择“常用”选项卡，然后单击“命名锚记”按钮，如图 4-16 所示。（2）在弹出的“命名锚记”对话框中键入锚点名称“top”，如图 4-17 所示，然后单击“确定”按钮。此时锚点“top”被插入文档相应位置，如图 4-18 所示。. 图 4-16. “命名锚记”按钮. 图 4-17. 图 4-18. “命名锚记”对话框. 页面中的锚点. （3）在设计视图中选择需要创建链接的文本或图像，在属性面板的“链接”文本框中键入符号#和锚点名称，即“#top”，或拖动“链接”后的按钮到页面中锚点所在位置，如图 4-19 所示，同样也能链接到该锚点位置。.

(7) 任务四制作网站链接. 图 4-19. 任务 3. 设置锚点链接. 制作图像链接. 与文本添加链接的方法一样，可以为图像加入链接。操作步骤如下：（1）打开网页 photo1.html，标题设为“图像链接”，选择“常用”插入栏中的“插入图像”按钮，打开“选择图像源文件”对话框，选择要插入的图像。如图 4-20 所示。. 图 4-20. 选择图像源文件. （2）在打开的“图像标签辅助功能属性”对话框中，替换文本中输入“宠物精灵”，如图 4-21 所示。单击“确定”按钮。（3）选中图像，单击图像“属性”面板“链接”文本框后的“浏览文件”按钮，在打开的“选择文件”对话框中选择要链接的文件，如：index.html（即首页），单击“确定”按钮返回到 Dreamweaver CS4 编辑窗口，新建链接地址将出现在“链接”文本框中，如图 4-22 所示。. 63.

(8) 64. 网页制作技术（第二版）. 图 4-21. 设置图像辅助标签属性. （4）按 F12 键预览，当鼠标移到图像上面停留一会后会显示替换文本，单击图像，可跳转到 index.html。. 图 4-22. 任务 4. 图像链接设置. 制作热点链接. 一个图像可被分割为多个链接区域，称为“热点”。利用“热点”可添加多个链接，当用户单击某个链接区域时会产生一个动作。使用图像“属性”面板可通过图形方式创建或编辑图像热点。操作步骤如下：（1）打开 photo1.html 选取要添加热点的图片，属性面板有 4 个热点工具，如图 4-23 所示。. 图 4-23. 图像热点工具. （2）选择一个热点绘制工具，在图像上绘制热点后，自动打开“热点”属性面板，在属性面板中进行具体的设置。如：在“链接”文本框中输入要链接的文件名称或相应的锚点名称；在“目标”下拉列表框中选择打开链接页的方式；在“替代”文本框中输入鼠标移动到链接热点上时显示的别名，如图 4-24 所示。.

(9) 任务四制作网站链接. 图 4-24. “热点”属性面板. （3）用同样的方法可绘制其他热点，并设置相应的链接，按 F12 键预览。深入解析在不同网页间也可创建锚点链接，在“属性”面板中的“链接”框中输入“网页文件名# 锚点名”。例如：在 index.html 文件中有一个锚点 indextop，在其他网页中需链接到该锚点时，在“链接”文本栏输入“index.html#indextop”，则可创建到该锚点的链接。（1）创建本地站点，根文件夹为：“E:\foxsite”，在站点内新建三个页面“web1.html”、 “web2.html”、“web3.html”，在三个页面中分别插入文字、图像，选中有关文字，实现三个页面间的内部链接和锚点链接。（2）页面中插入一幅图片应用图像热点链接制作网站地图。. 习题四一、填空题 1．链接的路径可以使用三种表示方式，即：_______、相对路径和基于站点根目录的路径。 2．内部链接指网站_______之间的相互链接关系。 3．锚点链接指同一页面不同_______的链接关系。二、选择题 1．相对路径可以表述源端点同目标端点之间的相互位置，它同（）的位置密切相关。 A．源端点 B．目标端点 C．根文件夹 D．文件 2．在一个新浏览器窗口中载入所链接的文档，选择“目标”为（）。 A．_self B．_parent C．_blank D．_top. 65.

(10) 66. 网页制作技术（第二版）. 3．锚点的标识为（）。 A．*锚点名 B．#锚点名 4．邮件链接的设置格式正确的是（ A．mail:wanghong@163.com C．mailto_wanghong@163.com. C．&锚点名 D．@锚点名）。 B．mailto:wanghong@163.com D．email:wanghong@163.com. 三、操作题制作一个“个人简历”多媒体页面。要求： 1．在文档中输入自已的简历，并根据自己的想法添加字体列表、并设置字体的大小、颜色及段落对齐方式等。 2．插入自己的照片，进行图文混排。 3．添加三种以上链接。.

(11)