网页制作与开发教程_张强 高建华 温谦 第4章 建立超链接新ppt课件.pptVIP

图4-39 鼠标经过效果 图4-40 鼠标离开时的效果 4.5 实践与练习：导航条 这里说的导航条，本质上是由若干个上面介绍的“鼠标经过图像”构成的。但是Dreameaver?8提供了非常方便的方法来制作它。 图4-41 预览页面 图4-42 使用图形软件制作按钮 图4-43 选择图像源文件 图4-44 插入原始图像 图4-45 选择导航条的方向 这里再复习一下，建立超链接时要注意URL的三种方式。 （1）绝对地址。 例如“/page1.htm”。 （2）相对于服务器根目录。 例如“/page1.htm”，以一条斜线（/）开头，说明文件page1.htm在服务器的根目录下。 （3）相对于文档。 例如“page1.htm”，说明页面page1.htm在当前文档所在的目录下。在这种方式下，可以用两个点号表示上一级目录，例如“../page1.htm”表示页面page1.htm在当前文档的上一级目录中。 4.2.2 图片超链接 与文字的超链接很相似，图片也可以作为超链接。 在文档窗口选中图片，打开“属性”面板，与建立文字超链接相同，可以建立图片超链接。 图4-11 制作需要链接的页面 图4-12 输入正文 图4-13 插入图片 图4-14 启用“矩形热点工具” 图4-15 绘制矩形热点区域 图4-16 完成矩形热点区域的绘制 图4-17 指针热点工具 图4-18 设置热区的链接地址和弹出方式 图4-19 选择“椭圆形热点工具” 图4-20 绘制椭圆热点区域 图4-21 添加链接地址 图4-22 绘制多边形热点区域 图4-23 预览页面 4.3 实践与练习：为文字添加超链接 本例着重练习在Dreawmeaver 8中对文字创建链接，如在一段文本中对个别的词语创建链接，在浏览该页面时可以通过该链接去浏览与该词语相关的页面。本例最终效果如图4-24所示。 图4-24 文档链接效果 图4-25 “新建文档”对话框 图4-26 创建新文档 ?图4-27 保存新文档 图4-28 输入文本 图4-29 需要创建链接的文本 图4-30 属性面板 图4-31 “选择文件”对话框 图4-32 选择链接文件 图4-33 “对数”链接属性 图4-34 “帕斯卡”链接属性 图4-35 文档链接效果 4.4 实践与练习：鼠标经过图像 在网页上我们经常遇到这样的图片，它本身是一个图片链接，即单击它可以链接到其他页面，但它特殊的地方在于鼠标进入图片区域以后，图像会发生改变。这就称为“鼠标经过图像”，又称为“翻转图”。通过它可以制作出交互的按钮效果，这是网页中很重要的元素，能使网页更具动感。 图4-36 浏览效果 图4-37 “an1”和“an2” 图4-38 添加鼠标经过图像 * 装备一个铸造车间，需要熔炼设备、造型及制芯设备、砂处理设备、铸件清洗设备以及各种运输机械，通风除尘设备等。只有设备配套，才能形成生产能力。 * 第4章建立超链接 使用Dreamweaver 8设置超链接 4.2 实践与练习：鼠标经过图像 4.4 实践与练习：为文字添加超链接 4.3 从HTML的角度理解超链接 4.1 实践与练习：导航条 4.5 小结 超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。 与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。 4.1 从HTML的角度理解超链接 仍然根据本书的原则，先从HTML语言的角度，来介绍超链接。然后再使用Dreamweaver 8为网页添加超链接。下面就来介绍各种超链接的制作方法。 4.1.1 文字超链接 图4-1 超链接的建立 【例4-1】 文字超链接示例 html head title超链接/title /head body 单击a href=1.html这里/a链接到一个图片网页图4-1 超链接的建立 /body /html 4.1.2 理解路径的概念 路径的作用就是定位一个文件的位置，使用过Windows的用户都会了解文件夹和子文件夹，这本身就是路径的概念。例如在上面的例子中，链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件