第3章情景3建立某公司网站超级链接

第三章情景3建立某公司网站超级链接本章主要介绍了在DreamweaverCS5中如何创建、编辑超级链接。超级链接是网页设计的重要元素之一，通过超级链接用户可随意访问网站内、外的网页，也可以访问Internet网络上的各类信息。本章内容通过完成某公司网站的超级链接任务来学习。具体涉及以下内容：•超级链接概念•路径和URL•超级链接的创建和编辑•各类链接的使用3.1任务一：在网页中使用超级链接3.1.1知识要点1.超级链接概念超级链接就是实现文件和文件之间的相互访问，通过超级链接可以从一个网页指向另一个目标。超级链接由两部分组成：链接的载体和链接目标，载体可以是文本或媒体，目标可以是网页、图像、邮件地址、word文档或程序。通过超级链接可以将网站内、外的网页链接在一起。2.路径和URL表示链接目标的地址就是路径，超级链接的路径有三种：（1）绝对路径：是链接目标的完整路径，包括使用的协议，例如，绝对路径通常用于站点外的文件链接。（2）相对路径：是链接目标与源的相对目录关系路径。常用于同一站点内不同文件的链接，是Dreamweaver中默认的链接路径。如图所示，index.html和gsjj.html在同一级目录内，news.html是在下级目录pages内，则index.html连接到gsjj.html的相对路径就是gsjj.html；而index.html连接到news.html的相对路径就是pages/news.html,news.html连接到index.html的相对路径就是../index.htm。（3）站点根目录相对路径：是从站点根目录开始的路径，与链接的源端位置无关。需要先配置站点的HTTP地址（用“/”表示站点根文件夹）。URL（UniformResourceLocator）：统一资源定位符，是超级链接相互访问时标准的文件定位标示，其概念类似路径，但是它应用于网页的超级链接上，所以其写法有自己的规则。例如“”是一个完整的URL，其完整的构成是协议://用户名@密码:子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志”协议根据网络服务不同而不同，比较常用的有“HTTP（超级文本传输协议）”、“FTP（文件传输协议）”、“Telnet（远程登录）”等。顶级域名标示不同的网站类型，例如“edu”表示教育类网站、“com”表示商业机构、“org”表示非盈利组织、“gov”表示政府等。端口可以控制访问服务器的服务，通常HTTP默认端口是80，FTP默认端口是21等。3．创建超级链接链接的形式：链接有多种，按照功能可分为站点内链接、站点外链接、邮件链接、锚链接、热点链接、空链接和脚本链接等。在DreamweaverCS5中创建超级链接，先选择网页中的链接载体（文本或媒体），然后通过以下方法可以完成建立。方法一：在“属性检查器”中点击“链接”属性右面的“浏览文件”按钮，如图所示。在弹出的“选择文件”对话框中选择被链接的文档，如图所示。方法二：在“属性检查器”中直接拖曳“链接”右面的“指向文件”按钮到要链接的文件。如图所示。方法三：在“属性检查器”中的“链接”文本框中直接输入要链接的URL。例如要连接到“百度”网站，则在链接栏中输入：。方法四：在“菜单栏”中选择“插入”|“超级链接”，在弹出的“超级链接”对话框中的“文本”中输入的是链接的文字，在“链接”中输入或浏览链接的URL，如图所示。4．超级链接的修改和删除（1）超级链接目标属性链接的“属性检查器”中“目标”设定超级链接打开目标，下拉菜单中有五个选项表示文档打开的位置，如图所示。_blank：表示每个链接都在新浏览器窗口打开。_new：表示在同一个新的浏览器窗口打开。_parent：表示如果有嵌套框架，则在父框架中打开。_self：表示在当前网页的浏览器窗口打开（默认方式）。_top：表示在一个完整的浏览器窗口打开。（2）修改超级链接超级链接创建完成后，若需要修改链接，在“修改”菜单中，选择“更改链接”命令，在弹出对话框中重新选择链接对象的路径(也可以在链接属性检查器中的“链接”栏中修改路径)。可以选中超级链接，在“属性检查器”中重新设定超级链接。（3）删除超级链接若要删除链接，则在“修改”菜单中，选择“删除链接”命令，可直接将链接删除，也可以在链接“属性检查器”中的“链接”属性中把路径删除）。3.1.2工作任务与设计效果依据教材提供素材，利用网络资源制作所有“巨鑫房地产公司网站的页面超级链接”。网站结构如图3-1-7所示，通过导航栏我们把站点内的网页链接起来。3.1.3建立站内链接先建立一个“巨鑫房产”站点，将教材中“素材3”文件夹中内容复制到站点根目录中。在Dreamweaver中打开网页index.html，如图所示。1．设置首页与站点内其他页面的链接在index.html页面的导航栏上选中“公司简介”图像，然后在“属性检查器”中拖曳“链接”属性右面的按钮到“文件”面板中的gsjj.html网页，如图所示。这样就将公司首页和公司简介两网页链接起来了，按快捷键F12，可以在浏览器中预览链接的效果。用同样的方法可以将网站首页与其他的页面（公司规划（gsgh.html）、开发项目(kfxm.html)、企业合作(qyhz.html)）链接起来。2．设置站点内其他页面与首页的链接在Dreameaver中打开gsjj.html（公司简介）页面，选择导航栏中“首页”图像，然后将“属性检查器”中“链接”属性右面的“指向文件”按钮拖曳到“文件”面板中的index.html网页如图所示，这样就将公司简介与首页链接起来了(也可用其他两种方法链接)。使用同样地方式将每个页面导航栏中的图像都连接到相应的网页，这样就可以从一个网页方便的连接到站点内的任何一个页面。3.1.4建立站外链接打开index.html页面，在页脚处设置相关链接：“搜狐”、“百度”、“网易”。（1）选中需要设置超级链接的文本“搜狐”。（2）打开“属性检查器”，在“链接”属性中输入前往的URL，（注意：书写URL的时候，前边一定要加上http等协议）。（3）如果需要将打开的超级链接显示到的新窗口中，在“属性检查器”中“目标”属性下，选择“_blank”。如图所示。使用同样地方法分别选中文本“百度”、“网易”，在链接属性中输入URL（、）就可以链接到百度和网易网站了。3.1.5建立邮件链接首页页脚需要建立邮件链接，可以通过以下方法建立：方法1：将光标定位到需要插入电子邮件的位置，在“菜单栏”中选择“插入”|“电子邮件”，在打开的对话框中设置文本和Email属性，单击确定按钮，如图所示。方法2：在Dreamweaver中打开index.html页面，选中链接载体（导航栏中的“联系我们”），在属性检查器的“链接”属性中输入“mailto:[e-mail]”。（注意：在邮件地址前加mailto:）如图所示。建立邮件链接后，预览index.html页面，点击导航栏中的“联系我们”，弹出outlook“新邮件”对话框，可直接发邮件，如图所示。3.1.6建立锚链接锚链接是在网页内部不同位置的跳转，也可以链接到其他页面的某个位置。在Dreamweaver中打开news.html页面，此页面内容较多，浏览时需要拖动滚动条，很不方便。我们可以在目录和内容之间建立锚链接，想浏览哪部分内容只需在目录上点击就连接到要预览的内容了。以下是具体步骤：（1）在需要被链接的内容标题上插入锚点，具体操作在“菜单栏”中选择“插入”|“命名锚记（Ctrl+Alt+A）”或在“插入栏”中单击命名锚记按钮，在弹出的“命名锚记”对话框中输入锚的名称，如图所示。（2）选种目录中标题（链接载体），打开“属性检查器”，拖动指向文件按钮，将箭头指向被链接的锚图标。如图3-1-16所示同理可以将每个内容标题前面都命名一个锚，将他和目录标题都进行锚链接。这样浏览起来很方便。3.1.7超接链接的管理（1）链接内容的修改：选中设置好的超级连接，打开“属性检查器”，在“链接”属性的文本框中进行修改。（2）超接链接的删除：选中设置好的超级连接，打开“属性检查器”，在“链接”属性的文本框中删除文本。当链接修改完之后，保存文件时，Dreamweaver中弹出更新链接的对话框以确保修改后链接的正确性，通常会单击“更新”，如图所示。（4）超接链接的检查：当链接的文件路径错误或文件丢失时，链接就会断开，Dreamweaver可以检查网页断开的链接并修复。打开“链接检查器”，如图所示，点击断开链接文件右面的浏览文件按钮在弹出的对话框中重新选择链接目标。3.1.8工作任务总结在这个任务中利用DreamweaverCS5将已经编辑好的公司网站内的各网页之间链接起来，这个工作是网站编辑制作中最重要的任务之一。通过这个任务能够很好的训练各种超级链接的创建、修改等。3.2任务二：设置超级链接样式3.2.1知识要点当网页中的内容设置了超级链接后会和普通文本的样式有很大差别，光标移到链接载体上时会变成“手”型，文本默认的超级链接样式是蓝色文字带下划线，拜访过的超级链接变为深紫色文字。这些样式都是可以根据自己的喜好在“页面属性”对话框中修改的。1．链接的四个状态链接颜色：没有被访问过的超级链接的色彩，也没有鼠标对其进行任何操做。变换图像颜色：鼠标放置到超级链接之上显示的色彩。已访问过链接：超级链接被访问过以后显示的色彩。活动链接：在超级链接上单击鼠标显示的色彩。2．下划线样式•始终有下划线。•始终无下划线。•仅在变换图像时显示下划线：鼠标悬停在超级链接之上时显示下划线。•在变换图像时隐藏下划线：鼠标悬停在超级链接之上时不显示下划线。3.2.2工作任务和设计效果本节工作任务是为上一节已经创建好超级链接的页面进行超级链接的样式设定，从而给超级链接个性化显示。其效果如图所示。3.2.3设置超级链接样式单击index.html页面空白处，在“属性检查器”中单击“页面属性”按钮，在弹出的对话框中中进行设置：链接颜色为#666666(灰色)。鼠标放到超级链接之上，颜色变为#ff0000。活动链接的颜色和鼠标经过相同。访问过的颜色为#666666。仅在变换图像时显示下划线样（可分别比对以下其他几种效果）。设置完成后在浏览器中我们看到的文本是灰色的，鼠标移动到链接字体上就变成红色的，鼠标也变成“手”型。注意：上面只能设置“文本”的链接样式，若链接载体是图像，可以利用“鼠标经过图像”特效制作导航条（见第二章的插入图像对象内容）。更多的链接样式设置在可以使用后续章节中介绍的CSS技术进行设置。3.2.4工作任务总结本节的任务主要训练如何设定网页中超级链接的样式，在网页中有四种状态：链接（link）、变换图像（hover）、活动（active）访问过（visited）。一般设置link状态样式要与hover状态样式有明显区别，才会是浏览器中的链接时具有动态效果。设置好的链接样式可以使导航一目了然，方便用户的使用。3.3其他超接链接1．空链接在“属性检查器”的“链接”属性中输入“#”，空链接是激活网页某对象的，可以为他添加一个链接的动作，在浏览器中点击链接时并不链接到新的网页。一般网站首页导航栏的首页链接就可是空链接。很多情况下不明确的链接目标可以使用空连接临时代替。2．脚本链接在“链接”属性中输入“Javascript:脚本命令”，可通过链接触发脚本命令。以下给出了几个常见的脚本链接命令：（1）关闭窗口：javascript:window.close()，效果如图所示。（2）弹出提示对话框：javascript:alert(‘欢迎光临！‘)，效果如图所示。（3）添加到收藏夹：javascript:window.ex