Dreamweaver-CS6网页设计与应用-(课件.ppt

1、第4章 超链接 本章简介：本章简介：本章主要讲解超链接的概念和使用方本章主要讲解超链接的概念和使用方法，包括文本链接、图像链接、电子邮件法，包括文本链接、图像链接、电子邮件链接和鼠标经过图像链接等内容。通过这链接和鼠标经过图像链接等内容。通过这些内容的学习，可以熟练掌握网站链接的些内容的学习，可以熟练掌握网站链接的设置与使用方法，并精心编织网站的链接，设置与使用方法，并精心编织网站的链接，为网站访问者能够尽情地遨游在网站之中为网站访问者能够尽情地遨游在网站之中提供必要的条件。提供必要的条件。课堂学习目标掌握设置文本超链接的方法和技巧掌握设置文本超链接的方法和技巧掌握设置电子邮件链接的方法和技巧

2、掌握设置电子邮件链接的方法和技巧掌握设置图像超链接的方法和技巧掌握设置图像超链接的方法和技巧掌握设置鼠标经过图像链接的方法和技巧掌握设置鼠标经过图像链接的方法和技巧4.1 文本超链接 创建文本链接创建文本链接文本链接的状态文本链接的状态电子邮件链接电子邮件链接课堂案例课堂案例爱爱家橱柜网页家橱柜网页4.1.1 创建文本链接 创建文本链接的方法非常简单，主要是在链接文本的创建文本链接的方法非常简单，主要是在链接文本的“属性属性”面板中指定链接文件。指定链接文件的方法有面板中指定链接文件。指定链接文件的方法有3种种。1 1直接输入要链接文件的路径和文件名直接输入要链接文件的路径和文件名2 2使用使

3、用“浏览文件浏览文件”按钮按钮3 3使用指向文件图标使用指向文件图标 4.1.2 文本链接的状态 一个未被访问过的链接文字与一个被访问过的链接文字一个未被访问过的链接文字与一个被访问过的链接文字在形式上是有所区别的，以提示浏览者链接文字所指示的网在形式上是有所区别的，以提示浏览者链接文字所指示的网页是否被看过。页是否被看过。 每当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮每当浏览者单击包含电子邮件超链接的网页对象时，就会打开邮件处理工具（如微软的件处理工具（如微软的Outlook ExpressOutlook Express），并且自动将收信人地址），并且自动将收信人地址设为网站建设

4、者的邮箱地址，方便浏览者给网站发送反馈信息。设为网站建设者的邮箱地址，方便浏览者给网站发送反馈信息。1 1利用利用“属性属性”面板建立电子邮件超链接面板建立电子邮件超链接2 2利用利用“电子邮件链接电子邮件链接”对话框建立电子邮件超链接对话框建立电子邮件超链接 4.1.3 电子邮件链接 使用使用“属性属性”面板，为文字添加链接效果面板，为文字添加链接效果。 4.1.4 课堂案例爱家橱柜网页效果图 图像超链接图像超链接 鼠标经过图像超链接鼠标经过图像超链接 课堂案例课堂案例狮立地板狮立地板网页网页4.2 图像超链接 建立图像超链接的操作步骤如下。建立图像超链接的操作步骤如下。（1 1）在文档窗口

5、中选择图像。）在文档窗口中选择图像。（2 2）在）在“属性属性”面板中，单击面板中，单击“链接链接”选项右侧的选项右侧的“浏览文浏览文件件”按钮按钮 ，为图像添加文档相对路径的链接。，为图像添加文档相对路径的链接。（3 3）在）在“替代替代”选项中可输入替代文字。设置替代文字后，选项中可输入替代文字。设置替代文字后，当图片不能下载时，会在图片的位置上显示替代文字；当浏览者当图片不能下载时，会在图片的位置上显示替代文字；当浏览者将鼠标指针指向图像时也会显示替代文字。将鼠标指针指向图像时也会显示替代文字。（4 4）按）按F12F12键预览网页的效果。键预览网页的效果。4.2.1 图像超链接 4.2

6、.2 鼠标经过图像超链接 “鼠标经过图像鼠标经过图像”是一种常用的互动技术，当鼠标指针是一种常用的互动技术，当鼠标指针经过图像时，图像会随之发生变化。一般，经过图像时，图像会随之发生变化。一般，“鼠标经过图像鼠标经过图像”效果由两张大小相等的图像组成，一张称为主图像，另一张效果由两张大小相等的图像组成，一张称为主图像，另一张称为次图像。主图像是首次载入网页时显示的图像，次图像称为次图像。主图像是首次载入网页时显示的图像，次图像是当鼠标指针经过时更换的另一张图像。是当鼠标指针经过时更换的另一张图像。“鼠标经过图像鼠标经过图像”经常应用于网页中的按钮上。经常应用于网页中的按钮上。4.2.3 课堂案

7、例狮立地板网页使用使用“鼠标经过图像鼠标经过图像”按钮，制作导航条效果。按钮，制作导航条效果。效果图使用使用“Polygon Hotspot Tool”工具，绘制热点并添加工具，绘制热点并添加链接；使用链接；使用“代码代码”视图，手视图，手动输入代码插入锚点，制作内动输入代码插入锚点，制作内部链接效果部链接效果。 课堂练习在线商城网页效果图使用使用“电子邮件链接电子邮件链接”按钮，制作电子邮件链效果；使按钮，制作电子邮件链效果；使用用“属性属性”面板，为文字制作下载链接效果；使用面板，为文字制作下载链接效果；使用“页面页面属性属性”命令，改变链接的显示效果命令，改变链接的显示效果。 课后习题冶金铸造网页效果图