HTML教程 08第八章.docx

1、HTML教程 08第八章第八章框架框架（frame）最主要的功能是用来分割页面窗口，使每个“小窗口”能显示不同的HTML文件。这样的页面结构称为框架结构的页面，而这些“小窗口”就被称为框架的“窗口”。本章将详细讲解各种框架标记的使用。8.1框架的基本结构“框架”是由英文frame翻译过来的，也有人也把它翻译为“帧”。使用框架结构，可以在一个浏览器窗口中装载多个HTML文件，即每个网页占据一个框架。而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架。框架的基本语法如下： 框架的外层标志是和，这对标志用来定义主文档中有几个帧、并且各个帧是如何排列的，定义的方法是使用cols属性或

2、rows属性，cols属性值用来垂直分割窗口，rows属性值用来水平分割窗口。使用标志时，这两个属性必须至少选择一个，否则浏览器只显示第一个定义的帧，剩下的一概不管。rows和cols的属性值可以是百分数、像素值或星号“*”，其中星号代表那些未被说明的空间。同时，所有的帧按照rows和cols的值从左到右、然后从上到下排列。说起来也许很抽象，过一会儿大家一看例子就明白了。标志放在之间，用来定义某一个具体的框架。标志具有src和name属性，这两个属性一般都需要赋值。src是此框架要显示的HTML文件名（包括路径），name是此框架的名字，这个名字用来供超链接标志使用的。假设我们已有三个网页文件

3、chap8_cat1.html、chap8_cat2.html、chap8_cat3.html，chap8_cat1.html内容如下： chap8_cat2.html内容如下： chap8_cat3.html内容如下： 大家已经看到了：因此这三个网页都很简单，仅仅是显示一幅图片。下面我们把这三个网页显示在一个框架中。【例1】cols属性的使用。 itsway - 框架 显示结果如下图所示。可以看出，第一个窗口占25%的宽度，第一个窗口占30%的宽度，第三个窗口占剩余宽度。剩余宽度或高度用“*”表示。并且，chap8_cat1.html显示在第一个窗口中，chap8_cat2.html显示在第

4、二个窗口中，依此类推。另外，当浏览器窗口大小变化时，框架也会随之等比例缩放，此时如果框架窗口放不下网页，一般会自动出现滚动条，如下图所示。请注意：框架的外层标志、不能和、同时使用！也就是说，一旦使用了框架结构，就不能使用、标记了。还可以在cols、rows属性中使用具体的像素值来代替百分比，下面我们看例2。【例2】rows属性的使用。 itsway - 框架 显示结果如下图所示。可以看出，第一个窗口占100像素高度，第二个窗口也占100像素高，第三个窗口占剩余高度。在这里因为用像素指定了前两个框架窗口的高度，所以它们一般不会随浏览器窗口大小发生变化而调整高度，除非浏览器窗口本身比较小。8.2嵌

5、套分割窗口嵌套分割窗口就是在一个页面中，既有水平分割的框架，也有垂直分割的框架。语法为： 也就是说，在外层框架的定义中，再插入、定义框架，取代某一个外层框架的定义，这就是框架的嵌套。【例3】先水平分割、再垂直分割的框架结构。 itsway - 框架 显示结果如下图所示。【例4】先垂直分割、再水平分割的框架结构。 itsway - 框架 显示结果如下图所示。还可以在中一起使用rows和cols属性，请看下例。【例5】统一分割窗口的复杂框架结构。 itsway - 框架 显示结果如下图所示。这里一共有六个框架，整个窗口先按rows属性的设置分成两行，各行高为40%和60%。然后各行再按cols属性

6、的设置分成三列，各列宽为30%、窗口宽度的70% - 100像素、100像素。例5是首先定义rows属性、再定义cols属性，也可以先定义cols属性、再定义rows属性，形式如下：读者可以想想这样的框架结构会是什么样子，再自己实验一遍。有了这五个例子，更复杂的框架结构也就可以定义了。为了更好地理解rows和cols属性值的意义，再给出一些例子，如下表所示。框架示例解释共有三个按行排列的框架，每个框架占整个浏览器窗口的1/3高度。共有三个按列排列的框架，第一个框架占整个浏览器窗口宽度的40%，剩下的空间平均分配给另外两个框架。8.3框架边框设置从前面几个实例可以看出，在默认情况下，框架窗口都有

7、一条边框线。我们不仅可以设置是否显示边框线，而且还可以设置边框的宽度和颜色。1、frameborder属性frameborder属性用于设置是否显示边框线，语法格式为：或frameborder的取值只能为0或1，1为默认值，表示显示；如果为0，则边框线会隐藏起来。在中设置将对整个框架有效，在中设置则只对当前这个框架有效。【例6】框架边框。 itsway - 框架 显示结果如下图左边所示。可以看到页面中间部分的边框被隐藏起来了。在IE浏览器中，当鼠标移动到窗口中间时会变成双箭头形状，此时按下鼠标就可以调整各窗格大小了，如图右边所示。但在Firefox和Netscape中无效。2、framespa

8、cing属性当框架有边框时，边框宽度在默认情况下是1像素。IE规定，通过framespacing属性还可以调整其大小，格式为：边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位，并且这一属性只能在中使用，对单个无效。【例7】框架宽度。 itsway - 框架 在IE中的显示结果如下图所示。注意，此属性只在IE中有效，在Netscape、Firefox中无效。3、bordercolor属性使用bordercolor属性可以设置框架集的边框颜色，格式为：这一属性只能在中使用，对单个无效。【例8】框架边框颜色。 itsway - 框架 在Firefox中的显示结果如下图所示。bordercol

9、or属性在IE、Netscape和Firefox中都有效。但正如上图所显示的那样，framespacing属性在Firefox和Netspace中无效（在Netscape中的显示图略）。4、scrolling和noresize属性标记还有scrolling和noresize属性。scrolling用来指定是否显示滚动轴，取值可以为： yes：显示滚动轴。 no：不显示滚动轴。 auto：若需要则会自动显示滚动轴，不需要则自动不显示，是默认值。noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个框架的大小。【例9】使用scrolling和noresize属性。 itswa

10、y - 框架 在IE中的显示结果如下图所示。可以看出，当设置scrolling为yes时，滚动轴总会存在；当设置scrolling为no时，窗格中无滚动轴；设置scrolling为auto时，滚动轴会在需要的时候自动添加。读者可以缩放窗口自己试验。8.4边框与页面内容的距离设置框架页面与HTML中的表格一样，也可以设置边框与页面内容的距离。设置水平边距要使用marginwidth属性，设置垂直边距要使用marginheight属性，单位都是像素，格式为：marginwidth用来设置页面左右边缘与框架边框的距离，marginheight用来设置页面上下边缘与框架边框的距离。【例10】使用mar

11、ginwidth和marginheight属性。首先创建一个chap8_guzhen.html文件，内容如下。 itsway - 框架     周庄和同里都在江苏省，是名声最响的，也是旅行团的线路最常出现的古镇。     从苏州到周庄，只有一个小时的车程。周庄面积不大，虽然有水路贯穿，但跨越一座座小桥一样可以走遍周庄。周庄中心地带的双桥，就是因为陈逸飞的一幅画而名声大噪，除了游人之外，更把很多艺术家吸引到周庄进行创作。元末明初家住周庄的江南首富沈万三很多人并不知道，然而到周庄一定要品尝一下“万三蹄膀”，红彤彤的颜色

12、看着就很有食欲。不过由于名气太大，所以每到旅游旺季，这里的游客摩肩接踵，多少影响到了古镇中本来的安祥气氛。 然后创建框架文件chap8_10.html文件，内容如下。 itsway - 框架 显示结果如下图所示。可以看出，文本内容和框架上边框、左边框的距离都有大小不等的空间。还可以在、之间放置、标志对，以便在不支持框架结构的浏览器中显示一些信息。在此标志对之间，先放进、标志对，然后才可以使用我们以前将过的任何标记。格式为： 不过，现在一般的浏览器都支持框架结构，所以、标志对用的不多。8.5name属性至此为止，我们还从没有用过中的name属性。name属性非常重要，在很多情况下需要使用。现在我

13、们通过一个实例来看看它的重要作用。【例11】使用name属性。首先创建一个chap8_cat.html文件，内容如下。 itsway - 框架 猫眯1 猫眯2 猫眯3 然后创建框架文件chap8_11.html文件，内容如下。 itsway - 框架 显示结果如下图所示。当单击左边框架中的各个超链接时，就会在右边框架中显示相应的网页。在chap8_cat.html中先定义了一个表格，然后在表格中放置了一些超链接，用于打开网页。但超链接的target属性值是catframe，它和chap8_11.html中的一个框架的name值对应。因此如果把chap8_cat.html嵌如到chap8_11.

14、html中，单击它的各个超链接，就会在catframe框架中打开相应的页面。使用框架及其name属性建立结构更复杂的网页，是框架的一个重要应用。用框架结构建立的网站为数不少，例如天涯论坛（），其主界面如下图所示（这是某个时间的抓图，现在未必是这样）。这个界面结构的外层框架是垂直划分的，左边框架的列宽130像素，右边框架占其余部分。在左边框架中又划分为两个框架，其中下面的框架（在上图中显示“登录/注册”等内容的窗格）的高度是50像素，上面的框架占其余部分。它核心代码如下： frame name=contents target=main scrolling=no src= frame name=rightmain src= 本页面使用框架，如果你的浏览器不支持框架，请联系WangJianke. 可以看出，各个窗格用于显示网页。读者或许觉得它的代码比较复杂，扩展名又是shtml又是jsp的，都不是正规的HTML网页。其实它们并不神秘，它们都是动态网页，都是在服务器端产生的。这里简要介绍一下：包含SSI（Server Side Include，“服务器端包含”）指令的文件要求特殊处理，所以必须为所有