搜索
第7章框架重庆科技学院信息学院黄永文•框架是一种划分浏览器窗口的特殊方式，通过使用框架可以将多个网页组合成一个页面显示在浏览器中。浏览器的各个页面之间相互独立，却又相互关联。用户在浏览这种页面的时候，当对其中某一个部分进行操作，如浏览、下载的时候，其他页面保持不变，这样的页面就被称为框架结构的页面，也称为多窗口页面。7.1创建框架•实际上框架对象本身也一类窗口，它继承了窗口对象的所有特征，并拥有所有的属性和方法。使用框架最主要的目的就是创建链接的结构，最常见的框架结构就是网站的导航条作为一个单独的框架窗口。7.1创建框架•框架主要包含两个部分：框架集和具体的框架文件。框架集FRAMESET用来定义一个HTML文件为框架模式，并设定视窗如何分割。其实框架集就是存放框架结构的文件，也是访问框架文件的入口文件，其基本语法如下：•FRAMESET•FRAMESRC=•FRAMESRC=•……•/FRAMESET7.2分割窗口•框架结构最大的特点就是将一个单独的窗口分割成多个窗口，窗口的分割方式需要在框架集页面中进行设置。框架集是框架结构的基础，只有通过框架集，各个框架窗口才能结合起来组成一个真正的网页文件。因此，对于框架集的属性设置，也是使用框架的最基础操作，而分割窗口则是基础中的基础。7.2.1上下分割•框架结构的页面包含多个框架窗口，设置框架窗口的排列方式是必不可少的工作。上下分割窗口就是在窗口的水平方向上划分出几条分割线，将页面分成由上到下几个窗口，需要使用ROWS属性，其语法是：•FRAMESETROWS=各个窗口的高度•FRAMESRC=•FRAMESRC=•……•/FRAMESETFRAMESETROWS=30%,70%FRAMESRC=a.htmlFRAMESRC=b.html/FRAMESETFRAMESETROWS=100px,*FRAMESRC=a.htmlFRAMESRC=b.html/FRAMESETFRAMESETROWS=100px,*,500pxFRAMESRC=a.htmlFRAMESRC=b.htmlFRAMESRC=c.html/FRAMESET7.2.2左右分割•左右分割窗口就是在浏览器中沿垂直方向分割为几个窗口，这些窗口左右分布，其设置属性是COLS，使用的语法是：•FRAMESETCOLS=各个窗口的宽度•FRAMESRC=•FRAMESRC=•……•/FRAMESETFRAMESETCOLS=30%,70%FRAMESRC=a.htmlFRAMESRC=b.html/FRAMESETFRAMESETCOLS=300px,*FRAMESRC=a.htmlFRAMESRC=b.html/FRAMESETFRAMESETCOLS=300px,*,200pxFRAMESRC=a.htmlFRAMESRC=b.htmlFRAMESRC=c.html/FRAMESET7.2.3窗口的嵌套•嵌套分割窗口就是在框架集中嵌套框架集，一个浏览器页面内，既有上下分割的窗口，又有左右分割的窗口：•FRAMESET•FRAMESRC=/•FRAMESET•FRAMESRC=/•FRAMESRC=/•/FRAMESET•/FRAMESETFRAMESETROWS=30%,70%FRAMESRC=a.htmlFRAMESET=30%,50%,*FRAMESRC=b.htmlFRAMESRC=c.htmlFRAMESRC=d.html/FRAMESET/FRAMESET7.3设置框架边框•除了设置框架的分割方式外，还有一些属性需要在框架集页面中设置，包括框架的边框大小、颜色等。7.3.1设置框架边框显示或隐藏•默认情况下，框架的边框是显示出来的。有时候，用户希望隐藏框架结构中的框架分割线，这时候可以通过设置FRAMEBORDER实现。设置框架边框的语法是：•FRAMESETFRAMEBORDER=框架显示属性值•FRAMESRC=•FRAMESRC=•……•/FRAMESETframeborder的取值只能为0或1，1为默认值，表示显示；如果为0，则边框线会隐藏起来。在frameset中设置将对整个框架有效，在frame中设置则只对当前这个框架有效。7.3.2设置框架边框宽度•不同浏览器中对框架边框的宽度显示都不一致，也没有规定用于设置框架边框宽度的属性，但是很多浏览器都支持在FRAMESET标签里使用BORDER属性来设置边框宽度。•FRAMESETBORDER=框架边框宽度•FRAMESRC=•FRAMESRC=•……•/FRAMESET7.3.3设置框架边框颜色•默认情况下，框架的边框是灰色的，可以使用BORDERCOLOR属性将其设置为其他颜色，但BORDERCOLOR属性要在BORDER属性存在的时候才可以产生效果：•FRAMESETBORDER=10pxBORDERCOLOR=颜色值•FRAMESRC=•FRAMESRC=•……•/FRAMESET7.4框架属性•在框架结构中，除了可以设置框架集的各种属性外，对于每一个框架窗口，也可以通过设置不同的属性来呈现不同的框架效果。7.4.1设置框架滚动条显示•默认情况下，当框架窗口的内容不足以在分割的区域内显示时，会出现滚动条，以方便用户的查看。滚动条会自动在各个无法完全显示的框架窗口内出现，使用SCROLLING属性可以分别对各个框架窗口的滚动条进行设置，其语法是：•FRAMESET•FRAMESRC=SCROLLING=属性值•……•/FRAMESET属性值具体的含义Yes一直显示滚动条，无论页面是否完全显示No从来不显示滚动条，即使内容无法完全显示出来Auto根据页面的长度自动调整，当页面无法完全显示的时候就显示滚动条。该属性值是HTML框架结构页面的默认效果7.4.2固定框架•在默认情况下，框架窗口的大小是可以由用户自己来调整的，不过有些时候网页开发者会不希望用户可以自己调整框架窗口大小而影响了网页效果。在HTML4.01里允许通过FRAME元素的NORESIZE属性来禁止浏览用户调整框架窗口大小。•FRAMESET•FRAMESRC=NORESIZE•……•/FRAMESET7.4.3不支持框架标记•框架结构虽然对于页面导航很有效，但是有些浏览器并不支持框架页面。因此对于框架结构的网页，有时候无法正常显示，这就影响了用户的阅读。使用NOFRAMES标记可以使这些浏览器能够读取标记内的内容，对于支持框架结构的浏览器来说，则会自动忽略其中的内容。•FRAMESET•FRAMESRC=页面源文件地址NORESIZE•……•NOFRAMES•……•/NOFRAMES•/FRAMESET7.5在框架中使用链接•框架的链接和普通链接一样，都需要使用A标记。特别的是，当框架结构中的一个框架作为变换页面时，需要为该框架窗口命名，然后根据名称对框架进行变换。这就需要使用NAME标记和TARGET标记，其中NAME标记用来为窗口命名，而TARGET标记则用来引导链接页面在框架内打开。FRAMESETROWS=100px,*FRAMENAME=naviSRC=navi.htmlFRAMENAME=contentSRC=content.html/FRAMESET7.6浮动框架•在框架结构中，除了固定的分割方式之外，还有一种框架窗口可以作为一个页面元素添加到普通页面中，这样框架窗口可以位于页面的各个位置，这种框架结构被称为浮动框架。浮动框架带有许多属性，通过这些属性可以调整框架页面的样式、以及它在页面中的布局。属性具体含义SRC浮动框架页面的源文件地址WIDTH浮动框架在页面中显示的宽度HEIGHT浮动框架在页面中显示的高度ALIGN浮动框架页面在浏览器中的对齐方式，可以为左对齐、右对齐或居中对齐NAME设定框架页面的名称MARGINWIDTH设置框架边缘宽度MARGINHEIGHT设置框架边缘高度SCROLLING设定浮动框架页面内是否显示滚动条FRAMEBORDER设定浮动框架的边框7.6.1插入浮动框架•在HTML里，可以使用IFRAME标签来创建浮动框架。IFRAME标签与IMG标签一样，可以放在BODY标签之内的任何一个位置。IFRAME标签里的SRC属性可以用来指定浮动框架载入的文档URL。插入浮动框架语法如下所示：•IFRAMESRC=页面源文件地址•/IFRAME7.6.2浮动框架大小•在普通框架结构中，由于框架就是整个浏览器窗口，因此不需要设置其大小。但是浮动框架中是插入到普通HTML页面中的一个元素，可以使用WIDTH和HEIGHT属性调整其大小，其语法是：•IFRAMESRC=页面源文件地址WIDTH=窗口宽度值HEIGHT=窗口高度值•/IFRAME7.6.3浮动框架对齐方式•由上例的图中可以看出，默认情况下浮动框架是左对齐的。如果不想让浮动框架左对齐，可以使用ALIGN属性对框架的对齐方式进行更改，其语法如下所示：•IFRAMESRC=ALIGN=left/center/right•/IFRAME7.6.4浮动框架页面的链接•除了普通的框架结构外，浮动框架也可以制作页面之间的链接。在一个浮动窗口内可以链接多个页面。首先为浮动框架窗口定义名称，然后将链接文字的目标页面打开方式设置为定义的窗口名称，即将超级链接的TARGET属性设置为浮动窗口的名称。这样，当运行程序的时候，就会在浮动窗口打开链接的目标页面了。7.7小结•本章主要讲解了HTML中的框架。详细讲解了如何创建框架、分割框架窗口、设置框架边框、设置边框属性，以及如何在框架中使用链接。除了传统的框架之外，还介绍了如何使用IFRAME元素来创建浮动框架。