Dreamweaver cs6入门与提高实教程课件Dreamweaver cs6入门与提高实例教程课件第5章制作超链接.ppt

第5章 制作超链接 5.1 认识超级链接 超链接由两部分组成，一部分是在浏览网页时可以看到的部分，称为超链接载体，另一部分是超链接所链接的目标。在浏览页面时，单击超链接的载体将会打开链接目标。超链接载体可以是文本、图像；链接的目标可以是网页、图片、视频或声音和电子邮件地址等。 单击超级链接的载体 5.2 创建、管理链接 5.2.1 创建文本超链接 默认情况下，文本链接显示为蓝色，并加有下划线。用户可以选择“修改”/“页面属性”菜单命令，在“页面属性”面板的“链接”分类页面设置超级链接在各种状态下的颜色，以及选择是否显示下划线。 超级链接效果 注意：Dreamweaver不支持扩展字符集（也被称为High ASCII），所以在指定链接的URL时，不能包含扩展字符集，且完全的URL最多不能超过255个字符。此外，尽管大多数浏览器可以解释路径名或URL中的空格，但在UNIX应用中，空格会被变为%20，这将使得URL比较难看。 5.2.2 创建图片链接 很多情况下，为了去掉文本链接默认的下划线效果或美化页面，网页设计者会选择用图片代替文本创建超链接，这种方式适用于所有能识别图形的浏览器。 创建图片链接的方法与创建文本链接大致相同，不同之处在于链接的载体是图片，而不是文本。 选定需要设置超链接的图片 设置了边框的图片链接 5.2.3 链接到命名锚点 命名锚点常用于长篇文章、技术文件等内容的网页，通常放置在网页中每个屏幕或每个主题之后，当用户单击某一个命名锚点时可以转到网页的特定段落，以方便文章的阅读。 指定插入锚点的位置 插入的命名锚点 注意：在“链接”文本框中输入锚点名称时，需要在锚点名称前面添加一个特殊的符号“#”。例如：#top，其中，top为命名锚点。如果所链接的锚点不在当前文档中，则在“链接”文本框中首先要添加链接页面的URL，然后输入井号和锚点名称。例如，如果要在当前页面调用同一文件夹中的index.html页面上名为top的锚点，则应在“链接”文本框中输入index.html#top。 5.2.4 创建E-Mail链接 为了使访问者在访问站点时能轻松地在网络上与网络管理者取得联系，一个最简单的办法就是在页面的适当位置加上网络管理者的E-mail地址的超链接。只要访问者单击这个地址，就可以调用默认的电子邮件程序，并新建一个邮件窗口，给网络管理者发送电子邮件了。 如果没有选中任何文本或图像，用户可以通过“电子邮件链接”对话框在页面中插入E-Mail链接。 选中要创建邮件链接的图片 电子邮件链接 5.2.5 虚拟链接和脚本链接 虚拟链接也称为空链接，是指没有指定的链接，一般用于向页面上的文本或对象添加行为。虚拟链接主要包含以下两种格式： ?a href=#虚拟链接/a ?a href=javascript:;虚拟链接/a 第1种格式被单击时将返回到页面顶部，这种格式无法添加行为；第2种格式则不会发生任何动作，就好像根本没有单击一样。 如果为第2种虚拟链接添加了动作脚本，则执行相应的动作行为，此时的链接即为脚本链接。脚本链接可以执行JavaScript代码或调用JavaScript函数，用于在不离开当前网页的情况下给予访问者有关项目的补充信息。脚本链接也可用于在访问者点击特定项目时执行计算、表单验证和其它处理任务。 5.2.6 使用URL面板管理超链接 “URLs”面板有两种视图：站点和收藏。 收藏视图用于收藏常用的资源。收藏资源并不作为单独的文件存储在磁盘上，它们是对“站点”视图列表中的资源的引用。“站点”视图和“收藏”视图的大多数操作都是相同的，不过，有几种任务只能在“收藏”视图中执行。 站点视图 收藏视图 “添加URL”对话框 添加URL 选中文本 应用URL 插入URL 5.3 使用热点制作图像映射 简单地说，图像映射就是将一幅图像用热点工具分割为若干个区域，并将这些子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。当用户单击图像上不同热点区域时，就可以跳转到不同的页面。 插入热点区域前后的效果 5.4 实例制作之制作导航条 导航条效果 拆分单元格并插入图片后的效果 多边形热点区域 设置表格背景 绘制AP元素 插入图片