1、1,2018/3/29,第5章 Dreamweaver中的超级链接,了解超级链接的概念。掌握超级连接的分类。掌握各种类型的超级链接的设置方法。掌握设置跳转菜单和脚本链接的方法,学习目标:,2,2018/3/29,5.1超级链接的概念,1.超级链接的类型 根据创建链接对象的不同,可以将超级链接分为文链接、图像链接、表单链接 。 根据目标端点的位置及方式的不同,可以将超级链接分为外部链接、内部链接、局部链接和电子邮件链接,超级链接本质上属于网页的一部分,通过它实现了站点内页面之间以及不同站点页面间的跳转。,3,2018/3/29,5.1超级链接的概念,2.超级链接的路径, 绝对路径链接:主要用于创
2、建具有固定网址的外部链接,如友情链接等。创建绝对路径链接时,需要给出目标端点完整的 URL 地址,如 http:/。 文档相对路径链接:主要用于创建站点的内部链接,它使用目标端点页面相对于当前页面所在的位置来创建链接路径。 如:同一文件夹中,把exp1.html文件链接到exp3.html文件,那么exp1.html就是相对路径。站点根目录相对路径链接:和文档相对路径链接相似,但使用的参照是站点的根目录。以一个“/”作为起始字符,该“/”代表的就是根文件夹。,4,2018/3/29,5.2基本的超级链接,1.创建文本链接,文本链接是最常见的一种链接形式,创建过程:首先在页面上选中链接文本对象,
3、然后在其属性检查器的“链接“下拉列表框中设置目标端点,如果链接的目标端点位于站点内,用户可以单击右侧的“文件”按钮,打开“选择文件”对话框,从中指定要跳转到的页面。,5,2018/3/29,设置好了目标端点后,用户还需要从“目标”下拉列表框中选择以何种方式跳转到目标页面。, _blank:单击文本链接后,目标端点页面会在一个新窗口中打开。 _parent:单击文本链接后,在上一级浏览器窗口中显示目标端点页面,这种情况在框架页面中比较常见。 _self:Dreamweaver 的默认设置,单击文本链接后,在当前浏览器窗口中显示目标端点页面。 _top:单击文本链接后,在最顶层的浏览器窗口中显示目
4、标端点页面。,6,2018/3/29,5.2基本的超级链接,2.创建图像链接,图像链接分为两种: 一种是为整体图像创建链接 另一种是为图像的部分区域创建的热区链接,7,2018/3/29,5.2基本的超级链接,3.创建锚点链接,锚点链接又称为页内链接,它通过对文档中指定的位置命名,实现单击锚点链接而直接跳转到该命名位置的效果。,创建锚点链接需要分两个步骤:首先定义命名锚点,然后创建到这个命名锚点的链接。,8,2018/3/29,9,2018/3/29,命名锚点链接的创建过程:,将光标置于页首需要插入命名锚点的位置,在本例中位置为文章标题的左下部。选择“插入”“命名锚记”命令,打开“命名锚记”对
5、话框。输入锚记的名称在网页文档的左上角“插入标题文字”文本部分设置锚点链接。选择“插入标题文字”文本,在其“属性”窗口的“链接”文本框中输入“#art1”,这样锚点链接就设置好了,10,2018/3/29,5.2基本的超级链接,4.创建电子邮件链接,在进行“链接”属性设置时,不要将“mailto”写成“mail to”,否则将不能链接到指定页面。,注意,电子邮件链接,通常会启动机器上安装的电子邮件客户端程序。,11,2018/3/29,5.2基本的超级链接,5.创建其他特殊链接,下载链接,下载链接在软件下载网站和源代码下载网站应用得比较多。下载链接的创建方法和一般链接的创建方法相同,只是所链接
6、的内容是一个软件文件,而不是网页文档、命名锚记或电子邮件。当单击下载链接时,会弹出“文件下载”对话框,单击“保存”按钮,即可将链接的软件下载到本地计算机中,12,2018/3/29,空链接,空链接实际上是一个未设计的链接,利用空链接可激活页面上的对象或文本。一旦对象或文本被激活,当光标经过该链接时,设计者便可为其附加行为以交换图片或显示层。要创建空链接,用户只需在选定文字或图片后,在属性检查器的“链接”文本框中输入“javascript:;”或是一个#号就可以了,13,2018/3/29,脚本链接是指执行 JavaScript 代码或调用 JavaScript 函数。脚本链接可以让访客不用离开
7、当前页面就可以得到关于某个项目的一些附加信息。此外,脚本链接还可用于执行计算、表单确认和其他处理任务。,脚本链接,14,2018/3/29,5.导航栏的创建,导航栏是一排纵向或横向连接在一起的网页元素组成,每个元素可以设置4种状态,在不同情况下会呈现不同的图像。,15,2018/3/29,创建过程:“插入” “图像对象” “导航条”,状态图像:初始图像,鼠标未移至元素上时所显示的图像。鼠标经过图像:鼠标移到元素上时所显示的图像。按下图像:单击元素后所显示的图像。按下时鼠标经过图像:鼠标移到被单击过和元素上时所显示的图像。,16,2018/3/29,本章小结,本章的学习,应首先了解超级链接的作用、类型和超级链接路径的概念,这是学习在网页中设置超级链接的基础。在网页设计中几种常见的超链接 。,