教学项目十四 HTML中框架的实现
【 教学内容 】
讲解 HTML中框架标志及相应的属性
【 教学目的 】
使学生掌握框架标志及属性, 学会熟练使用 HTML标志设计框架网页 。
【 教学重点 】
框架的嵌套使用
【 教学难点 】
理解属性 name,target的意义
【 教学方式 】
案例分析式, 项目教学
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<JavaScript从入门到精通 >> 电脑报社出版
3,TML网页制作教程 材义语编著 铁道出版社
4,HTML基础与实例 程耀编著 电子工业出版社
【 新课 】
一, 设计框架网页的标志
标志一,<frameset></frameset>
用于定义框架的分割方式
格式,
<frameset rows=水平分割的行高 cols=垂直分割的行宽 >
说明,
（ 1） rows,cols中必须选择一个
（ 2） rows,cols的值有三种表示方式,
数字,定的像素值；
百分比：相对宽度, 以当前的浏览器窗口为参照；
*,将剩下未被分配空间平均分配；
例,
1,<frameset rows=*,*,*>
表示按水平方向分割, 每一框架窗口占浏览器窗口的 1/3,窗口从上到下排
列；
2,<frameset cols=40%,*,*>
表示按垂直方向分割, 第一个窗口占 40%,其余两个窗口各占 30%,窗口从
左到右排列
3,<frameset rows=40%,* cols=50%,*,200>
表示先水平方向分割，再垂直方向分割，两行三列排列。
40%
60%
50% 200
标志二,<frame>
用于定义一个子框架窗口, 指定窗口中显示的网页的路径, 名称及框架名称 。
格式, <frame src=显示网页名称 name=框架名称 >
例 1：设计如下框架网页,
分析,
这是一个左右结构的框架, 框架左边窗口显示网页为 1.htm,框架窗口右边
显示网页为 2.htm
框架结构部分对应网页为 aa.htm；
程序代码如下,
1.HTM代码,
<html>
<body background=21.jpg>
<p><center><font size=6>特别推荐 </font></center>
<br><br>
<table width=300 border=1 bgcolor=#00ffee align=center>
<tr>
<td align=center><font face=隶书 size=5>文学芳草
</tr>
<tr>
<td align=center><font face=隶书 size=5>竹林听海
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>梧桐树下
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>如烟往事
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>牧歌唱晚 </font>
</td>
</tr>
</table>
</body>
</html>
2.htm代码如下,
<html>
<body bgcolor=#00ffee>
<center><img src="0244.jpg" border=1 width="280" height="400"></center>
</body>
</html>
aa.htm代码如下,
<html>
<frameset cols=50%>
<frame src=1.htm name=top>
<frame src=2.htm name=bottom>
</frameset>
</html>
二、框架标志配合使用的属性
1,<frameset>标志中的配合使用属性,
（ 1） framespacing,设定框架边框线的宽度
（ 2） frameborder,设定是否显示框线
frameborder=0 不显示框线； frameborder=1时显示框线；
(3） bordercolor,设定框线颜色
2,<frame>标志中配合使用的属性
（ 1） scrolling,设定是否显示滚动条
scrolling=auto 需要自动出现
scrolling=yes 始终出现
scrolling=no 从不出现
(2) noresize,设定是否允许调整窗口大小
(3) marginwidth,框架内网页内容与边缘的空白区宽度
（ 4） marginheight,框架内网页内容与边缘的空白区的高度
一、框架网页中超级链接的使用
例：设计如下框架网页,
分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分
别是 right,_self,_blank,bottom,top,
最上窗口是显示的网页 12.htm,上下框架网页为 index.htm;左右框架网页为
aa.htm,左框架显示网页为 1.htm,右框架显示网页为 2.htm;程序代码如下,
INGEX.htm代码,
<html>
<frameset rows=40%,* frameborder=0>
<frame src=12.htm name=top>
<frame src=aa.htm name=bottom>
</frameset>
</html>
12.Htm代码,
<html>
<body bgcolor=#00eeff>
<p><center><font color="#000000">◇ 爱情究竟是什么？◇ </font></center></p>
<p><font color="#000000">
<font color="#000000">老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让
你泪流满面； </font></p>
<p>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自
己的喷嚏和鼻涕；
朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜
饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。
<p>既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要
找把小勺子，轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合,
你中有我，我中有你，散发出令人神清气爽的醇香。 </p>
所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作
有多忙，时间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个
安静、浪漫的、温馨的地方，散散步聊聊天 --因为爱情咖啡需要找把小勺慢慢
搅拌。就在这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。
<p>关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的
角角落落,..,
</body>
</html>
1,Htm代码如下,
<html>
<body background=21.jpg>
<p><center><font size=6>特别推荐 </font></center>
<br><br>
<table width=300 border=1 bgcolor=#00ffee align=center>
<tr>
<td align=center><font face=隶书 size=5>
<A href=fp1.html target=right>文学芳草 </a>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp2.html target=_self>竹林听海 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp3.html target=_blank>梧桐树下 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<A href=fp5.html target=bottom>如烟往事 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp6.html target=top> 牧歌唱晚 </font>
</td>
</tr>
</table>
</body>
</html>
二、浮动框架
基本语法,
<iframe src=file-url height=value width=value name=名称
align=对齐方式 </iframe>
<iframe>标志配合使用的属性,
Src,框架中显示的网页文件路径
Width:框架宽度； height:框架高度
Name:框架名称； align:框架对齐方式；
Frameborder:(取值 0和 1）
Framespacing:边框线宽度
Scrolling:滚动条属性 (yes /no/ auto)
Noresize:框架调整属性
Bordercolor:边框线颜色
Marginwidth:框架边缘宽度
Marginheight:框架边缘高度
案例设计：浮动框架的使用
案例设计：浮动框架中超级链接的实现
案例设计,浮动框架在网页设计中的综合应用
【 课后小结 】
框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，
浮动框架的使用,以及在框架中设置超级链接时目标框架位置的设置。
【 教学内容 】
讲解 HTML中框架标志及相应的属性
【 教学目的 】
使学生掌握框架标志及属性, 学会熟练使用 HTML标志设计框架网页 。
【 教学重点 】
框架的嵌套使用
【 教学难点 】
理解属性 name,target的意义
【 教学方式 】
案例分析式, 项目教学
【 教学参考 】
1,<<JavaScript 入门与提高 >> 杨浩著 清华大学出版社
2,<<JavaScript从入门到精通 >> 电脑报社出版
3,TML网页制作教程 材义语编著 铁道出版社
4,HTML基础与实例 程耀编著 电子工业出版社
【 新课 】
一, 设计框架网页的标志
标志一,<frameset></frameset>
用于定义框架的分割方式
格式,
<frameset rows=水平分割的行高 cols=垂直分割的行宽 >
说明,
（ 1） rows,cols中必须选择一个
（ 2） rows,cols的值有三种表示方式,
数字,定的像素值；
百分比：相对宽度, 以当前的浏览器窗口为参照；
*,将剩下未被分配空间平均分配；
例,
1,<frameset rows=*,*,*>
表示按水平方向分割, 每一框架窗口占浏览器窗口的 1/3,窗口从上到下排
列；
2,<frameset cols=40%,*,*>
表示按垂直方向分割, 第一个窗口占 40%,其余两个窗口各占 30%,窗口从
左到右排列
3,<frameset rows=40%,* cols=50%,*,200>
表示先水平方向分割，再垂直方向分割，两行三列排列。
40%
60%
50% 200
标志二,<frame>
用于定义一个子框架窗口, 指定窗口中显示的网页的路径, 名称及框架名称 。
格式, <frame src=显示网页名称 name=框架名称 >
例 1：设计如下框架网页,
分析,
这是一个左右结构的框架, 框架左边窗口显示网页为 1.htm,框架窗口右边
显示网页为 2.htm
框架结构部分对应网页为 aa.htm；
程序代码如下,
1.HTM代码,
<html>
<body background=21.jpg>
<p><center><font size=6>特别推荐 </font></center>
<br><br>
<table width=300 border=1 bgcolor=#00ffee align=center>
<tr>
<td align=center><font face=隶书 size=5>文学芳草
</tr>
<tr>
<td align=center><font face=隶书 size=5>竹林听海
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>梧桐树下
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>如烟往事
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>牧歌唱晚 </font>
</td>
</tr>
</table>
</body>
</html>
2.htm代码如下,
<html>
<body bgcolor=#00ffee>
<center><img src="0244.jpg" border=1 width="280" height="400"></center>
</body>
</html>
aa.htm代码如下,
<html>
<frameset cols=50%>
<frame src=1.htm name=top>
<frame src=2.htm name=bottom>
</frameset>
</html>
二、框架标志配合使用的属性
1,<frameset>标志中的配合使用属性,
（ 1） framespacing,设定框架边框线的宽度
（ 2） frameborder,设定是否显示框线
frameborder=0 不显示框线； frameborder=1时显示框线；
(3） bordercolor,设定框线颜色
2,<frame>标志中配合使用的属性
（ 1） scrolling,设定是否显示滚动条
scrolling=auto 需要自动出现
scrolling=yes 始终出现
scrolling=no 从不出现
(2) noresize,设定是否允许调整窗口大小
(3) marginwidth,框架内网页内容与边缘的空白区宽度
（ 4） marginheight,框架内网页内容与边缘的空白区的高度
一、框架网页中超级链接的使用
例：设计如下框架网页,
分析：此例使用了框架嵌套，在下左窗口中设置超级链接，目标窗口分
别是 right,_self,_blank,bottom,top,
最上窗口是显示的网页 12.htm,上下框架网页为 index.htm;左右框架网页为
aa.htm,左框架显示网页为 1.htm,右框架显示网页为 2.htm;程序代码如下,
INGEX.htm代码,
<html>
<frameset rows=40%,* frameborder=0>
<frame src=12.htm name=top>
<frame src=aa.htm name=bottom>
</frameset>
</html>
12.Htm代码,
<html>
<body bgcolor=#00eeff>
<p><center><font color="#000000">◇ 爱情究竟是什么？◇ </font></center></p>
<p><font color="#000000">
<font color="#000000">老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让
你泪流满面； </font></p>
<p>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住自
己的喷嚏和鼻涕；
朋友说：爱情是只啁啾的鸟，总想往高处飞，但又总要找个栖息的角落；而嗜
饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。
<p>既然是咖啡，光有冲泡还不够味，因为总有些东西会漂在上面，所以还要
找把小勺子，轻轻地、慢慢地来搅和，让它们就在这一搅一拌中渐渐融合,
你中有我，我中有你，散发出令人神清气爽的醇香。 </p>
所以，情窦初开的你，爱如潮水的你，浓情蜜意的你，不论应酬有几多，工作
有多忙，时间多紧张，你都要找点时间，找点空闲，带上你的心上人儿找个
安静、浪漫的、温馨的地方，散散步聊聊天 --因为爱情咖啡需要找把小勺慢慢
搅拌。就在这摇拌中，把心摇近，把情摇浓，最后融合在一起再也分不开。
<p>关于爱情的点点滴滴，在这轻轻地搅拌中，愈久弥香，飘散在这座城市的
角角落落,..,
</body>
</html>
1,Htm代码如下,
<html>
<body background=21.jpg>
<p><center><font size=6>特别推荐 </font></center>
<br><br>
<table width=300 border=1 bgcolor=#00ffee align=center>
<tr>
<td align=center><font face=隶书 size=5>
<A href=fp1.html target=right>文学芳草 </a>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp2.html target=_self>竹林听海 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp3.html target=_blank>梧桐树下 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<A href=fp5.html target=bottom>如烟往事 </a>
</td>
</tr>
<tr>
<td align=center><font face=隶书 size=5>
<a href=fp6.html target=top> 牧歌唱晚 </font>
</td>
</tr>
</table>
</body>
</html>
二、浮动框架
基本语法,
<iframe src=file-url height=value width=value name=名称
align=对齐方式 </iframe>
<iframe>标志配合使用的属性,
Src,框架中显示的网页文件路径
Width:框架宽度； height:框架高度
Name:框架名称； align:框架对齐方式；
Frameborder:(取值 0和 1）
Framespacing:边框线宽度
Scrolling:滚动条属性 (yes /no/ auto)
Noresize:框架调整属性
Bordercolor:边框线颜色
Marginwidth:框架边缘宽度
Marginheight:框架边缘高度
案例设计：浮动框架的使用
案例设计：浮动框架中超级链接的实现
案例设计,浮动框架在网页设计中的综合应用
【 课后小结 】
框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，
浮动框架的使用,以及在框架中设置超级链接时目标框架位置的设置。
