310  10.htm文件在浏览器中的显示

 

说明:如图310,左边的frame使用了scrolling=no的属性,则无论需要显示的页面有多大,都不会有滚动条出现。中间的frame使用了noresize=true属性,则用户不能调整frame的大小(大家可以看到以前例子中的frame是可以调整大小的)。最右边的frame使用了scrolling=yes的属性,在这里大家看得不是很清楚,如果需要显示的页面过小,就是说不需要滚动条也能够显示出全部,则此时最右边的frame也是拥有滚动条的。默认情况下,scrolling的值是auto。而noresize是一个布尔型的变量,当为true时,不能改变frame的大小;为false(默认情况),可以改变frame的大小。

 

5frameset元素的marginHeight属性及marginWidth属性

marginHeight:设定在显示frame中的文字之前文字距离顶部及底部的空白距离。

marginWidth:设定在显示frame中的文字之前文字距离左右两边的空白距离。

 

【例313frameset元素的marginHeight属性及marginWidth属性

(1) <html>
(2) <head><title> frame
元素中marginHeight属性及marginWidth属性的使用</title></head>
(3) <frameset cols="50%,*">
(4)  <frame name="left" src="1.htm" marginHeight=60 marginWidth=30>
(5)  <frame name="right" src="2.htm">
(6) </frameset>
(7) </html>

 

将上述代码输入输入记事本,存为11.htm文件。启动IE浏览器,打开11.htm文件,显示如图311的效果。

311  11.htm文件在浏览器中的显示

 

说明:如图311,左边的框架中文字与上下底边都有60像素的空间空白,与左右两边都有30像素的空间空白。右边的框架没有使用这一属性,所以就没有空间空白。

 

6frameset元素的frameborder属性

frameborder属性决定是否在frame中显示框线。可以使用的值有四个,分别是10noyesframeborder值为1或者yes,则会显示框线;frameborder值为0或者no,则不会显示框线。frameborder的默认值为1

 

7)浮动框架的制作

浮动框架,就好像一个文档之中又嵌入了一个文档,或者可以说成是一个浮动的frame。制作这样的文档需要用到iframe元素。iframe标记,又叫浮动帧标记,你可以用它将一个HTML文件嵌入在另一个HTML中显示。它不同于frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,甚至可以在同一HTML文件嵌入多个HTML文件。

iframe基本的语法格式如下:

<Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" align="x" > </iframe>

src:嵌入的HTML文件的位置,可以是相对地址,也可以是绝对地址;
  widthheight:“画中画”区域的宽与高;
  scrolling:src的指定的HTML文件在指定的区域显示不下时,如果滚动条选项设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示滚动条;
  FrameBorder:区域边框的宽度,为了让“画中画”与邻近的内容相融合,常设置为0

对齐方式:
  align:该属性指定浮动帧与其他对象的对齐方式。left:居左;right:居右;center:居中。

【例314】浮动框架

 

(1) <html>
(2) <head><title>
浮动框架的使用</title></head>
(3) <body>
(4) <h1>
浮动框架的使用</h1><hr>
(5) <iframe   src="1.htm"  height=100 width=200 
frameborder=1 align=right>
(6) </iframe>
(7) <p>
右边显示的是1htm中的内容。现在就好像是在这个网页中又嵌入了另外的一个网页。使用的就是iframe元素。这样可以使网页的可视性加强,对于讲解、说明等特定网页十分适合。</p>
(8) </body>
(9) </html>

 

将上述代码输入输入记事本,存为12.htm文件。启动IE浏览器,打开12.htm文件,显示如图312的效果。

 

 

312  12.htm文件在浏览器中的显示

 

8)框架的综合应用

下面用实例来说明如何在网页中综合应用框架。

 

【例315】框架的综合应用

 

main.htm

(1) <html>
(2) <head><title>
框架的综合应用</title></head>
(3) <frameset cols="20%,*">
(4)  <frame name="index" src="host.htm">
(5)  <frame name="content" src="1.htm">
(6) </frameset>
(7) </html>

 

 

host.htm

(1) <html>
(2) <head><title>
框架的综合应用</title></head>
(3) <body>
(4) <a href="1.htm " target="content">1.htm </a> <br>
(5) <a href="2.htm " target="content">2.htm </a> <br>
(6) <a href="3.htm " target="content">3.htm </a>
(7) </body>
(8) </html>

 

将上述代码输入记事本,分别存为main.htmhost.htm文件。启动IE浏览器,打开main.htm文件,显示如图313的效果。

313  框架的综合应用

 

在这个例子中,左边的框架中设定了三个超链接,右边框架中需要显示的就有三个网页。左边框架中的内容是不会变的,右边框架是真正的“显示区域”,其内容根据左边框架中点击超链接的不同而不同。这样,左边的框架就好像一个目录一样,点击不同的链接,右边框架会显示不同的内容。