网页制作与网站设计-05DreamweaverCS3创建超级链接

项目五DreamweaverCS3创建超级链接

网页制作技能训练项目五

任务一创建超级链接的方法

任务二

文字超级链接任务三任务四任务五

图片超级链接

创建E-mail链接创建锚点链接网页网页制作技能训练项目五

任务一创建超级链接的方法

课程导航任务一

任务描述任务说明操作步骤任务一小张要建立一个美观的网页需要加入许多图片、文字资料、影像、音乐等，下面我们就学习有关创建超级链接的操作界面。任务描述课程导航任务一

任务描述

任务说明实现过程任务一通过使用使用菜单创建链接。任务说明课程导航任务一

任务描述任务说明

操作步骤任务一1）在菜单栏中选择“插入记录”“超级链接”，弹出“超级链接”对话框，在对话柜中输入相应的链接文件，或者单击“常用”插入栏中的“超级链接”按钮，也会打开“超级链接”对话框，如图5-1所示。操作步骤课程导航任务一

任务描述任务说明

操作步骤

任务一操作步骤图5-1超级链接对话框课程导航任务一

任务描述任务说明

操作步骤

任务一在“超级链接”对话框中可以设置的参数如下：①“文本”:设置超级链接显示的文本。②“链接”:设置超级链接链接到的路径，最好输入相对路径而不是绝对路径。③“目标”:设置在何处打开网页，包括4个选项，这四个选项是“_blank”；“_parent”；“_self”；“_top”,如图5-2所示,具体的功能如下。操作步骤课程导航任务一

任务描述任务说明

操作步骤任务一“_blank”:在弹出的新窗口中打开所链接的目标。“_parent”:如果是嵌套的框架，表示在父框架“_self”:浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。“_top”:在完整的浏览器窗口的顶层打开链接目标。课程导航任务一

任务描述任务说明

操作步骤任务一图5-2目标选项操作步骤课程导航任务一

任务描述任务说明

操作步骤任务一④“标题”:设置超链接的标题。当鼠标悬停在超级链接上时出现的说明文字。⑤“访问键”:设置键盘快捷键，设置好后，如果按键盘上的快捷键将选中这个超级链接。⑥“Tab键索引”:设置在网页中用Tab键选中这个超链接的顺序。2）完成参数设置后，单击“确定”按钮，即可完成链接。操作步骤课程导航任务一

任务描述任务说明

操作步骤任务一①使用“属性”面板创建链接。

“属性”面板面板中的“链接”文本框可用于创建链接，在【文档】中选择图像或文本，打开“属性”面板，在“链接”文本框中输入链接的文件，从“目标”下拉列表框中选择文档位置，如图5-3所示。课程导航任务一

任务描述任务说明

操作步骤任务一图5-3属性面板课程导航任务一

任务描述任务说明

操作步骤任务一②使用指向文件图标创建链接在“属性”面板中，单击“链接”文本框右侧的指向文件图标，拖动鼠标时会出现一条带箭头的细线，指示到链接的文件后，释放鼠标，可以链接该文件⑻如图5-4所示。课程导航任务一

任务描述任务说明

操作步骤任务一图5-4创建指向文件图标链接课程导航任务二

任务描述任务说明操作步奏

任务二小张在浏览网页时，看见鼠标经过某些文本时，会出现一个小手，点击后会出现新的窗口，自己也想试一试。任务描述课程导航任务二

任务描述

任务说明操作步骤任务二任务说明当浏览网页时，鼠标经过某些文本时，会出现一个小手，提示浏览者这是带链接的文本。此时单击鼠标左键，会打开所链接的网页。这就是文本超级链接。课程导航任务二

任务描述任务说明

操作步骤任务二操作步骤

1）打开网页文档，选中要创建链接的文本，如图5-5所示。图5-5打开网页文档选中文本课程导航任务二

任务描述任务说明

操作步骤任务二操作步骤：

2）打开“属性”面板，在面板中单击“链接”文本框右边的文件夹图标，在弹出的对话框中选择链接的文件，将文件添加到“链接”文本框中，如图5-6所示。图5-6创建链接课程导航任务二

任务描述任务说明

操作步骤任务二操作步骤：（3)按F12键，保存网页文档并在浏览器中检验该文档，如图5-7所示。图5-7浏览效果课程导航任务三

任务描述解决方案操作步骤任务三任务描述：

小张在浏览网页时，单击网页中的某个小图片时，会在新窗口中打开一幅大图片，自己也想试一试。课程导航任务三

任务描述

任务说明操作步骤任务三制作一个浏览网页时，经常会用到图片链接，单击网页中的某个小图片时，会在新窗口中打开一幅大图片，这就是图片链接。任务说明：课程导航任务三

任务描述任务说明

操作步骤任务三操作步骤：

1）打开网页文档，选中要创建链接的图片，在“源文件”文本框中显示文件名，如图5-8所示。图5-8选中创建链接的图片课程导航任务三操作步骤：

2）在“属性”面板上的“链接”文本框中将链接目标设置为图像文件或其他文件就可以了，如图5-9所示。任务三

任务描述任务说明

操作步骤图5-9设置链接目标课程导航任务三操作步骤：

3)按F12键，保存网页文档并在浏览器中检验该文档。任务三

任务描述任务说明

操作步骤课程导航任务四任务描述：

小张想自己设立了一个网页，在运行过程中可能会出现问题，通过浏览者能反馈的信息，及时改进，提高网页的制作水平。任务四

任务描述任务说明操作步骤课程导航任务四

在网页上创建E-mail链接，可以使浏览者快速反馈自己的意见，当浏览者单击电子邮件链接时，系统会自动启动默认的电子邮件收发软件（如Outlook、OutlookExpress等），收件人邮件地址被电子邮件超级链接中指定的地址自动更新。任务四

任务描述

任务说明操作步骤任务说明：课程导航任务四操作步骤：

1）新建一个HTML文件，输入一段文字，如图5-10所示。任务四

任务描述任务说明

操作步骤图5-10建立HTML文件课程导航任务四操作步骤：

2）在菜单栏中选择“插入记录”|“电子邮件链接”命令或点击插入面板中“常用”标签下的“电子邮件链接”按钮，出现“电子邮件链接”对话框，在“E-mail”文本框中输入邮箱地址，如图5-11所示。任务四

任务描述任务说明

操作步骤图5-11在“E-mail”文本框中输入邮箱地址课程导航任务四操作步骤：

3）单击“确定”按钮，即可插入电子邮件链接。4）按F12键，保存文档并预览网页，点击E-mail的链接文字，网页就会自动打开邮件处理程序，并在收件人栏中填写好所设置的邮箱地址，如图5-12所示。任务四

任务描述任务说明

操作步骤图5-12E-mail链接效果课程导航任务五小张想自己设立了一个网页，在运行过程中发现当文本内容分成多页时，不能快速找到需要内容，有什么方法可以快速定位，方便查找需要的内容吗？任务五

任务描述任务说明操作步骤任务描述：课程导航任务五任务说明：锚点链接通常用于大量文本的网页，由于网页内容非常多，浏览器的滚动条变得很长，而使浏览者无法快速找到所以内容。使用锚点链接可以给文本分段，来为网页添加内部链接。单击该链接，就可以跳到网页中指定位置。任务五

任务描述

任务说明操作步骤课程导航任务五操作步骤：

1）打开一个长网页文档，如图5-13所示

任务五

任务描述任务说明

操作步骤图5-13打开网页文档课程导航任务五操作步骤：

2）将光标定位于第一首前，选择菜单中的“插入记录”“命名锚记”命令，或点击插入面板中“常用”标签下的“命名锚记”按钮，弹出“命名锚记”对话框，在对话框中输入“1”，如图5-14所示。任务五

任务描述任务说明

操作步骤图5-14命名锚记课程导航任务五操作步骤：

3）单击“确定”按钮，插入“锚记名称1”，如图5-15所示。任务五

任务描述任务说明

操作步骤图5-15插入命名锚记1课程导航任务五操作步骤：

4）选择文字1.长歌行(汉)汉乐府，在“属性”面板的“链接”文本框中输入锚记“#1”(英文输入法下)，如图5-16所示。任务五

任务描述任务说明

操作步骤图5-16输入链接课程导航任务五

5）将光标定位于第二首前，选择菜单中的“插入记录”“命名锚记”命令，或点击插入面板中“常用”标签下的“命名锚记”按钮，弹出“命名锚记”对话框，在对话框中输入“2”，如图5-17所示任务五

任务描述任务说明

操作步骤操作步骤：图5-17命名锚记课程导航任务五操作步骤：

6）单击“确定”按钮，插入“锚记名称2”，如图5-18所示。任务五

任务描述任务说明

操作步骤图5-18插入命名锚记2课程导航任务五操作步骤：

7）选择文字2.咏鹅(唐)骆宾王，在