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 >