《Dreamweaver CS5中文版基础教程 教学课件 ppt 作者 李跃光 姜龙奎 04》由会员分享,可在线阅读,更多相关《Dreamweaver CS5中文版基础教程 教学课件 ppt 作者 李跃光 姜龙奎 04(19页珍藏版)》请在金锄头文库上搜索。
1、第4章 超链接,本章简介: 网络中的每个网页都是通过超链接的形式关联在一起的,超链接是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页中的某个元素,轻松的实现网页之间的转换或下载文件、收发邮件等。要实现超链接,还要了解链接路径的知识。下面对超链接进行具体的讲解。,课堂学习目标,超链接的概念与路径知识 文本超链接 图像超链接 命名锚记和热点链接,4.1 超链接的概念与路径知识,超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超链接对象上存放某个网页文件的地址,以便用户打开相应的网页文件。在浏览网页时,当用户将鼠标指针移到文字或图像上时,鼠标指针会改变形状或颜色,这就是在提示浏
2、览者:此对象为链接对象。用户只需单击这些链接对象,就可完成打开链接的网页、下载文件、打开邮件工具及收发邮件等操作。,4.2 文本超链接,创建文本链接 文本链接的状态 下载文件链接 电子邮件链接 课堂案例实木地板网页,创建文本链接的方法非常简单,主要是在链接文本的“属性”面板中指定链接文件。指定链接文件的方法有3种。 1直接输入要链接文件的路径和文件名。 2使用“浏览文件”按钮。 3使用指向文件图标。,4.2.1 创建文本链接,一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的,以提示浏览者链接文字所指示的网页是否被看过。,4.2.2 文本链接的状态,浏览浏览网站的目的往往是查
3、找并下载资料,下载文件可利用下载文件链接来实现。建立下载文件链接的步骤如同创建文字链接,区别在于所链接的文件不是网页文件而是其他文件,如.exe、.zip.rar等文件。 建立下载文件链接的具体操作步骤如下。 (1)在文档窗口中选择需添加下载文件链接的网页对象。 (2)在“链接”选项的文本框中指定链接文件。 (3)按F12快捷键预览网页。,4.2.3 下载文件链接,网页只能作为单向传播的工具将网站的信息传给浏览者,但网站建立者需要接收使用者的反馈信息,一种有效的方式是让浏览者给网站发送E-mail。在网页制作中使用电子邮件超链接就可以实现。 每当浏览者单击包含电子邮件超链接的网页对象时,就会打
4、开邮件处理工具(如微软的Outlook Express),并且自动将收信人地址设为网站建设者的邮箱地址,方便浏览者给网站发送反馈信息。,4.2.4 电子邮件链接,4.2.5 课堂案例实木地板网页,使用“插入”面板的常用选项卡制作电子邮件链接效果。使用“属性”面板为文字制作下载文件链接效果。,效果图,4.3 图像超链接,图像超链接 鼠标经过图像链接,建立图像超链接的操作步骤如下。 (1)在文档窗口中选择图像。 (2)在“属性”面板中,单击“链接”选项右侧的“浏览文件”按钮 ,为图像添加文档相对路径的链接。 (3)在“替代”选项中可输入替代文字。设置替代文字后,当图片不能下载时,会在图片的位置上显
5、示替代文字;当浏览者将鼠标指针指向图像时也会显示替代文字。 (4)按F12快捷键预览网页的效果。,4.3.1 图像超链接,“鼠标经过图像”是一种常用的互动技术,当鼠标指针经过图像时,图像会随之发生变化。一般,“鼠标经过图像”效果由两张大小相等的图像组成,一张称为主图像,另一张称为次图像。主图像是首次载入网页时显示的图像,次图像是当鼠标指针经过时更换的另一张图像。“鼠标经过图像”经常应用于网页中的按钮上。,4.3.2 鼠标经过图像链接,4.4 命名锚记超链接,命名锚记链接 课堂案例金融投资网页,若网页的内容很长,为了寻找一个主题,浏览者往往需要拖曳滚动条进行查看,非常不方便。Dreamweave
6、r CS5提供的锚点链接功能可快速定位到网页的不同位置。,4.4.1 命名锚记链接,创建热区链接的具体操作步骤如下。 (1)选取一张图片,在“属性”面板的“地图”选项下方选择热区创建工具。 (2)利用“矩形热点工具”、“圆形热点工具”、“多边形热点工具”、“指针热点工具”在图片上建立或选择相应形状的热区。 (3)在“属性”面板中进行设置。 (4)按F12快捷键预览网页的效果。,4.2.2 创建热点链接,4.4.3 课堂案例金融投资网页,使用“锚记”链接制作从文档底部移动到顶部的效果。,效果图,4.5 课堂练习艺术画廊网页,使用“矩形热点工具”制作指定的链接网页文档。,效果图,4.6 课后习题温泉度假网页,使用“插入”面板“常用”选项卡中的鼠标经过图像按钮为网页添加导航条效果。,效果图,