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

第4章建立超链接 超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。 与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。 4.1 从HTML的角度理解超链接 仍然根据本书的原则，先从HTML语言的角度，来介绍超链接。然后再使用Dreamweaver 8为网页添加超链接。下面就来介绍各种超链接的制作方法。 4.1.1 文字超链接 【例4-1】 文字超链接示例 html head title超链接/title /head body 单击a href=1.html这里/a链接到一个图片网页图4-1 超链接的建立 /body /html 4.1.2 理解路径的概念 路径的作用就是定位一个文件的位置，使用过Windows的用户都会了解文件夹和子文件夹，这本身就是路径的概念。例如在上面的例子中，链接到的“1.html”就是一个路径，直接使用文件名表示这个文件和原来的网页文件在同一个文件夹中。如果链接到的网页不和原网页在同一个文件夹中，就不能这样写了。 例如如图4-2所示的目录结构。 【例4-2】 路径示例 html head title超链接/title /head body 单击a href=sub/1.html这里/a链接到一个图片网页 /body /html 4.1.3 设置文字链接的颜色 超链接可以通过设置链接的颜色来表示链接是否已经被单击，但这是在“body”标签中设置的，而不是在“a”标签中。下面来看一个具体的例子。 【例4-3】 超链接颜色设置示例 html head title链接颜色的变化/title /head body text=blue alink=red vlink=yellow link=green 注意a href=1.html颜色/a的变化 /body /html 4.1.4 特定目标的链接 在制作网页时，可能会出现网页内容过长或者是网页内容繁杂混乱的情况，这样当用户浏览网页时就会很不方便。要解决这个问题，可以使用超链接的手段在网页开头的地方制作一个向导链接，直接链接到特定的目标，这个目标成为“锚记”。 【例4-4】 锚记应用示例 html head title特定链接/title /head body h1古诗鉴赏/h1p h3单击a href=#春宫怨春宫怨/a/h3p h3单击a href=#登科居登科居/a/h3p h3单击a href=#五十言怀诗五十言怀诗/a/h3p a name=春宫怨h2春宫怨/h2/a 昨夜风开露井桃，p 未央前殿月轮高。p 平阳歌舞新承宠，p 帘外春寒赐锦袍。p brbrbr a name=登科居h2登科居/h2/a 昔日龌龊不足夸，p 今朝放荡思无崖。p 春风得意马蹄疾，p 一日看尽长安花。p brbrbr a name=五十言怀诗h2五十言怀诗/h2/a 笑舞狂歌五十年，p 花中行乐月中眠。p 漫劳海内传名字，p 谁信腰间没酒钱。p 诗赋自惭称作者，p 众人疑道是神仙。p 些须做得工夫处，p 莫损心头一寸天。p brbrbr brbrbr /body /html 4.1.5 以新窗口显示链接页面 相信大家已经发现，当单击链接时，所链接页面还是在同一个窗口中显示。如要在新窗口显示，只需在“a”标签中加入“target”属性就可以了。代码如例4-5所示。 【例4-5】 在新窗口中打开链接页面示例 html head title以新窗口方式打开/title /head body 以a href=1.html target=_blank新窗口/a方式打开一个网页 /body /html 4.2 使用Dreamweaver 8设置超链接 4.2.1 文字超链接 使一些文字成为超链接的方法非常简单。用鼠标选中要