网页制作课件第4章 超链接.ppt

4.2.1 创建内部链接 4.2.1 创建内部链接 4.2.1 创建内部链接 4.2.2 创建外部链接 4.2.3 创建E-mail链接 4.2.3 创建E-mail链接 4.2.4 创建图像热区链接 4.2.4 创建图像热区链接 4.2.5 创建锚链接 * 第4章 超链接 制作人：王 飞 重点和难点 链接的检查与测试 绝对路径 相对路径 创建超链接 4.1 超链接基础知识 4.1.1 超链接概述 1.绝对路径 绝对路径是指被链接对象的完整路径，是一个完整URL地址。 2.根目录相对路径 根目录相对路径是指从站点根文件夹到被链接对象经过的路径。站点上所有公开的文件都存放在站点的根目录下。根目录相对路径以一个正斜杠“/”开始，该正斜杠表示站点根文件夹。 3．文档目录相对路径 文档目录相对路径是指以当前文档所在位置为起点到被链接对象经由的路径，使用相对路径可以省去当前文档与被链接对象的绝对路径或根目录相对路径中相同的部分，保留不同的部分。文档目录相对路径适合于网站的内部链接。 超链接就是一种超媒体链接技术， 超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序 4.2典例剖析—信息导航列表 本节将通过建立一个信息导航网页的实例来讲解超链接的使用。本节操作任务： （1）在“Mystuhome”下建立文件夹“超链接”，在 “超链接”文件夹下建立网页“index.html”和文件夹“image” （2）在网页中创建链接。 （3）在网页中创建E-mail链接。 （4）在网页中制作图像映射，设置图像热点的超链接。 1.新建网页 （1）在“Mystuhome”下建立文件夹“超链接”，在 “超链接”文件夹下建立文件夹“image”和网页“index.html”，保存网页文档，如图4-1所示。 （2）按图4-1所示编辑网页，过程这里不在详叙。 图4-1 网页“index.html” 2.创建内部链接 为网页中的文本“我的相册”建立内部链接，操作过程如下。 （1）选中要设置超接接的元素，这里是选中文本“我的相册”。 （2）在属性面板的“链接”文本框中直接输入链接路径或单击“链接”文本框右边的【浏览文件】按钮，在弹出的“选择文件”框中选择一个链接目标对象。这里，选择同一个文件夹下“MyAlbum.html?”。 也可以在属性面板中拖动“链接”文本框右侧的【指向文件】按钮到“文件”面板中相应的链接目标对象，则链接将指向该对象。拖动时会出现一条带箭头的线，指示要拖动到的位置，指向对象后只需释放鼠标，即可自动生成链接。 2.创建内部链接 (3) 链接文本框设置完成后，属性面板中的“目标”下来列表框就自动变为可选状态，用于设置目标对象打开的窗口，共有_blank，_parent， _self，_top四个选项可供选择。 _blank ：表示重新打开一个新的浏览器窗口显示网页。 _parent ：表示在本框架的上一级框架或浏览器窗口显示网页。 _self ：表示在自身的框架或浏览器窗口内显示，这个目标选项是默认的没有指定时就会被采用。 _top ：在浏览器窗口打开链接的网页。 这里选择“_blank”。 (4) 一个内部链接创建完成，设置完成后如图所示。单击【保存】按钮，按 F12按钮预览网页。 为网页中的文本“我的家乡”建立外部链接，操作过程如下。 （1）选中要设置超接接的元素，这里是选中文本“我的家乡”。 （2）在属性面板的“链接”文本框中直接输入外部链接的绝对路径，这里是。 (3)在属性面板中的“目标”下来列表框中设置目标对象打开的窗口，这里选择“_blank”。 (4) 一个外部链接创建完成，单节【保存】按钮，按 F12按钮预览网页。 为方便获取网页用户的意见和建议，通常需要在网页中建立E-mail链接。E-mail链接被点击后会调用系统中设置的默认邮件程序，打开一个邮件发送窗口，用户可以直接点击E-mail链接发送邮件。 为网页中文本“我的邮箱”建立E-mail链接，操作过程如下。 （1）选中要设置超接接的元素，这里是选中文本“我的邮箱”。 （2）在Dreamweaver ?CS4主窗口中，单击菜单【插入】→【电子邮件链接】弹出如图4-3所示的电子邮件链接对话框。 图4-3 电子邮件链接对话框 (3) 对话框中“文本”指在网页上显示的文本，“ E-mail”指需要链接到的邮箱地址，这里输入“wysj@126.com” ，单击【确定】按钮完成E-