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