第七章 框架的应用.doc

第七章 框架的应用

框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样就可以很方便的在浏览器中浏览不同的网页效果。
当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多，而且用户也可以任意的切换题目。
框架技术也多用于后台管理页面排版。

1 框架的基本结构
框架的基本结构主要分为框架和框架集两个部分。它是利用标记与标记来定义。其中ame>标记用于定义框架，而标记则用于定义框架集。

框架的基本结构

标记不可以包含在标记中，直接将该标记包含在标记中。

2 框架的设置
常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种分割方式，取决于实际需要，可用标记中的rows(水平分割)或cols(垂直分割)属性来进行分割。在完成窗口的分割后，接下来就要设置每个分割出来的子窗口。设置子窗口的属性都在相应的子窗口的标记中。其中，最重要的属性为子窗口的名称(name属性)和要导入到框架中的子窗口HTML文件的路径(src属性)。

2.1 窗口的水平分割
rows属性可定义一个水平分割的窗口框架。
格式：

…

ü rows属性的值代表各子窗口的高度，第一个子窗口高为高度1，第二个子窗口高为高度2，依此类推，而最后一个*，则代表最后一个子窗口的高度，值为其它子窗口高度分配后所剩余的高度。
ü 设置高度数值的方式有两种：
采用整数设置，单位为像素px：
用百分比设置，如：
实例1.html：

采用整数设置窗口的水平分割

在水平分割窗口后，设置第一个窗口的高度为80px，第二个窗口中的高度为120px，第三个窗口的高度是浏览器的宽度减去前两个窗口的高度。
网页效果如图7-1。

图7-1设置窗口的水平分割
2.2 窗口的垂直分割
cols属性可定义一个垂直分割的窗口框架。
格式：

…

垂直宽度值的设置，与水平分割高度值的设置方式相同。
实例2.html：

采用整数设置窗口的垂直分</p><p style='padding:5px 0px;'>6、割

网页效果如图7-2。

图7-2设置窗口的垂直分割

2.3 窗口的嵌套分割
在实际应用中，“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割，如图7-3所示，实现“厂”字型框架需要对窗口进行嵌套分割。
所谓的嵌套分割是指一个窗口框架还包含了另一个窗口框架。整个框架将用数个标记建立。
先用的rows属性对窗口进行上下分割，然后再用cols属性把下面的窗口进行垂直分割，就完成了“厂”字型的框架。
实例3.html：

窗口的嵌套分割

t>

网页效果如图7-3。

图7-3设置窗口的嵌套分割

2.4 框架的边框
在标记中，可运用border属性控制分割窗口框架的边框。
格式：
n为整数，代表此窗口框架的宽度，单位为像素(px)。
实例4.html：

框架的边框控制

网页效果如图7-4。

图7-4框架的边框
2.5 框架的隐藏
frameborder属性用于控制窗口框架的周围是否显示框架，此属性可使用在标记与标记中，如果使用在标记内时，可控制窗口框架的所有子窗口，如果用在标记中，则只能控制该标记所代表的子窗口。
格式：
"0"表示不显示边框，"1"表示显示边框，默认值为1。
实例5.html：

框架的隐藏

网页效果如图7-5。

图7-5 框架的隐藏
3 子窗口的设置
3.1 指定子窗口显示网页
src属性是用来指定要导入到某个子窗口的HTML文件的位置。
格式：
src属性的设置方法和标记的src属性的用法是一样的，下面的标记，将设置子窗口显示名称为frame.html的网页。

实例6.html：

指定子窗口显示网页

ame>

定义一个垂直分割的窗口框架，并在各子窗口中显示不同的网页。
网页效果如图7-6。

图7-6指定子窗口显示网页
3.2 定义子窗口名称
name属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链接的链接目标显示到网页的某个子窗口。
格式：

实例7.html：

指定子窗口的名称

网页效果如图7-7。

图7-7指定子窗口的名称

3.3 控制子窗口滚动条
scrolling属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免HTML文件因内容过多而无法完全显示。此属性用于标记中。
格式：olling="yes或no或auto">
yes表示为显示滚动条，no表示不显示滚动条，auto为自动设置。

实例8.html：

控制框架滚动条

ame>

网页效果如图7-8。

图7-8控制子窗口滚动条

3.4 调整子窗口的尺寸
运用标记的rows和cols属性水平或垂直分割窗口。但设置后，各窗口框架的大小并非固定无法更改，当想更改窗口框架大小时，可以将鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调整窗口的大小。
如果不希望用户能随意地改变子窗口的大小，那么这时可以在标记中，添加noresize属性，格式如下：

3.5 设置子窗口的边距
网页的边距可以通过margin来设定，那么框架和网页一样也可设置边距，可以利用标记中的marginwidth属性来设置框架左右边缘的宽度；marginheight属性可以设置框架上下边缘的宽度。
格式：

在HTML文件中，利用框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。

实例9.html：

设置框架边距
ad>

网页效果如图7-9。

图7-9 设置子框架边距

4 浮动框架
在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口，那么这就是浮动框架，插入浮动框架要使用成对的标记，同样用src属性来设置框架中显示文件的路径。
格式：
与框架不同的是，浮动框架可以包含在标记中。
浮动框架所含的属性见表7-1。
表7-1 浮动框架的属性
属性
描述
src
设置源文件路径
width
设置浮动框架窗口宽度
height
设置浮动框架窗口高度
name
设置框架的名称
align
设置框架对齐方式
frameborder
设置是否有框架边框
framespacing
设置框架边框宽度
scrolling
设置框架滚动条
noresize
设置框架尺寸是否可以调整
bordercolor
设置边框颜色
marginwidth
设置框架左右边距
marginheight
设置框架上下边距

一个页面中设置了两个浮动框架，第一个浮动框架的宽为200，第二个浮动框架的宽为300，两个浮动框架的高都为200，边框宽为3。

实例10.html：

设置浮动框架