HTML教程 08第八章.docx
《HTML教程 08第八章.docx》由会员分享，可在线阅读，更多相关《HTML教程 08第八章.docx（25页珍藏版）》请在冰点文库上搜索。
HTML教程08第八章
第八章 框架
框架（frame）最主要的功能是用来分割页面窗口，使每个“小窗口”能显示不同的HTML文件。
这样的页面结构称为框架结构的页面，而这些“小窗口”就被称为框架的“窗口”。
本章将详细讲解各种框架标记的使用。
8.1 框架的基本结构
“框架”是由英文frame翻译过来的，也有人也把它翻译为“帧”。
使用框架结构，可以在一个浏览器窗口中装载多个HTML文件，即每个网页占据一个框架。
而多个框架可以同时显示在同一个浏览器窗口中，它们组成了一个最大的框架。
框架的基本语法如下：
……
框架的外层标志是
，这对标志用来定义主文档中有几个帧、并且各个帧是如何排列的，定义的方法是使用cols属性或rows属性，cols属性值用来垂直分割窗口，rows属性值用来水平分割窗口。
使用
--内层框架到此结束-->
……
也就是说，在外层框架的定义中，再插入
定义框架，取代某一个外层框架的定义，这就是框架的嵌套。
【例3】先水平分割、再垂直分割的框架结构。
itsway--框架--先水平分割窗口-->
--再垂直分割窗口，在外层框架的第一个水平窗口中分割-->
--外层框架的第二个水平窗口-->
显示结果如下图所示。
【例4】先垂直分割、再水平分割的框架结构。
itsway--框架--先垂直分割窗口-->
--再水平分割窗口，在外层框架的第一个垂直窗口中分割-->
--外层框架的第二个垂直窗口-->
显示结果如下图所示。
还可以在
显示结果如下图所示。
这里一共有六个框架，整个窗口先按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，则边框线会隐藏起来。
在
显示结果如下图左边所示。
可以看到页面中间部分的边框被隐藏起来了。
在IE浏览器中，当鼠标移动到窗口中间时会变成双箭头形状，此时按下鼠标就可以调整各窗格大小了，如图右边所示。
但在Firefox和Netscape中无效。
2、framespacing属性
当框架有边框时，边框宽度在默认情况下是1像素。
IE规定，通过framespacing属性还可以调整其大小，格式为：
边框宽度就是在页面中各个边框之间的线条宽度，以像素为单位，并且这一属性只能在
在IE中的显示结果如下图所示。
注意，此属性只在IE中有效，在Netscape、Firefox中无效。
3、bordercolor属性
使用bordercolor属性可以设置框架集的边框颜色，格式为：
这一属性只能在
在Firefox中的显示结果如下图所示。
bordercolor属性在IE、Netscape和Firefox中都有效。
但正如上图所显示的那样，framespacing属性在Firefox和Netspace中无效（在Netscape中的显示图略）。
4、scrolling和noresize属性
标记还有scrolling和noresize属性。
scrolling用来指定是否显示滚动轴，取值可以为：
●yes：
显示滚动轴。
●no：
不显示滚动轴。
●auto：
若需要则会自动显示滚动轴，不需要则自动不显示，是默认值。
noresize属性直接加入标志中即可使用，不需赋值，它用来禁止用户调整一个框架的大小。
【例9】使用scrolling和noresize属性。
itsway--框架
在IE中的显示结果如下图所示。
可以看出，当设置scrolling为yes时，滚动轴总会存在；当设置scrolling为no时，窗格中无滚动轴；设置scrolling为auto时，滚动轴会在需要的时候自动添加。
读者可以缩放窗口自己试验。
8.4 边框与页面内容的距离设置
框架页面与HTML中的表格一样，也可以设置边框与页面内容的距离。
设置水平边距要使用marginwidth属性，设置垂直边距要使用marginheight属性，单位都是像素，格式为：
marginwidth用来设置页面左右边缘与框架边框的距离，marginheight用来设置页面上下边缘与框架边框的距离。
【例10】使用marginwidth和marginheight属性。
首先创建一个chap8_guzhen.html文件，内容如下。
itsway--框架 周庄和同里都在江苏省，是名声最响的，也是旅行团的线路最常出现的古镇。
从苏州到周庄，只有一个小时的车程。
周庄面积不大，虽然有水路贯穿，但跨越一座座小桥一样可以走遍周庄。
周庄中心地带的双桥，就是因为陈逸飞的一幅画而名声大噪，除了游人之外，更把很多艺术家吸引到周庄进行创作。
元末明初家住周庄的江南首富沈万三很多人并不知道，然而到周庄一定要品尝一下“万三蹄膀”，红彤彤的颜色看着就很有食欲。
不过由于名气太大，所以每到旅游旺季，这里的游客摩肩接踵，多少影响到了古镇中本来的安祥气氛。
然后创建框架文件chap8_10.html文件，内容如下。
itsway--框架
显示结果如下图所示。
可以看出，文本内容和框架上边框、左边框的距离都有大小不等的空间。
还可以在
之间放置
<![CDATA[、]]>标志对，以便在不支持框架结构的浏览器中显示一些信息。
在此标志对之间，先放进
、标志对，然后才可以使用我们以前将过的任何标记。
格式为：
--以下是在不支持框架的浏览器中显示的内容-->
<![CDATA[</p><p><body></p><p><!</p><p>--在这里可以使用HTML的任何标记，当然框架标记除外--></p><p></body></p><p>]]>
--以下是框架定义，用于在支持框架的浏览器中显示-->
不过，现在一般的浏览器都支持框架结构，所以<![CDATA[、]]>标志对用的不多。
8.5 name属性
至此为止，我们还从没有用过中的name属性。
name属性非常重要，在很多情况下需要使用。
现在我们通过一个实例来看看它的重要作用。
【例11】使用name属性。
首先创建一个chap8_cat.html文件，内容如下。
itsway--框架
--注意target属性值-->
| 猫眯1 |
| 猫眯2 |
| 猫眯3 |
然后创建框架文件chap8_11.html文件，内容如下。
itsway--框架
--注意name属性值，它用于chap8_cat.html文件的链接目的-->
显示结果如下图所示。
当单击左边框架中的各个超链接时，就会在右边框架中显示相应的网页。
在chap8_cat.html中先定义了一个表格，然后在表格中放置了一些超链接，用于打开网页。
但超链接的target属性值是catframe，它和chap8_11.html中的一个框架的name值对应。
因此如果把chap8_cat.html嵌如到chap8_11.html中，单击它的各个超链接，就会在catframe框架中打开相应的页面。
使用框架及其name属性建立结构更复杂的网页，是框架的一个重要应用。
用框架结构建立的网站为数不少，例如天涯论坛（），其主界面如下图所示（这是某个时间的抓图，现在未必是这样）。
这个界面结构的外层框架是垂直划分的，左边框架的列宽130像素，右边框架占其余部分。
在左边框架中又划分为两个框架，其中下面的框架（在上图中显示“登录/注册”等内容的窗格）的高度是50像素，上面的框架占其余部分。
它核心代码如下：
--外层按列分两个框架-->
--外层第一个框架，它再按行分为两个框架-->
src="index.ty?
url=marginheight="0">
src="
--外层第二个框架-->
<![CDATA[</p><p><body></p><p><p>本页面使用框架，如果你的浏览器不支持框架，请联系WangJianke.</p></p><p></body></p><p>]]>
可以看出，各个窗格用于显示网页。
读者或许觉得它的代码比较复杂，扩展名又是shtml又是jsp的，都不是正规的HTML网页。
其实它们并不神秘，它们都是动态网页，都是在服务器端产生的。
这里简要介绍一下：
包含SSI（ServerSideInclude，“服务器端包含”）指令的文件要求特殊处理，所以必须为所有
升级会员 