静态网页设计制作 教案 第5章 制作超链接

静态网页设计制作STYLEREFbt1a项目五STYLEREFbt1b制作超链接项目五制作超链接思政目标学会不求甚解，实事求是，真正掌握所学内容。树立正确的职业观，培养正确的职业操守技能目标学会创建文本、图像和E-Mail链接学会连接到命名锚点学会利用“URLs”面板管理超链接学会使用热点制作图像映射项目导读Internet的核心就是超级链接（Hyperlink），没有链接，就不存在WorldWideWeb。使用超级链接可以将各个网页联接起来，构成一个有机整体，使访问者能够在各个页面之间跳转。超级链接可以是一段文本，一幅图像或其他网页元素，在浏览器中单击这些对象，浏览器可以载入一个指定的新页面，或者转到页面的其他位置。任务1认识超级链接任务引入小明发现在浏览网页时有时只要一点击某个图片或某段文字，就会跳转到其他的网页或图像等，原来这是通过创建超级链接来实现的，小明也想对网页实现这种操作，那么什么是超级链接呢？知识准备超链接由两部分组成，一部分是在浏览网页时可以看到的部分，称为超链接载体；另一部分是超链接所链接的目标。在浏览网页时，单击超链接的载体打开链接目标。超链接载体可以是文本、图像；链接的目标可以是网页、图像、视频、声音和电子邮件地址等。例如：单击如图5-1所示的产品图像或产品名称，可以打开如图5-2所示的产品详细介绍页面。图5-1单击超级链接的载体图5-2打开的链接目标在这里，产品图像或产品名称就是超级链接载体，而打开的产品详情页面则是链接目标。网页上的超链接一般有三种：一种是绝对网址的超链接，例如链接到清华大学的站点主页；第二种是相对网址的超链接，例如将主页上的图像链接到本站点的其他页面；还有一种是同一个页面的超链接，也称为锚点。了解了超链接的基本概念和分类之后，接下来介绍各种超链接的具体创建方法。在Dreamweaver2021中创建超级链接有多种方法，创建超链接后，用户还可以随时对链接载体、链接目标和链接的打开方式进行修改。此外，还可以通过“URLs”面板统一管理网站中的所有超链接。任务2制作、管理超链接任务引入了解了超链接的概念之后，小明就可以根据网页的需求创建合适的链接，那么如何创建文本、图像或者邮件链接，如何创建虚拟链接和脚本链接，如何管理链接呢？知识准备一、创建文本超链接在网页上用到最多的就是文本超链接，例如，单击文本，跳转到另一个页面。案例——创建文本超链接创建文本超链接的方法很多，下面通过一个简单的示例进行简要说明。（1）在文档窗口中选中需要建立链接的文本。例如页面上的。通常，创建超级链接是在属性面板的“链接”文本框中完成的。（2）执行“窗口”/“属性”菜单命令打开属性面板。在“链接”文本框中输入链接目标。本例输入。操作完成后，可以看到被选择的文本变为蓝色，并且带有下划线。在浏览器中将鼠标移到文本上时，鼠标指针变为手形。如图5-3所示。默认情况下，文本链接显示为蓝色，并加有下划线。可以执行“文件”/“页面属性”菜单命令，在“页面属性”对话框的“链接”分类设置超级链接在各种状态下的颜色，以及是否显示下划线。图5-3超级链接效果如果链接目标是计算上的一个文件或图像，可以单击“链接”文本框右侧的文件夹图标，打开“选择文件”对话框，查找并选择文件。或者在“指向文件”图标上按下鼠标左键拖动到“文件”面板中一个已有的页面。（3）在“目标”下拉列表中选择打开链接目标的方式。注意如果要链接到站点外的某一页面，应始终使用_top或_blank，以确保该页面不会显示为站点的一部分。此外，还可以执行“插入”/“超级链接”菜单命令，或直接单击“HTML”插入面板中的“超级链接”按钮，打开“超级链接”对话框设置选定文本的超链接。二、创建图像链接很多情况下，为了去掉文本链接默认的下划线效果或美化页面，网页设计者会选择用图像代替文本创建超链接，这种方式适用于所有能识别图像的浏览器。创建图像链接的方法与创建文本链接大致相同，不同之处在于链接的载体是图像，而不是文本。案例——创建图像超链接下面通过为一个图像创建超链接，演示创建图像链接的步骤。（1）选中需要创建链接的图像，如图5-4所示的Google网徽。（2）在属性面板的“链接”文本框中键入超链接的URL。本例输入。（3）在“替换”文本框中键入“Google”。在浏览器中，当该图像没有下载或不能显示时，在图像所在位置显示替换文本。（4）在“目标”下拉列表中选择打开该网站的方式。本例使用默认设置。至此，图像链接创建完毕，按F12键在浏览器中预览。使用图像链接时，浏览器中的链接图像默认显示一个蓝色边框，如图5-5所示。图5-4选定需要设置超链接的图像图5-5设置了边框的图像链接如果不希望显示该边框，可以新建一个CSS规则，将边框宽度设置为0。例如下面的代码定义网页中的所有<img>标签都不显示边框：img{ border-width:0px;}三、链接到命名锚点通常情况下，使用绝对地址或相对地址链接到一个网页时，浏览器会重新载入并显示这个页面。如果网页的内容比较多，浏览者就必须滚动页面，查看当前屏幕以下的信息。使用命名锚点可以立即响应浏览者单击锚点的事件，由于整个页面已被载入，所以浏览器只需移动到文档中的特定位置。这种技术能够迅速定位需要的主题或返回菜单，而无需手工来回滚动页面。命名锚点通常与目录或索引列表结合使用，放置在网页中每个屏幕或每个主题之后。单击某一个命名锚点时，可以转到网页的特定段落，以方便阅读。案例——命名锚点下面通过一个简单实例演示命名锚点的使用方法。（1）将光标放在要设置锚点的位置，如图5-6所示的“观书有感”之前。切换到“代码”视图，输入<aid="m1"></a>，即创建一个命名为m1的锚点。切换到“设计”视图，在页面指定的位置可看到插入的命名锚点，效果如图5-7所示。图5-6指定插入锚点的位置图5-7插入的命名锚点注意如果看不到锚点标记，执行“查看”/“设计视图选项”/“可视化助理”/“不可见元素”命令。（2）在页面中选择要链接到命名锚点的文字。例如图5-7中，水平线以上的“观书有感”。然后在属性设置面板的“链接”文本框中输入锚点的名称。本例输入“#m1”。注意在“链接”文本框中输入锚点名称时，需要在锚点名称前面添加一个特殊的符号“#”。例如：#top，其中，top为命名锚点。如果所链接的锚点不在当前文档中，则在“链接”文本框中首先要添加链接页面的URL，然后输入井号（#）和锚点名称。例如，如果要在当前页面调用同一文件夹中的index.html页面上名为top的锚点，则应在“链接”文本框中输入index.html#top。在同一页面中可以添加任意数量的命名锚点。（3）参照上面的步骤，在“春日”和“泛舟”两首诗之前也添加命名锚点，分别为“m2”和“m3”，然后为相应的文本添加超链接，链接到命名锚点。四、创建E-Mail链接如果要在访问站点时能与网络管理者取得联系，一个最简单的办法就是在页面的适当位置加上网络管理者的E-mail地址的超链接。只要访问者单击这个地址，就可以调用默认的电子邮件程序，并新建一个邮件窗口，给网络管理者发送电子邮件。如果需要，还可以自定义发送主题、内容、抄送等。案例——创建E-Mail链接下面通过一个简单例子演示创建E-Mail链接的步骤。（1）在文档窗口的“设计”视图中，选中需要创建E-Mail链接的文本或图像。如图5-8所示的邮箱图标。（2）在属性面板的“链接”文本框中输入收件人的地址。本例输入mailto:webmaster@。然后在“替换”文本框中键入替换文本“Email”。（3）保存文档，并按F12键预览页面，效果如图5-9所示。图5-8选中要创建邮件链接的图像图5-9电子邮件链接在浏览网页时，单击图像，即可打开默认的电子邮件程序编辑邮件，收件人邮件地址自动填充为指定的电子邮件地址。在“链接”文本框中输入邮件地址时，与创建常规超链接不同，在邮件地址前面必须添加“mailto:”，表示该超级链接是邮件链接。如果没有选中任何文本或图像，可以通过“电子邮件链接”对话框在页面中插入E-Mail链接，例如下面的示例。（1）将插入点放置在需要添加邮件链接的位置。例如“联系作者：”之后。（2）单击“HTML”面板中的“电子邮件链接”按钮；或者执行“插入”/“HTML”/“电子邮件链接”菜单命令，弹出如图5-10所示的“电子邮件链接”对话框。（3）在“文本”域中键入要显示在页面上的链接文本，本例输入webmaster；在“电子邮件”域中输入要发送到的E-mail地址，本例输入webmaster@。（4）单击“确定”按钮关闭对话框，完成链接的创建。（5）保存文档，按F12键在浏览器中预览。页面效果如图5-11所示。在“文本”域中输入的文本显示为超链接文本，在浏览器中将鼠标指针移到该文本上时，状态栏显示该链接的具体地址mailto:webmaster@。图5-10“电子邮件链接”对话框图5-11页面效果五、虚拟链接和脚本链接虚拟链接也称为空链接，是指没有指定链接目标的链接，一般用于向页面上的文本或对象添加行为。虚拟链接主要包含以下两种格式：<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键在浏览器中浏览。当把鼠标指针移到虚拟链接或脚本链接上时，鼠标指针变为手形；单击虚拟链接“返回页面顶端”，页面会返回到顶端；单击脚本链接“VIP通道”，会弹出一个警告框，显示“只有VIP会员方可进入！”，如图5-13所示。图5-12添加链接前的页面效果图5-13预览效果六、使用“URLs”面板管理超链接对于某些大型站点来说，处理所有超链接资源的完整列表是一件很棘手的事情。利用Dreamweaver提供的“URLs”面板，可以将所有链接资源归类在一起，为资源指定别名以指明用途，以便日后查找、维护资源。URL的全称是UniformResourceLocator（统一资源定位器）。从最简单的单一页面到复杂的综合站点，所有的资源内容都可以通过“URLs”面板进行访问。案例——新建和编辑URL下面通过一个简单例子演示新建URL和编辑URL的方法。（1）执行“窗口”/“资源”菜单命令，打开“资源”面板。（2）单击“资源”面板左侧的“URLs”按钮，切换到“URLs”面板。如图5-14所示。“URLs”面板有两种视图：“站点”视图和“收藏”视图。“站点”视图如图5-14所示，在该面板下方的列表窗格中，列出了当前站点中使用的所有链接资源及类型，包括FTP、gopher、HTTP、HTTPS、JavaScript、电子邮件（mailto）以及本地文件（file://）链接。“收藏”视图用于收藏常用的资源，存储的是对“站点”视图列表中的资源的引用。（3）单击“收藏”单选按钮，切换到“收藏”视图，如图5-15所示。图5-14“站点”视图图5-15“收藏”视图（4）单击“收藏”视图底部的“新建URL”按钮，弹出如图5-16所示的“添加URL”对话框。（5）在“添加URL”对话框中输入URL以及昵称。本例在“URL”文本框中输入；在“昵称”栏键入“新浪”。（6）单击“确定”按钮关闭对话框。此时，在“收藏”视图中可以看到新建的URL，视图下方的窗格中显示该URL的昵称为“新浪”，类型为“HTTP”，值为，如图5-17所示。图5-16“添加URL”对话框图5-17添加URL（7）在“设计”视图中选中要应用该URL的文本或图像，如图5-18所示。（8）在“URLs”面板的“收藏”视图中选中需要的URL，例如“百度搜索”，然后单击视图底部的“应用”按钮，即可将指定的URL应用到选定文本。如图5-19所示。（9）如果在第（7）步中没有选中文本，而是将插入点放在文本后面，则“收藏”视图底部的“应用”按钮变为“插入”按钮。单击该按钮，可在插入点处插入指定的链接文本，如图5-20所示。图5-18选中文本图5-19应用URL图5-20插入URL任务3使用热点制作图像映射任务引入小明已经学会了创建图像链接，但是有时候需要对图像的不同部分建立连接，这就需要利用热点工具来创建图像映射，具体要怎么操作呢？知识准备在通常情况下，一个图像只能对应一个超链接。在浏览网页时，读者可能会遇到一个图像的不同部分建立了不同的超链接，这就是图像映射，只要使用热点工具就可以轻松实现。简单地说，图像映射就是用热点工具将一幅图像分割为若干个区域，并将这些子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。单击图像上的不同热点区域，可以跳转到不同的页面。案例——创建图像映射下面通过一个实例介绍创建图像映射的方法，最终效果如图5-21所示。具体制作步骤如下：（1）新建一个空白的HTML文件。执行“插入”｜“Image”命令，在文档窗口中插入图像。（2）选中图像，单击属性面板上的“圆形热点工具”按钮，此时该图标会下凹，表示被选中。在图像上的“景点”二字左上角按下鼠标左键，然后向右下角拖动鼠标，直到出现的圆形框将“景点”两个字包围，释放鼠标，第一个热点建立完成。热点区域显示为半透明的蓝色区域。（3）在属性设置面板上单击“矩形热点工具”按钮，此时该图标会下凹，表示被选中。在图像上的“交通”二字的左上角按下鼠标左键，然后向右下角拖动鼠标，直到出现的矩形框将“交通”两个字包围，释放鼠标，第二个热点建立完成。（4）在属性设置面板上单击“多边形热点工具”按钮，此时该图标会下凹，表示被选中。在图像上的“食宿”二字的左上角单击鼠标左键，加入一个定位点；移动鼠标单击，加入第二个定位点，这时两个定位点之间会连成一条直线。按同样的方法添加三个定位点，此时5个定位点会连成一个多边形，将“食宿”两个字包围，第三个热点建立完成。（5）如果要调整热点区域的大小，在属性设置面板中单击“指针热点工具”按钮，再单击要调整大小的热点区域，此时被选中的热点区域四周会出现控制手柄。将光标放在控制手柄上，然后按下鼠标左键拖动，即可改变热点区域的大小，效果如图5-22所示。图5-21实例效果图5-22加入热点后的图像（6）在属性设置面板中单击“指针热点工具”按钮，再单击“景点”的热点区域，选中该热点区域。单击属性设置面板“链接”文本框右侧的文件夹图标，打开文件选择对话框，从站点目录中选择一个文件后，单击“确定”按钮关闭窗口，“链接”文本框中显示超级链接文件的路径及文件名。（7）按照上一步同样的方法，为其他两个热点区域建立超级链接。（8）执行“文件”｜“保存”命令保存文档。在浏览器中预览页面。将鼠标指针移到热点区域上时，指针的形状变为手形，并且在浏览器下方的状态栏中显示链接的路径。单击各个热点区域，可以打开对应的链接文件，并显示相关的内容。综合实例文本与链接网页实例下面通过一个实例展示文本与超级链接的应用，效果如图5-23所示。图5-23实例效果（1）执行“文件”｜“新建”命令，弹出“新建文档”对话框。在对话框中选择“新建文档”类别的HTML文件，框架“无”，文档类型默认为HTML5，单击“创建”按钮，创建新文档。（2）切换到“设计”视图，在空白处右击鼠标，在弹出的快捷菜单中执行“页面属性”命令，弹出“页面属性”对话框，如图5-24所示。（3）在“背景颜色”文本框中输入“#ABDEED”。（4）单击“标题/编码”分类，在“标题”文本框中输入“朱熹名作欣赏”。单击“确定”按钮关闭对话框。（5）在“设计”视图中输入文字“联系作者：webmaster”。选中“webmaster”，在属性设置面板上的“链接”文本框中输入“mailto:webmaster@”。（6）定义邮件链接的样式。执行“窗口”|“CSS设计器”命令，打开“CSS设计器”面板。单击“添加CSS源”按钮，在弹出的下拉菜单中选择“在页面中定义”；单击“添加选择器”按钮，设置选择器名称为a:link，如图5-25所示。（7）在CSS设计器的“属性”窗格中取消选中“显示集”，然后单击“文本”图标，设置文本颜色为#FF6600，字体大小为16px，无修饰，如图5-26所示。首次启动Dreamweaver2021时，默认选中“属性”部分的“显示集”复选框，并在所有后续Dreamweaver会话中保留此选项的任何更改（选择或取消选择）。（8）输入文字“链接到新浪:”，选中，在属性设置面板上的“链接”文本框中输入“”。图5-24“页面属性”对话框图5-25添加选择器图5-26设置属性（9）执行“插入”|“表格”菜单命令，在弹出的对话框中设置行数为7，列数为3，宽度为600像素，边框粗细为0，单元格边距和间距均为0。选中插入的表格，在属性面板上设置表格在页面上居中对齐。（10）依次合并第二行以外的其他行的单元格，并设置单元格内容水平和垂直对齐方式均为居中，然后输入标题、页内超级链接地址和诗词具体内容。（11）选中“朱熹名作欣赏”，在属性面板上对应的“格式”下拉列表框中选择“标题1”，在属性面板上设置字体为华文行楷，大小为36，颜色为#3399FF，且文本对齐方式为“居中对齐”。注意如果在“字体”列表中没有找到需要的字体，可以单击下拉列表底端的“管理字体”命令，在弹出的“管理字体”对话框中单击“自定义字体堆栈”页签，然后在“可用字