HTML-4

普通框架


框架的概念

框架技术：将一个浏览器窗口划分为若干个小窗口，每个小窗口显示一个独立的网页。


框架集合框架页

·



框架集 < frameset > ：主要用来划分窗口的。

框架页 < frame > ：主要用来指定窗口磨人显示的网页地址。

框架与窗户很像：

§



一个窗户由窗格（框架集）和玻璃（框架页）构成。

先规划窗格，然后再确定每个窗格中放的玻璃。（先有结构，后有内容）


框架网页的DTD必须是：

< !DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-frameset.dtd" >

举例：


< frameset cols="200,*" frameborder"yes"
border="5" >


< frame src="left.html" /
>


< frame src="left.html" /
>


< /frameset >

以上代码，将一个浏览器窗口划分成了左右型框架。


< frameset >
属性

cols：划分左右型框架：

cols="200,*" //左框架的宽度为200px，剩下的都是右框架的

cols="180",*,180" //
左框架和右框架的宽分别为180px，剩下都是中间框架。

cols="20%,*" //划分框架时，可以用百分比来表示

rows：划分上下型框架

rows="180,*" //上框架的高度为200px，剩下的都是下框架的。

rows="180,*,180" //上框架和下框架的高度分别为180px，剩下都是中间框架。

注意：cols属性和rows属性，每个框架只能用其中一个，不能两个同时用。

frameborder：是否显示框架的边框线，取值：1(Y)或0(N)，yes或no。

border：边框线的粗细。

bordercolor：边框颜色。


< frame >
框架页的属性

src：该小窗口中默认显示的网页地址。

noresize：不能调整小窗口的大小，如：noresize="noresize"

scrolling：是否显示滚动条，取值：auto、yes、no。

name：给当前小窗口起个名字。这个name就是给
< a > 标记target

< frame src="main.html" name="AA" / > //给主框架窗口，起个名字叫AA

< a href="news.html" target="AA" >
新闻标题 < /a > //news.html的内容在AA的窗口中来显示。

< noframes >
含义

描述：当你的浏览器不支持框架时，显示的提示信息。一般情况下，IE6不支持框架，高版本都支持。

语法： < noframes > 对不起，你的电脑太老了，该砸了换新的！ <
/noframes >


框架嵌套

先画上下型框架。然后在下面最大的窗口中，再来画左右型框架






注意事项

< frameset >
框架，可以成为”普通框架“。

在”普通框架“中，框架的***分为两个部分：（1）框架结构的规划；（2）***具体的页面

在“普通框架”的结构划分中，不能出现 < body
> 标记，因为没有实际的内容。


内嵌框架（行内框架）

描述：内嵌框架，相当于在现有的网页中，挖了一个“窟窿”，透过这个“窟窿”可以看见里面内容。

与普通框架的区别： < iframe > 是 < body
> 的子标记，因此，它应该放在 < body > 中

语法格式： < iframe 属性="值"
> 对不起，你的浏览器不支持frameset框架！ < /iframe
>

常用属性：

src：引入的文件地址。

width：框架的宽度。

height：框架的高度。

frameborder：是否显示框架的边框线，取值：yes或no。

name：指定当前小窗口的名称，该名称也是给
< a > 标记的target属性来用。

align：框架在网页中的对齐方式，取值：left、center、right

其中取值left或right，可以实现图文混排的效果，与 <
img > 的对齐方式一样。

注意：src引入的文件只能是html文件或php文件，不能是其他文件。

< iframe src="news.html" width="400"
height="30%" frameborder="1" name="AA" align="left" >

对不起，你的浏览器不支持frameset框架！ < /iframe
>

CSS样式表：

< style type="text/css" >



iframe
{




margin:0px 20px 0px 10px;




border:4px dotted red;




padding:15px;




background-color:#f0f0f0;



}


< /style >