- HTML5程序开发范例宝典
- 韩旭 高飞 孙桂杰编著
- 905字
- 2024-12-21 21:57:30
1.2 框架的应用
实例012 框架集的嵌套
这是一个可以提高基础技能的实例
实例位置：光盘\mingrisoft\01\012
实例说明
在进行网络程序开发时，在网页中使用一个框架集是非常简单的。但如果要在同一个网页中应用更多的框架集时，应该怎样进行框架集的嵌套呢？本实例将解决这一问题。运行结果如图1.13所示。
图1.13 框架集的嵌套
技术要点
本实例主要介绍框架集的嵌套应用，下面对框架集进行详细介绍。
框架集主要包含如何组织各个框架的信息，可以通过<frameset>标记来定义框架集。框架是按照行和列来组织的，可以使用<frameset>标记的下列属性对框架的结构进行设置。
（1）左右分割窗口属性cols。
在水平方向上将浏览器分割成多个窗口，这可以通过框架的左右分割窗口属性cols实现。其语法格式如下：
<frameset cols="value,value,……">
<frame>
<frame>
</frameset>
参数说明：
● value：用于指定各个框架的列宽，取值有3 种形式：像素、百分比（%）和相对尺寸（*）。
例如，若要通过框架将浏览器窗口划分为3列，其中第1列占浏览器窗口宽度的20%，第2列为120像素，第3列为浏览器窗口剩余部分的框架，代码如下：
<frameset cols="20%,120,*">
<frame>
<frame>
</frameset>
技巧：如果将cols属性设置为“*，*，*”，则表示将窗口划分成3个等宽的框架；如果将 cols属性设置为“*，2*，3*”，则表示左边的框架占窗口宽度的 1/6，中间的框架占窗口宽度的1/3，右边的框架占窗口宽度的1/2。
（2）上下分割窗口属性rows。
在垂直方向上将浏览器分割成多个窗口，这可以通过框架的上下分割窗口属性rows实现。其语法格式如下：
<frameset rows="value,value,……">
<frame>
<frame>
</frameset>
参数说明：
● value：用于指定各个框架的行高，取值有3种形式：像素、百分比（%）和相对尺寸（*），设置方法与cols属性类似。例如，若要通过框架将浏览器窗口划分为3行，其中的第1行占浏览器窗口宽度的20%，第2行为120像素，第3行为浏览器窗口剩余部分的框架，代码如下：
<frameset rows="20%,120,*">
<frame>
<frame>
</frameset>
（3）框架边框显示属性frameborder。
该属性用于指定框架周围是否显示边框，取值为1（显示边框，默认值）或0（不显示边框）。
（4）framespacing。
该属性用于指定框架之间的间隔，以像素为单位。如果不设置该属性，则框架之间没有间隔。
（5）指定边框宽度属性border。
该属性用于指定边框的宽度，只有frameborder属性为1时才有效。
实现过程
在需要进行布局的页面中写入以下程序代码，将 src属性值修改为需要链接的文件即可。代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>框架集的嵌套</title>
</head>
<!--创建嵌套框架集-->
<framesetrows="30%,*">
<frame src="software_top.html">
<frameset cols="50%,50%">
<frame src="software_main.html">
<frame src="software_left.html" scrolling="auto">
</frameset>
</frameset>
<body>
</body>
</html>
举一反三
根据本实例，读者可以进行以下操作。
开发在线论坛程序时应用框架集的嵌套。
开发新闻网站程序时应用框架集的嵌套。
开发办公自动化管理系统时应用框架集的嵌套。
实例013 在网页中应用浮动框架
本实例是一个提高网站安全性的程序
实例位置：光盘\mingrisoft\01\013
实例说明
在开发网络程序时，经常会应用到框架，例如网络考试管理系统中就涉及了浮动框架。通过浮动框架将网站中各部分独立的网页重新组成一个完整的网页，显示在浏览器中。运行本实例，如图1.14所示。在网页的左侧是一个独立的网页，右侧也是一个独立的网页。
图1.14 在网页中应用浮动框架
技术要点
本例主要应用浮动框架将各部分独立的网页重新组成一个完整的网页，下面将对浮动框架进行详细介绍。
浮动框架<iframe>是一种特殊的框架页面，在浏览器窗口中可以嵌套子窗口，在其中显示子页面的内容。其语法格式如下：
<iframesrc="文件" height="数值" width="数值"name="框架名称" scrolling="值" frameborder="值">
</iframe>
下面是浮动框架属性的详细介绍。
（1）浮动框架的文件路径属性src。
语法：
<iframesrc="file_name">
参数说明：
● file_name：指明浮动框架文件的文件名或者其他超级链接的网址。
（2）浮动框架的名称属性name。
语法：
<iframesrc="file_name" name="frame_name">
参数说明：
● frame_name：定义的浮动框架名称。
（3）浮动框架的对齐属性align。
语法：
<iframesrc="file_name" align="left/center/right">
参数说明：
● left：居左对齐。
● center：居中对齐。
● right：居右对齐。
（4）浮动框架的宽度和高度属性width、height。
语法：
<iframesrc="file_name" width="value"height="value">
参数说明：
● width：浮动框架的宽度。
● height：浮动框架的高度。
（5）浮动框架滚动条显示属性scrolling。
语法：
<iframesrc="file_name" scrolling="value">
scrolling属性的值value有3个取值。
● yes：显示滚动条。
● no：不显示滚动条。
● auto：根据窗口内容决定是否有滚动条。
（6）浮动框架边框属性frameborder。
语法：
<iframesrc="file_name" frameborder="value">
参数说明：
● value：值为yes 代表显示框架边框，值为no 代表隐藏框架边框。
（7）浮动框架边缘的宽度和高度属性marginwidth、marginheight。
语法：
<iframesrc="file_name" marginwidth="value" marginheight ="value">
参数说明：
● marginwidth：设定浮动框架左右边缘与边框的宽度。
● marginheight：设定浮动框架上下边缘与边框的高度。
实现过程
在需要重新组建的网页中写入浮动框架的程序代码，并将 src属性值设为需要组建的网页文件。代码如下：
<tablecellpadding="0" cellspacing="0"border="0" width="100%"height="100%">
<tr>
<td width="6%"></td>
<td height="100%"><iframesrc="adm_Mainleft.html" frameborder="0" width="100%"height="100%" name="mainl" align="middle"scrolling="auto">对不起，你的浏览器不支持框架！</iframe></td>
<td width="7%">
</td>
</tr>
</table>
</td></tr>
<tr>
<td height="36"> </td>
</tr>
</table>
</td>
<td width="1%">
<img src="images/Manage/gotoleft.gif"alt="放大" width=12 height="100">
</td>
<td width="490" height="300">
<iframesrc="adm_Mainright.html" frameborder="0" width="100%"height="100%" name="mainr" scrolling="auto">对不起，你的浏览器不支持框架！</iframe>
</td>
</tr>
</table>
举一反三
根据本实例，读者可以进行以下操作。
开发在线论坛程序时应用浮动框架。
开发网络游戏程序时应用浮动框架。
开发物流信息网时应用浮动框架。
实例014 创建空白框架
本实例可以提高工作效率
实例位置：光盘\mingrisoft\01\014
实例说明
在进行网络程序开发时常常需要应用到框架，所谓框架就是网页的各部分为相互独立的网页，又由一个网页将这些分开的网页组成一个完整的网页，显示在浏览者的浏览器中，此时重复出现的内容将被固定下来。那么如何在一个网页中创建空白的框架呢？本实例将解决这一问题。实例运行结果如图1.15所示。
图1.15 创建空白框架
技术要点
本实例主要应用框架的src属性给框架写一个通用的HTML文档。下面对frame框架进行详细介绍。
使用frame框架可以设置框架的属性，包括框架的名称、框架是否包含滚动条以及在框架中显示的网页等。其语法格式如下：
<framesrc="文件" name="框架名称" scrolling="值" [noresize]frameborder="数值">
下面对框架属性进行详细介绍。
（1）框架文件的路径属性src。
通过src属性来定义框架装载文件的路径。
语法：
<framesrc="file_name">
参数说明：
● file_name：指明框架文件的文件名或者其他超级链接的网址。
（2）框架的名称属性name。
通过name属性定义框架的名称，所起的名称将应用于页面的链接和脚本描述。
语法：
<framesrc="file_name"name="frame_name">
（3）框架边框显示属性frameborder。
可以设置是否显示框架边框。框架边框的显示情况继承框架集边框属性的设定。
语法：
<framesrc="file_name" frameborder="value">
参数说明：
● value：值为yes 代表显示框架边框，值为no 代表隐藏框架边框。
（4）框架滚动条显示属性scrolling。
通过scrolling属性设置是否在框架内显示滚动条。
语法：
<framesrc="file_name"scrolling="value">
scrolling属性的值value有3个取值。
● yes：显示滚动条。
● no：不显示滚动条。
● auto：根据窗口内容决定是否显示滚动条。
（5）框架边缘的宽度和高度属性marginwidth、marginheight。
通过设置这两个属性可以调整框架页面内容与边框的距离。
语法：
<framesrc="file_name" marginwidth="value" marginheight="value">
参数说明：
● marginwidth：设定框架左右边缘与边框的宽度。
● marginheight：设定框架上下边缘与边框的高度。
（6）框架尺寸调整属性noresize。
利用该属性可以控制框架的尺寸是否可以调整。
语法：
<framesrc="file_name"noresize>
noresize：禁止改变框架的尺寸。
（7）不支持框架标记<noframes>。
某些版本的浏览器是不支持框架结构的，如果遇到这种情况，就可以使用<noframes>和</noframes>标记再声明一对文件主体标记<body>和</body>，代表在无法接受框架结构时唯一显示的页面。
实现过程
在需要添加空白框架的页面中添加以下程序代码，即可完成空白框架的创建。代码如下：
<html>
<head>
<script type="text/javascript">
<!-
functionsun()
{
return "<html></html>";
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>创建空白框架</title>
</head>
<frameset>
<framename="Frame1" src="ss.htm">
<framename="Frame2"src="javascript:parent.sun()">
</frameset>
</html>
举一反三
根据本实例，读者可以进行以下操作。
开发在线论坛程序时创建空白框架。
开发在线点播系统时创建空白框架。
在开发宠物网站时创建空白框架。