《超级链接的使用优秀课件.ppt》由会员分享，可在线阅读，更多相关《超级链接的使用优秀课件.ppt（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、超级链接的使用第1页，本讲稿共28页本课学习目标v理解超级链接的作用及类型v理解链接路径及各类型的使用v掌握文本和图片链接的创建方法v掌握Email、锚点链接的创建方法第2页，本讲稿共28页7.1超级链接概述7.1.1超级链接的概念及作用 超级链接（超链接或链接）是从源端点到目标端点的一种跳转，可以看作是一种文件的指针。它提供了相关联文件的路径，以指向目标端点的文件，并可跳转到相应的文件；它是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，但也可以是一幅图片、一个电子邮件地址或其他文档。在浏览器中，超链接通常在鼠标指向它的时候，会变成手形，单击即可
2、打开超链接。第3页，本讲稿共28页7.1.2 超文本链接标记v在HTML语言中，超文本链接标记通过锚标记和来实现。此标记需成对出现，以开始，结束。常用的属性有：href：定义链接目标。title：定义当鼠标移动到链接上时出现的提示文字。target：设定链接目标显示的窗口，如target=_bank表示在新窗口中打开目标。v例如：搜狐主页这段代码表示：当鼠标移动到“搜狐主页”上要显示“”当单击“搜狐主页”这几个文字时，将中打开“”网站主页。第4页，本讲稿共28页“目标(R)”的各选项作用如下：v _blank_blank：将链接的文档在一个新的、未命名的浏览器窗口中打开。v _parent_p
3、arent：将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。v _self_self：将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。v _top_top：将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。l第5页，本讲稿共28页 在一个文档中可以创建几种类型的链接(链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接)：(1)文本、图片、热点链接 (2)命名锚记链接，此类链接跳转至文档内的特定位置。(3)电子邮件链接，此类链接新建一个收件人
4、地址已经填好的空白电子邮件。(4)空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。注意：创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。7.1.3超级链接的类型第6页，本讲稿共28页链接路径的类型：1、绝对路径2 2、相对路径、相对路径(1)(1)文档相对路径文档相对路径(2)(2)根目录相对路径根目录相对路径7.1.4 链接路径第7页，本讲稿共28页1、绝对地址 绝对路径提供了所链接网页的完整URL。例如：http:/ 绝对路径由http:/、ftp:/等开始的，它不仅提供所链接文档的完整 URL，而且包括所
5、使用的协议（如对于 Web服务为http:/，FTP服务为ftp:/）。注意：尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它服务器，则所有本地绝对路径链接都将断开。若本地链接使用相对路径还能在需要在站点内移动文件时，提供更大的灵活性。第8页，本讲稿共28页2、相对地址 相对地址是由文件名及其扩展名组成的，并且假设URL指向位于同一台WEB服务器上的文件。相对路径的基本思想是省略掉对于当前网页和所链接的网页都相同的绝对URL部分，而只提供不同的路径部分。第9页，本讲稿共28页1相对路径(1)文档相对路径 在当前网页与所链接的网页处
6、于同一文件夹内，而且可能一直保持这种状态的情况下，文档相对路径特别有用。文档相对路径也可用来链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前网页到所链接网页的路径。文档相对路径有以下三种形式：链接目标与当前网页在同一文件夹中时，只需提供被链接网页的文件名即可。链接目标位于当前网页所在文件夹的子文件夹中时，需要提供子文件夹名和文件名，中间用正斜杠(/)分隔。如：“dreamweaver/main.html”。链接目标位于当前网页所在文件夹的父文件夹中时，要在文件名前加上“./”(“.”表示上级文件夹)。第10页，本讲稿共28页 链接目标与当前网页在同链接目标与当前网页在同一文件夹中
7、时，只需提供被链一文件夹中时，只需提供被链接网页的文件名即可。如：接网页的文件名即可。如：“herf.htmlherf.html”链接目标位于当前网页所在文链接目标位于当前网页所在文件夹的子文件夹中时，需要提供子件夹的子文件夹中时，需要提供子文件夹名和文件名，中间用正斜杠文件夹名和文件名，中间用正斜杠(/)(/)分隔。如：分隔。如：“file/herf2.htmlfile/herf2.html”。链接目标位于当前网页所链接目标位于当前网页所在文件夹的父文件夹中时，要在文件夹的父文件夹中时，要在文件名前加上在文件名前加上“././”(“.”表示上级文件表示上级文件夹夹)。如：。如：“./inde
8、x.html./index.html”第11页，本讲稿共28页第12页，本讲稿共28页 3、站点根目录相对路径 站点根目录相对路径以一个正斜杠(/)开始，该正斜杠表示站点根文件夹。如，/file/herf2.htm 是文件(herf2.htm)的站点根目录相对路径，该文件位于站点根文件夹的file子文件夹中。在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接。第13页，本讲稿共28页1、实例创意 下面以实例制作一个简单网页，实例中只用到简单的几个页面元素。各个文件的文
9、件名及位置如图如示。7.2.17.2.1实例：创建超级链接（文本和图片）实例：创建超级链接（文本和图片）7.2创建超级链接第14页，本讲稿共28页方法一：选择文字，然后单击属性面板上“链接”文本框右侧的文件夹图标，弹出“选择文件”对话框，选择文件单击“确定”按钮关闭对话框。方法二：将鼠标光标定位于页面中的文字“关于本站”后，选择主菜单“【插入】【超级链接】”，弹出“超级链接”对话框，输入相应内容。方法三：打开属性面板，选择“链接(L)”右边的“指向文件”图标“”，拖动该图标至站点目录下的链接文件，即可自动生成链接。方法四：打开属性面板，在“链接(L)”直接输入链接地址，如要链接到站点内的其他文
10、档，输入目标文件的具体路径与文件名；要链接到站点以外的文档，则输入完整 URL，而且包括所使用的协议。第15页，本讲稿共28页7.2.2实例：创建电子邮件链接1、实例创意 电子邮件链接在网页中也经常可见，在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮件，点击电子邮件链接即可自动打开Microsoft Outlook Express，并自动创建新邮件。第16页，本讲稿共28页方法一：选中所要创建电子邮件的文本，“”，属性面板的“链接(L)”输入mailto:即可，如图5-1-13所示。第17页，本讲稿共28页方法二：将鼠标光标定位于页面中要显示电子邮件的地方，选择主菜单“【插入】【电
11、子邮件链接(L)】”，弹出“电子邮件链接”对话框，输入相应内容后单击“确定”按钮，如图5-1-14所示。“电子邮件链接电子邮件链接”对话框中，设置以下选项：对话框中，设置以下选项：v v文本文本文本文本。显示在页面中的文字，可以为。显示在页面中的文字，可以为EmailEmail地址或其它文地址或其它文字。字。v vE-mailE-mailE-mailE-mail。邮件地址。邮件地址。第18页，本讲稿共28页7.2.3实例：创建锚点链接1、实例创意 锚点即为一个文档中的某一个特定的位置的标记，通过首先创建锚点，可使某个超级链接链接到文档的某个锚点，方便文档之间的跳转。锚点通常放在文档的特定主题处
12、或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。创建到锚点的链接的过程分为两步。首先，创建锚点，然后创建到该锚点的链接。第19页，本讲稿共28页注意：1.创建到锚点的链接，会在锚点名称前加一个“”号，表示后面为一个锚点的名称。2.若要创建到其他文档的锚点，只要在文档名后加“锚点名称”即可。如要链接到abount.htm文档中一个名为aboutme的锚点，只需在链接中输入“about.htm#aboutme”即可。如图所示。3.选中打开的文档中文本或图像，并拖动到所要链接的锚点，也同样可以创建到锚点的链接。直接输入：about.htm#aboutme第20页，本讲稿共2
13、8页综合练习一、选择题 1、以下哪个不是绝对路径？A）ftp:/ B）http:/ C）http:/ D）./index.asp 2、以下哪个不能创建超级链接？A）文本 B）图片 C）邮件地址 D）视频 二、填空题1超级链接路径可分为 、课后练习：如何在网页中创建文件下载链接？第21页，本讲稿共28页本课小结v超级链接是网站及网页的基本元素，要建立一个能够实际应用的网站，必须将网站中的各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。v主要介绍了Dreamweaver 超级链接的概念、类型和使用方法，包括文本链接、图片链接、Email链接、锚点链接。v 超级链接可以分为多
14、种类型：文字、图片、Email、锚点、热区等,应熟练掌握这些类型。第22页，本讲稿共28页本课学习目标v掌握文本和图片链接的创建方法v掌握Email、锚点链接的创建方法v掌握热区链接的创建方法v掌握链接效果的编辑方法第23页，本讲稿共28页5.1.5 实例：创建热区链接1、实例创意 一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。热区的形状有三种：矩形、圆形与多边形，在Dreamweaver 的“设计视图”模式下，这些热区是可见的，但在WEB浏览内这些边框却是不可
15、见的，因此有的必要在图像地图内添加一些文本标识，为浏览者了解热点的确切位置提供帮助。第24页，本讲稿共28页第25页，本讲稿共28页5.2编辑链接效果5.2.1 实例：自定义链接颜色 链接颜色可分为三种状态：链接颜色（Link）、访问过的链接颜色（Visited）、活动链接颜色（Active），通过CSS设置，链接还有第四种状态，即指向链接时的动态颜色（Hover），默认的文字链接样式都是带下划线的效果。在Dreamweaver中允许用户自定义链接的颜色（如果通过CSS的设置还可以编辑各种链接的样式）。第26页，本讲稿共28页 在“页面属性”对话框中，通过颜色拾取器或直接输入各颜色代码。如图所示。第27页，本讲稿共28页四、上机练习 1创建一组html文件，包括：首页(index.htm)、我的个人信息(info.htm)、我的爱好(favorite.htm)、我的相册(photos.htm)，并在每个文件中添加一组链接，首页（index.htm）如图1所示。每个文件中都包含这组链接第28页，本讲稿共28页