资源简介

(共13张PPT)
6
框 架
Part six
7、框架
1
定义框架
格式如下


< title>网页标题

< frame src=“网页URL地址一”>
...


功能:将浏览器窗口划分成多个不同的显示区域,并在每个显示区域内独立显示不同网页的一种技术,包含框架的网页称为框架集。
2
框架集基本标记
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
标记 属性 功能
rows 在浏览器窗口从上至下划分多个显示区域,单位为像素或百分比,可用“*”表示剩余值
cols 在浏览器窗口从左至右划分多个显示区域,单位为像素或百分比,可用“*”
表示剩余值
frameboder 设置是否显示边框,“0”表示不显示边框,“1”表示显示边框
boder 设置边框粗细
bordercolor 设置边框颜色
标记 属性 功能
src 指定当前显示区域中初始时显示的网页,值为相对URL或绝对URL
name nane指定当前显示区域的子窗口的名称
noresize 指定多个不同的显示区域是否可以通过拖动框架边框在浏览器中调整显示
区域的大小
说明:< frameset>…标记取代了普通网页的…标记它们不可同时出现。
7、框架
2
Frameset属性 rows cols
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
2
Frameset属性 rows cols
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
水平/垂直分割窗口属性 rows/cols
(1)格式
row=“值1,值2,…值N”
et cols-“值1,值2,…,值n”
(2)说明
①rows后面的值,说明窗口横向分隔的情况:cols后面的值,说明窗口纵向分隔的情框况
②各参数值之间用逗号分隔,依次表示各个子窗口的高度(宽度)
③rows和cols可以用数字、百分比和剩余值及这三种方式的混合方式来表示
◆数字,表示子窗口高度(宽度)所占的像素点数
◆百分比(%).表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比
◆剩余值(*).表示当前所有窗口设定之后的剩余部分,当符号“*”只出现一次即其他子窗口的大小都有明确的定义时,表示该子窗口的大小将根据浏览器窗口的大小而进行自动调整,当持号“*”出现一次以上时,表示按比倒分览器口的剩余空间一例如,< frameset cols=“40%,2*,*”>表示将浏览器窗口分割为三列,第一个子窗口在第1列,窗口宽度为整个浏览器窗口宽度的40%:第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%:第三个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽度的20%.
2
Frame属性 rows cols
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
在窗口框架建立起来后,应在各个子窗口内放入相应的信息。子窗口的初始化是用
标签来描述的。屏幕上的每一个子窗口均对应一个标签。用标签中的属性链接相应的文件,该文件的内容就显示在标签对应的窗口之中, 1.src属性是用于指定要导入到某个子窗口的HML文件的位置,其语法格式如下:

2.定义子窗口名称属性name
name属性是用来指定窗口的名称,此属性是可选的。当完成定义子窗口的名称后,便可
在超链接中,指定显示网页的子窗口。其语法格式如下
< frame name=”子窗口名称”>
3.控制框架滚动条属性 scrolling
scrolling属性用于描述该窗口是否设有滚动条。该属性是可选的,其设置语法格式如下:
< frame scrol1ing=yes或no或auto>
各个设置值所代表的意义按顺序为显示,不显示和自动设置,默认方式是mo
2
Frame属性 scrolling
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
4.子窗口大小的调整属性 noresize
noresize属性是一个标志,没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了 noresize属性,则窗口不能调整。如果处于默认方式,则可以自行调整窗口的大小。
5.设置边距属性 marginwidth/marginheight
marginwidth属性,用来控制窗口内显示的内容与窗口左右边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的
marginheight属性,用来控制窗口内显示的内容与上下边缘的距离。该属性是取一个像
素值,默认值为1,该属性是可选的。
2
超链接的target属性
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
用 target属性定义窗口的名称,必须使用字母/数字字符;否则窗口的名称将被忽略。但
是,有几个特定的窗口的名称例外,这几个窗口的名称有特殊含义,它们是 _blank,_self，_parent,_ top
(1) target=“_blank”
当将 arget属性设置为bank时,若单击超链接后,将以打开另一个窗口的方式显示网页
(2)target=“_self”
当将target属性设置为_self时,则将在同一个窗口中显示链接的网页
(3) target=“_parent"
当将 target属性设置为 parent时,若单击超链接后,该链接网页将导入目前子窗口的上
层框架。若没有上层,则导入在同一个窗口中。
(4)当将 target属性设置为_top时,则将脱离目前的窗口框架,在最上层的窗口框架中,显
示链接的网页。
2
Frame属性 scrolling
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
4.子窗口大小的调整属性 noresize
noresize属性是一个标志,没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了 noresize属性,则窗口不能调整。如果处于默认方式,则可以自行调整窗口的大小。
5.设置边距属性 marginwidth/marginheight
marginwidth属性,用来控制窗口内显示的内容与窗口左右边缘的距离。该属性是取一个像素值,默认值为1,该属性是可选的
marginheight属性,用来控制窗口内显示的内容与上下边缘的距离。该属性是取一个像
素值,默认值为1,该属性是可选的。
2
Frameset属性
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
3
浮动框架
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
属性 功能
src 指定在窗口中显示另一个页面的文件路径
width 指定浮动框架的宽度,单位为像素
height 指定浮动框架的高度,单位为像素
scrolling 指定浮动框架是否出现滚动条,值为auto(自动)、yes(出现)和no(不出现)
frameborder 指定浮动框架区域边框的宽度,单位为像素,值为“0
0”时表示没有边框
格式：
功能:也称为内联框架,可以放在网页中的任何位置,用于在一个页面中嵌入一个框架窗口来显示另一个页面的内容
7、框架
3
浮动框架
属性 控件名称 控件类型
type text 单行文本框
password 密码框
file 文件域
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置按钮
button 普通按钮
7、框架
作业：完成下发的框架布局的作业
要求：利用记事本编辑网页，按照要求保存为HTML文件，自己预览后提交。有问题及时反馈练习。

展开更多......

收起↑