第4章 建立超链接

第4章建立超链接使用Dreamweaver8设置超链接4.2实践与练习：鼠标经过图像4.4实践与练习：为文字添加超链接4.3从HTML的角度理解超链接4.1实践与练习：导航条4.5小结超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。4.1从HTML的角度理解超链接仍然根据本书的原则，先从HTML语言的角度，来介绍超链接。然后再使用Dreamweaver8为网页添加超链接。下面就来介绍各种超链接的制作方法。4.1.1文字超链接图4-1超链接的建立【例4-1】文字超链接示例htmlheadtitle超链接/title/headbody单击ahref=1.html这里/a链接到一个图片网页图4-1超链接的建立/body/html4.1.2理解路径的概念路径的作用就是定位一个文件的位置，使用过Windows的用户都会了解文件夹和子文件夹，这本身就是路径的概念。例如在上面的例子中，链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。例如如图4-2所示的目录结构。图4-2调用下一级目录中的文件图4-3调用不同文件夹中的文件【例4-2】路径示例htmlheadtitle超链接/title/headbody单击ahref=sub/1.html这里/a链接到一个图片网页/body/html图4-4“页面载入错误”对话框4.1.3设置文字链接的颜色超链接可以通过设置链接的颜色来表示链接是否已经被单击，但这是在“body”标签中设置的，而不是在“a”标签中。下面来看一个具体的例子。图4-5超链接文字的颜色设置【例4-3】超链接颜色设置示例htmlheadtitle链接颜色的变化/title/headbodytext=bluealink=redvlink=yellowlink=green注意ahref=1.html颜色/a的变化/body/html图4-6“Internet属性”对话框4.1.4特定目标的链接在制作网页时，可能会出现网页内容过长或者是网页内容繁杂混乱的情况，这样当用户浏览网页时就会很不方便。要解决这个问题，可以使用超链接的手段在网页开头的地方制作一个向导链接，直接链接到特定的目标，这个目标成为“锚记”。【例4-4】锚记应用示例htmlheadtitle特定链接/title/headbodyh1古诗鉴赏/h1ph3单击ahref=#春宫怨春宫怨/a/h3ph3单击ahref=#登科居登科居/a/h3ph3单击ahref=#五十言怀诗五十言怀诗/a/h3paname=春宫怨h2春宫怨/h2/a昨夜风开露井桃，p未央前殿月轮高。p平阳歌舞新承宠，p帘外春寒赐锦袍。pbrbrbraname=登科居h2登科居/h2/a昔日龌龊不足夸，p今朝放荡思无崖。p春风得意马蹄疾，p一日看尽长安花。pbrbrbraname=五十言怀诗h2五十言怀诗/h2/a笑舞狂歌五十年，p花中行乐月中眠。p漫劳海内传名字，p谁信腰间没酒钱。p诗赋自惭称作者，p众人疑道是神仙。p些须做得工夫处，p莫损心头一寸天。pbrbrbrbrbrbr/body/html图4-7特定链接图4-8“五十言怀诗”的链接4.1.5以新窗口显示链接页面相信大家已经发现，当单击链接时，所链接页面还是在同一个窗口中显示。如要在新窗口显示，只需在“a”标签中加入“target”属性就可以了。代码如例4-5所示。【例4-5】在新窗口中打开链接页面示例htmlheadtitle以新窗口方式打开/title/headbody以ahref=1.htmltarget=_blank新窗口/a方式打开一个网页/body/html4.2使用Dreamweaver8设置超链接4.2.1文字超链接使一些文字成为超链接的方法非常简单。用鼠标选中要变成超链接的文字，再在“属性”面板的“链接”输入框中输入要跳转到的目标页面，也可以按下输入框旁边的文件夹图标，选择要跳转的文件。图4-9设置超链接文字图4-10“文件”面板这里再复习一下，建立超链接时要注意URL的三种方式。（1）绝对地址。例如“”。（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实践与练习：为文字添加超链接本例着重练习在Dreawmeaver8中对文字创建链接，如在一段文本中对个别的词语创建链接，在浏览该页面时可以通过该链接去浏览与该词语相关的页面。本例最终效果如图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-39鼠标经过效果图4-40鼠标离开时的效果4.5实践与练习：导航条这里说的导航条，本质上是由若干个上面介绍的“鼠标经过图像”构成的。但是Dreameaver8提供了非常方便的方法来制作它。图4-41预览页面图4-42使用图形软件制作按钮图4-43选择图像源文件图4-44插入原始图像图4-45选择导航条的方向图4-46添加项目图4-47添加第二个按钮图形图4-48完成所有项目的添加图4-49插入后的导航栏图4-50预览页面小结在本章中，分别介绍了各种链接的建立方法。网络之所以不同于传统的平面媒体和纸质的书报杂志，最大的一个特点就是它的链接特性，因此恰当地运用好超链接，可以使网站更好地为访问者服务，从而吸引更多访问者的关注。需要特别提醒读者的是，深入地理解“路径”的概念是保证网页之间互相链接正确的前提。