超级链接的使用精选文档.ppt

《超级链接的使用精选文档.ppt》由会员分享，可在线阅读，更多相关《超级链接的使用精选文档.ppt（28页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、超级链接的使用本讲稿第一页，共二十八页本课学习目标v理解超级链接的作用及类型v理解链接路径及各类型的使用v掌握文本和图片链接的创建方法v掌握Email、锚点链接的创建方法本讲稿第二页，共二十八页7.1超级链接概述7.1.1超级链接的概念及作用 超级链接（超链接或链接）是从源端点到目标端点的一种跳转，可以看作是一种文件的指针。它提供了相关联文件的路径，以指向目标端点的文件，并可跳转到相应的文件；它是文档与文档之间的链接，当单击它时，超链接可指向另外一个页面或文件。链接目标通常是另外一个网页，但也可以是一幅图片、一个电子邮件地址或其他文档。在浏览器中，超链接通常在鼠标指向它的时候，会变成手形，单击

2、即可打开超链接。本讲稿第三页，共二十八页7.1.2 超文本链接标记v在HTML语言中，超文本链接标记通过锚标记和来实现。此标记需成对出现，以开始，结束。常用的属性有：href：定义链接目标。title：定义当鼠标移动到链接上时出现的提示文字。target：设定链接目标显示的窗口，如target=_bank表示在新窗口中打开目标。v例如：搜狐主页这段代码表示：当鼠标移动到“搜狐主页”上要显示“”当单击“搜狐主页”这几个文字时，将中打开“”网站主页。本讲稿第四页，共二十八页“目标(R)”的各选项作用如下：v _blank_blank：将链接的文档在一个新的、未命名的浏览器窗口中打开。v _pare

3、nt_parent：将链接的文档在该链接所在框架的父框架或父窗口中打开。如果包含链接的框架不是嵌套框架，则所链接的文档在整个浏览器窗口中打开。v _self_self：将链接的文档在链接所在的同一框架或窗口中打开，此目标为默认值，即不指定目标，则在同一框架或窗口打开文档。v _top_top：将链接的文档在整个浏览器窗口中打开，从而取代当前窗口的所有框架。l本讲稿第五页，共二十八页 在一个文档中可以创建几种类型的链接(链接到其它文档或文件（如图形、影片、PDF 或声音文件）的链接)：(1)文本、图片、热点链接 (2)命名锚记链接，此类链接跳转至文档内的特定位置。(3)电子邮件链接，此类链接新建

4、一个收件人地址已经填好的空白电子邮件。(4)空链接和脚本链接，此类链接使您能够在对象上附加行为，或者创建执行 JavaScript 代码的链接。注意：创建链接之前，一定要清楚文档相对路径、站点根目录相对路径以及绝对路径的工作方式。7.1.3超级链接的类型本讲稿第六页，共二十八页链接路径的类型：1、绝对路径2 2、相对路径、相对路径(1)(1)文档相对路径文档相对路径(2)(2)根目录相对路径根目录相对路径7.1.4 链接路径本讲稿第七页，共二十八页1、绝对地址 绝对路径提供了所链接网页的完整URL。例如：http:/ 绝对路径由http:/、ftp:/等开始的，它不仅提供所链接文档的完整 UR

5、L，而且包括所使用的协议（如对于 Web服务为http:/，FTP服务为ftp:/）。注意：尽管对本地链接（即到同一站点内文档的链接）也可使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其它服务器，则所有本地绝对路径链接都将断开。若本地链接使用相对路径还能在需要在站点内移动文件时，提供更大的灵活性。本讲稿第八页，共二十八页2、相对地址 相对地址是由文件名及其扩展名组成的，并且假设URL指向位于同一台WEB服务器上的文件。相对路径的基本思想是省略掉对于当前网页和所链接的网页都相同的绝对URL部分，而只提供不同的路径部分。本讲稿第九页，共二十八页1相对路径(1)文档相对路径 在当前网

6、页与所链接的网页处于同一文件夹内，而且可能一直保持这种状态的情况下，文档相对路径特别有用。文档相对路径也可用来链接到其它文件夹中的文档，方法是利用文件夹层次结构，指定从当前网页到所链接网页的路径。文档相对路径有以下三种形式：链接目标与当前网页在同一文件夹中时，只需提供被链接网页的文件名即可。链接目标位于当前网页所在文件夹的子文件夹中时，需要提供子文件夹名和文件名，中间用正斜杠(/)分隔。如：“dreamweaver/main.html”。链接目标位于当前网页所在文件夹的父文件夹中时，要在文件名前加上“./”(“.”表示上级文件夹)。本讲稿第十页，共二十八页 链接目标与当前网页在同一文链接目标与

7、当前网页在同一文件夹中时，只需提供被链接网页件夹中时，只需提供被链接网页的文件名即可。如：的文件名即可。如：“herf.htmlherf.html”链接目标位于当前网页所链接目标位于当前网页所在文件夹的子文件夹中时，需在文件夹的子文件夹中时，需要提供子文件夹名和文件名，要提供子文件夹名和文件名，中间用正斜杠中间用正斜杠(/)(/)分隔。如：分隔。如：“file/herf2.htmlfile/herf2.html”。链接目标位于当前网页所链接目标位于当前网页所在文件夹的父文件夹中时，在文件夹的父文件夹中时，要在文件名前加上要在文件名前加上“././”(“.”表示上级文件夹表示上级文件夹)。如：。

8、如：“./index.html./index.html”本讲稿第十一页，共二十八页本讲稿第十二页，共二十八页 3、站点根目录相对路径 站点根目录相对路径以一个正斜杠(/)开始，该正斜杠表示站点根文件夹。如，/file/herf2.htm 是文件(herf2.htm)的站点根目录相对路径，该文件位于站点根文件夹的file子文件夹中。在某些 Web 站点中，需要经常在不同文件夹之间移动 HTML 文件，在这种情况下，站点根目录相对路径通常是指定链接的最佳方法。移动含有根目录相对链接的文档时，不需要更改这些链接。本讲稿第十三页，共二十八页1、实例创意 下面以实例制作一个简单网页，实例中只用到简单的几

9、个页面元素。各个文件的文件名及位置如图如示。7.2.17.2.1实例：创建超级链接（文本和图片）实例：创建超级链接（文本和图片）7.2创建超级链接本讲稿第十四页，共二十八页方法一：选择文字，然后单击属性面板上“链接”文本框右侧的文件夹图标，弹出“选择文件”对话框，选择文件单击“确定”按钮关闭对话框。方法二：将鼠标光标定位于页面中的文字“关于本站”后，选择主菜单“【插入】【超级链接】”，弹出“超级链接”对话框，输入相应内容。方法三：打开属性面板，选择“链接(L)”右边的“指向文件”图标“”，拖动该图标至站点目录下的链接文件，即可自动生成链接。方法四：打开属性面板，在“链接(L)”直接输入链接地址

10、，如要链接到站点内的其他文档，输入目标文件的具体路径与文件名；要链接到站点以外的文档，则输入完整 URL，而且包括所使用的协议。本讲稿第十五页，共二十八页7.2.2实例：创建电子邮件链接1、实例创意 电子邮件链接在网页中也经常可见，在网页中添加电子邮件的目的在于可以使网页的浏览者方便发送邮件，点击电子邮件链接即可自动打开Microsoft Outlook Express，并自动创建新邮件。本讲稿第十六页，共二十八页方法一：选中所要创建电子邮件的文本，“”，属性面板的“链接(L)”输入mailto:即可，如图5-1-13所示。本讲稿第十七页，共二十八页方法二：将鼠标光标定位于页面中要显示电子邮件

11、的地方，选择主菜单“【插入】【电子邮件链接(L)】”，弹出“电子邮件链接”对话框，输入相应内容后单击“确定”按钮，如图5-1-14所示。“电子邮件链接电子邮件链接”对话框中，设置以下选项：对话框中，设置以下选项：v v文本文本文本文本。显示在页面中的文字，可以为。显示在页面中的文字，可以为EmailEmail地址或其它文地址或其它文字。字。v vE-mailE-mailE-mailE-mail。邮件地址。邮件地址。本讲稿第十八页，共二十八页7.2.3实例：创建锚点链接1、实例创意 锚点即为一个文档中的某一个特定的位置的标记，通过首先创建锚点，可使某个超级链接链接到文档的某个锚点，方便文档之间的

12、跳转。锚点通常放在文档的特定主题处或顶部。然后可以创建到这些锚点的链接，这些链接可快速将访问者带到指定位置。创建到锚点的链接的过程分为两步。首先，创建锚点，然后创建到该锚点的链接。本讲稿第十九页，共二十八页注意：1.创建到锚点的链接，会在锚点名称前加一个“”号，表示后面为一个锚点的名称。2.若要创建到其他文档的锚点，只要在文档名后加“锚点名称”即可。如要链接到abount.htm文档中一个名为aboutme的锚点，只需在链接中输入“about.htm#aboutme”即可。如图所示。3.选中打开的文档中文本或图像，并拖动到所要链接的锚点，也同样可以创建到锚点的链接。直接输入：about.htm

13、#aboutme本讲稿第二十页，共二十八页综合练习一、选择题 1、以下哪个不是绝对路径？A）ftp:/ B）http:/ C）http:/ D）./index.asp 2、以下哪个不能创建超级链接？A）文本 B）图片 C）邮件地址 D）视频 二、填空题1超级链接路径可分为 、课后练习：如何在网页中创建文件下载链接？本讲稿第二十一页，共二十八页本课小结v超级链接是网站及网页的基本元素，要建立一个能够实际应用的网站，必须将网站中的各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。v主要介绍了Dreamweaver 超级链接的概念、类型和使用方法，包括文本链接、图片链接、Ema

14、il链接、锚点链接。v 超级链接可以分为多种类型：文字、图片、Email、锚点、热区等,应熟练掌握这些类型。本讲稿第二十二页，共二十八页本课学习目标v掌握文本和图片链接的创建方法v掌握Email、锚点链接的创建方法v掌握热区链接的创建方法v掌握链接效果的编辑方法本讲稿第二十三页，共二十八页5.1.5 实例：创建热区链接1、实例创意 一张图片内可以创建包含多个链接，图像内不同的区域或文字都可以指向具体链接目标。图像图内创建链接的区域称为“热区”，热区与链接目标逐一对应，单击热区后，即可对链接目标进行跟踪、访问。热区的形状有三种：矩形、圆形与多边形，在Dreamweaver 的“设计视图”模式下，

15、这些热区是可见的，但在WEB浏览内这些边框却是不可见的，因此有的必要在图像地图内添加一些文本标识，为浏览者了解热点的确切位置提供帮助。本讲稿第二十四页，共二十八页本讲稿第二十五页，共二十八页5.2编辑链接效果5.2.1 实例：自定义链接颜色 链接颜色可分为三种状态：链接颜色（Link）、访问过的链接颜色（Visited）、活动链接颜色（Active），通过CSS设置，链接还有第四种状态，即指向链接时的动态颜色（Hover），默认的文字链接样式都是带下划线的效果。在Dreamweaver中允许用户自定义链接的颜色（如果通过CSS的设置还可以编辑各种链接的样式）。本讲稿第二十六页，共二十八页 在“页面属性”对话框中，通过颜色拾取器或直接输入各颜色代码。如图所示。本讲稿第二十七页，共二十八页四、上机练习 1创建一组html文件，包括：首页(index.htm)、我的个人信息(info.htm)、我的爱好(favorite.htm)、我的相册(photos.htm)，并在每个文件中添加一组链接，首页（index.htm）如图1所示。每个文件中都包含这组链接本讲稿第二十八页，共二十八页