第四章 建立超链接.ppt

第4章建立超链接;使用Dreamweaver 8设置超链接 ;实践与练习：导航条 ; 超链接就是当用鼠标单击一些文字、图片或其他网页元素时，浏览器就会根据其指示载入一个新的页面或跳转到页面的其他位置。 与超链接相关的一个概念是定位点（也称锚点），它指明了网页中一个确定的位置，以便超链接跳转时定位。;4.1 从HTML的角度理解超链接;4.1.1 文字超链接;【例4-1】 文字超链接示例 html head title超链接/title /head body 单击a href=1.html这里/a链接到一个图片网页图4-1 超链接的建立 /body /html;4.1.2 理解路径的概念;图4-2 调用下一级目录中的文件 ;图4-3 调用不同文件夹中的文件 ;【例4-2】 路径示例 html head title超链接/title /head body 单击a href=sub/1.html这里/a链接到一个图片网页 /body /html;图4-4 “页面载入错误”对话框 ;4.1.3 设置文字链接的颜色; 图4-5 超链接文字的颜色设置 ;【例4-3】 超链接颜色设置示例 html head title链接颜色的变化/title /head body text=blue alink=red vlink=yellow link=green 注意a href=1.html颜色/a的变化 /body /html;图4-6 “Internet属性”对话框;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-7 特定链接 ;?图4-8 “五十言怀诗”的链接 ;4.1.5 以新窗口显示链接页面;【例4-5】 在新窗口中打开链接页面示例 html head title以新窗口方式打开/title /head body 以a href=1.html target=_blank新窗口/a方式打开一个网页 /body /html;4.2 使用Dreamweaver 8设置超链接; 图4-9 设置超链接文字 ; 图4-10 “文件”面板 ; 这里再复习一下，建立超链接时要注意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 设置热区