第4章_框架与浮动窗口

1、Version 3.0你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院框架与浮动窗口 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院HTML页面的框架页面的框架 浮动窗口的使用浮动窗口的使用 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院框架标记框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target) Frame的外观的外观 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院理解：理解：框架页面把浏览器窗口切割成几个独立的部分，框架页面把浏览器窗口切割成几个独立的部分，打开

2、的链接目标文件只占用浏览器窗口的某个区打开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架页面域，该区域就是框架网页的目标框架。框架页面的出现，使得访问者在浏览器窗口中可同时观察的出现，使得访问者在浏览器窗口中可同时观察多个页面。多个页面。 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院设计框架页面时，设计框架页面时，标记和标记和标记用于定义标记用于定义框架网页的结构框架网页的结构 由于框架网页的出现，从根本上改变了由于框架网页的出现，从根本上改变了HTML文档的传统结构文档的传统结构,因此因此在出现在出现标记的文档中，将不再使用标记的文档中，

3、将不再使用标记标记基本结构基本结构 是用来划分框窗，每一是用来划分框窗，每一窗框由一个窗框由一个标记所标示，标记所标示，必须在必须在范围范围中使用中使用 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院我们可以将窗口分割为几块，横向分用我们可以将窗口分割为几块，横向分用ROWS属性，纵向属性，纵向分用分用COLS属性，每一块的大小可以由这两个属性的值来实属性，每一块的大小可以由这两个属性的值来实现现 例如：例如： 其中的任何一个数字也可以由其中的任何一个数字也可以由“*”来代替来代替 如：如： 将将100像素以外的窗口平均分配像素以外的窗口平均分配 将窗口分为三等份将窗口分

4、为三等份 s 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院首先我们先创建首先我们先创建3个个html文件，其文件名分别为文件，其文件名分别为“a.html、b.html、c.html” a.html AAb.Html c.html同样同样 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 横向排列多个窗口横向排列多个窗口 横向排列多个窗口横向排列多个窗口 纵向排列多个窗口纵向排列多个窗口 混合排列多个窗口混合排列多个窗口 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 Htm纵向排列多个窗口纵向排列多个窗口 你的潜力，我们的动力

5、！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 混合排列多个窗口混合排列多个窗口 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院由由Frames分出来的几个窗口的内容并不是静止不变的，往分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化往一个窗口的内容随着另一个窗口的要求而不断变化 我们必须为每一个窗口起一个名字，这个名字用属性我们必须为每一个窗口起一个名字，这个名字用属性Name来定义来定义 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院格式：格式： 例如：例如： 你的潜力，我们的动力！你的潜力，我们的动力！

6、襄樊软件学院襄樊软件学院 定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性指属性指定了所链接的文件出现在哪一窗口。定了所链接的文件出现在哪一窗口。Target的值可以是的值可以是name定义的名称，也可以是以下四类值定义的名称，也可以是以下四类值: 显示一个新窗口显示一个新窗口 显示在同一个窗口显示在同一个窗口 显示在显示在Frameset的前一份文件的窗口的前一份文件的窗口 显示在整个浏览器窗口显示在整个浏览器窗口 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院1各窗口边框的设置各窗口边框的设置 2边框色彩边框色彩 3

7、设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 4各窗口间空白区域的设置各窗口间空白区域的设置 5卷滚条设置卷滚条设置 6不可变动的框边不可变动的框边 来设置不可变动的框边来设置不可变动的框边 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 Frameborder属性用来设定各窗口边框的属性用来设定各窗口边框的设置，设置，yes表示有边框，表示有边框，no表示没有边框表示没有边框 这里使用一下前面介绍的例子这里使用一下前面介绍的例子窗口边框的设置窗口边框的设置 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 bordercolor=#属性用

8、来设定边框色彩属性用来设定边框色彩 例例 边框色彩边框色彩 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 用来设定各窗口的上下左右边界宽度用来设定各窗口的上下左右边界宽度 #的值为像素点的值为像素点 设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 framespacing=#属性用来设定各窗口间空白区域，其中属性用来设定各窗口间空白区域，其中#为空白区域的大小为空白区域的大小 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 用来设定滚动条用来设定滚动条yes 表示有，表

9、示有，no表示没有表示没有auto表示由浏览器自动设置表示由浏览器自动设置#缺省值是缺省值是auto 卷滚条设置卷滚条设置 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院Iframe标记，又叫浮动帧标记，你可以用它将一个标记，又叫浮动帧标记，你可以用它将一个HTML文文档嵌入在一个档嵌入在一个HTML中显示中显示 如同如同“画中画画中画“电视电视 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院 格式格式 : 文件的路径，既可是文件的路径，既可是HTML文件，也可以是文本、文件，也可以是文本、ASP等等 画中画画中画区域的宽与高区域的宽与高 是否出现滚

10、动条是否出现滚动条区域边框的宽度区域边框的宽度 另外，另外，在在中还可以添加中还可以添加name=#属性，属性后属性，属性后面的文字将出现在不支持面的文字将出现在不支持FRAMES的浏览器中的浏览器中 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院我们先创建一个文件名叫我们先创建一个文件名叫a.html文件，其代码如下：文件，其代码如下： 登鹳雀楼登鹳雀楼登鹳雀楼登鹳雀楼白日依山尽，黄河入海流。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。欲穷千里目，更上一层楼。效果如图所示效果如图所示 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院浮动窗口 效果如图所示效果如图所示 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院浮动窗口 效果如图所示效果如图所示 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院浮动窗口 效果如图效果如图 你的潜力，我们的动力！你的潜力，我们的动力！襄樊软件学院襄樊软件学院带有框架和浮动窗口的综合页面带有框架和浮动窗口的综合页面 这样的页面是不是