静态网页设计与制作 课件 第5章 制作超链接

项目五

制作超链接任务1

认识超级链接任务2制作、管理超链接任务3使用热点制作图像映射任务1认识超级链接任务引入小明发现在浏览网页时有时只要一点击某个图片或某段文字，就会跳转到其他的网页或图像等，原来这是通过创建超级链接来实现的，小明也想对网页实现这种操作，那么什么是超级链接呢？知识准备超链接由两部分组成，一部分是在浏览网页时可以看到的部分，称为超链接载体；另一部分是超链接所链接的目标。在浏览网页时，单击超链接的载体打开链接目标。超链接载体可以是文本、图像；链接的目标可以是网页、图像、视频、声音和电子邮件地址等。例如：单击如图所示的产品图像或产品名称，可以打开如图所示的产品详细介绍页面。单击超级链接的载体打开的链接目标在这里，产品图像或产品名称就是超级链接载体，而打开的产品详情页面则是链接目标。网页上的超链接一般有三种：一种是绝对网址的超链接，例如链接到清华大学的站点主页；第二种是相对网址的超链接，例如将主页上的图像链接到本站点的其他页面；还有一种是同一个页面的超链接，也称为锚点。了解了超链接的基本概念和分类之后，接下来介绍各种超链接的具体创建方法。在Dreamweaver2021中创建超级链接有多种方法，创建超链接后，用户还可以随时对链接载体、链接目标和链接的打开方式进行修改。此外，还可以通过“URLs”面板统一管理网站中的所有超链接。任务2制作、管理超链接任务引入了解了超链接的概念之后，小明就可以根据网页的需求创建合适的链接，那么如何创建文本、图像或者邮件链接，如何创建虚拟链接和脚本链接，如何管理链接呢？知识准备一、创建文本超链接在网页上用到最多的就是文本超链接，例如，单击文本，跳转到另一个页面。案例——创建文本超链接创建文本超链接的方法很多，下面通过一个简单的示例进行简要说明。（1）在文档窗口中选中需要建立链接的文本。例如页面上的。通常，创建超级链接是在属性面板的“链接”文本框中完成的。（2）执行“窗口”/“属性”菜单命令打开属性面板。在“链接”文本框中输入链接目标。本例输入。超级链接效果（3）在“目标”下拉列表中选择打开链接目标的方式。二、创建图像链接很多情况下，为了去掉文本链接默认的下划线效果或美化页面，网页设计者会选择用图像代替文本创建超链接，这种方式适用于所有能识别图像的浏览器。创建图像链接的方法与创建文本链接大致相同，不同之处在于链接的载体是图像，而不是文本。案例——创建图像超链接下面通过为一个图像创建超链接，演示创建图像链接的步骤。（1）选中需要创建链接的图像，如图5-4所示的Google网徽。（2）在属性面板的“链接”文本框中键入超链接的URL。本例输入。（3）在“替换”文本框中键入“Google”。在浏览器中，当该图像没有下载或不能显示时，在图像所在位置显示替换文本。（4）在“目标”下拉列表中选择打开该网站的方式。本例使用默认设置。选定需要设置超链接的图像

设置了边框的图像链接三、链接到命名锚点通常情况下，使用绝对地址或相对地址链接到一个网页时，浏览器会重新载入并显示这个页面。如果网页的内容比较多，浏览者就必须滚动页面，查看当前屏幕以下的信息。使用命名锚点可以立即响应浏览者单击锚点的事件，由于整个页面已被载入，所以浏览器只需移动到文档中的特定位置。这种技术能够迅速定位需要的主题或返回菜单，而无需手工来回滚动页面。命名锚点通常与目录或索引列表结合使用，放置在网页中每个屏幕或每个主题之后。单击某一个命名锚点时，可以转到网页的特定段落，以方便阅读。案例——命名锚点下面通过一个简单实例演示命名锚点的使用方法。（1）将光标放在要设置锚点的位置，如图5-6所示的“观书有感”之前。指定插入锚点的位置

插入的命名锚点（2）在页面中选择要链接到命名锚点的文字。例如图5-7中，水平线以上的“观书有感”。（3）参照上面的步骤，在“春日”和“泛舟”两首诗之前也添加命名锚点，分别为“m2”和“m3”，然后为相应的文本添加超链接，链接到命名锚点。四、创建E-Mail链接如果要在访问站点时能与网络管理者取得联系，一个最简单的办法就是在页面的适当位置加上网络管理者的E-mail地址的超链接。只要访问者单击这个地址，就可以调用默认的电子邮件程序，并新建一个邮件窗口，给网络管理者发送电子邮件。如果需要，还可以自定义发送主题、内容、抄送等。案例——创建E-Mail链接下面通过一个简单例子演示创建E-Mail链接的步骤。（1）在文档窗口的“设计”视图中，选中需要创建E-Mail链接的文本或图像。如图所示的邮箱图标。（2）在属性面板的“链接”文本框中输入收件人的地址。本例输入mailto:webmaster@。然后在“替换”文本框中键入替换文本“Email”。（3）保存文档，并按F12键预览页面，效果如图所示。

选中要创建邮件链接的图像

电子邮件链接电子邮件链接”对话框

页面效果五、虚拟链接和脚本链接虚拟链接也称为空链接，是指没有指定链接目标的链接，一般用于向页面上的文本或对象添加行为。虚拟链接主要包含以下两种格式：<ahref="#">虚拟链接</a><ahref="javascript:;">虚拟链接</a>使用第1种格式的虚拟链接在单击后将返回到页面顶部，这种格式无法添加行为；采用第2种格式创建的虚拟链接在单击时不会发生任何动作，就好像根本没有单击一样。如果为第2种虚拟链接添加了动作脚本，则执行相应的动作行为，此时的链接即为脚本链接。脚本链接可以执行JavaScript代码或调用JavaScript函数，在不离开当前网页的情况下给予访问者有关项目的补充信息。脚本链接也可用于在访问者点击特定项目时执行计算、表单验证或其他处理任务。案例——创建虚拟链接和脚本链接下面通过一个简单实例演示虚拟链接和脚本链接的创建方法及功能。（1）选择要作为虚拟链接的文本，例如图5-12所示的“返回页面顶端”。（2）打开属性设置面板，在“链接”文本框中输入“#”或“javascript:;”。读者要注意，javascript一词后依次有一个冒号和一个分号。（3）选择需要作为脚本链接的文本，例如图5-12所示的“VIP通道”。（4）在属性面板的“链接”文本框中输入脚本，如：javascript:alert('只有VIP会员方可进入！')。括号中的内容必须使用单引号，或在双引号前添加反斜杠进行转义，例如，JavaScript:alert(\"只有VIP会员方可进入！\"）。（5）保存文档，按F12键在浏览器中浏览。六、使用“URLs”面板管理超链接对于某些大型站点来说，处理所有超链接资源的完整列表是一件很棘手的事情。

添加链接前的页面效果

预览效果案例——新建和编辑URL下面通过一个简单例子演示新建URL和编辑URL的方法。（1）执行“窗口”/“资源”菜单命令，打开“资源”面板。（2）单击“资源”面板左侧的“URLs”按钮，切换到“URLs”面板。如图所示。（3）单击“收藏”单选按钮，切换到“收藏”视图，如图所示。（4）单击“收藏”视图底部的“新建URL”按钮，弹出如图所示的“添加URL”对话框。（5）在“添加URL”对话框中输入URL以及昵称。本例在“URL”文本框中输入；在“昵称”栏键入“新浪”。（6）单击“确定”按钮关闭对话框。“站点”视图

“收藏”视图“添加URL”对话框

添加URL（7）在“设计”视图中选中要应用该URL的文本或图像，如图所示。（8）在“URLs”面板的“收藏”视图中选中需要的URL，例如“百度搜索”，然后单击视图底部的“应用”按钮，即可将指定的URL应用到选定文本。如图所示。（9）如果在第（7）步中没有选中文本，而是将插入点放在文本后面，则“收藏”视图底部的“应用”按钮变为“插入”按钮。单击该按钮，可在插入点处插入指定的链接文本，如图所示。选中文本

应用URL

插入URL任务3使用热点制作图像映射任务引入小明已经学会了创建图像链接，但是有时候需要对图像的不同部分建立连接，这就需要利用热点工具来创建图像映射，具体要怎么操作呢？知识准备在通常情况下，一个图像只能对应一个超链接。在浏览网页时，读者可能会遇到一个图像的不同部分建立了不同的超链接，这就是图像映射，只要使用热点工具就可以轻松实现。简单地说，图像映射就是用热点工具将一幅图像分割为若干个区域，并将这些子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。单击图像上的不同热点区域，可以跳转到不同的页面。案例——创建图像映射下面通过一个实例介绍创建图像映射的方法，最终效果如图所示。具体制作步骤如下：（1）新建一个空白的HTML文件。执行“插入”｜“Image”命令，在文档窗口中插入图像。（2）选中图像，单击属性面板上的“圆形热点工具”按钮，此时该图标会下凹，表示被选中。（3）在属性设置面板上单击“矩形热点工具”按钮，此时该图标会下凹，表示被选中。（4）在属性设置面板上单击“多边形热点工具”按钮，此时该图标会下凹，表示被选中。（5）如果要调整热点区域的大小，在属性设置面板中单击“指针热点工具”按钮，再单击要调整大小的热点区域，此时被选中的热点区域四周会出现控制手柄。（6）在属性设置面板中单击“指针热点工具”按钮，再单击“景点”的热点区域，选中该热点区域。（7）按照上一步同样的方法，为其他两个热点区域建立超级链接。（8）执行“文件”｜“保存”命令保存文档。

实例效果

加入热点后的图像综合实例文本与链接网页实例下面通过一个实例展示文本与超级链接的应用，效果如图所示。（1）执行“文件”｜“新建”命令，弹出“新建文档”对话框。在对话框中选择“新建文档”类别的HTML文件，框架“无”，文档类型默认为HTML5，单击“创建”按钮，创建新文档。（2）切换到“设计”视图，在空白处右击鼠标，在弹出的快捷菜单中执行“页面属性”命令，弹出“页面属性”对话框，如图所示。（3）在“背景颜色”文本框中输入“#ABDEED”。（4）单击“标题/编码”分类，在“标题”文本框中输入“朱熹名作欣赏”。单击“确定”按钮关闭对话框。（5）在“设计”视图中输入文字“联系作者：webmaster”。选中“webmaster”，在属性设置面板上的“链接”文本框中输入“mailto:webmaster@”。（6）定义邮件链接的样式。执行“窗口”|“CSS设计器”命令，打开“CSS设计器”面板。单击“添加CSS源”按钮，在弹出的下拉菜单中选择“在页面中定义”；单击“添加选择器”按钮，设置选择器名称为a:link，如图所示。（7）在CSS设计器的“属性”窗格中取消选中“显示集”，然后单击“文本”图标，设置文本颜色为#FF6600，字体大小为16px，无修饰，如图所示。（8）输入文字“链接到新浪:”，选中，在属性设置面板上的“链接”文本框中输入“”。（9）执行“插入”|“表格”菜单命令，在弹出的对话框中设置行数为7，列数为3，宽度为600像素，边框粗细为0，单元格边距和间距均为0。选中插入的表格，在属性面板上设置表格在页面上居中对齐。（10）依次合并第二行以外的其他行的单元格，并设置单元格内容水平和垂直对齐方式均为居中，然后输入标题、页内超级链接地址和诗词具体内容。（11）选中“朱熹名作欣赏”，在属性面板上对应的“格式”下拉列表框中选择“标题1”，在属性面板上设置字体为华文行楷，大小为36，颜色为#3399FF，且文本对齐方式为“居中对齐”。“页面属性”对话框

添加选择器

设置属性

选择字体（12）将光标定位到诗文“观书有感”右侧，执行“插入”|“HTML”|“水平线”菜单命令，插入水平线。（13）同样的方法，在其他诗文下方插入水平线。（14）将光标定位到标题“观书有感”左侧，在“代码”视图中输入<aid="m1"></a>，定义一个锚记。（15）用同样方法，在另两首诗标题前插入锚记，锚记名称从上到下分别为m2