2023学年完整公开课版超链接

第5章超链接网页设计与制作DreamweaverCS6标准教程1.超链接的概念与路径知识2.文本超链接3.图像超链接4.热点链接5.锚点超链接6.链接管理本章学习的主要内容：超级链接由两个端点和一个方向构成，通常将起始端点（即鼠标单击的位置）称为源端点（或源锚），将跳转到的目标位置称为目标端点（或目标锚）。源端点可以是文本、按钮、图像等对象，目标端点可以是同一页面的不同位置，也可以是一个其他页面、一幅图像、一个文件或一段程序等。5.1超链接的概念与路径知识5.1.1按超链接端点分类5.1.2按超链接路径分类5.1超链接的概念与路径知识按照源端点来划分，超级链接可以分为文本超链接和非文本超链接两种。文本超链接是把文本作为源端点，而非文本超链接是用除文本外的其他对象作为源端点。按照目标端点来划分，超级链接可分为外部链接、内部链接和电子邮件链接等5.1.1按超链接端点分类5.1.2按超链接路径分类文本超链接是以文本为对象构建的超级链接，链接的源端点是文本。文本超链接是网页中最常使用的一种链接方式。5.2文本超链接5.2.1课堂案例—婚礼公司5.2.2创建文本链接5.2.3页面文本链接的状态5.2.4下载文件链接5.2.5电子邮件链接5.2.6空链接5.2文本超链接案例学习目标：学习创建内部链接、外部链接、下载文件链接和电子邮件链接等多种文本超链接。案例知识要点：使用【属性】面板、【插入】菜单和直接拖曳等方法创建文本超链接。素材所在位置：光盘/案例素材/ch05/课堂案例-婚礼网站。案例效果如图5-1所示。5.2.1课堂案例—婚礼公司1．直接输入要链接文件的路径和文件名2．使用【浏览文件】按钮3．使用【指向文件】图标4．设定链接【目标】5.2.2创建文本链接可通过【页面属性】设置文本链接状态，操作步骤如下。选择菜单【修改】|【页面属性】，打开【页面属性】对话框，在【分类】列表中选择【链接（CSS）】。单击【链接颜色】右侧的图标，打开调色板，选择一种颜色来设置链接文字的颜色。采用同样的方式，分别设置【已访问链接】、【变换图像链接】和【活动链接】的颜色。单击【下划线样式】下拉列表，设置链接文字是否带有下划线。5.2.3页面文本链接的状态下载文件链接是通过单击链接来实现文件下载，建立方法和文字链接建立方法类似，所不同的是所链接的文件不是网页文件而是其他文件，如.rar压缩文件等，单击链接后并不是打开网页，而是实现下载。具体创建步骤如下：在【文档】窗口中选择需要添加下载文件链接的对象。在【属性】面板的【链接】下拉文本框中设置链接的文件。5.2.4下载文件链接电子邮件链接是当单击链接时打开邮件收发软件，并自动将设定好的邮箱地址作为收信人，方便浏览者发送邮件。建立电子邮件链接有以下两种方法。1．使用【电子邮件链接】对话框2．使用【属性】面板5.2.5电子邮件链接空链接是一种特殊的链接，它实际上并没有指定具体的链接目标。创建空链接的步骤如下：在【文档】窗口中选择需要设置链接的文本、图像或其他对象；在【属性】面板的【链接】文本框中输入“#”。5.2.6空链接网页设计中经常需要实现单击图像打开链接的效果，这就需要给图像建立超链接。图像超链接可以分为普通图像链接和鼠标经过图像超链接。5.3图像超链接5.3.1课堂案例-手机商城5.3.2创建图像超链接5.3.3鼠标经过图像链接5.3图像超链接案例学习目标：学习建立图像超链接和鼠标经过图像超链接。案例知识要点：使用【属性】面板为图像设置超链接，使用菜单【插入】|【图像对象】|【鼠标经过图像】建立鼠标经过图像超链接。素材所在位置：光盘/案例素材/ch05/课堂案例-手机商城。案例效果如图5-23所示。5.3.1课堂案例-手机商城建立图像超链接的操作步骤如下。在【文档】窗口中选择需要建立超链接的图像。在【属性】面板中，单击【链接】项文本框后的【浏览文件】按钮，为图像添加链接。在【替换】项中可以输入替换文字。设置替换文字后，当图像不能正常显示时，会在图像的位置显示替换文字；浏览时把鼠标悬停在图像上也会显示替换文字。5.3.2创建图像超链接鼠标经过图像是指当鼠标指针经过一幅图像时，图像的显示会变为另一幅图像。鼠标经过图像实际上是由两张图像组成，一张称为原始图像，另一张称为鼠标经过图像。一般来说，原始图像和鼠标经过图像尺寸必须相同，如果图像的大小不同，Dreamweaver会自动调整鼠标经过图像的大小，使之与原始图像匹配。5.3.3鼠标经过图像链接建立鼠标经过图像的操作步骤如下。在【文档】窗口中将光标置于需要添加鼠标经过图像的位置。选择菜单【插入】|【图像】|【鼠标经过图像】，在【插入鼠标经过图像】对话框中分别单击【原始图像】和【鼠标经过图像】文本框右侧的【浏览】按钮设置图像路径。在【替换文本】文本框中设置替换文字。在【按下时，前往的URL】文本框中设置跳转的网页文件路径，当浏览者单击图像时打开此网页。单击【确定】按钮，按<F12>键预览网页效果。5.3.3鼠标经过图像链接在一个图像中创建的不同几何图形区域称为热点或热区，以这些区域为超链接的源端点，建立的不同超链接被称为热点链接。5.4热点链接5.4.1课堂案例-儿童课堂5.4.2创建热点链接5.4热点链接案例学习目标：学习创建热点链接。案例知识要点：使用【属性】面板创建热点链接。素材所在位置：光盘/案例素材/ch05/课堂案例-儿童课堂。案例效果如图5-32所示。5.4.1课堂案例-儿童课堂创建热点链接的操作步骤如下。在【文档】窗口中单击选择一张图像，在【属性】面板的【地图】选项中选择热点工具。鼠标放在图像上，指针变成“+”，在图像上拖曳出相应形状的蓝色区域。可以通过【指针热点工具】选择不同的热区，并通过热区边框的控制点调整热区大小，还可以通过复制得到多个相同的热区，建立多个矩形热区。用【指针热点工具】选取某个热区，出现【属性】面板，在【链接】文本框中输入链接地址，在【替换】文本框中输入替换文字，这样就在一个图像上创建了几个热点链接。5.4.2创建热点链接锚点链接是指目标端点位于网页中某个指定位置的一种超链接。创建锚点链接可分两步完成，首先在网页的某个指定位置创建超链接的目标端点（即锚点），并为其命名；然后在超链接的源端点处建立指向该锚点的超链接。5.5锚点链接5.5.1练习案例-数码商城5.5.2创建锚点链接5.5锚点链接案例学习目标：学习建立锚点链接。案例知识要点：使用菜单【插入】|【命名锚记】和【属性】面板创建锚点链接。素材所在位置：光盘/案例素材/ch05/课堂案例-数码商城。案例效果如图5-43所示。5.5.1练习案例-数码商城创建锚点链接的步骤如下。1．创建锚点2．链接到锚点5.5.2创建锚点链接网站链接设置好后，Dreamweaver还提供了自动更新链接和链接检查功能，以便对网站内的链接进行管理。5.6链接管理5.6.1练习案例-百适易得商城5.6.2自动更新链接5.6.3链接检查5.6.4修复链接5.6链接管理案例学习目标：学习网站的链接管理。案例知识要点：使用菜单【窗口】|【结果】|【链接检查器】，打开【链接检查器】面板管理网站链接。素材所在位置：光盘/案例素材/ch05/课堂案例-百事易得商城。案例效果如图5-58所示。5.6.1练习案例-百适易得商城新建一个站点后，有时需要修改文件的名称或调整文件的位置。文件名或位置变了，其相关的超链接如果不发生相应的变化，就会出现“断链”。如果采用手动逐个修改链接，工作量很大，Dreamweaver提供的自动更新链接功能可以在文件名修改或文件位置移动时自动进行相关链接更新。5.6.2自动更新链接1．更改站内文件名称2．更改站内文件位置5.6.2自动更新链接网站制作好之后，在上传到服务器之前，必须对站点中所有链接进行检查，如果发现存在中断的链接，则需要进行修复。如果在各个网页文件中手工逐一单击进行链接检查，工作量将会很大，也不可避免会出现疏漏，Dreamweaver提供的链接检查器功能可以快速地对某一页面、部分页面和整个站点的链接进行检查。5.6.3链接检查1．检查当前文档中的链接2．检查站点中所选文件的链接3．检查整个当前本地站点的链接5.6.3链接检查修复链接是对检查出的断掉链接进行重新设置，可以通过以下两种方法完成。（1）双击【链接检查器】面板右侧列表中断掉链接的【文件】中的文件名，Dreamweaver会在【代码】窗口和【设计】窗口中定位到链接出错的位置，同时【属性】面板也会指示出链接，可以进行修改，如图5-74所示。（2）在【链接检查器】面板的【断掉的链接】下面单击鼠标左键，直接修改链接路径，或单击【浏览文件】按钮重新定位链接文件，如图5-75所示。5.6.4修复链接5.7.1练习案例-室内设计网5.7.2练习案例-多美味餐厅5.7.3练习案例-生物科普网5.7练习案例5.7.1练习案例-室内设计网案例练习目标：练习创建鼠标经过图像超链接和热点超链接。案例操作要点：1．在页面顶部导航位置，创建“网站首页”、“最新消息”、“会员地带”、“餐厅位置”和“联系我们”鼠标经过图像，并为“最新消息”设置链接为news.html。2．在页面的左下角，为“送货上门”和“餐厅动态”创建两个热点链接，分别链接到文件sale.html和文件news.html。素材所在位置：光盘/案例素材/ch05/练习案例-多美味餐厅，效果如图5-77所示。5.7.2练习案例-多美味餐厅案例练习目标：练习创建锚点链接。案例操作要点：1．在网页scie.html中的文字“鸟类”、“昆虫类”和“植物类”前面，分别插入锚点bird、insect、plant；在页面底部“快速导航”区域内，分别为“鸟类”、“昆虫类”和“植物类”建立锚点链接指向锚点bird、insect、plant