第七章 框架的应用Word文档下载推荐.docx
- 文档编号:4095184
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:18
- 大小:418.17KB
第七章 框架的应用Word文档下载推荐.docx
《第七章 框架的应用Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《第七章 框架的应用Word文档下载推荐.docx(18页珍藏版)》请在冰点文库上搜索。
标记不可以包含在<
标记中,直接将该标记包含在<
标记中。
2框架的设置
常见的对窗口的分割包括:
水平分割、垂直分割和嵌套分割。
具体采用哪种分割方式,取决于实际需要,可用<
标记中的rows(水平分割)或cols(垂直分割)属性来进行分割。
在完成窗口的分割后,接下来就要设置每个分割出来的子窗口。
设置子窗口的属性都在相应的子窗口的<
其中,最重要的属性为子窗口的名称(name属性)和要导入到框架中的子窗口HTML文件的路径(src属性)。
2.1窗口的水平分割
rows属性可定义一个水平分割的窗口框架。
格式:
framesetrows="
高度1,高度2,…,*"
>
framesrc="
url"
…
✓rows属性的值代表各子窗口的高度,第一个子窗口高为高度1,第二个子窗口高为高度2,依此类推,而最后一个*,则代表最后一个子窗口的高度,值为其它子窗口高度分配后所剩余的高度。
✓设置高度数值的方式有两种:
采用整数设置,单位为像素px:
100,200,*"
用百分比设置,如:
20%,50%,*"
实例1.html:
采用整数设置窗口的水平分割<
80,120,*"
在水平分割窗口后,设置第一个窗口的高度为80px,第二个窗口中的高度为120px,第三个窗口的高度是浏览器的宽度减去前两个窗口的高度。
网页效果如图7-1。
图7-1设置窗口的水平分割
2.2窗口的垂直分割
cols属性可定义一个垂直分割的窗口框架。
framesetcols="
宽度1,宽度2,…,*"
垂直宽度值的设置,与水平分割高度值的设置方式相同。
实例2.html:
采用整数设置窗口的垂直分割<
网页效果如图7-2。
图7-2设置窗口的垂直分割
2.3窗口的嵌套分割
在实际应用中,“厂”字型框架使用极为广泛。
“厂”字型的网页就是窗口中包含水平和垂直分割,如图7-3所示,实现“厂”字型框架需要对窗口进行嵌套分割。
所谓的嵌套分割是指一个窗口框架还包含了另一个窗口框架。
整个框架将用数个<
标记建立。
先用<
的rows属性对窗口进行上下分割,然后再用cols属性把下面的窗口进行垂直分割,就完成了“厂”字型的框架。
实例3.html:
窗口的嵌套分割<
framesetrows="
30%,*"
framesetcols="
20%,*"
<
网页效果如图7-3。
图7-3设置窗口的嵌套分割
2.4框架的边框
在<
标记中,可运用border属性控制分割窗口框架的边框。
framesetborder="
n"
n为整数,代表此窗口框架的宽度,单位为像素(px)。
实例4.html:
框架的边框控制<
border=12>
网页效果如图7-4。
图7-4框架的边框
2.5框架的隐藏
frameborder属性用于控制窗口框架的周围是否显示框架,此属性可使用在<
标记中,如果使用在<
标记内时,可控制窗口框架的所有子窗口,如果用在<
标记中,则只能控制该标记所代表的子窗口。
framesetframeborder="
0"
或"
1"
"
表示不显示边框,"
表示显示边框,默认值为1。
实例5.html:
框架的隐藏<
30%,40%,*"
frameborder=0>
framesrc=left.html>
framesrc=center.html>
framesrc=right.html>
网页效果如图7-5。
图7-5框架的隐藏
3子窗口的设置
3.1指定子窗口显示网页
src属性是用来指定要导入到某个子窗口的HTML文件的位置。
html文件的位置"
src属性的设置方法和<
img>
标记的src属性的用法是一样的,下面的<
标记,将设置子窗口显示名称为frame.html的网页。
实例6.html:
指定子窗口显示网页<
定义一个垂直分割的窗口框架,并在各子窗口中显示不同的网页。
网页效果如图7-6。
图7-6指定子窗口显示网页
3.2定义子窗口名称
name属性用来指定窗口的名称,当完成子窗口的名称定义后,可指定超链接的链接目标显示到网页的某个子窗口。
framename="
子窗口名称"
实例7.html:
指定子窗口的名称<
framesrc=left.htmlname=left>
framesrc=center.htmlname=center>
framesrc=right.htmlname=right>
网页效果如图7-7。
图7-7指定子窗口的名称
3.3控制子窗口滚动条
scrolling属性用于控制窗口框架中是否显示滚动条,使用此属性,可以避免HTML文件因内容过多而无法完全显示。
此属性用于<
framescrolling="
yes或no或auto"
yes表示为显示滚动条,no表示不显示滚动条,auto为自动设置。
实例8.html:
控制框架滚动条<
20%,70%,*"
name=leftscrolling=yes>
framesrc=center.htmlname=centerscrolling=no>
name=rightscrolling=auto>
网页效果如图7-8。
图7-8控制子窗口滚动条
3.4调整子窗口的尺寸
运用<
标记的rows和cols属性水平或垂直分割窗口。
但设置后,各窗口框架的大小并非固定无法更改,当想更改窗口框架大小时,可以将鼠标指针移到要更改的框架上,待指针呈现双箭头符号时,再用鼠标进行拖拽,就可调整窗口的大小。
如果不希望用户能随意地改变子窗口的大小,那么这时可以在<
标记中,添加noresize属性,格式如下:
framenoresizesrc="
3.5设置子窗口的边距
网页的边距可以通过margin来设定,那么框架和网页一样也可设置边距,可以利用<
标记中的marginwidth属性来设置框架左右边缘的宽度;
marginheight属性可以设置框架上下边缘的宽度。
framesrc="
marginwidth="
value"
marginheight="
在HTML文件中,利用框架<
标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。
实例9.html:
设置框架边距<
framesrc=left.htmlmarginheight=50marginwidth=50>
网页效果如图7-9。
图7-9设置子框架边距
4浮动框架
在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口,那么这就是浮动框架,插入浮动框架要使用成对的标记<
iframe>
/iframe>
,同样用src属性来设置框架中显示文件的路径。
iframesrc="
与框架不同的是,浮动框架可以包含在<
body>
浮动框架所含的属性见表7-1。
表7-1浮动框架的属性
属性
描述
src
设置源文件路径
width
设置浮动框架窗口宽度
height
设置浮动框架窗口高度
name
设置框架的名称
align
设置框架对齐方式
frameborder
设置是否有框架边框
framespacing
设置框架边框宽度
scrolling
设置框架滚动条
noresize
设置框架尺寸是否可以调整
bordercolor
设置边框颜色
marginwidth
设置框架左右边距
marginheight
设置框架上下边距
一个页面中设置了两个浮动框架,第一个浮动框架的宽为200,第二个浮动框架的宽为300,两个浮动框架的高都为200,边框宽为3。
实例10.html:
设置浮动框架<
tablewidth=100%>
tr>
td>
iframesrc=fram1.htmlwidth=200height=200>
/td>
iframesrc=fram2.htmlwidth=300height=200frameborder=3scrolling=yes>
/tr>
/table>
/body>
网页效果如图7-10。
图7-10设置浮动框架
5综合示例
在很多网页中,常在一个框架中显示一个所有网页内容的目录,而通过单击其中的某项,在另一个框架中显示相应内容。
这些目录是热点内容(超链接内容,文本或图片),需要在框架之间建立超链接,并指明显示的目标文件的框架。
使用<
a>
的target属性可以控制目标文件在那个框架内显示。
当单击热点文本时,目标文件就会出现在target指定的框架内。
target属性的值可以是框架名,
ahref="
目标文件名"
target="
框架名"
热点文本<
/a>
框架名有四个特殊的值,分别实现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的内容:
框架间的链接<
framesetrows=30%,70%>
z.html"
name="
f1"
x.html"
f2"
z.html的内容:
例题<
bodylink=redalink=bluevlink=green>
H2align=center>
B>
/B>
/H2>
FONTsize=3color=purple>
CENTER>
Ahref="
【例1】<
/A>
&
nbsp;
y.html"
【例2】<
a.html"
【例3】<
b.html"
【例4】<
c.html"
【例5】<
/CENTER>
/FONT>
x.html的内容:
HTML>
HEAD>
TITLE>
x---网页内容<
/TITLE>
/HEAD>
BODYlink=redalink=bluevlink=green>
x---网页内容
/BODY>
/HTML>
网页效果如图7-11和图7-12。
图7-11打开后最初结果
图7-12点击某个超链接后结果
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第七章 框架的应用 第七 框架 应用