HTML&CSS样式框架结构
宦兴朝
13.1框架的基本结构
在使用框架集的页面中，页面的<body>标签被<frameset>标签所代替，然后通过<frame>标签定义每一个框架。
文本范例：
<html>
<head>
<title>基本框架代码</title>
</head>
<frameset>
<frame>
<frame>
...
</frameset>
</html>
13.2.1左右分割窗口属性cols
基本属性：
<frameset cols="value ,value ,...">
<frame>
<frame>
在使用框架集的页面中，页面的<body>标签被<frameset>标签所代替，然后通过<frame>标签定义每一个框架。
文本范例：
<html>
<head>
<title>基本框架代码</title>
</head>
<frameset>
<frame>
<frame>
...
</frameset>
</html>
13.2.1左右分割窗口属性cols
基本属性：
<frameset cols="value ,value ,...">
<frame>
<frame>
...
</frameset>
语法解释：
value定义各个框架的宽度值，单位可以是象素也可以是百分比。
例子：
<!.............>
<!..文件说明：左右分割窗口..>
<!.............>
<html>
<head>
<title>左右分割窗体</title>
</head>
<frameset cols="20%,80%">
<frame>
<frame>
...
</frameset>
</html>
</frameset>
语法解释：
value定义各个框架的宽度值，单位可以是象素也可以是百分比。
例子：
<!.............>
<!..文件说明：左右分割窗口..>
<!.............>
<html>
<head>
<title>左右分割窗体</title>
</head>
<frameset cols="20%,80%">
<frame>
<frame>
...
</frameset>
</html>
13.2.2上下分割窗体属性rows
基本做法同上。
基本做法同上。
13.2.3嵌套分割窗体
在同一个窗体中，将其按照行来分割又按照列来分割。
基本语法：
<frameset rows="value,value,...">
<frame>
<frameset cols="value,value,...">
<frame>
<frame>
... ...
</frameset>
<frame>
<frame>
... ...
</frameset>
在同一个窗体中，将其按照行来分割又按照列来分割。
基本语法：
<frameset rows="value,value,...">
<frame>
<frameset cols="value,value,...">
<frame>
<frame>
... ...
</frameset>
<frame>
<frame>
... ...
</frameset>
eg:
<html>
<head>
<title>嵌套分割窗体</title>
</head>
<frameset rows="20%,80%">
<frame>
<frameset cols="20%,80%">
<frame>
<frame>
</frameset></frameset>
</html>
<html>
<head>
<title>嵌套分割窗体</title>
</head>
<frameset rows="20%,80%">
<frame>
<frameset cols="20%,80%">
<frame>
<frame>
</frameset></frameset>
</html>
13.3框架标签<frame>属性
每一个框架都有一个显示的页面，这个页面文件称为框架页面，通过<frame>标签可以定义框架页面的内容。
框架标签的属性：
src ：框架页面源文件的路径
name ：框架的名称
frameborder ：框架边框显示属性
scrolling ：框架尺度调整属性
marginwidth ：框架边缘的宽度属性
marginheight：框架边缘的高度属性
每一个框架都有一个显示的页面，这个页面文件称为框架页面，通过<frame>标签可以定义框架页面的内容。
框架标签的属性：
src ：框架页面源文件的路径
name ：框架的名称
frameborder ：框架边框显示属性
scrolling ：框架尺度调整属性
marginwidth ：框架边缘的宽度属性
marginheight：框架边缘的高度属性
13.3.1 框架页面原文件属性 src
基本语法：
<frame src="file_name">
文本范例：
<html>
<head>
<title>设定页面的框架内容</title>
<head>
<frameset cols="30% ,70%">
<frame src=1.htm>
<frame src=right.htm>
</frameset>
</html>
基本语法：
<frame src="file_name">
文本范例：
<html>
<head>
<title>设定页面的框架内容</title>
<head>
<frameset cols="30% ,70%">
<frame src=1.htm>
<frame src=right.htm>
</frameset>
</html>
13.3.2 框架名称属性 name
可以为每个连接命名，所起的名称将被用于页面的连接和脚本描述。
基本语法：
<frame src="file_name" name="frame_name">
框架名称不会影响显示效果。
可以为每个连接命名，所起的名称将被用于页面的连接和脚本描述。
基本语法：
<frame src="file_name" name="frame_name">
框架名称不会影响显示效果。
13.3.3 框架边框显示属性 frameborder
基本语法：
<frame src="file_name" frameborder="value">
语法解释：
value取值为0或1 ，0为不显示边框，1为显示边框。
文本范例：
<html>
<head>
<title>设定框架边框的显示</title>
</head>
<frameset cols="30%,70%">
<frame src=left.htm frameborder=0>
<frame src right.htm frameborder=1>
</frameset>
</html>
基本语法：
<frame src="file_name" frameborder="value">
语法解释：
value取值为0或1 ，0为不显示边框，1为显示边框。
文本范例：
<html>
<head>
<title>设定框架边框的显示</title>
</head>
<frameset cols="30%,70%">
<frame src=left.htm frameborder=0>
<frame src right.htm frameborder=1>
</frameset>
</html>
13.3.4 框架滚动条显示属性 srcolling
基本语法：
<frame src="file_name" srcolling="value">
value为yes时是显示滚动条，no时为不显示滚动条，auto时为根据页面的长度自动判断是不是显示滚动条。
文本范例：
<html>
<head>
<title>设定框架滚动条显示属性</title>
</head>
<frameset cols="40%,60%">
<frame srcolling="yes">
<frame>
</frameset>
</html>
基本语法：
<frame src="file_name" srcolling="value">
value为yes时是显示滚动条，no时为不显示滚动条，auto时为根据页面的长度自动判断是不是显示滚动条。
文本范例：
<html>
<head>
<title>设定框架滚动条显示属性</title>
</head>
<frameset cols="40%,60%">
<frame srcolling="yes">
<frame>
</frameset>
</html>
13.3.5 框架尺度调整属性 noresize
带有noresize属性的框架的大小是不可以变的
基本语法：
<frame src="file_name" noresize>
带有noresize属性的框架的大小是不可以变的
基本语法：
<frame src="file_name" noresize>
13.3.6 框架边缘宽度高度属性 marginwidth,marginheight
基本语法：
<frame src="file_name" marginwith="value" marginheight="value">
value值为单位象素。
文本范例：
<html>
<head>
<title>设定框架边缘的宽高</title>
</head>
<frameset cols="20%,80%">
<frame src=left.htm marginwith=0 marginheight=0>
<frame src=right.htm>
</frameset>
<html>
基本语法：
<frame src="file_name" marginwith="value" marginheight="value">
value值为单位象素。
文本范例：
<html>
<head>
<title>设定框架边缘的宽高</title>
</head>
<frameset cols="20%,80%">
<frame src=left.htm marginwith=0 marginheight=0>
<frame src=right.htm>
</frameset>
<html>
13.4 框架集标签<frameset>的属性
框架集的属性：
frameborder ：框架集边框显示属性
framespacing ：框架集边框宽度属性
bordercolor ：框架集边框颜色属性
rows ：框架集分行
cols ：框架集分列
框架集的属性：
frameborder ：框架集边框显示属性
framespacing ：框架集边框宽度属性
bordercolor ：框架集边框颜色属性
rows ：框架集分行
cols ：框架集分列
13.4.1 框架集边框宽度属性 framespacing
基本语法：
<frameset framespacing="volue">
volue值为单位象素
文本范例：
<html>
<head>
<title>设定框架集边框宽度</title>
<frameset cols="50%,50%" framespacing=3>
<frame src=left.htm>
<frame src=right.htm>
</frameset>
</html>
基本语法：
<frameset framespacing="volue">
volue值为单位象素
文本范例：
<html>
<head>
<title>设定框架集边框宽度</title>
<frameset cols="50%,50%" framespacing=3>
<frame src=left.htm>
<frame src=right.htm>
</frameset>
</html>
13.4.2 框架集边框颜色属性 bordercolor
基本语法：
<frameset bordercolor="color_volue">
color_volue为十六精制值。
文本范例：
<html>
<head>
<title>设定框架集边框宽度和颜色</title>
<frameset cols="50%,50%" framespacing=3 bordercolor=##ff66ccss>
<frame src=left.htm>
<frame src=right.htm>
</frameset>
</html>
基本语法：
<frameset bordercolor="color_volue">
color_volue为十六精制值。
文本范例：
<html>
<head>
<title>设定框架集边框宽度和颜色</title>
<frameset cols="50%,50%" framespacing=3 bordercolor=##ff66ccss>
<frame src=left.htm>
<frame src=right.htm>
</frameset>
</html>
13.5 不支持框架标签 noframes
作用是当浏览器不能加载框架集文件时,会检索到<noframes>标签,并显示标签里的内容.
基本语法:
<frameset>
<frame>
<frame>
... ...
<noframe>
</noframe>
</frameset>
语法解释:
放在<noframes>是在不支持框架的浏览器中显示的内容,也就是<body>标签中的内容.
文本范例:
<html>
<head>
<title>不支持框架浏览器的页面</title>
<frameset cols="50% ,50%">
<frame src=left.htm>
<frame src=right.htm>
<noframes>
对不起,您是浏览器不支持框架页面的显示.
</noframes>
</frameset>
</html>
作用是当浏览器不能加载框架集文件时,会检索到<noframes>标签,并显示标签里的内容.
基本语法:
<frameset>
<frame>
<frame>
... ...
<noframe>
</noframe>
</frameset>
语法解释:
放在<noframes>是在不支持框架的浏览器中显示的内容,也就是<body>标签中的内容.
文本范例:
<html>
<head>
<title>不支持框架浏览器的页面</title>
<frameset cols="50% ,50%">
<frame src=left.htm>
<frame src=right.htm>
<noframes>
对不起,您是浏览器不支持框架页面的显示.
</noframes>
</frameset>
</html>
13.6 浮动框加 iframe
浮动框加的src,width,heiht,name 属性同上.
13.6.4 浮动框加对齐属性 align
基本语法:
<iframe src="file_name" align="value">
语法解释:
value的取值中left表示居左,right表示居右,center表示居中.
文本范例:
<html>
<head>
<title>浮动框架的对齐</title>
<head>
<body>
<iframe src=content.htm width=450 height=300 name=frame_content align="center">
</iframe>
</body>
</html>
浮动框加的src,width,heiht,name 属性同上.
13.6.4 浮动框加对齐属性 align
基本语法:
<iframe src="file_name" align="value">
语法解释:
value的取值中left表示居左,right表示居右,center表示居中.
文本范例:
<html>
<head>
<title>浮动框架的对齐</title>
<head>
<body>
<iframe src=content.htm width=450 height=300 name=frame_content align="center">
</iframe>
</body>
</html>
13.7 框架与连接
每一个连接都有一个target属性,设置不同的target属性可以使连接的页面显示在不同的框架的中.
每一个连接都有一个target属性,设置不同的target属性可以使连接的页面显示在不同的框架的中.
13.7.1 普通框架与连接
文件范例：
设定框架集包括左右两个框架
<!...........>
<!..文件说明:框架集..>
<!...........>
<html>
<head>
<title>框架集</title>
<frameset cols="20%,80%">
<frame src=left.htm srcolling="no">
<frame src=right.htm name="right">
</frameset>
</html>
制作网站左侧框架的页面
本页面提供了三个连接，插入一张图片。
<!.........>
<!..文件范例：left.htm..>
<!............>
<html>
<head>
<title>左侧框架</title>
</head>
<body>
<img src=logo.jpg><p>
<a href=right-1.htm targht="right">aaa</a><p>
<a href=right-2.htm targht="right">bbb</a><p>
<a href=right-3.htm targht="right">ccc</a><p>
</body>
</html>
文件范例：
设定框架集包括左右两个框架
<!...........>
<!..文件说明:框架集..>
<!...........>
<html>
<head>
<title>框架集</title>
<frameset cols="20%,80%">
<frame src=left.htm srcolling="no">
<frame src=right.htm name="right">
</frameset>
</html>
制作网站左侧框架的页面
本页面提供了三个连接，插入一张图片。
<!.........>
<!..文件范例：left.htm..>
<!............>
<html>
<head>
<title>左侧框架</title>
</head>
<body>
<img src=logo.jpg><p>
<a href=right-1.htm targht="right">aaa</a><p>
<a href=right-2.htm targht="right">bbb</a><p>
<a href=right-3.htm targht="right">ccc</a><p>
</body>
</html>
13.7.2 浮动框架与连接
<html>
<head>
<title>浮动框架与连接</title>
</head>
<body>
<iframe src=right-1.htm width=500 height=300 name="iframe" align="center">
</iframe><p>
<center>
<a href=right-1.htm targht="iframe">aaa</a><br>
<a href=right-2.htm targht="iframe">bbb</a><br>
<a href=right-3.htm targht="iframe">ccc</a>
</center>
</body>
</html>
<html>
<head>
<title>浮动框架与连接</title>
</head>
<body>
<iframe src=right-1.htm width=500 height=300 name="iframe" align="center">
</iframe><p>
<center>
<a href=right-1.htm targht="iframe">aaa</a><br>
<a href=right-2.htm targht="iframe">bbb</a><br>
<a href=right-3.htm targht="iframe">ccc</a>
</center>
</body>
</html>
类似资料：