1、Dreamweaver课件,任务四 超级链接,课堂讲解,超级链接概念 超级链接分类 创建空链接创建文本超级链接创建电子邮件超级链接创建锚链接创建脚本链接使用跳转菜单创建图像超级链接 创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系,它是网页的灵魂,能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体,使浏览者能快速地访问到想要访问的页面。,超级链接,超级链接的分类(按要链接的文件所处的位置分类) 绝对链接(链接的文件位于站点外) 相对链接(链接的文件位于站点内) 空链接(链接的文件是本身) 注意:相对链接根据链接文件的参照点不同,又分为: 文档内绝对链接(链接文件的
2、参照点是根目录)不支持预览 文档内相对链接(链接文件的参照点是此文档所在文件夹),超级链接,超级链接的创建 1.绝对链接: 步骤:1):选中要设置链接的文本或图象 2):在属性检查器“链接”文本框中输入URL. 注意:URL:(统一资源定位符) 格式:protocol:/machine:port/directory/filename 协议名 主机名 端口 目录 文件名 例如:http:/ 注意:绝对链接常见于“友情链接”项,或网址类网站.,超级链接,超级链接的创建 2.相对链接: 步骤:1) 选中要设置链接的文本或图象 2) 在属性检查器中,单击“浏览”按钮选择链接的文件. 在属性检查器中,拖
3、拽“指向”按钮在站点列表中选 择链接文件. 按住Shift键拖拽到站点列表中的链接文件。 在属性检查器“链接”文本框中输入相对URL地址。 3.空链接: 步骤:1) 选中要设置链接的文本或图象 2) 在属性检查器中, “链接”文本框中输入# 或者输入javascript:;(javascript 一词后依次接一个冒 号和一个分号)建立空链接的目的只是为了应用行为,其他情况下不必建立。,为文字和图片设置常规超链接,要为文字设置超链接,应首先选中文字,然后单击“插入”栏“常用”类别中的“超级链接”按钮 ,打开“超级链接”对话框。,可以是内部链接或外部链接,设置在何处打开网页,“标题”编辑框用于设置
4、,当鼠标悬停在超链接上时出现的说明文字,超级链接,指向目标的链接 作用:设置链接文件的打开方式。 设置:选中已设置链接的对象,属性检查器中,目标项中选 择合适方式。 _blank : 在新窗口中打开链接 _self : 当前窗口打开链接(默认方式) _parent : 在父框架中打开链接 _top : 在最外层框架打开链接,取消超链接,要取消超链接,可在选中设置为超链接的文字后,删除属性面板中“链接”编辑框中的内容。,为图片设置超链接的方法同文字一样。,超级链接,几种特殊的超级链接 1.电子邮件链接 作用:单击此链接可以调用Outlook发出一封E-mail. 设置:选中文本或图象,在“链接”
5、框中输入: mailto: 或者单击“插入”栏“常用”类别中的“电子邮件链接” 按钮,在弹出的对话框中输入链接到的电子信箱地址即可。 特殊的邮件链接:mailto:邮件地址?subject=网友来信&cc=其他邮件地址&bcc=其他邮件地址 2.下载文件的链接 作用:单击此“链接”可下载文件。 设置:选中文本或图象,在属性检查器中选择“浏览”按钮选 择要下载的文件。(一般为压缩文件或可执行文件如rar、zip、exe),图片链接和下载链接,我们在上网时经常会碰到图片链接和下载链接,例如,单击网页中的某个小图片时会在新窗口中打开一幅大图片,或者单击某个链接会打开一个下载提示对话框等。这就是我们所
6、说的图片链接和下载链接。,图片链接,下载链接,超级链接,几种特殊的超级链接 3.锚点(命名锚记) 作用:让超级链接指向网页文件的某个位置 步骤:1)在网页文件的某个位置前插入锚点 插入工具栏/“锚点”按钮 2)为此锚点命名 (锚记名称要区分大小写,不能包含空白字符) 3)选择要设置链接的对象,在属性检查器中“链 接”框中输入:到锚点所在文件的链接#锚点名。 注意:如果要设置链接的对象与锚点在同一个网 页文件中,则直接输入:#锚点名。,超级链接,几种特殊的超级链接 4.创建脚本链接 作用:可以为文档中的任何链接附加行为 步骤:1)选中文本或者图像 2)在“链接”框中输入: javascript:
7、后跟一些 JavaScript 代码或一个函数调用。(在冒号与代码或调用之间不能键入空格。) 如:javascript:window.close(),可以把跳转菜单看作是一种超链接的集合,它以弹出式下拉菜单的形式在网页中展现出来。弹出菜单内的链接没有类型上的限制,可以是本地链接,也可以是到其他网站的链接。主要是到其他网站的链接,使用跳转菜单,设计好的跳转菜单及其属性面板,网页预览效果,定时自动跳转页面,自动跳转也叫自动重定向或自动转向,就是指当浏览者访问某个站点时,所访问的页面自动转向到其他网页的一种技术。,应用“定时自动跳转”,“刷新”文本框,热点链接,热点链接是针对图像而言,利用它可以为一
8、幅图像的不同区域添加不同的超链接。要为图像添加热点链接,可以使用图像属性面板中的地图组合按钮。,地图名称,多边形热点工具,椭圆形热点工具,矩形热点工具,插入导航条,导航条一般由图像或图像组组成,这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,管理超级链接见P97-P99,自动更新链接每当您在本地站点内移动或重命名文档时,Dreamweaver 都可更新起自以及指向该文档的链接。在将整个站点 (或其中完全独立的一个部分)存储在本地磁盘上时,此项功能最适用。启用自动链接更新1 选择“编辑”“首选参数”。2 在“首选参数 ”对话框中,从左侧的“分类”列表中选择“常规”。3 在“常规 ”首选参数的“文档选项”部分,从“移动文件时更新链接”弹出菜单中选择一个选项。,让网页中的链接更动态,新建CSS规则.在对话框中:“选择器类型”选择高级。“选择器”选择:a:hover; “定义在”选择:仅对该文档a:link 链接普通样式a:visited 链接访问过后的样式a:hover 鼠标经过时链接的样式a:active 鼠标按下去时链接的样式,