html 的(热点区域的建立、框架的建立)

一、创建热点区域

   图片的超链接有两中形式,前面已经写过是的一种形式<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>

 

 

 

 

 

 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值