网页设计与制作基础（HTML5+CSS3）课件 第7章 超链接与内联框架.pptx

第7章

超链接与内联框架

目录创建超链接01超链接类型02超链接属性设置03内联框架设置04

7.1创建超链接7.1.1超链接标签和属性建立超链接的HTML元素是a/a,它可以指向网络上的任何资源：一个html页面，一副图像、一个声音或者视频文件。基本格式为：ahref=””title=””target=””超链接内容/aa表示链接开始，/a表示链接结束。href属性表示链接的目标地址，可以链接到网页或者其他文件地址，既可以是绝对地址，也可以是相对地址。title属性用于显示指向链接时的提示信息。

7.1创建超链接target属性用于指定打开目标链接的窗口，默认为原窗口，其主要属性值如下：target=“_self”,在被点击的同一个框架或窗口中显示目标文档（默认）。target=“_blank”,在一个新窗口中载入目标文档。target=“_parent”，在父框架或父窗口中载入目标文档。target=“_top”，在窗口主体中载入目标文档。其中，_self，_parent，_top这三个值一般与iframe一起使用。

7.1.2超链接路径在建立超链接时，属性href指定了要链接到的目标地址，这个目标地址称为超链接路径。常见的超链接路径表示方法有三种：绝对路径绝对路径是指包括服务器协议在内的完全路径，必须使用绝对路径才能链接到其他服务器上的文档。例如：/zfxxgk/gkzd/202006/1702222.html外部链接一般使用绝对路径表示。

7.1.2超链接路径文档相对路径的是以当前网页所在文件夹为基础来计算的路径。文档相对路径对于大多数web站点的本地链接来说，是最适用的路径。文档相对路径需要保证链接对象和当前文档的相对位置不发生变化。根路径：根路径表示所有路径从本地站点这个根目录开始算起。例如当前站点（根目录）为d:\web1,则d:\web1\a.html可以直接写成/a.html。

7.2超链接对象超链接对象主要包括书签（命名锚记）链接，图像热点链接、电子邮件链接等。

7.2.1书签链接（命名锚记链接）书签链接也成为命名锚记链接，对于一个长html文档来说，如果要马上定位到一个具体的位置，可以在这个位置插入一个html页面的书签，之后通过超链接可以直接跳转到这个位置，这样的超链接称为书签链接。（1）首先为目标建立一个书签aid=书签名字/a（2）插入超链接，链接到该位置。ahref=#书签名字链接标题/a

图片的热点可以为一副图片的多个区域设置不同的超链接。如中国地图中，每个省区的区域分界线是没有规则的，可以使用图片热点，点击每个省区的热点，就可以链接到相应的区域从而起到图片导航的作用。7.2.2图片热点链接

建立图片热点链接的操作步骤如下：1.新建页面，在页面中插入标题和图片。如图7-7所示：2.点击图片，在属性面板显示图片属性，在左下方地图处，选择绘制热点的形状，矩形、圆形或者是多边形：7.2.2图片热点链接

3.点击矩形按钮，将鼠标移动到图片上，此时鼠标就变成十字，在需要加链接的地方即图片左侧画一个方块。添加热点后的图片区域会出现一个浅蓝色蒙版，意味着该区域已经添加了热点。4.给热点添加链接：热点区域画好后，下面的属性面板就会变成该热点区域的属性，在属性的链接右边，选择超链接的对象为介绍小狗的页面”dog.html”。7.2.2图片热点链接

7.2.2图片热点链接插入图片及热点设置代码如下：tabletrtdalign=centerimgsrc=img/xiaolan.jpgusemap=#Map//td/tr/tablemapname=Mapid=Mapareashape=rectcoords=8,8,284,394href=lan.html/areashape=rectcoords=290,10,504,395href=kenan.html//map

7.2.2图片热点链接area标签定义图像映射中的区域，其主要属性为：（1）shape规定区域的形状，分别有圆形(cir或circle)、多边形(poly或polygon)、矩形(rect或rectangle)（2）coords规定区域的x和y坐标值，coords属性与shape属性配合使用，来规定区域的尺寸、形状和位置。shape的类型主要包括以下几类：矩形：shape=rectcoords=x1,y1,x2,y2,x1,y1定义矩形左上角的坐标，x2,y2定义矩形右下角的坐标。圆形：shape=circle,coords=x,y,r，其中x,y表示圆心坐标，r为圆的半径长度。多边形：shape=ploygon，coords=x1,y1,