HTML、CSS和JavaScript学习五(案例分析一框架窗体分割、超链接和热点区域)
2016-03-27 22:03
831 查看
HTML、CSS和JavaScript三者合并时
下面主要以不同例子进行说明三者的结合使用：
一．框架之间的链接，以及热点区域的使用：
先看效果图：
准备四个html文件，分别是framesets.html、img.html、lianjie1.html和lianjie2.html
framesets.html 的代码如下，很简单:
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>窗体分割</title>
</head>
<frameset cols="20%,*">
<frame src="img.html"/>
<frame src="lianjie1.html" name="main">
</frameset>
<body>
</body>
分析：看到了框架集是用<frameset></frameset>标签标注的，框架是用<frame>标记的，需要注意的是<frameset>和<body>是同级的，不要讲<frameset>标签放到<body>标签中去，否则没有效果，但是可以放到<head>标签中。
窗口框架的分割的方式有两种，一种是水平的，一种是垂直的，在<frameset>标签中的cols属性和rows属性用来控制窗口的分割方式。本例中采用的垂直分割。下面分析cols的属性，rows同理。
语法结构：<frameset cols="n1,n2,...,*">
· n1表示子窗口1的宽度，以像素或百分比为单位；
· n2表示子窗口2的宽度，以像素或百分比为单位；
· 星号“*”表示分配给余下的窗口的宽度，例如例子中，第一个窗口宽度是20，那么第二个窗口就是80。
同样的，框架之间也是可以嵌套的，例如下面，是将页面先分成左右两部分，然后右边分成上中下三个部分
[java] view
plain copy
<frameset cols="20%,*">
<frame src="img.html"/>
<frameset rows="60%,20%,*">
<frame src="lianjie1.html">
<frame src="lianjie1.html">
<frame src="lianjie1.html">
</frameset>
</frameset>
本例中，左边是img.html，右边是lianjie1.html其中有个name属性，这是为了实现框架的链接，就要为它命名，以标示某个特定的框架，在img.html中会具体分析。
img.html文件的代码：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片</title>
</head>
<body background="../Picture/d55767d418386899562c84b1.jpg">
<p>
<img src="../Picture/powerxx.png" width="200" height="300" border="0" usemap="#map1"/>
<map name="map1" id="map1">
<area shape="circle" coords="121,181,46" href="lianjie1.html" target="main"/>
</map>
<img src="../Picture/powerxx.png" width="200" height="300" border="0"" usemap="#map2" />
<map name="map2" id="map2">
<area shape="circle" coords="117,125,40" href="lianjie2.html" target="main"/>
</map>
</p>
</body>
分析：当点击左边两个小机器人的特定位置时，机会跳转到指定的html文件，这就是target属性的作用，如果不设置target的属性值，就表示在原窗口中显示链接的目标页面，也就是说当点击机器人是，展现的页面将在左边的框架中显示二不在右边框架显示；如果设置为某个框架的名称(这里是"mian"，就是framesets.html中第二个框架的name值)，就表示在该框架中显示链接的页面。
热点区域：所谓的热点区域就是将一个图片划分出若干个链接区域，访问者点击不同的区域时会链接到不同的目标页面。在HTML中可以使用三种类型的热点区域：矩形、圆形和多边形。下面对本例中的img.html进行分析。
在<img>标签的后面是热点区域的相关代码，它是通过<map>标签和<area>标签来定义的。
(1).<map>标签是有一个属性，即name，其作用就是为区域命名，其值可以随便设置。
(2).<img>标签除了起到插入图片的作用外，还需要引用区域的名字，这就要加入一个usemap属性，其设置的值为<map>标签中name属性的值再加上“#”。
(3).<area>标签中有3个属性：
a.第一位shape属性，控制划分区域的形状，其设置的值有3个，分别为rect(矩形)、circle(圆形)、poly(多边形).
b.第二个为coords属性，控制区域的划分坐标。
· 如果前面设置的是“shape=rect”，那么coords的设置值分别是矩形的左、上、右、下四个坐标，单位为像素。
· 如果前面设置的是“shape=circle”，那么coords的设置值分别是圆形的圆心坐标(圆心坐标是通过左、上两点进行设置)和该圆的半径值，单位为像素。
· 如果前面设置的是“shape=poly”，那么coords的设置值分别是各点的坐标单位为像素。
注意：热点区域的坐标是相对于热点区域所在的图片来设置的，而不是以浏览器窗口为参考进行设置，这样设置的坐标值超出了图片的长宽尺寸范围就不能显示热点区域了。
c.第三个为href属性，是设置超链接的目标。
d.target已经说过是链接要显示的目标框架.target有4个值：
· _blank：表示新打开一个网页，是以另外一个窗口打开
· _self：相当于不设置target属性，即在原窗口中显示链接的页面
· _top：说过框架可以层层嵌套，如果target是属性值为“_top”，就表示在顶级框架，也就是在浏览器窗口中显示链接的页面
· _parent：表示在“上一级”框架中显示链接的页面。
lianjie1.html和lianjie2.html代码基本相同，只是背景和文字不一样：
lianjie1.html：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#0000CC;
font-size:100px;
}
</style>
</head>
<p><body background="../Picture/dddff8ee3466c57178f0550c.jpg" topmargin="300"></p><p><p align="center"></p><p></p><p> 这是第一个链接页面</p><p></p></p><p></body></p>
lianjie2.html：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#0000CC;
font-size:100px;
}
</style>
</head>
<body background="../Picture/60006863f9cf427aeaf8f807.jpg" topmargin="300">
<p align="center">
这是第二个链接页面
</p>
</body>
下面主要以不同例子进行说明三者的结合使用：
一．框架之间的链接，以及热点区域的使用：
先看效果图：
准备四个html文件，分别是framesets.html、img.html、lianjie1.html和lianjie2.html
framesets.html 的代码如下，很简单:
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>窗体分割</title>
</head>
<frameset cols="20%,*">
<frame src="img.html"/>
<frame src="lianjie1.html" name="main">
</frameset>
<body>
</body>
分析：看到了框架集是用<frameset></frameset>标签标注的，框架是用<frame>标记的，需要注意的是<frameset>和<body>是同级的，不要讲<frameset>标签放到<body>标签中去，否则没有效果，但是可以放到<head>标签中。
窗口框架的分割的方式有两种，一种是水平的，一种是垂直的，在<frameset>标签中的cols属性和rows属性用来控制窗口的分割方式。本例中采用的垂直分割。下面分析cols的属性，rows同理。
语法结构：<frameset cols="n1,n2,...,*">
· n1表示子窗口1的宽度，以像素或百分比为单位；
· n2表示子窗口2的宽度，以像素或百分比为单位；
· 星号“*”表示分配给余下的窗口的宽度，例如例子中，第一个窗口宽度是20，那么第二个窗口就是80。
同样的，框架之间也是可以嵌套的，例如下面，是将页面先分成左右两部分，然后右边分成上中下三个部分
[java] view
plain copy
<frameset cols="20%,*">
<frame src="img.html"/>
<frameset rows="60%,20%,*">
<frame src="lianjie1.html">
<frame src="lianjie1.html">
<frame src="lianjie1.html">
</frameset>
</frameset>
本例中，左边是img.html，右边是lianjie1.html其中有个name属性，这是为了实现框架的链接，就要为它命名，以标示某个特定的框架，在img.html中会具体分析。
img.html文件的代码：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片</title>
</head>
<body background="../Picture/d55767d418386899562c84b1.jpg">
<p>
<img src="../Picture/powerxx.png" width="200" height="300" border="0" usemap="#map1"/>
<map name="map1" id="map1">
<area shape="circle" coords="121,181,46" href="lianjie1.html" target="main"/>
</map>
<img src="../Picture/powerxx.png" width="200" height="300" border="0"" usemap="#map2" />
<map name="map2" id="map2">
<area shape="circle" coords="117,125,40" href="lianjie2.html" target="main"/>
</map>
</p>
</body>
分析：当点击左边两个小机器人的特定位置时，机会跳转到指定的html文件，这就是target属性的作用，如果不设置target的属性值，就表示在原窗口中显示链接的目标页面，也就是说当点击机器人是，展现的页面将在左边的框架中显示二不在右边框架显示；如果设置为某个框架的名称(这里是"mian"，就是framesets.html中第二个框架的name值)，就表示在该框架中显示链接的页面。
热点区域：所谓的热点区域就是将一个图片划分出若干个链接区域，访问者点击不同的区域时会链接到不同的目标页面。在HTML中可以使用三种类型的热点区域：矩形、圆形和多边形。下面对本例中的img.html进行分析。
在<img>标签的后面是热点区域的相关代码，它是通过<map>标签和<area>标签来定义的。
(1).<map>标签是有一个属性，即name，其作用就是为区域命名，其值可以随便设置。
(2).<img>标签除了起到插入图片的作用外，还需要引用区域的名字，这就要加入一个usemap属性，其设置的值为<map>标签中name属性的值再加上“#”。
(3).<area>标签中有3个属性：
a.第一位shape属性，控制划分区域的形状，其设置的值有3个，分别为rect(矩形)、circle(圆形)、poly(多边形).
b.第二个为coords属性，控制区域的划分坐标。
· 如果前面设置的是“shape=rect”，那么coords的设置值分别是矩形的左、上、右、下四个坐标，单位为像素。
· 如果前面设置的是“shape=circle”，那么coords的设置值分别是圆形的圆心坐标(圆心坐标是通过左、上两点进行设置)和该圆的半径值，单位为像素。
· 如果前面设置的是“shape=poly”，那么coords的设置值分别是各点的坐标单位为像素。
注意：热点区域的坐标是相对于热点区域所在的图片来设置的，而不是以浏览器窗口为参考进行设置，这样设置的坐标值超出了图片的长宽尺寸范围就不能显示热点区域了。
c.第三个为href属性，是设置超链接的目标。
d.target已经说过是链接要显示的目标框架.target有4个值：
· _blank：表示新打开一个网页，是以另外一个窗口打开
· _self：相当于不设置target属性，即在原窗口中显示链接的页面
· _top：说过框架可以层层嵌套，如果target是属性值为“_top”，就表示在顶级框架，也就是在浏览器窗口中显示链接的页面
· _parent：表示在“上一级”框架中显示链接的页面。
lianjie1.html和lianjie2.html代码基本相同，只是背景和文字不一样：
lianjie1.html：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#0000CC;
font-size:100px;
}
</style>
</head>
<p><body background="../Picture/dddff8ee3466c57178f0550c.jpg" topmargin="300"></p><p><p align="center"></p><p></p><p> 这是第一个链接页面</p><p></p></p><p></body></p>
lianjie2.html：
[java] view
plain copy
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
p{
color:#0000CC;
font-size:100px;
}
</style>
</head>
<body background="../Picture/60006863f9cf427aeaf8f807.jpg" topmargin="300">
<p align="center">
这是第二个链接页面
</p>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用cJSON解析JSON字符串
- 【JavaScript】（9）——实例：滑动效果的弹出框
- js内置对象
- json总结
- JS学后感受
- 【JavaScript内置函数】
- JSplitPane上添加列表和图片代码
- JSP内置对象
- C#解析JSON数据
- 【转载】JSP常用跳转方式
- JS异步阻塞的迷思
- JS DOM编程艺术学习笔记（一）
- JavaScript概述
- 为什么JSP比Beetl要慢？
- 【bzoj1030】[JSOI2007]文本生成器
- javascript匿名函数的运用
- 【BZOJ1029】[JSOI2007]建筑抢修【优先队列】【贪心】
- JS 事件基础 跟随鼠标移动
- JS语言精粹学习笔记--对象字面量
- javascript 事件处理