第七章 框架的应用.docx
《第七章 框架的应用.docx》由会员分享,可在线阅读,更多相关《第七章 框架的应用.docx(18页珍藏版)》请在冰点文库上搜索。
第七章框架的应用
第七章框架的应用
框架技术可以将浏览器分割成多个小窗口,并且在每个小窗口中,可以显示不同的网页,这样就可以很方便的在浏览器中浏览不同的网页效果。
当浏览器分割成多个窗口后,各窗口就会扮演不同的角色,实现不同的功能。
举例来说,有些论坛就是把浏览器分割成两个窗口,一个窗口主要来显示帖子的标题,而另一个窗口会显示具体的内容。
这样的设计显然比起一个窗口的网页在浏览时方便得多,而且用户也可以任意的切换题目。
框架技术也多用于后台管理页面排版。
1框架的基本结构
框架的基本结构主要分为框架和框架集两个部分。
它是利用标记与
网页效果如图7-2。
图7-2设置窗口的垂直分割
2.3窗口的嵌套分割
在实际应用中,“厂”字型框架使用极为广泛。
“厂”字型的网页就是窗口中包含水平和垂直分割,如图7-3所示,实现“厂”字型框架需要对窗口进行嵌套分割。
所谓的嵌套分割是指一个窗口框架还包含了另一个窗口框架。
整个框架将用数个
标记建立。先用
的rows属性对窗口进行上下分割,然后再用cols属性把下面的窗口进行垂直分割,就完成了“厂”字型的框架。实例3.html:
窗口的嵌套分割
网页效果如图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:
指定子窗口显示网页
定义一个垂直分割的窗口框架,并在各子窗口中显示不同的网页。
网页效果如图7-6。
图7-6指定子窗口显示网页
3.2定义子窗口名称
name属性用来指定窗口的名称,当完成子窗口的名称定义后,可指定超链接的链接目标显示到网页的某个子窗口。
格式:
实例7.html:
指定子窗口的名称
网页效果如图7-7。
图7-7指定子窗口的名称
3.3控制子窗口滚动条
scrolling属性用于控制窗口框架中是否显示滚动条,使用此属性,可以避免HTML文件因内容过多而无法完全显示。
此属性用于标记中。
格式:
yes表示为显示滚动条,no表示不显示滚动条,auto为自动设置。
实例8.html:
控制框架滚动条
网页效果如图7-8。
图7-8控制子窗口滚动条
3.4调整子窗口的尺寸
运用
标记的rows和cols属性水平或垂直分割窗口。但设置后,各窗口框架的大小并非固定无法更改,当想更改窗口框架大小时,可以将鼠标指针移到要更改的框架上,待指针呈现双箭头符号时,再用鼠标进行拖拽,就可调整窗口的大小。
如果不希望用户能随意地改变子窗口的大小,那么这时可以在标记中,添加noresize属性,格式如下:
3.5设置子窗口的边距
网页的边距可以通过margin来设定,那么框架和网页一样也可设置边距,可以利用标记中的marginwidth属性来设置框架左右边缘的宽度;marginheight属性可以设置框架上下边缘的宽度。
格式:
在HTML文件中,利用框架标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。
实例9.html:
设置框架边距
网页效果如图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:
设置浮动框架
| |
网页效果如图7-10。
图7-10设置浮动框架
5综合示例
在很多网页中,常在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容。
这些目录是热点内容(超链接内容,文本或图片),需要在框架之间建立超链接,并指明显示的目标文件的框架。
使用的target属性可以控制目标文件在那个框架内显示。
当单击热点文本时,目标文件就会出现在target指定的框架内。
target属性的值可以是框架名,
格式:
热点文本
框架名有四个特殊的值,分别实现4类特殊的操作,表7-2。
表7-2框架名的四种值
取值
描述
target=_blank
链接的目标文件被载入一个新的没有名字的浏览器窗口
target=_self
链接的目标文件被载入当前框架窗口中,代替正在显示的热点文本所在的那个文件
target=_top
链接的目标文件被载入整个浏览器窗口
target=_parent
当框架有嵌套时,链接的目标文件被载入父框架中。
否则,被载入整个浏览器窗口
target=某个框架名称xname
链接的目标文件被载入指定的框架xname中
下例实现框架间的链接。
主页面m.html划分为左右两个子框架(子窗口),名称分别为f1和f2。
左子框架载入z.html,z.html包含若干超链接,点击超链接,链接到的目标文件根据target指定的f2,被装载到右子框架中。
右边子框架最初放入x.html。
m.html的内容:
框架间的链接
z.html的内容:
例题
例题
【例1】
【例2】
【例3】
【例4】
【例5】
x.html的内容:
x---网页内容
x---网页内容
网页效果如图7-11和图7-12。
图7-11打开后最初结果
图7-12点击某个超链接后结果