第七章框架的应用

1、框架技术可以将浏览器分割成多个小窗口，并且在每个小窗口中，可以显示不同的网页，这样就可以很方便的在浏览器中浏览不同的网页效果。当浏览器分割成多个窗口后，各窗口就会扮演不同的角色，实现不同的功能。 举例来说，有些论坛就是把浏览器分割成两个窗口，一个窗口主要来显示帖子的标题，而另一个窗口会显示具体的内容。 这样的设计显然比起一个窗口的网页在 浏览时方便得多，而且用户也可以任意的切换题目。框架技术也多用于后台管理页面排版。1 框架的基本结构框架的基本结构主要分为框架和框架集两个部分。它是利用 标记与 vframesetS记来定义。其中 标记用于定义框架，而 记则用 于定义框架集。框架的基本结构v/h

2、eadvframeset vframe fe记不可以包含在标记中，直接将该标记包含在 标 记中。2 框架的设置常见的对窗口的分割包括：水平分割、垂直分割和嵌套分割。具体采用哪种 分割方式，取决于实际需要，可用标记中的rows（水平分割）或cols（垂 直分割）属性来进行分割。在完成窗口的分割后，接下来就要 设置每个分割出来 的子窗口。设置子窗口的属性都在相应的子窗口的标记中。其中，最重 要的属性为子窗口的名称（name属性）和要导入到框架中的子窗口 HTML文件的 路径（src属性）。2.1窗口的水平分割rows属性可定义一个水平分割的窗口框架。格式：vframeset rows=高度 1，高

3、度 2,* vframe src=urlvframe src=urlrows属性的值代表各子窗口的高度，第一个子窗口高为高度1,第二个子窗口高为高度2,依此类推，而最后一个*，则代表最后一个子窗口的 高度，值为其它子窗口高度分配后所剩余的高度。设置高度数值的方式有两种：采用整数设置，单位为像素px： vframeset rows=100,200,*用百分比设置，如：vframeset rows=20%,50%,*实例 1.html:采用整数设置窗口的水平分割vframeset rows=80,120,*在水平分割窗口后，设置第一个窗口的高度为80px，第二个窗口中的高度为120px，第三个窗口

4、的高度是浏览器的宽度减去前两个窗口的高度。网页效果如图7-1图7-1设置窗口的水平分割 2.2窗口的垂直分割cols属性可定义一个垂直分割的窗口框架。 格式：vframeset cols=宽度 1，宽度 2,* vframe src=urlvframe src=urlv/frameset垂直宽度值的设置，与水平分割高度值的设置方式相同实例 2.html:采用整数设置窗口的垂直分割 v/headvframeset cols=80,120,*vframev/framevframev/framevframev/frame网页效果如图7-2。图7-2设置窗口的垂直分割2.3窗口的嵌套分割在实际应用中，

5、“厂”字型框架使用极为广泛。“厂”字型的网页就是窗口中 包含水平和垂直分割，如图7-3所示，实现“厂”字型框架需要对窗口进行嵌套 分割。所谓的嵌套分割是指一个窗口框架还包含了另一个窗口框架。整个框架将用数个#记建立。先用vframeset的rows属性对窗口进行上下分割，然后再用cols属性把下面的窗口进行垂直分割，就完成了 “厂”字型的框架。实例 3.html:窗口的嵌套分割vframeset rows=30%,* vframev/frame vframeset cols=20%,* vframev/frame 网页效果如图7-3。图7-3设置窗口的嵌套分割2.4框架的边框在#记中，可运用b

6、order属性控制分割窗口框架的边框。格式：vframeset border=nn为整数，代表此窗口框架的宽度，单位为像素 （px）。实例 4.html:框架的边框控制vframeset rows=30%,* border=12vframeset cols=20%,*vframev/framev/framesetv/framesetv/html网页效果如图7-4。图7-4框架的边框2.5框架的隐藏frameborder属性用于控制窗口框架的周围是否显示框架，此属性可使用在 fe记与标记中，如果使用在 #记内时，可控制窗口 框架的所有子窗口，如果用在vframe标记中，则只能控制该标记所代表的子

7、窗 口。格式：vframeset frameborder=0或10表示不显示边框，1表示显示边框，默认值为1。实例 5.html: 框架的隐藏 vframeset cols=30%,40%,* frameborder=0 vframe src=left.html vframe src=ce nter.html vframe src=right.html网页效果如图7-5。- lie re soft Internet EiplorerJ闿|昨團色看叩收rt工具Q團皿 M：- ”靠左窗口中间窗口靠右窗口图7-5框架的隐藏3 子窗口的设置3.1指定子窗口显示网页src属性是用来指定要导入到某个子窗口

8、的HTML文件的位置。格式：vframe src=html文件的位置src属性的设置方法和标记的src属性的用法是一样的，下面的 标记，将设置子窗口显示名称为 frame.html的网页。实例 6.html:指定子窗口显示网页v/headvframeset cols=30%,40%,*vframe src=left.htmlvframe src=ce nter.htmlvframe src=right.html定义一个垂直分割的窗口框架，并在各子窗口中显示不同的网页。网页效果如图7-6。拮勺措龙干宙口 St示F4 砸 - Kicrosoft Int ernet Explorer文件密 第辐tl

9、) 査若后退r总收蔵ix型帮助妇宜 / 悝索咬在戎a卜巾：广 h 璧hltp /lEl./waibdaiEihlnl靠左窗口中间窗口靠右窗口图7-6指定子窗口显示网页3.2定义子窗口名称name属性用来指定窗口的名称，当完成子窗口的名称定义后，可指定超链 接的链接目标显示到网页的某个子窗口。格式：vframe name=子窗口名称实例 7.html:指定子窗口的名称v/headvframeset cols=30%,40%,*vframe src=left.html n ame=leftvframe src=ce nter.html n ame=ce ntervframe src=right.h

10、tml n ame=right网页效果如图7-7。豹 描龙子宙口的暂称 -flicrosoft Ini ernet Explorer立件妁編揖官奁吞收応 工貝 帮肋Hr0后退k Q ”回凰。才瞬.收惑0地 t1 J, -iff http /lc alhoE t/w bd s i gjt/7 html靠左窗口中间窗口靠右窗口一jI图7-7指定子窗口的名称3.3控制子窗口滚动条scrolling属性用于控制窗口框架中是否显示滚动条，使用此属性，可以避免 HTML文件因内容过多而无法完全显示。此属性用于标记中。格式：vframe scrolling=yes 或 no 或 autoyes表示为显示滚动

11、条，no表示不显示滚动条，auto为自动设置。实例 8.html:控制框架滚动条v/headvframeset rows=20%,70%,*vframe src= name=left scrolling=yesv/framevframe src=ce nter.html n ame=ce nter scrolli ng=no vframe src= n ame=right scrolli ng=auto网页效果如图7-8。图7-8控制子窗口滚动条3.4调整子窗口的尺寸运用标记的rows和cols属性水平或垂直分割窗口。但设置后， 各窗口框架的大小并非固定无法更改，当想更改窗口框架大小时，可以将

12、鼠标指针移到要更改的框架上，待指针呈现双箭头符号时，再用鼠标进行拖拽，就可调 整窗口的大小。如果不希望用户能随意地改变子窗口的大小，那么这时可以在标记中，添加noresize属性，格式如下：vframe no resize src=url 3.5设置子窗口的边距网页的边距可以通过margin来设定，那么框架和网页一样也可设置边距， 可以利用标记中的 marginwidth属性来设置框架左右边缘的宽度； margi nheight属性可以设置框架上下边缘的宽度。格式：vframe src=url margi nwidth=value margi nheight=value在HTML文件中，利用框

13、架标记中的 marginwidth和 marginheight 属性可以设置相应子框架的左右和上下边缘的空白。实例 9.html:设置框架边距vframeset cols=30%,*vframe src=left.html marg in height=50 margi nwidth=50vframe src=right .htmlv/frame v/frameset网页效果如图7-9。icrosoft Internct Explorer文幷妁编辑iQ E- (v)收嚴XH 帮肋(M)后返户亦必收祕3 2* $圈 I地址.Q ifej| http： /locfillLQstZvcbdesi 口

14、70 htnl转到糙接靠左窗口靠右窗口图7-9设置子框架边距4浮动框架在浏览网页的时候会看到在浏览器窗口含有孤立的子窗口， 那么这就是浮动 框架，插入浮动框架要使用成对的标记 ，同样用src属性来设 置框架中显示文件的路径。格式：viframe src=url与框架不同的是，浮动框架可以包含在 标记中。浮动框架所含的属性见表7-1 o表7-1浮动框架的属性属性描述src设置源文件路径width设置浮动框架窗口宽度height设置浮动框架窗口高度n ame设置框架的名称alig n设置框架对齐方式frameborder设置是否有框架边框framespaci ng设置框架边框宽度scrolli n

15、g设置框架滚动条no resize设置框架尺寸是否可以调整bordercolor设置边框颜色margi nwidth设置框架左右边距margi nheight设置框架上下边距200,第二个浮动一个页面中设置了两个浮动框架，第一个浮动框架的宽为 框架的宽为300,两个浮动框架的高都为200,边框宽为3头例 10.html:设置浮动框架v/headvtable width=100%网页效果如图7-10。iGTOsoft Internct Explorer文幷妁 镰辑迥 电） 收嚴 IH 祜助山）后退按索 收店與111 Lt L.3.遽http: /loafilliost/webdesi pi79.

16、 htnl靠左窗口靠右窗口I冏完毕图7-10设置浮动框架5 综合示例在很多网页中，常在一个框架中显示一个所有网页内容的目录， 而通过单击 其中的某项，在另一个框架中显示相应内容。这些目录是热点内容 （超链接内容, 文本或图片），需要在框架之间建立超链接，并指明显示的目标文件的框架。使用的target属性可以控制目标文件在那个框架内显示。当单击热点文 本时，目标文件就会出现在target指定的框架内。target属性的值可以是框架名，格式：热点文本框架名有四个特殊的值，分别实现4类特殊的操作，表7-2。表7-2框架名的四种值取值描述target=_bla nk链接的目标文件被载入一个新的没有名字的浏 览器窗口target=_self链接的目标文件被载入当前框架窗口中，代替 正在显示的热点文本所在的那个文件target=top链接的目标文件被载入整个浏览器窗口target=_pare nt当框架有嵌套时，链接的目标文件被载入父框 架中。否则，被载入整个浏览器窗口target=某个框架名 称 xname链接的目标文件被载入指疋的框架 xname中下例实现框架间的链接。主页面m.html划分为左右两个子框架（子窗口），名称分别为fl和f2。左子框架载入 乙html，乙html包含若干超链接，点击超链接，链接到的目标 文件根据target指定的f2，被装载到右子框