网页制作与网站设计_05Dreamweaver CS3创建超级链接

1、项目五项目五Dreamweaver CS3创建超级链接创建超级链接 网页制作技能训练网页制作技能训练项目五项目五 任务一任务一创建超级链接的方法创建超级链接的方法 任务二任务二 文字超级链接文字超级链接任务三任务三 任务四任务四任务五任务五 图片超级链接图片超级链接 创建创建E-mail链接链接创建锚点链接网页创建锚点链接网页 网页制作技能训练网页制作技能训练项目五项目五 任务一任务一创建超级链接的方法创建超级链接的方法 任务一 任务描述 任务说明 操作步骤 小张要建立一个美观的网页需要加入许多图片、文字资料、影像、音乐等，下面我们就学习有关创建超级链接的操作界面。 任务一 任务描述 任务说明

2、 实现过程 通过使用使用菜单创建链接。 任务一 任务描述 任务说明 操作步骤1）在菜单栏中选择）在菜单栏中选择“插入记录插入记录”“超级链接超级链接”，弹出弹出“超级链接超级链接”对话框，在对话柜中输入相应对话框，在对话柜中输入相应的链接文件，或者单击的链接文件，或者单击“常用常用”插入栏中的插入栏中的“超级超级链接链接”按钮按钮 ， 也会打开也会打开“超级链接超级链接”对话框，对话框，如图如图5-1所示。所示。 任务一 任务描述 任务说明 操作步骤 图5-1 超级链接对话框 任务一 任务描述 任务说明 操作步骤 在在“超级链接超级链接”对话框中可以设置的参数如下：对话框中可以设置的参数如下：

3、“文本文本”:设置超级链接显示的文本。设置超级链接显示的文本。“链接链接”:设置超级链接链接到的路径，最好输入设置超级链接链接到的路径，最好输入相对路径而不是绝对路径。相对路径而不是绝对路径。“目标目标”:设置在何处打开网页，包括设置在何处打开网页，包括4个选项，个选项， 这四个选项是这四个选项是“_blank”； “_parent”； “_self”；“_top”,如图如图5-2所示所示,具体的功能如下。具体的功能如下。 任务一 任务描述 任务说明 操作步骤 “_blank”:在弹出的新窗口中打开所链接在弹出的新窗口中打开所链接的目标。的目标。“_parent”:如果是嵌套的框架，表示在父如

4、果是嵌套的框架，表示在父框架框架“_self”:浏览器默认的设置，在当前网页浏览器默认的设置，在当前网页所在的窗口中打开链接的网页。所在的窗口中打开链接的网页。“_top”:在完整的浏览器窗口的顶层打开在完整的浏览器窗口的顶层打开链接目标。链接目标。 任务一 任务描述 任务说明 操作步骤图5-2 目标选项 任务一 任务描述 任务说明 操作步骤 “标题标题”:设置超链接的标题。当鼠标设置超链接的标题。当鼠标悬停在超级链接上时出现的说明文字。悬停在超级链接上时出现的说明文字。 “访问键访问键”:设置键盘快捷键，设置好设置键盘快捷键，设置好后，如果按键盘上的快捷键将选中这个超后，如果按键盘上的快捷键

5、将选中这个超级链接。级链接。 “Tab键索引键索引”:设置在网页中用设置在网页中用Tab键键选中这个超链接的顺序。选中这个超链接的顺序。 2）完成参数设置后，单击）完成参数设置后，单击“确定确定”按钮，按钮，即可完成链接。即可完成链接。 任务一 任务描述 任务说明 操作步骤 使用使用“属性属性”面板创建链接。面板创建链接。 “属性属性”面板面板中的面板面板中的“链接链接”文本框可文本框可用于创建链接，在用于创建链接，在【文档文档】中选择图像或中选择图像或文本，打开文本，打开“属性属性”面板，在面板，在“链接链接”文本框文本框中输入链接的文件，从中输入链接的文件，从“目标目标”下拉列表框下拉列表

6、框中选择文档位置，如图中选择文档位置，如图5-3所示。所示。 任务一 任务描述 任务说明 操作步骤图图5-3 属性面板属性面板 任务一 任务描述 任务说明 操作步骤 在“属性”面板中，单击“链接”文本框右侧的指向文件图标，拖动鼠标时会出现一条带箭头的细线，指示到链接的文件后，释放鼠标，可以链接该文件如图5-4所示。 任务一 任务描述 任务说明 操作步骤图图5-4 创建指向文件图标链接创建指向文件图标链接 任务二 任务描述 任务说明 操作步奏 小张在浏览网页时，看见鼠标经过某些文本时，会出现一个小手，点击后会出现新的窗口，自己也想试一试。 任务二 任务描述 任务说明 操作步骤 当浏览网页时，鼠标

7、经过某些文本时，会出现一个小手，提示浏览者这是带链接的文本。此时单击鼠标左键，会打开所链接的网页。这就是文本超级链接。 任务二 任务描述 任务说明 操作步骤 1）打开网页文档，选中要创建链接的文本，如图5-5所示。图5-5 打开网页文档选中文本 任务二 任务描述 任务说明 操作步骤 2）打开“属性”面板，在面板中单击“链接” 文本框右边的文件夹图标， 在弹出的对话框中选择链接的文件，将文件添加到“链接”文本框中，如图5-6所示。图5-6 创建链接 任务二 任务描述 任务说明 操作步骤 （3)按F12键，保存网页文档并在浏览器中检验该文档，如图5-7 所示。图5-7 浏览效果 任务三 任务描述

8、解决方案 操作步骤 小张在浏览网页时，单击网页中的某个小图片时，会在新窗口中打开一幅大图片，自己也想试一试。 任务三 任务描述 任务说明 操作步骤 制作一个浏览网页时，经常会用到图片链接，单击网页中的某个小图片时，会在新窗口中打开一幅大图片，这就是图片链接。 任务三 任务描述 任务说明 操作步骤 1）打开网页文档，选中要创建链接的图片，在“源文件”文本框中显示文件名，如图5-8所示。图5-8 选中创建链接的图片 2）在）在“属性属性”面板上的面板上的“链接链接”文本框中文本框中将链接目标设置为图像文件或其他文件就可将链接目标设置为图像文件或其他文件就可以了，如图以了，如图5-9所示。所示。 任

9、务三 任务描述 任务说明 操作步骤图5-9 设置链接目标 3)按按F12键，保存网页文档并在浏览键，保存网页文档并在浏览器中检验该文档。器中检验该文档。 任务三 任务描述 任务说明 操作步骤 小张想自己设立了一个网页，在运行过程中可能会出现问题，通过浏览者能反馈的信息，及时改进，提高网页的制作水平。 任务四 任务描述 任务说明 操作步骤 在网页上创建E-mail链接，可以使浏览者快速反馈自己的意见，当浏览者单击电子邮件链接时，系统会自动启动默认的电子邮件收发软件（如Outlook、Outlook Express等），收件人邮件地址被电子邮件超级链接中指定的地址自动更新。 任务四 任务描述 任务

10、说明 操作步骤 1）新建一个HTML文件，输入一段文字，如图5-10所示。 任务四 任务描述 任务说明 操作步骤图5-10 建立HTML文件 2）在菜单栏中选择）在菜单栏中选择“插入记录插入记录”|“电电子邮件链接子邮件链接”命令或点击插入面板中命令或点击插入面板中“常用常用”标签下的标签下的“电子邮件链接电子邮件链接”按钮，按钮， 出现出现“电子邮件链接电子邮件链接”对话框，在对话框，在“E-mail”文本文本框中输入邮箱地址，如图框中输入邮箱地址，如图5-11所示。所示。 任务四 任务描述 任务说明 操作步骤图5-11 在“E-mail”文本框中输入邮箱地址 3）单击）单击“确定确定”按钮

11、，即可插入电子按钮，即可插入电子邮件链接。邮件链接。 4）按）按F12键，保存文档并预览网页，键，保存文档并预览网页，点击点击E-mail的链接文字，网页就会自动打的链接文字，网页就会自动打开邮件处理程序，并在收件人栏中填写开邮件处理程序，并在收件人栏中填写好所设置的邮箱地址，如图好所设置的邮箱地址，如图5-12所示。所示。 任务四 任务描述 任务说明 操作步骤图5-12 E-mail链接效果 小张想自己设立了一个网页，在运行过程中发现当文本内容分成多页时，不能快速找到需要内容，有什么方法可以快速定位，方便查找需要的内容吗？ 任务五 任务描述 任务说明 操作步骤 锚点链接通常用于大量文本的网页

12、，由于网页内容非常多，浏览器的滚动条变得很长，而使浏览者无法快速找到所以内容。使用锚点链接可以给文本分段，来为网页添加内部链接。单击该链接，就可以跳到网页中指定位置。 任务五 任务描述 任务说明 操作步骤 1）打开一个长网页文档，如图）打开一个长网页文档，如图5-13所示所示 任务五 任务描述 任务说明 操作步骤图5-13 打开网页文档 2）将光标定位于第一首前，选择菜）将光标定位于第一首前，选择菜单中的单中的“插入记录插入记录” “命名锚记命名锚记”命令，或命令，或点击插入面板中点击插入面板中“常用常用”标签下的标签下的“命名锚命名锚记记”按钮，按钮， 弹出弹出“命名锚记命名锚记”对话框，在

13、对话框，在对话框中输入对话框中输入“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所示。 任务五 任务描述 任务说