《DreamweaverCS3中文版实例教程 04 超链接.ppt》由会员分享，可在线阅读，更多相关《DreamweaverCS3中文版实例教程 04 超链接.ppt（22页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第4章超链接本章简介：本章简介：网络中的每个网页都是通过超网络中的每个网页都是通过超链接的形式关联在一起的，超链接链接的形式关联在一起的，超链接是网页中最重要、最根本的元素之是网页中最重要、最根本的元素之一。浏览者可以通过鼠标单击网页一。浏览者可以通过鼠标单击网页中的某个元素，轻松的实现网页之中的某个元素，轻松的实现网页之间的转换或下载文件、收发邮件等。间的转换或下载文件、收发邮件等。要实现超链接，还要了解链接路径要实现超链接，还要了解链接路径的知识。下面对超链接进行具体的的知识。下面对超链接进行具体的讲解。讲解。课堂学习目标超链接的概念与路径知识超链接的概念与路径知识文本超链接文本超链接图像
2、超链接图像超链接命名锚记超链接命名锚记超链接热点链接热点链接4.1超链接的概念与路径知识 超链接的主要作用是将物理上无序的内容组成一个有机超链接的主要作用是将物理上无序的内容组成一个有机的统一体。超链接对象上存放某个网页文件的地址，以便用户的统一体。超链接对象上存放某个网页文件的地址，以便用户打开相应的网页文件。在浏览网页时，当用户将鼠标指针移到打开相应的网页文件。在浏览网页时，当用户将鼠标指针移到文字或图像上时，鼠标指针会改变形状或颜色，这就是在提示文字或图像上时，鼠标指针会改变形状或颜色，这就是在提示浏览者：此对象为链接对象。用户只需单击这些链接对象，就浏览者：此对象为链接对象。用户只需单
3、击这些链接对象，就可完成打开链接的网页、下载文件、打开邮件工具收发邮件等可完成打开链接的网页、下载文件、打开邮件工具收发邮件等操作。操作。4.2文本超链接课堂案例课堂案例车行天下网车行天下网创建文本链接创建文本链接文本链接的状态文本链接的状态下载文件链接下载文件链接电子邮件链接电子邮件链接4.2.1课堂案例车行天下网 使用电子邮件链接命令制作电子邮件链接效果。使用浏览文件使用电子邮件链接命令制作电子邮件链接效果。使用浏览文件链接按钮为文字制作下载文件链接效果。链接按钮为文字制作下载文件链接效果。效果图 创建文本链接的方法非常简单，主要是在链接文本的创建文本链接的方法非常简单，主要是在链接文本的
4、“属性属性”面板中指定链接文件。指定链接文件的方法有面板中指定链接文件。指定链接文件的方法有3 3种。种。直接输入要链接文件的路径和文件名直接输入要链接文件的路径和文件名使用使用“浏览文件浏览文件”按钮按钮使用指向文件图标使用指向文件图标4.2.2创建文本链接 一个未被访问过的链接文字与一个被访问过的链接文字在形一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的，以提示浏览者链接文字所指示的网页是否被式上是有所区别的，以提示浏览者链接文字所指示的网页是否被看过。看过。4.2.3文本链接的状态 浏览网站的目的往往是查找并下载资料，下载文件可利用下载浏览网站的目的往往是查找并下载
5、资料，下载文件可利用下载文件链接来实现。建立下载文件链接的步骤如同创建文字链接，区文件链接来实现。建立下载文件链接的步骤如同创建文字链接，区别在于所链接的文件不是网页文件而是其他文件，如别在于所链接的文件不是网页文件而是其他文件，如.exe.exe、.zip.zip等等文件。文件。建立下载文件链接的具体操作步骤如下。建立下载文件链接的具体操作步骤如下。（1 1）在文档窗口中选择需添加下载文件链接的网页对象。）在文档窗口中选择需添加下载文件链接的网页对象。（2 2）在）在“链接链接”选项的文本框中指定链接文件。选项的文本框中指定链接文件。（3 3）按）按快捷键预览网页。快捷键预览网页。4.2.4
6、下载文件链接 网页只能作为单向传播的工具，将网站的信息传给浏览者，但网页只能作为单向传播的工具，将网站的信息传给浏览者，但网站建立者需要接收使用者的反馈信息，一种有效的方式是让浏览网站建立者需要接收使用者的反馈信息，一种有效的方式是让浏览者给网站发送者给网站发送E-mailE-mail。在网页制作中使用电子邮件超链接就可以实。在网页制作中使用电子邮件超链接就可以实现。现。每当浏览者单击包含电子邮件超链接的网页对象时，就会打开每当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮件处理工具，并且自动将收信人地址设为网站建设者的邮箱地址，邮件处理工具，并且自动将收信人地址设为网站建设者的邮箱地址
7、，方便浏览者给网站发送反馈信息。方便浏览者给网站发送反馈信息。利用利用“属性属性”面板建立电子邮件超链接面板建立电子邮件超链接利用利用“电子邮件链接电子邮件链接”对话框建立电子邮件超链接对话框建立电子邮件超链接4.2.5电子邮件链接4.3图像超链接课堂案例课堂案例恋之语素材模板网恋之语素材模板网图像超链接图像超链接鼠标经过图像链接鼠标经过图像链接4.3.1课堂案例恋之语素材模板网 使用使用“插入插入”面板面板“常用常用”选项卡中的选项卡中的“鼠标经过图像按钮鼠标经过图像按钮”为网页添加导航效果。使用为网页添加导航效果。使用“属性属性”面板中的面板中的“链接链接”选项制作超选项制作超链接效果。链
8、接效果。效果图建立图像超链接的操作步骤如下。建立图像超链接的操作步骤如下。（1 1）在文档窗口中选择图像。）在文档窗口中选择图像。（2 2）在）在“属性属性”面板中，单击面板中，单击“链接链接”选项右侧的选项右侧的“浏览文浏览文件件”按钮，为图像添加文档相对路径的链接。按钮，为图像添加文档相对路径的链接。（3 3）在）在“替代替代”选项中可输入替代文字。设置替代文字后，选项中可输入替代文字。设置替代文字后，当图片不能下载时，会在图片的位置上显示替代文字；当浏览者将当图片不能下载时，会在图片的位置上显示替代文字；当浏览者将鼠标指针指向图像时也会显示替代文字。鼠标指针指向图像时也会显示替代文字。（
9、4 4）按）按快捷键预览网页的效果。快捷键预览网页的效果。4.3.2图像超链接“鼠标经过图像鼠标经过图像”是一种常用的互动技术，当鼠标指针经过图是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般，像时，图像会随之发生变化。一般，“鼠标经过图像鼠标经过图像”效果由两张效果由两张大小相等的图像组成，一张称为主图像，另一张称为次图像。主图大小相等的图像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换的另一张图像。的另一张图像。“鼠标经过图像鼠标经过图像”经常应用于网页中的
10、按钮上。经常应用于网页中的按钮上。4.3.3鼠标经过图像链接4.4命名锚记超链接课堂案例课堂案例花卉百科网花卉百科网命名锚记链接命名锚记链接4.4.1课堂案例花卉百科网使用使用“插入插入”面板面板“常用常用”选项卡中的选项卡中的“命名锚记命名锚记”按钮插入按钮插入锚点，制作文档底间移动到顶部效果。锚点，制作文档底间移动到顶部效果。效果图 若网页的内容很长，为了寻找一个主题，浏览者往往需要拖若网页的内容很长，为了寻找一个主题，浏览者往往需要拖曳滚动条进行查看，非常不方便。曳滚动条进行查看，非常不方便。Dreamweaver CS3Dreamweaver CS3提供了锚点链提供了锚点链接功能可快速
11、定位到网页的不同位置。接功能可快速定位到网页的不同位置。创建锚点创建锚点建立锚点链接建立锚点链接4.4.2命名锚记链接4.5热点链接课堂案例课堂案例健康水果之家健康水果之家创建热点链接创建热点链接4.5.1课堂案例健康水果之家使用使用“热点热点”按钮为图像制作链接效果。按钮为图像制作链接效果。效果图创建热区链接的具体操作步骤如下。创建热区链接的具体操作步骤如下。（1 1）选取一张图片，在）选取一张图片，在“属性属性”面板的面板的“地图地图”选项下方选选项下方选择热区创建工具。择热区创建工具。（2 2）利用）利用“矩形热点工具矩形热点工具”、“圆形热点工具圆形热点工具”、“多边形多边形热点工具热
12、点工具”、“指针热点工具指针热点工具”在图片上建立或选择相应形状的在图片上建立或选择相应形状的热区。热区。（3 3）在）在“属性属性”面板中进行设置。面板中进行设置。（4 4）按）按快捷键预览网页的效果。快捷键预览网页的效果。4.5.2创建热点链接4.6课堂练习绿色食品网页使用矩形热点工具和多边形热点工具制作指定的链接网页文档。使用矩形热点工具和多边形热点工具制作指定的链接网页文档。效果图4.7课堂练习茶文化使用使用“输入链接输入链接”地址制作外部链接效果。使用地址制作外部链接效果。使用“电子邮件链电子邮件链接接”命令制作电子邮件链接效果。使用命令制作电子邮件链接效果。使用“浏览文件链接浏览文件链接”按钮为文按钮为文字制作下载文件链接效果。字制作下载文件链接效果。效果图4.8课后习题时尚精品素材 使用使用“属性属性”面板中的面板中的“链接链接”选项制作文字链接效果。使用选项制作文字链接效果。使用“输入输入”面板面板“常用常用”选项卡中的鼠标经过图像按钮为网页添加导选项卡中的鼠标经过图像按钮为网页添加导航效果。航效果。效果图