1、第 三 章,创建超级链接,课堂讲解,超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建下载超链接创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。1）什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。,超级链接分类,绝对超级链接 文档相对路径 站点根目录相对路径,绝对
2、超级链接,绝对超级链接就是形如“http:/www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。,文档相对路径,使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。,站点根目录相对路径,站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站
3、点根目录，在同一个站点中网页的超级链接也可采用这种方法。,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,2、创建文字链接 （1）选中文本 （2）打开属性面板，在【链接】文本框里输入链接地址，或指向文件。 （3）保存后按F12预览，当鼠标点击文本时会直接链接到刚才输入的网站。,创建锚链接,创建命名锚记 链接命名锚记,动手实践,11,二、创建超链接,1)到网站内页面的超链接内部链接（网站内部页面之间创建相互链接关系）步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件,步骤2从“目标”下拉菜单
4、中，选择文档的打开位置。_self：会在当前网页所在的窗口或框架中打开（默认方式）。_blank :每个链接会创建一下新的窗口。_new：会在同一个刚创建的窗口中打开。_parent：如果是嵌套的框架，则在父框架中打开。_top：会在完整的浏览器窗口中打开。,2)到网站外页面的超链接外部链接,步骤1 选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如http:/步骤2 然后在“目标”下拉菜单中设置这个链接的目标窗口。内部链接这种链接的目标点是同个网站中的其他网页（文档），称为内部链接外部链接这种链接的目标点是不同站点或本站点以外的网页（文档），称为外部链接。注意：链接中
5、使用完整的URL地址 如：http:/ http:/ （是浏览网页网络协议） （域名）,3)链接样式,链接颜色：指定应用于链接文字的颜色已访问链接：指定链接被访问过的颜色变换图像链接：指定当鼠标位于链接上时的颜色。活动链接：指定但鼠标在链接上点击时的颜色。,4)到网页某一特定位置的超链接锚点链接,锚点链接这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以跳转到其他网页中的某一指定位置上。,步骤1 创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。步骤2 属性面板的链接栏中直接输入 “# 锚点名”注意：1）如果链接的目标锚点标记在
6、当前页面即输入 # 锚点名；2）如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“# 锚点名”,18,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,创建锚记链接：（1）复制一篇文章，在顶部将大纲列出1. 2 3（2）将光标放到每一段前依次添加锚记点，英文命名（3）选中大纲1.，在属性面板下【链接】中输入“#英文名”（5）重复操作，保存F12浏览,创建回到首页,Copyright 2010-2
7、012 Hdwnt Inc. All Rights Reserved.,22,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,1、创建空链接 有时制作网页只是为了测试一下页面，这时我们就需要使用空链接。 （1）选中要创建空链接的对象，打开属性面板 （2）在【链接】文本框里输入“#”号 （3）保存，F12键浏览，当光标指向链接对象时，光标
8、会 变为小手的形状，这就创建了空链接,二、链接分类,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。,创建电子邮件链接 与其他链接的区别是，电子邮件链接并不是移动到特定的站点或网页文档，而是直接调用了可发送邮件的程序,创建电子邮件链接,（1）将光标放在需要插入邮件地址的位置（2）执行【插入】-【电子邮件链接】，打开对话框（3）在【文本】中输入电子邮件链接要显示在页面上的文本，在【E-mail】中输入要链接的邮箱地址,创建图像超级链接,为一般图像创建超级链接 创建图像热点超级链接,为一般图像创建超级链接,3、创建图像链接 创建图
9、像链接可以单击图像跳转到相关的浏览页面，是网页设计者常用的一种链接方式。 （1）在文档中插入一幅图像 （2）选择该图像，打开属性面板 （3）在【链接】文本框中输入链接地址或指向文件。 （4）保存并浏览,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver cs5的图像热点超级链接功能就能避免这个问题。,创建热点链接注意：热点链接只针对图像 热点工具：矩形热点、椭圆形热点、多边形热点 如果一个文档中只有一幅图像，而又想在这幅图像的不同位置创建多个链接
10、，这时用图像链接的方法是行不通的。只能将图像划分为多个区域作为链接的热点。,创建热点链接,（1）选择热点绘制工具，绘制热点 （2）打开属性面板在【链接】输入链接方向，确定目标,创建下载链接常用对象为：.doc、.ppt、.exe、.rar、.zip （1）选中文本 （2）单击【链接】文本框右侧的“浏览文件”按钮，选择文件 （3）将文件保存在站点下 （4）单击【确定】按钮，保存并浏览,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,35,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,
11、36,创建导航条,插入导航条 编辑导航条,插入导航栏目插入跳转菜单,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,38,多项选择题,在dreamweaver中，热点工具有哪几项？（A）矩形工具（B）椭圆形工具（C）三角形工具（D）多边形工具,多项选择题,在dreamweaver中，可以绘制出的热点形状有：（A）矩形（B）椭圆形（C）三角形（D）多边形,HTML,1、超链接使用的是.标记2、空链接：.3、文字链接：文字4、图像链接： 图像,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved
12、.,42,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,一、了解超链接,1）什么是超链接所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,二、创建超链接,1)到网站内页面的超链接内部链接（网站内部页面之间创建相互链接关系）步骤1选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,步骤2从“目
13、标”下拉菜单中，选择文档的打开位置。_self：会在当前网页所在的窗口或框架中打开（默认方式）。_blank :每个链接会创建一下新的窗口。_new：会在同一个刚创建的窗口中打开。_parent：如果是嵌套的框架，则在父框架中打开。_top：会在完整的浏览器窗口中打开。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,2)到网站外页面的超链接外部链接,步骤1 选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如http:/步骤2 然后在“目标”下拉菜单中设置这个链接的目标窗口。内部链接这种链接的目标点是同个网站中的其他网页（文档），称为内部链接外部链接这种链
14、接的目标点是不同站点或本站点以外的网页（文档），称为外部链接。注意：链接中使用完整的URL地址 如：http:/ http:/ （是浏览网页网络协议） （域名）,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,3)链接样式,链接颜色：指定应用于链接文字的颜色已访问链接：指定链接被访问过的颜色变换图像链接：指定当鼠标位于链接上时的颜色。活动链接：指定但鼠标在链接上点击时的颜色。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,4)到网页某一特定位置的超链接锚点链接,锚点链接这种链接的目标端点是网页中的命名锚点，利用这种链接，可以跳转到当前网页中的某一指定位置上，也可以
15、跳转到其他网页中的某一指定位置上。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,步骤1 创建命名锚记，就是在网页中设置位置标记，并给该位置一个名称，以便引用。步骤2 属性面板的链接栏中直接输入 “# 锚点名”注意：1）如果链接的目标锚点标记在当前页面即输入 # 锚点名；2）如果链接的目标锚点标记在其他网页，即要输入目标网页的地址和名称，然后再输入“# 锚点名”,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,50,Copyright 2010-2012 Hdwnt Inc. All Rights Reserved.,51
16、,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,5)其他一些链接。,A. 创建E-mail电子邮件链接 Email链接单击这种链接，可以启动电子邮件程序（例如：Offiece办公软件中的Outlook）书写邮件，并发送到指定的地址。步骤1选中文本和图像步骤2插入栏常用电子邮件链接输入邮件地址或在属性面板的链接栏中直接输入 “mailto:邮件地址”,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,B. 创建下载链接：当被链接的文件是exe文件或zip、rar类型的文件时，浏览器无法直接打开，便会提示文件会被下载，这就是网上下载的方法。C. 创建空链接：空链接用来激
17、活页面中的对象或文本。当文本或对象被激活后，可以为之添加行为。方法：选中要制作空链接的对象，在链接文本框中直接输入。在一般站点首页的导航栏中的首页链接，就可以是一个空链接,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,三、图像热区链接,图像热区指在一幅图片上创建多个区域（热点），并可可以点击触发。当用户单击某个热点时，会发生某种链接或行为。步骤：1.选中图像2.在图像属性面板中，使用热区工具（矩形、椭圆、多边形），在图像上划分热区。3.为绘制的每一个热区设置不同的链接地址和替代文字。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,四、创建图像导航条使用鼠标经过变
18、换图像的特效，创建图像导航条,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,五、创建跳转菜单跳转菜单是网页中的弹出式菜单，可以创建任何文件类型的链接。步骤：1、插入栏表单跳转菜单2、在“插入跳转菜单”对话框中，单击号添加菜单项3、在“选择时。转到URL”文本框中，输入该文件的路径。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,六、脚本链接,通过连接触发脚本命令1. 添加到收藏夹：javascript:window.external.addFavorite(http:/,我的足球网)2. 表示关闭窗口：javascript:window.close()3. 表示
19、弹出一个提示对话框：javascript:alert(hello！)4. 设置为默认主页：（需通过空链接#触发onClick事件）onClick=this.style.behavior=url(#default#homepage);this.setHomePage(http:/ http:/ :,七、超链接的管理1、链接路径 对链接路径的正确理解是确保链接有效的先决条件。链接的路径有3种表达方式1）绝对路径：如果在链接中使用完整的URL（统一资源定位符）地址，这种链接路径就称作绝对路径。 一般用于链接外部网站或外部文件资源时，例如：http:/,:计算机基础与实训教材系列系列丛书官方网站 ht
20、tp:/ :,2）相对于文档路径：表述源端点与链接目标端点之间的相互位置。一般我们默认使用这种方式链接同站点的不同文件。用“. . / ”上一层的文件夹3）相对于站点根目录路径: 所有链接的路径都是从站点的根目录开始的。“ / ”表示根目录。,:计算机基础与实训教材系列系列丛书官方网站 http:/ :,2、自动更新链接 当文件的位置被改动时，自动的更新该网页中的链接路径，同时也自动更新其他网页链接到这个网页的路径。3、检查链接,实验 命名锚站示例,使用图像使用缩略图,即用一幅文件较小的副本图片来代替原来较大的图片，将其加入到页面中，再在较小的副本图片上创建一个指向原来的大图片的链接。这个副本图片称为“缩略图”。,
