网页制作与网站设计_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插入命名锚记14）选择文字1.长歌行(汉)汉乐府，在“属性”面板的“链接”文本框中输入锚记“#1”(英文输入法下)，如图5-16所示。任务五任务描述任务说明操作步骤图5-16输入链接5）将光标定位于第二首前，选择菜单中的“插入记录”“命名锚记”命令，或点击插入面板中“常用”标签下的“命名锚记”按钮，弹出“命名锚记”对话框，在对话框中输入“2”，如图5-17所示任务五任务描述任务说明操作步骤图5-17命名锚记6）单击“确定”按钮，插入“锚记名称2”，如图5-18所示。任务五任务描述任务说明操作步骤图5-18插入命名锚记27）选择文字2.咏鹅(唐)骆宾王，在“属性”面板的“链接”文本框中输入锚记“#2”(英文输入法下)，如图5-19所示。任务五任务描述任务说明操作步骤图5-19输入链接8)用同样的方法插入其他命名锚记，并设定相应的链接。9）设置结束后，按F12键，保存文档并在浏览器中预览网页时，就可以通过单击超级链接来定位到命名锚记所在的位置。任务五任务描述任务说明操作步骤