HTML组合网页（框架组合网页）

一、框架的概念

框架（frame）亦称为“帧”的技术，可以获得在同一个窗口中开辟几个子窗口以便同时显示几个不同页面的效果。要使用框架，首先要了解框架集的概念。

框架集是构造整个框架结构的文档，它不包含具体显示的文本和图像，而只包含如何组织安排各个框架位置、大小和初始页面信息的设计。它是框架使用中最基础的文档，常称之为整个框架显示时的主文档。

框架集的基本格式如下：

…………
      
        
        
        …………
      
    

注意到，框架组文档中，用标记符代替了标记符。而标记符则用来指定每一个子窗口的内容。

1）窗口的分割

用来分割浏览器窗口，它使用COLS和ROWS这2个属性项把整个窗口按垂直方向或水平方向分割为多个框架。例如：。

该标记符把窗口分成3个垂直的框架，指定左框架宽度值为150象素、中间框架占总宽度的50%，余下的宽度留给右框架。由上例可见，框架尺寸除使用象素值和百分数外，还可以使用*和n* ；使用*表示剩余部分；当使用n*（如2*）时，n值确定框架之间的比例。例如："*，2*，3*"表示左边（或上边）的框架占窗口宽度（或高度）的1/6，中间框架占1/3，右边（或下边）框架占1/2。
　

2）标记符的嵌套

标记符可以嵌套使用。以构造包含横向和纵向框架的窗口。以下代码用嵌套框架结构建立一个多层框架的窗口。

      
        
      
      
        
        
          
        
        
      
    

3）框架的初始化

标记符用于对各个框架进行初始化设置。使用标记符中的SRC属性指定需要在框架中显示的页面的文件，使用NAME属性指定框架的名称，以便在指定超级链接的目标框架时引用该框架名。标记符的个数应等于框架个数，并依出现的次序和层次先行后列对框架进行初始化。

例如：。若要在指定框架显示某页面，则必须在SRC指定的URL位置存在指定的HTML文件。这就意味着要在所设计的框架中完整显示出所有内容，总共要编制页面个数为“框架数+1”。

二、框架效果设计

1) 设置框架边框

在标记符中，可使用FRAMEBORDER属性控制是否显示框架边框。属性值取值为1或0。如果取值为1，表示生成三维框架（默认值）；如果取值为0，则不显示框架边框。

2) 设置框架边空白

在标记符中使用MARGINWIDTH和MARGINHEIGHT属性可分别设定框架中的内容和框架的左右边框，以及上下边框之间的空白。这2个属性的取值均为象素值。

3) 设置框架的滚动条

在标记符中使用SCROLLING属性，可以控制是否为某框架加入滚动条，以便于观看框架中的内容。该属性的取值有yes、no、auto。它们分别表示加入垂直和水平滚动条、不加滚动条、根据需要加滚动条。其中auto为默认值。

4) 固定边框位置

在标记符中加入NORESIZE属性可以固定边框线的位置，这样浏览者就不能用鼠标来移动框架的边框了。

三、目标框架的使用

如果在有框架的网页中设置了超级链接功能，则必须指定所链接的文件显示在哪一个框架中，这就要用到标记符中NAME属性所定义的框架名。如果不指定框架名，则单击框架内的超链时，目标文件只会显示在当前框架内。

控制目标文件在哪一个框架内显示的方法是在标记符中使用TARGET属性，使用格式为：

超链内容

TARGET属性的值除了使用已定义的框架名之外，还可以是_top、_self、_blank、_parent。其含义分别是目标文件装入整个浏览器窗口、装入当前框架、装入一个新的浏览器窗口、装入父框架（无父框架时与_TOP同）

以下的5个HTML文件，分别是1个框架集文件、2个初始化文件和2个被链接的目标文件。

（1）框架集文件

      
        
      
      
        
        
      
    

（2）main8.htm初始化文件:

      
        
      
      此为框架的初始内容
    

（3）content8.htm初始化文件:

      
        
      
      
        

单击目录,在右边框中查看对应图片：

        

目录
        

(1) 图片1

        

(2) 图片2

      
    

（4）file1.htm被链接的目标文件:

      
        
      
      
        

此为图片1

        
      
    

（5）FILE2.HTM链接的目标文件

      
        
      
      
        

此为图片2