html第八章链接,HTML教程08第八章

HTML教程08第八章

18第八章 框架框架(frame)最主要的功能是用来分割页面窗口，使每个 “小窗口”能显示不同的 HTML 文件。这样的页面结构称为框架结构的页面，而这些“小窗口”就被称为框架的“窗口”。本章将详细讲解各种框架标记的使用。8.1 框架的基本结构“框架”是由英文 frame 翻译过来的，也有人也把它翻译为 “帧”。使用框架结构，可以在一个浏览器窗口中装载多个 HTML 文件，即每个网页占据一个框架。而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架。框架的基本语法如下：……框架的外层标志是和 ，这对标志用来定义主文档中有几个帧、并且各个帧是如何排列的，定义的方法是使用 cols 属性或 rows 属性，cols 属性值用来垂直分割窗口，rows 属性值用来水平分割窗口。使用标志时，这两个属性必须至少选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管。rows 和 cols 的属性值可以是百分数、像素值或星号“ *”，其中星号代表那些未被说明的空间。同时，所有的帧按照 rows 和 cols 的值从左到右、然后从上到下排列。说起来也许很抽象，过一会儿大家一看例子就明白了。标志放在 之间，用来定义某一个具体的框架。 标志具有 src 和name 属性，这两个属性一般都需要赋值。src 是此框架要显示的 HTML 文件名(包括路径)，name 是此框架的名字，这个名字用来供超链接标志使用的。假设我们已有三个网页文件 chap8_cat1.html、chap8_cat2.html、chap8_cat3.html，chap8_cat1.html 内容如下：chap8_cat2.html 内容如下：19chap8_cat3.html 内容如下：大家已经看到了：因此这三个网页都很简单，仅仅是显示一幅图片。下面我们把这三个网页显示在一个框架中。【例 1】cols 属性的使用。itsway -- 框架 显示结果如下图所示。可以看出，第一个窗口占 25%的宽度，第一个窗口占 30%的宽度，第三个窗口占剩余宽度。剩余宽度或高度用“*”表示。并且，chap8_cat1.html 显示在第一个窗口中，chap8_cat2.html 显示在第二个窗口中，依此类推。另外，当浏览器窗口大小变化时，框架也会随之等比例缩放，此时如果框架窗口放不下网页，图 浏览结果20一般会自动出现滚动条，如下图所示。请注意：框架的外层标志 、不能和 、同时使用！也就是说，一旦使用了框架结构，就不能使用、标记了。还可以在 cols、rows 属性中使用具体的像素值来代替百分比，下面我们看例 2。【例 2】rows 属性的使用。itsway -- 框架 显示结果如下图所示。图 可用滚动条浏览框架中的网页图 浏览结果21可以看出，第一个窗口占 100 像素高度，第二个窗口也占 100 像素高，第三个窗口占剩余高度。在这里因为用像素指定了前两个框架窗口的高度，所以它们一般不会随浏览器窗口大小发生变化而调整高度，除非浏览器窗口本身比较小。8.2 嵌套分割窗口嵌套分割窗口就是在一个页面中，既有水平分割的框架，也有垂直分割的框架。语法为：…………也就是说，在外层框架的定义中，再插入、定义框架，取代某一个外层框架的定义，这就是框架的嵌套。【例 3】先水平分割、再垂直分割的框架结构。itsway -- 框架 22显示结果如下图所示。【例 4】先垂直分割、再水平分割的框架结构。itsway -- 框架 显示结果如下图所示。图 浏览结果23还可以在中一起使用 rows 和 cols 属性，请看下例。【例 5】统一分割窗口的复杂框架结构。itsway -- 框架 显示结果如下图所示。图 浏览结果图 浏览结果24这里一共有六个框架，整个窗口先按 rows 属性的设置分成两行，各行高为 40%和 60%。然后各行再按cols 属性的设置分成三列，各列宽为 30%、窗口宽度的 70% - 100 像素、100 像素。例 5 是首先定义 rows 属性、再定义 cols 属性，也可以先定义 cols 属性、再定义 rows 属性，形式如下：读者可以想想这样的框架结构会是什么样子，再自己实验一遍。有了这五个例子，更复杂的框架结构也就可以定义了。为了更好地理解 rows 和 cols 属性值的意义，再给出一些例子，如下表所示。框架示例 解释共有三个按行排列的框架，每个框架占整个浏览器窗口的 1/3 高度。共有三个按列排列的框架，第一个框架占整个浏览器窗口宽度的 40%，剩下的空间平均分配给另外两个框架。8.3 框架边框设置从前面几个实例可以看出，在默认情况下，框架窗口都有一条边框线。我们不仅可以设置是否显示边框线，而且还可以设置边框的宽度和颜色。1、frameborder 属性frameborder 属性用于设置是否显示边框线，语法格式为：或frameborder 的取值只能为 0 或 1，1 为默认值，表示显示；如果为 0，则边框线会隐藏起来。在中设置将对整个框架有效，在 中设置则只对当前这个框架有效。【例 6】框架边框。itsway -- 框架 25显示结果如下图左边所示。可以看到页面中间部分的边框被隐藏起来了。在 IE 浏览器中，当鼠标移动到窗口中间时会变成双箭头形状，此时按下鼠标就可以调整各窗格大小了，如图右边所示。但在 Firefox 和 Netscape 中无效。2、framespacing 属性当框架有边框时，边框宽度在默认情况下是 1 像素。IE 规定，通过 framespacing 属性还可以调整其大小，格式为：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位，并且这一属性只能在中使用，对单个 无效。【例 7】框架宽度。itsway -- 框架 图 浏览结果26在 IE 中的显示结果如下图所示。注意，此属性只在 IE 中有效，在 Netscape、Firefox 中无效。3、bordercolor 属性使用 bordercolor 属性可以设置框架集的边框颜色，格式为：这一属性只能在中使用，对单个 无效。【例 8】框架边框颜色。itsway -- 框架 在 Firefox 中的显示结果如下图所示。图 浏览结果27bordercolor 属性在 IE、Netscape 和 Firefox 中都有效。但正如上图所显示的那样，framespacing 属性在Firefox 和 Netspace 中无效(在 Netscape 中的显示图略)。4、scrolling 和 noresize 属性标记还有 scrolling 和 noresize 属性。scrolling 用来指定是否显示滚动轴，取值可以为： yes：显示滚动轴。 no：不显示滚动轴。 auto：若需要则会自动显示滚动轴，不需要则自动不显示，是默认值。noresize 属性直接加入 标志中即可使用，不需赋值，它用来禁止用户调整一个框架的大小。【例 9】使用 scrolling 和 noresize 属性。itsway -- 框架 在 IE 中的显示结果如下图所示。图 浏览结果图 浏览结果