第7讲创建网链接

第第7讲讲 创建网页链接创建网页链接参考资源：http:/218.192.12.13/kcpt/jkx.html大学计算机11/27/20221广东金融学院主要内容主要内容v1 1超链接的概念；超链接的概念；v2 2理解路径；理解路径；v3 3创建文本超链接、下载超链接和图像创建文本超链接、下载超链接和图像超链接；超链接；v4 4创建锚点链接和创建锚点链接和E-mailE-mail链接；链接；v5 5制作导航条；制作导航条；v6 6求职站点的页面导航；求职站点的页面导航；v7 7总结并布置作业。总结并布置作业。11/27/2022广东金融学院21超链接的概念超链接的概念v什么是超链接什么是超链接 超链接（简称链接）是网页文档中的重要元超链接（简称链接）是网页文档中的重要元素，使用超链接可以实现网页文档之间的快素，使用超链接可以实现网页文档之间的快速跳转，而不管这些网页是来自一个站点，速跳转，而不管这些网页是来自一个站点，还是来自还是来自InternetInternet中不同的站点。中不同的站点。网页中超链接通常以文本、图像或动画等形网页中超链接通常以文本、图像或动画等形式出现。当鼠标指针指向超链接时，鼠标指式出现。当鼠标指针指向超链接时，鼠标指针会变成手指状；单击超链接时，浏览器就针会变成手指状；单击超链接时，浏览器就会按照超链接指向的目标载入另一个网页，会按照超链接指向的目标载入另一个网页，或者跳转到同一网页（也可以是其他网页）或者跳转到同一网页（也可以是其他网页）的某一个位置。的某一个位置。11/27/2022广东金融学院31超链接的概念超链接的概念v源端点和目标端点源端点和目标端点 超链接是由源端点到目标端点的一种跳转。超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本、一幅图像源端点可以是网页中的一段文本、一幅图像或图像热区等。或图像热区等。目标端点可以是任意类型的网络资源，例如目标端点可以是任意类型的网络资源，例如一个网页、一幅图像、一首音乐、一段动画一个网页、一幅图像、一首音乐、一段动画、一段电影或一个程序等。、一段电影或一个程序等。11/27/2022广东金融学院41超链接的概念超链接的概念v源端点和目标端点源端点和目标端点11/27/2022广东金融学院5文本图像热区其它网页其它文件锚点E-mail图像声音程序链接源端点链接目标端点1超链接的概念超链接的概念v超链接分类（按照目标端点的不同）超链接分类（按照目标端点的不同）文件链接：目标端点是一个文件（通常是网文件链接：目标端点是一个文件（通常是网页文件，也可以是其它文件），用于打开另页文件，也可以是其它文件），用于打开另外一个网页，或者将一个文件直接下载到本外一个网页，或者将一个文件直接下载到本地计算机中。地计算机中。锚点链接：目标端点是网页中的某个位置，锚点链接：目标端点是网页中的某个位置，用于快速跳转到当前网页或其它网页中的某用于快速跳转到当前网页或其它网页中的某个位置。个位置。E-mailE-mail链接：目标端点是一个发送邮件的客链接：目标端点是一个发送邮件的客户端程序（如户端程序（如FoxmailFoxmail、OutlookOutlook等），用于等），用于启动一个邮件客户端程序，并向某个电子邮启动一个邮件客户端程序，并向某个电子邮箱发送邮件。箱发送邮件。11/27/2022广东金融学院62理解路径理解路径v什么是路径？什么是路径？路径是指文件或其它资源（如邮件或锚点等路径是指文件或其它资源（如邮件或锚点等）在本地计算机或网络中的存储位置，通常）在本地计算机或网络中的存储位置，通常用用URLURL（统一资源定位器）表示。（统一资源定位器）表示。文件链接通常要指定目标端点的文件位置，文件链接通常要指定目标端点的文件位置，因此创建超链接前，理解文件路径是非常关因此创建超链接前，理解文件路径是非常关键的一步。键的一步。11/27/2022广东金融学院72理解路径理解路径vURLURL的格式的格式 http:/http:/：指明文件在网络中传输的协议是：指明文件在网络中传输的协议是超文本传输协议。超文本传输协议。WebWeb服务器服务器IPIP或域名：用于指定是网络中的或域名：用于指定是网络中的哪一台计算机。哪一台计算机。文件目录：就是文件目录：就是WebWeb站点的目录，通常站点站点的目录，通常站点中的文件资源都放在这个目录中。中的文件资源都放在这个目录中。文件名：包括文件主名和扩展名。文件名：包括文件主名和扩展名。11/27/2022广东金融学院8http:/Web服务器IP地址或域名/文件目录./文件名2理解路径理解路径vURLURL的唯一性的唯一性 网络中计算机的网络中计算机的IPIP地址（或域名）唯一。地址（或域名）唯一。网络中每台计算机中的文件路径唯一。网络中每台计算机中的文件路径唯一。因此，由于因此，由于URLURL特殊的层次性结构，使得在特殊的层次性结构，使得在网络中，每个文件的网络中，每个文件的URLURL是唯一的。是唯一的。11/27/2022广东金融学院92理解路径理解路径v路径的类型路径的类型 绝对路径绝对路径 也称绝对也称绝对URLURL，它给出链接目标文件的完整，它给出链接目标文件的完整URLURL地地址，包括传输协议在内，如址，包括传输协议在内，如http:/ 相对路径相对路径 也称为相对也称为相对URLURL，是指以当前文件所在位置为起，是指以当前文件所在位置为起点到目标文档所经过的路径，如点到目标文档所经过的路径，如“dreamweaver8/contents.html”dreamweaver8/contents.html”。若要将当。若要将当前文件与处在同一文件夹中的另一个文件链接，前文件与处在同一文件夹中的另一个文件链接，或者将同一站点中不同文件夹下的文件相互链接或者将同一站点中不同文件夹下的文件相互链接，都可以使用相对路径，此时可以省去当前文件，都可以使用相对路径，此时可以省去当前文件与目标文档完整与目标文档完整URLURL中的相同部分，只留下不同中的相同部分，只留下不同部分。部分。11/27/2022广东金融学院112理解路径理解路径v路径的类型路径的类型 根相对路径根相对路径 是指从站点根目录到被链接文件的路径，如是指从站点根目录到被链接文件的路径，如“/dreamweaver8/contents.html”/dreamweaver8/contents.html”。实际上，。实际上，根相对路径是站点内部的根相对路径是站点内部的“绝对路径绝对路径”，因此服，因此服务器地址加上根相对路径就形成绝对路径了。务器地址加上根相对路径就形成绝对路径了。根相对路径适用于当前网页文档和链接目标端点根相对路径适用于当前网页文档和链接目标端点文件处于相同站点中的情况。文件处于相同站点中的情况。11/27/2022广东金融学院123文本链接、下载链接和图像链接文本链接、下载链接和图像链接v文本超链接文本超链接 是指源端点是文本的超链接。是指源端点是文本的超链接。v下载链接下载链接 是一种特殊的文件超链接，即当打开超链接是一种特殊的文件超链接，即当打开超链接的浏览器不能显示（或默认显示）目标端点的浏览器不能显示（或默认显示）目标端点文件中的内容时，浏览器将自动提示下载对文件中的内容时，浏览器将自动提示下载对话框。话框。v图像超链接图像超链接 是指源端点是图像中热点的超链接。是指源端点是图像中热点的超链接。11/27/2022广东金融学院133文本链接、下载链接和图像链接文本链接、下载链接和图像链接v新建超链接的方法新建超链接的方法 使用菜单命令使用菜单命令 使用使用“属性属性”面板面板11/27/2022广东金融学院144创建锚点链接和创建锚点链接和E-mail链接链接v锚点链接锚点链接 当网页内容很长时，可以使用锚点超链接快当网页内容很长时，可以使用锚点超链接快速定位到网页文档的指定位置，加快页面浏速定位到网页文档的指定位置，加快页面浏览速度。览速度。v创建锚点链接一般分为两个步骤：创建锚点链接一般分为两个步骤：首先，在页面的某处设置一个命名标记（即首先，在页面的某处设置一个命名标记（即锚点）；锚点）；其次，创建锚点链接，并使链接目标指向一其次，创建锚点链接，并使链接目标指向一个锚点。这样，浏览者单击锚点链接就可以个锚点。这样，浏览者单击锚点链接就可以跳转到锚点位置。跳转到锚点位置。11/27/2022广东金融学院154创建锚点链接和创建锚点链接和E-mail链接链接v创建锚点链接创建锚点链接11/27/2022广东金融学院164创建锚点链接和创建锚点链接和E-mail链接链接vE-mailE-mail超链接超链接 为了让浏览者单击为了让浏览者单击E-mailE-mail超链接时，能正常超链接时，能正常发送电子邮件，必须为发送电子邮件，必须为E-mailE-mail超链接指定一超链接指定一个合法的目标端点。个合法的目标端点。vE-mailE-mail超链接的目标端点格式为：超链接的目标端点格式为：mailto:mailto:电子邮件地址电子邮件地址v创建创建E-mailE-mail链接链接11/27/2022广东金融学院175制作导航条制作导航条v导航条的作用导航条的作用 导航条在整个网站中起着非常重要的作用，导航条在整个网站中起着非常重要的作用，它是引导浏览者进入站点每个栏目的重要入它是引导浏览者进入站点每个栏目的重要入口。口。导航条一般是由一组文本、按钮或图像组成导航条一般是由一组文本、按钮或图像组成的超链接，并且通常横向分布在网页的上部的超链接，并且通常横向分布在网页的上部区域，或者垂向分布在网页左侧或右侧。区域，或者垂向分布在网页左侧或右侧。当然由于网页的形式多样，个性化差异较大当然由于网页的形式多样，个性化差异较大，导航条不一定完全按照常规去设计，总的，导航条不一定完全按照常规去设计，总的原则是要简单、明了、清晰，能够方便引导原则是要简单、明了、清晰，能够方便引导浏览者浏览网站中的其它网页。浏览者浏览网站中的其它网页。11/27/2022广东金融学院185制作导航条制作导航条v创建导航条创建导航条11/27/2022广东金融学院196求职站点的页面导航求职站点的页面导航v个人求职站点整体架构个人求职站点整体架构11/27/2022广东金融学院20求职站点首页个人简历我的专业才艺展示求职意向我的同学母校风采我的相册给我留言6求职站点的页面导航求职站点的页面导航v个人求职站点整体架构个人求职站点整体架构11/27/2022广东金融学院21链接文本链接文本目标文件路径目标文件路径链接文本链接文本目标文件路径目标文件路径我的专业specialty.html母校风采school.html才艺展示gift.html我的相册album.html求职意向will.html给我留言messageboard.html我的同学schoolmate.html返回主页index.html7总结并布置作业总结并布置作业v总结总结 1)1)超链接和路径的概念超链接和路径的概念 2)2)常见的超链接形式及创建方法常见的超链接形式及创建方法 3)3)页面导航的制作方法页面导航的制作方法11/27/2022广东金融学院227总结并布置作业总结并布置作业v作业作业 1)1)给班级管理站点制作的一个页面导航结给班级管理站点制作的一个页面导航结构。构。基本要求：页面中应包含水平导航和垂直导基本要求：页面中应包含水平导航和垂直导航两种，其中垂直导航利用航两种，其中垂直导航利用“插入导航插入导航”对对话框制作，而水平导航采用鼠标移动图像实话框制作，而水平导航采用鼠标移动图像实现。此外，还应包含现。此外，还应包含“联系我们联系我们”、“加入加入收藏收藏”和和“设为主页设为主页”等链接。等链接。11/27/2022广东金融学院23LOGO