第6讲 网页中的超级链接.doc

第6章 网页中的超级链接 6.1任务题目 灵活运用链接知识建立各种超级链接 6.2 任务导入 如何使一个个独立的网页彼此联系起来，又如何使这些独立的网页和其他网站联系起来呢？这就需要使用超链接。通过超链接，把Internet上的众多的网站和网页联系起来，构成一个有机整体。在Internet上浏览，实际上就是通过在页面上单击链接，从当前页面跳转到另一个页面。本章主要介绍各种超链接工具的使用，在建立和设置超链接属性的同时，运用超链接知识制作出灵活跳转的各个链接页面。 6.3 任务分析 1．目的 （1）掌握简单超链接的设计能力。 （2）掌握各种链接的创建及属性设置。 2．重点 （1）掌握超链接的概念。 （2）掌握内部超链接、外部超链接创建方法及设置。 （3）掌握E-mail链接创建方法及设置。 （4）掌握锚点链接创建方法及设置。 （5）掌握图像映射链接的创建及设置。 3．难点 （1）掌握如何设置链接目标。 （2）掌握锚点链接的创建及设置。 （3）掌握图像映射链接的创建及设置。 6.4 技能目标 1．根据任务要求，能设计网页的简单超链接。 2．根据网页效果需要，能合理运用超链接属性进行参数设置。 6.5 任务讲析 6.5.1 实例演练——奥运网页超级链接的制作 【任务一】 设计思路 ◆打开网页 1．在D盘创建新文件夹名为“任务6-1”，作为站点文件夹用于存放站内的文档。 2．启动Dreamweaver CS4软件，进入Dreamweaver CS4主窗口中，单击菜单【文件】【打开】，弹出【查找文件】对话框，打开“光盘/素材/第6章/任务1/index.html”。 ◆设置内部超级链接[1] 1．选中页面里的文字“奥运动态”，然后执行【插入】【超级链接】命令，如图6-1所示，弹出【超级链接】对话框，如图6-2所示。 图6-1应用菜单命令插入超级链接 图6-2“超级链接”对话框 2．单击图6-2面板上【链接】项右边的文件夹图标，打开【选择文件】对话框，在该对话框中选择“光盘/素材/第章/任务1/ ch-11.html”。在面板上的【目标】下拉列表框中选择一个链接的打开方式，选择打开方式为“＿blank[2]-3超级链接设置 3．单击【确定】按钮，在文档中可以看到文字“奥运动态”显示为蓝色，并且在“奥运动态”下面自动生成了下划线，说明“奥运动态”超级链接已经建立，如图6-4所示。 图6-4超级链接设置完毕后文档效果 4．保存并预览网页，当鼠标移动到文字“奥运动态”时，鼠标样式为手形。如图6-5所示。单击打开另一个网页“ch6-11.html”。 图6-5鼠标移动到链接字体上时状态 ◆创建外部超级链接 1．如图6-6所示，选中“index.html”文档中的 “友情链接”四个字。 图6-6选择外部超级链接文字 2．在链接【属性】面板中对【链接】和【目标】属性进行设置。设置内容如图6-7所示。 图6-7设置外部链接地址 ◆创建邮件链接[3] 1．在文档中选中文字“联系我们”,然后在其【页面属性】面板【链接】项文本框中里直接输入E-mail链接地址“mailto:lncc_teach@163.com”, 【属性】面板显示如图6-8所示。 图6-8属性面板中的电子邮件链接 2．设置完毕后，文档窗口中的“联系我们”显示下划线，并且字体颜色显示为蓝色，即完成了一个E-mail链接。如图6-9所示。 图6-9邮件链接 ◆创建锚点链接[4] 1．打开“光盘/素材/第6章/任务1/ ch6-11.html”文档，将插入点置于第一篇文章标题 “一、“播撒和平友谊”——刘淇致函慰问火炬接力运行团队”前面，如图6-10所示。 图6-10光标定位 执行【插入】【命名锚记】命令或单击【插入】栏的【常用】类别中的【命名锚记】按钮，如图6-11所示。 图6-11单击“命名锚记”按钮 2．弹出【命名锚记】对话框，在【锚记名称】文本框中输入锚记名称为“article1”,如图6-12所示。 图6-12“命名锚记”对话框 3．单击【命名锚记】对话框上的【确定】按钮，则在页面中光标所在位置插入一个锚记图标，如图6-13所示。 图6-13插入锚记图标 提示:如果需要重新定义锚记名称的话，可以在页面中单击选中锚记图标，在【属性】面板上对锚记名称重新定义，如图6-14所示。 图6-14锚记“属性”面板 提示:如果在Dreamweaver设计视图中看不到插入的锚记图标，可以执行【查看】【可视化助理】【不可见元素】菜单命令。勾选该项，即可在Dreamweaver设计视图中看到锚记图标。在页面中插入的锚记图标，在浏览器中预览页面时是看不见的。拖动锚点标记，可以改变锚点的位置。 4．选中页首目录中的“一、“播撒和平友谊”——刘淇致函慰问火炬接力运行团队”文本，如图6-15所示。 图