1.框架页面

几个重要的概念：框架集和框架。

我们先了解一下上面的概念。

框架集是若干框架的集合，利用框架集可以定义框架结构，实现分割浏览器窗口的功能。

框架集用<frameset></frameset>来表示

 

框架：每个框架就是一个区域，所有的框架组合成了框架集

框架用<frame></frame>来表示

 

了解了基本概念之后，有几点是我们需要知道和注意的

a.标记<frameset>可以嵌套使用。

b.frameset的cols和rows属性：

cols用于设定分割左右窗口的高度，各数值之间用“，”隔开，也可设为浏览器窗口尺寸的百分比%，“*”表示剩余部分。

rows用于设定分割上下窗口的高度。其设置方法和cols类似。

c.框架集文件是一个特殊的HTML文件，它的body部分可以是空的。

 

接下来就看个例子。

主界面：

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset='utf-8'>
5. <title>框架的使用</title>
6. </head>
7. <frameset rows='200px,200px,*'> /*将整个页面分为上下三个部分，第一部分高200px，第二部分高200px,

第三部分为剩下的高度*/ <frame src='sj03-1.html' name='frame1'> <frame src='sj03-3.html' name='frame2'> <frame src='sj03-5.html' name='frame3'> </frameset> </html>

第一个框架载入“sj03-1.html”的网页。

第二个框架载入“sj03-3.html”的网页

等等，依此类推。

’注意：这里的src引用的是相对地址

我们可以通过实现"sj03-1.html"来展现更多的功能。

sj03-1.html实现：

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset='utf-8'>
5. <title>
6. 超链接
7. </title>
8. </head>
9. <body>
10. <p>
11. <a href="https://www.baidu.com" target='frame3'>点击弹出百度</a>
12. </p>
13. <p>
14. <a href="https://www.zhihu/explore" target='frame3'>点击弹出知乎</a>
15. </p>
16. </body>
17. </html>
  1. 通过target属性，可以让我们点击“点击弹出百度”和“点击弹出知乎”时，让百度和知乎的页面在第三个框架内显示

2.页内框架的使用

页内框架和页面框架的区别就是，页内框架爱是普通页面中的一个特殊区域，即普通页面中混杂着若干个框架，通常为表格的单元格；

而页面框架则是整个页面就是一个框架。

将表格的某个单元格定义为页内框架的方法如下：

<td> <iFrame src=? name=? width=? height=?/> </td>

src指定预载页面内容，name给页内框架命名，方便自定义的链接指向该框架。

我们还是来看个例子。

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset='utf-8'>
5. <title>
6. 实验四——页内框架制作
7. </title>
8. </head>
9. <body>
10. <table border='1' bordercolor='red'>
11. <tr>
12. <td colspan='2' align='center'>白居易</td>
13. </tr>
14. <tr> <td align='center' valign='center'>
15. <a href="01.html" target='123'> 弹出1</a><p>
16. <a href="02.html" target='123'>弹出2</a> 
17. </td>
18. <td><iframe src="03.html" name='123'></iframe> </td>
19. </tr>
20. </table>
21. </body>
22. </html>