一、创建热点区域
图片的超链接有两中形式,前面已经写过是的一种形式<a href=" #"><img src="tumian.jpg"/></a>
另一种图片超链接的形式:是图片的热点区域。将图片划分为若干个区域。访问者点击不同的区域会链接到不同的目标页面。
1.1用HTML建立热点区域(<map><area>)
例子:
<img src="stars.jpg" usemap="#Map1"/>
<map name="Map1">
<area shape="rect" coords="23,28,111,81" href="#">
<area shape="circle" coords=" 187,57,33" href="#">
<area shape="poly" coords="23,78,90,66,378,89,67,89,34" href="#">
</map>
注意:
1)<map>只有一个属性,name属性,可以随便设置值。
2)<img>标记除了起到插入图片的作用,还要引用区域的名字,加入usemap属性,与map中的name值相对应。
3)<area>有三个属性:shape、coords、href
shape属性,控制划分与形状:rect(矩形)、circle(圆形)、poly(多边形)
coords属性,控制划分坐标:
1:如果,shape=“rect”,那么coords的设置为上、下、左、右的坐标。
2:如果,shape=“circle”,那么coords的设置为圆形的圆心坐标(它通过左,上两点的坐标设置)和该圆形的半径值。
3:如果,shape="poly”,那么coords的设置值分别为个点的坐标。
单位都是像素。
4:href属性,是设置超链接的目标。
设置coords的值不是很好设置,利用软件Dreamweaver可以创建热点区域,代码可以自动生成。
二、框架之间的链接
框架是一种常见的网页布局工具。
框架的作用:把浏览器的显示空间分割为n个部分,每个部分都可以独立显示不同的网页。、
<a>标记的target属性必须与框架配合使用。
框架集:框架的集合。
2.1建立框架与框架集
框架集的标记为:<frameset></frameset>
框架的标记为:<frame />
注意:<frameset></frameset>与<body></body>同级
2.2用cols属性将窗口分为左右两部分
框架分割有两种,一种cols--垂直分割,另一种rows--水平分割。
<frameset cols="210,*">
<frame/>
<frame/>
</frameset>
这是将窗口分割为左右两部分,左为210像素,*表示剩下的宽度。
2.3用rows将窗口分为上中下三部分
<frameset rows="210,230,*">
<frame/>
<frame/>
<frame/>
</frameset>
2.4框架的嵌套
rows与cols属性混合使用,实现框架的嵌套
<frameset cols="210,*">
<frame/>
<frameset rows="210,*">
<frame/>
<frame/>
</frameset>
</frameset>
这是现将窗口分为左右两部分,再将右部分分为上下两部分。
2.5用src属性在框架中插入网页
语法<frame src=" ..."/>
<frameset cols="210,*">
<frame src="01.html"/>
<frame src="02.html"/>
</frameset>
2.6用src属性在框架之间链接
框架的作用不仅仅是在同一个浏览器中显示多个页面,而且可以从其中一个框架的页面控制另一个页面的显示。
<frameset rows="210,*">
<frame src="04.html"/>
<frame src="05.html"/>
</frameset>
要实现跨框架链接(04.html控制05.html),就必须对框架命名,则第二个<frame/>改为<frame src="05.html" name="main"/>
name的值可以随意设置。并且将04.html中的target属性的值改为“main”,与name一致。
2.7创建嵌入式框架<iframe>
比较灵活,可以控制窗口的大小,可以配合表格随意的在网页中的任何位置插入窗口,使用时不需要创建框架集,直接插入<iframe>标记。
例如:<iframe src="04.html"></iframe>