当前位置：
文档之家› 网页设计javascript-窗口框架
网页设计javascript-窗口框架
医学ppt
8
8.1.3 窗口框架的分割方式
窗口框架的分割方式可分为两种，一 种是水平分割(rows属性)，另一种是垂 直分割(cols属性)。
医学ppt
9
8.2 窗口框架控制
医学ppt
10
8.2.1 框架设置标签frameset
❖<frameset>是成对标签，首标签<frameset>
和尾标签</frameset>之间的内容是HTML文
<FRAMESET cols="40%,60%">
<FRAME name="left" src="red.htm">
<FRAMESET rows="*,*">
<FRAME name="top" src="blue.htm">
<FRAME name="bottom" src="yellow.htm">
⑶ rows和cols可以用数字、百分比或剩余值 以及这三种方式的混合来表示： ① 数字：表示子窗口高度（宽度）所占的 像素点数。 ② 百分比“%”：表示子窗口高度（宽度） 占整个浏览器窗口高度（宽度）的百分比。
医学ppt
13
一、水平/垂直分割 窗口属性rows/cols
③剩余值“*”。表示当前所有窗口设定之后的剩 余部分。 当符号*只出现一次，即其他子窗口的大小都有明 确定义时，表示该子窗口的大小将根据浏览器窗 口的大小而自动调整。 当符号*出现一次以上时，表示按比例分割浏览器 窗口的剩余空间。
</frameset>
医学ppt
6
包含Frameset结构的HTML文件
文件framePage.htm的源代码
<html>
<head><title>窗口框架文档</title></head>
<frameset cols="180,*">
<frame name="windows1" src=“left.html"
1．格式： <frameset rows="值1,值2,...值n"> <frameset cols="值1,值2,...值n">
2．说明： ⑴ rows说明窗口行分隔情况，cols说明列分 隔。 ⑵ 各参数值之间用逗号分隔，依次表示各个 子窗口的高度（宽度）。
医学ppt
12
一、水平/垂直分割 窗口属性rows/cols
scrolling=auto>
<frame name="windows2" src=“main.html">
<NOFRAMES> 你的浏览器不支持带框架的网页
</NOFRAMES>
</frameset>
</html>
医学ppt
7
说
明
❖<frameset>标签用于定义一个窗口框架 ❖<frame>则用于定义窗口框架中的子窗口 ❖窗口框架文档的书写格式与一般的HTML 文档的书写格式相同，只是用<frameset>代替 <body>标签，<frameset>是一个成对标签， 有开始和结束标签，在<frameset>标签内使用 了另一个标签<frame>，用它来指定每一个窗 口的内容。
医学ppt
18
示例：框架宽度设置
<HTML><HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET border=10 cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
医学ppt
15
示例：横向与纵向同时分割
<HTML>
<HEAD>
<TITLE>Simple FRAMESET</TITLE>
</HEAD>
<FRAMESET cols="40%,60%" rows="2*,*">
<FRAME name="TopLeft" src="red.htm">
<FRAME name="TopRight" src="green.htm">
医学ppt
4
在介绍窗口框架文档之前，先来看看其 应用实例，有一个感性认识，见下图。
医学ppt
5
8.1.2 窗口框架的基本结构
Frameset结构的基本格式
<frameset> <frame src="url“ name=“w1”> <frame src="url“ name=“w2”> ...
<NOFRAMES> ... </NOFRAMES>
档主体部分。
❖使用框架的HTML文档中不能出现<body>
标签，否则会导致web浏览器忽略所有的框架
定义而只显示<body>和</body>之间的内容。
❖<frameset>标签主要有rows、cols、border、
bordercolor和frameborder五个属性。
医学ppt
11
一、水平/垂直分割 窗口属性rows/cols
第8 章 窗口框架医学ppt1第8章 窗口框架
8.1 窗口框架简介 8.2 窗口框架控制 8.3 FRAME间的链接 8.4 浮动窗口
医学ppt
2
8.1 窗口框架简介
医学ppt
3
8.1.1 什么是窗口框架
•窗口框架可用于将窗口画面分割成多 个小窗口，且每个小窗口中，可以显 示不同的网页，达到在浏览器中同时 浏览多个不同网页的效果。
<FRAME name="BotLeft" src="blue.htm">
<FRAME name="BotRight" src=“yellow.htm">
</FRAMESET>
</HTML>
医学ppt
16
示例：嵌套分割
<FRAMESET rows="105,*">
<FRAME name="adbanner" src="ad.htm">
</FRAMESET>
</FRAMESET>
</FRAMESET>医学ppt
17
二、设置窗口框架 宽度属性border
在<frameset>标签中，可运用border属性 控制分割窗口的框架的宽度，其语法如下所 示：
<frameset border="数值"> 其中的数值代表此窗口框架的宽度，单位 为像素,數值為整數。
医学ppt
14
示例 ：<frameset cols="40%,2*,*">
表示将浏览器窗口分割为3列： 第一个子窗口在第一列，窗口宽度为整 个浏览器窗口宽度的40%； 第二个子窗口在第二列，占浏览器窗口 剩余空间的2/3，即其宽度为整个浏览器 窗口宽度的40%； 第三个子窗口占剩余空间的1/3，宽度为 整个浏览器窗口宽度的20%。
