第7章窗口框架第7章窗口框架7.1窗口框架简介7.2窗口框架控制7.3FRAME间的链接7.4浮动窗口7.1窗口框架简介•窗口框架可用于将窗口画面分割成多个小窗口,且每个小窗口中,可以显示不同的网页,达到在浏览器中同时浏览多个不同网页的效果。7.1.1什么是窗口框架在介绍窗口框架文档之前,先来看看其应用实例,有一个感性认识,见下图。Frameset结构的基本格式framesetframesrc=url“name=“w1”framesrc=url“name=“w2”...NOFRAMES.../NOFRAMES/frameset7.1.2窗口框架的基本结构包含Frameset结构的HTML文件文件framePage.htm的源代码htmlheadtitle窗口框架文档/title/headframesetcols=180,*framename=windows1src=“left.htmlscrolling=autoframename=windows2src=“main.htmlNOFRAMES你的浏览器不支持带框架的网页/NOFRAMES/frameset/htmlframeset标签用于定义一个窗口框架frame则用于定义窗口框架中的子窗口窗口框架文档的书写格式与一般的HTML文档的书写格式相同,只是用frameset代替body标签,frameset是一个成对标签,有开始和结束标签,在frameset标签内使用了另一个标签frame,用它来指定每一个窗口的内容。说明窗口框架的分割方式可分为两种,一种是水平分割(rows属性),另一种是垂直分割(cols属性)。7.1.3窗口框架的分割方式7.2窗口框架控制frameset是成对标签,首标签frameset和尾标签/frameset之间的内容是HTML文档主体部分。使用框架的HTML文档中不能出现body标签,否则会导致web浏览器忽略所有的框架定义而只显示body和/body之间的内容。frameset标签主要有rows、cols、border、bordercolor和frameborder五个属性。7.2.1框架设置标签frameset1.格式:framesetrows=值1,值2,...值nframesetcols=值1,值2,...值n2.说明:⑴rows说明窗口行分隔情况,cols说明列分隔。⑵各参数值之间用逗号分隔,依次表示各个子窗口的高度(宽度)。一、水平/垂直分割窗口属性rows/cols⑶rows和cols可以用数字、百分比或剩余值以及这三种方式的混合来表示:①数字:表示子窗口高度(宽度)所占的像素点数。②百分比“%”:表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比。一、水平/垂直分割窗口属性rows/cols③剩余值“*”。表示当前所有窗口设定之后的剩余部分。当符号*只出现一次,即其他子窗口的大小都有明确定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间。一、水平/垂直分割窗口属性rows/cols:framesetcols=40%,2*,*表示将浏览器窗口分割为3列:第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的40%;第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%;第三个子窗口占剩余空间的1/3,宽度为整个浏览器窗口宽度的20%。示例示例:横向与纵向同时分割HTMLHEADTITLESimpleFRAMESET/TITLE/HEADFRAMESETcols=40%,60%rows=2*,*FRAMEname=TopLeftsrc=red.htmFRAMEname=TopRightsrc=green.htmFRAMEname=BotLeftsrc=blue.htmFRAMEname=BotRightsrc=“yellow.htm/FRAMESET/HTML示例:嵌套分割FRAMESETrows=105,*FRAMEname=adbannersrc=ad.htmFRAMESETcols=40%,60%FRAMEname=leftsrc=red.htmFRAMESETrows=*,*FRAMEname=topsrc=blue.htmFRAMEname=bottomsrc=yellow.htm/FRAMESET/FRAMESET/FRAMESET在frameset标签中,可运用border属性控制分割窗口的框架的宽度,其语法如下所示:framesetborder=数值其中的数值代表此窗口框架的宽度,单位为像素。二、设置窗口框架宽度属性border示例:框架宽度设置HTMLHEADTITLESimpleFRAMESET/TITLE/HEADFRAMESETborder=10cols=40%,60%rows=2*,*FRAMEname=TopLeftsrc=red.htmFRAMEname=TopRightsrc=green.htmFRAMEname=BotLeftsrc=blue.htmFRAMEname=BotRightsrc=“yellow.htm/FRAMESET/HTML在frameset标签中,可运用bordercolor属性设置边框的颜色,其语法如下所示:framesetbordercolor=#其中的#代表此边框的颜色,取值可为RGB代码。三、设置边框颜色属性bordercolor示例:框架颜色设置HTMLHEADTITLESimpleFRAMESET/TITLE/HEADFRAMESETborder=10bordercolor=“990000”cols=40%,60%rows=2*,*FRAMEname=TopLeftsrc=red.htmFRAMEname=TopRightsrc=green.htmFRAMEname=BotLeftsrc=blue.htmFRAMEname=BotRightsrc=“yellow.htm/FRAMESET/HTMLframeborder属性用于控制窗口框架四周,是否显示框架。此属性可使用在frameset标签与frame标签中,使用在frameset标签内时,可控制窗口框架的所有子窗口。使用在frame标签时,则仅能控制该标签所代表的子窗口,其语法为:frmaesetframeborder=0或10代表不显示框线,1代表显示框线,其默认值为1。四、设置框架隐藏属性frameborder示例:框的设置HTMLHEADTITLESimpleFRAMESET/TITLE/HEADFRAMESETcols=40%,60%rows=2*,*FRAMEframeborder=0name=TopLeftsrc=red.htmFRAMEframeborder=0name=TopRightsrc=green.htmFRAMEname=BotLeftsrc=blue.htmFRAMEname=BotRightsrc=yellow.htm/FRAMESET/HTML每个子窗口均由frame标签定义frame是单个的标签,使用时,将它写在frameset的开始和结束标签之间,它主要有六个属性:src、name、marginwidth、marginheight、scrolling和noresize。7.2.2子窗口设置标签framesrc属性是用于指定要导入到该子窗口的HTML文件,其语法如下所示:framesrc=url如果一个frame标签中没有src属性,则该窗口显示为空。1.src属性name属性是用来指定窗口的名称,此属性是可选的。当完成定义子窗口的名称后,我们便可在超链接中,指定显示网页的子窗口。其语法如下所示:framename=子窗口名称2.name属性scrolling属性用于描述该窗口是否有滚动条。该属性是可选的。其设置语法如下:framescrolling=yes或no或auto各设置值所代表的意义依序为显示、不显示、自动设置,默认值是auto。3.scrolling属性noresize属性是一个标志,没有取值。它说明浏览者是否可以自行用鼠标调整窗口的大小。如果设定了noresize属性,则窗口不能调整。如果默认,则可以自行调整窗口的大小。4.noresize属性marginwidth属性:用来控制窗口内显示的内容与窗口左右边缘的距离,该属性是取一个像素值,默认为1,该属性是可选的。marginaheight属性:用来控制窗口内显示的内容与上下边缘的距离,该属性是取一个像素值,默认为1,该属性是可选的。5.设置边距属性marginwidth/marginheight对于框架网页中的超链接,可用target属性指定该链接的内容在哪个窗口显示。7.3FRAME间的链接31如在本章的第一个例子中,放置文件的功能是由下面的代码片段实现的:framename=windows1src=“left.htmlscrolling=autoframename=windows2src=“main.html在文件left.html中,放置文件的功能是由下面的代码片段实现的:p1.ahref=“main01.htmltarget=windows2春望/a/pp2.ahref=“main02.htmltarget=windows2春晓/a/p分析第一个例子32用target属性指定的目标窗口名称,必须使用字母/数字字符,否则窗口名将被忽略。有几个特定的窗口名例外,这几个窗口名有特殊含义,它们是_blank、_self、_parent和_top。target属性33⑴target=_blank当将target属性设置为_blank时,若单击超链接后,将打开一个新窗口来显示网页。⑵target=_self当将target属性设置为_self时,则将在同一窗口中显示链接的网页。target属性34⑶target=_parent当将target属性设置为_parent时,若单击超链接后,该链接网页将导入目前子窗口的上一层框架。若没有上层,则导入在同一窗口中。⑷target=_top当将target属性设置为_top时,则将脱离目前的窗口框架,在最上层的窗口框架中,显示链接的网页。target属性示例:AAA.html文件HTMLHEAD/HEADFRAMESETcols=180,*FRAMEsrc=menu.htmlFRAMEname=contentsrc=main.htm/FRAMESET/HTMLMenu.html文件HTMLBODYAhref=“a1.htm”target=“content”我们的任务/APAhref=“a2.htm”target=“content”我们的成员/APAhref=“a3.htm”target=“_parent”我们的公司/A/BODY/HTML示例:37在一个页面中直接引入另一个页面,这种技术称为浮动的窗口(Floatingframe)(也叫“内部框架”。在HTML中通过iframe标签实现。其语法如下所示:Iframesrc=URLname=子窗口名称width=xheight=xscrolling=[OPTION]frameborder=xmarginheight=0marginwidth=0