CompanynameWEB编程基础第7章使用框架创建多页面布局清华大学出版社主要内容•建立水平或垂直的框架分割窗口•用嵌套框架分割窗口•对滚动条进行控制•在空白窗口显示网页•在框架或浮动框架上进行链接7.1框架简介框架技术可以将浏览器分割成多个小窗口,并且在每个小窗口中,可以显示不同的网页,这样我们就可以很方便的在浏览器中浏览不同的网页效果。当浏览器分割成多个窗口后,各窗口就会扮演不同的角色,实现不同的功能。举例来说,有些论坛就是把浏览器分割成两个窗口,一个窗口主要来显示帖子的标题,而另一个窗口会显示具体的内容。这样的设计显然比起一个窗口的网页在浏览时方便得多,而且用户也可以任意的切换题目。。框架的基本结构框架的基本结构主要分为框架和框架集两个部分。它是利用frame标记与frameset标记来定义。其中frame标记用于定义框架,而frameset标记则用于定义框架集。框架的基本结构htmlheadtitle框架的基本结构/title/headframeset…frame…/frame…/frameset/html7.2框架的设置常见的对窗口的分割包括:水平分割、垂直分割和嵌套分割。具体采用哪种分割方式,取决于实际需要,可用frameset标记中的rows(水平分割)或cols(垂直分割)属性来进行分割。窗口的水平分割rows属性可定义一个水平分割的窗口框架。framesetrows=高度1,高度2,…,*framesrc=urlframesrc=url…/frameset窗口的水平分割语法说明–rows属性的值代表各子窗口的高度,第一个子窗口高为高度1,第二个子窗口高为高度2,依此类推,而最后一个*,则代表最后一个子窗口的高度,值为其他子窗口高度分配后所剩余的高度。–设置高度数值的方式有两种:–采用整数设置,单位为像素(px),语法如下:–framesetrows=100,200,*–用百分比设置,语法如下:–framesetrows=20%,50%,*!--程序7-1--htmlheadtitle采用整数设置窗口的水平分割/title/headframesetrows=80,120,*frameframeframe/frameset/html窗口的垂直分割cols属性可定义一个垂直分割的窗口框架。基本语法:framesetcols=宽度1,宽度2,…,*framesrc=urlframesrc=url…/frameset一个垂直分割的例子!--程序7-1--htmlheadtitle采用整数设置窗口的水平分割/title/headframesetrows=80,120,*frameframeframe/frameset/html窗口的嵌套分割在实际应用中,“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中包含水平和垂直分割,如图所示,实现“厂”字型框架需要对窗口进行嵌套分割。窗口的嵌套分割!--程序7-3--htmlheadtitle窗口的嵌套分割/title/headframesetrows=30%,*frameframesetcols=20%,*frameframe/frameset/frameset/html框架的边框在frameset标记中,可运用border属性控制分割窗口框架的边框。基本语法:–framesetborder=n语法说明:–n为整数,代表此窗口框架的宽度,单位为像素(px)。框架的边框!--程序7-4--htmlheadtitle框架的边框控制/title/headframesetrows=30%,*border=12frameframesetcols=20%,*frameframe/frameset/frameset/html框架的边框框架的隐藏frameborder属性用于控制窗口框架的周围是否显示框架,此属性可使用在frameset标记与frame标记中,如果使用在frameset标记内时,可控制窗口框架的所有子窗口,如果用在frame标记中,则只能控制该标记所代表的子窗口。基本语法:–framesetframeborder=0或1语法说明:–0表示不显示边框,1表示显示边框,默认值为1。7.3子窗口的设置指定子窗口显示网页定义子窗口名称控制子窗口滚动条调整子窗口的尺寸设置子窗口的边距指定子窗口显示网页src属性是用来指定要导入到某个子窗口的HTML文件的位置,语法如下:基本语法:–framesrc=html文件的位置语法说明:–src属性的设置方法和前面介绍的img标记的src属性的用法是一样的,下面的frame标记,将设置子窗口显示名称为frame.html的网页。–framesrc=frame.html。指定子窗口显示网页!--程序7-6--htmlheadtitle指定子窗口显示网页/title/headframesetcols=30%,40%,*framesrc=left.htmlframesrc=center.htmlframesrc=right.html/frameset/html指定子窗口显示网页定义子窗口名称name属性用来指定窗口的名称,当完成子窗口的名称定义后,可指定超链接的链接目标显示到网页的某个子窗口。基本语法:–framename=子窗口名称!--程序7-7--htmlheadtitle指定子窗口的名称/title/headframesetcols=30%,40%,*framesrc=left.htmlname=leftframesrc=center.htmlname=centerframesrc=right.htmlname=right/frameset/html控制子窗口滚动条scrolling属性用于控制窗口框架中是否显示滚动条,使用此属性,可以避免HTML文件因内容过多而无法完全显示。此属性用于frame标记中。基本语法:–framescrolling=yes或no或auto语法说明:–yes表示为显示滚动条,no表示不显示滚动条,auto为自动设置。!--程序7-8--htmlheadtitle控制框架滚动条/title/headframesetrows=20%,70%,*framescrolling=yesframescrolling=noframescrolling=auto/frameset/html调整子窗口的尺寸在前面的学习中,我们学习了如何运用frameset标记的rows和cols属性来水平或垂直分割窗口。但设置后,各窗口框架的大小并非固定无法更改,当我们想更改窗口框架大小时,可以将鼠标指针移到要更改的框架上,待指针呈现双箭头符号时,再用鼠标进行拖拽,就可调整窗口的大小。当然我们不希望用户能随意地改变子窗口的大小,那么这时我们可以在frame标记中,添加noresize属性,语法如下:framenoresizesrc=url设置子窗口的边距网页的边距可以通过“margin”来设定,那么框架和网页一样也可设置边距,可以利用frame标记中的marginwidth属性来设置框架左右边缘的宽度;marginheight属性可以设置框架上下边缘的宽度。基本语法:–framesrc=urlmarginwidth=valuemarginheight=value语法说明:–在HTML文件中,利用框架frame标记中的marginwidth和marginheight属性可以设置相应子框架的左右和上下边缘的空白。!--程序7-9--htmlheadtitle设置框架边距/title/headframesetcols=30%,*framesrc=left.htmlmarginheight=50marginwidth=50framesrc=right.html/frameset/html7.4浮动框架在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口,那么这就是浮动框架,插入浮动框架要使用成对的标记iframe/iframe,同样,我们会用src属性来设置框架中显示文件的路径。基本语法:–iframesrc=url/iframe语法说明:–与框架不同的是,浮动框架可以包含在body标记中。7.5小实例将浏览器画面分割成多个子窗口时,可赋予各子窗口不同的功能。最常见的应用方式,就是以一个子窗口作为网页的主画面,另一个窗口则用于控制该窗口的显示内容。要达到这个目的,我们可以运用a标记的target属性,来指定显示链接网页的子窗口。厂字型布局图小结本章主要介绍了两种框架方式:一种是分割窗口式,一种是嵌入式,两种框架的介绍主要包括插入方式、大小调整、显示方式、初始页设置、名称设置等内容,框架一般来说应用比较多的是在导航这块内容,因为一般来说一个网站的导航栏是相似的,比如可以包含一些广告,或相同的图片,我们可以只做一个框架来调用我们的导航,这些可以提高我们的工作效率。CompanynameWEB编程基础