第4章 框架与浮动窗口精选文档.ppt

第第4 4章章 框架与浮动窗口框架与浮动窗口本讲稿第一页，共二十七页知识要点知识要点HTML页面的框架页面的框架 浮动窗口的使用浮动窗口的使用 本讲稿第二页，共二十七页本章要点本章要点框架标记框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target)Frame的外观的外观本讲稿第三页，共二十七页框架框架 理解：理解：框架页面把浏览器窗口切割成几个独立的部分，打框架页面把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架页面的出现，该区域就是框架网页的目标框架。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。使得访问者在浏览器窗口中可同时观察多个页面。本讲稿第四页，共二十七页框架标记框架标记设计框架页面时，设计框架页面时，标记和标记和标记用于定义框架网标记用于定义框架网页的结构页的结构 由于框架网页的出现，从根本上改变了由于框架网页的出现，从根本上改变了HTML文档的传统结构文档的传统结构,因此在出因此在出现现标记的文档中，将不再使用标记的文档中，将不再使用标记标记基本结构基本结构 是用来划分框窗，每一窗框是用来划分框窗，每一窗框由一个由一个标记所标示，标记所标示，必须在必须在范围中范围中使用使用本讲稿第五页，共二十七页各窗口尺寸设置各窗口尺寸设置 我们可以将窗口分割为几块，横向分用我们可以将窗口分割为几块，横向分用ROWS属性，纵向分用属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现属性，每一块的大小可以由这两个属性的值来实现 例如：例如：其中的任何一个数字也可以由其中的任何一个数字也可以由“*”来代替来代替 如：如：将将100像素以外的窗口平均分配像素以外的窗口平均分配 将窗口分为三等份将窗口分为三等份 s本讲稿第六页，共二十七页举例说明举例说明首先我们先创建首先我们先创建3个个html文件，其文件名分别为文件，其文件名分别为“a.html、b.html、c.html”a.html AAb.Html c.html同样同样本讲稿第七页，共二十七页横向排列多个窗口横向排列多个窗口 横向排列多个窗口横向排列多个窗口 横向排列多个窗口横向排列多个窗口 纵向排列多个窗口纵向排列多个窗口 混合排列多个窗口混合排列多个窗口 本讲稿第八页，共二十七页纵向排列多个窗口纵向排列多个窗口 Htm纵向排列多个窗口纵向排列多个窗口 本讲稿第九页，共二十七页混合排列多个窗口混合排列多个窗口 混合排列多个窗口混合排列多个窗口 本讲稿第十页，共二十七页各窗口间相互操作各窗口间相互操作(Frame Target)由由Frames分出来的几个窗口的内容并不是静止不变的，往往分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化一个窗口的内容随着另一个窗口的要求而不断变化 我们必须为每一个窗口起一个名字，这个名字用属性我们必须为每一个窗口起一个名字，这个名字用属性Name来定义来定义 本讲稿第十一页，共二十七页窗口标识窗口标识(Frame Name):格式：格式：例如：例如：本讲稿第十二页，共二十七页Target属性属性 定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性指定了所属性指定了所链接的文件出现在哪一窗口。链接的文件出现在哪一窗口。Target的值可以是的值可以是name定义的名称，也定义的名称，也可以是以下四类值可以是以下四类值:显示一个新窗口显示一个新窗口 显示在同一个窗口显示在同一个窗口 显示在显示在Frameset的前一份文件的窗口的前一份文件的窗口 显示在整个浏览器窗口显示在整个浏览器窗口本讲稿第十三页，共二十七页Frame的外观的外观 1各窗口边框的设置各窗口边框的设置 2边框色彩边框色彩 3设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 4各窗口间空白区域的设置各窗口间空白区域的设置 5卷滚条设置卷滚条设置 6不可变动的框边不可变动的框边 来设置不可变动的框边来设置不可变动的框边本讲稿第十四页，共二十七页各窗口边框的设置各窗口边框的设置 Frameborder属性用来设定各窗口边框的设属性用来设定各窗口边框的设置，置，yes表示有边框，表示有边框，no表示没有边框表示没有边框 这里使用一下前面介绍的例子这里使用一下前面介绍的例子窗口边框的设置窗口边框的设置 本讲稿第十五页，共二十七页边框色彩边框色彩 bordercolor=#属性用来设定边框色彩属性用来设定边框色彩 例例 边框色彩边框色彩 本讲稿第十六页，共二十七页设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 用来设用来设定各窗口的上下左右边界宽度定各窗口的上下左右边界宽度#的值为像素点的值为像素点 设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度本讲稿第十七页，共二十七页各窗口间空白区域的设置各窗口间空白区域的设置 framespacing=#属性用来设定各窗口间空白区域，其中属性用来设定各窗口间空白区域，其中#为空白区域的大小为空白区域的大小 本讲稿第十八页，共二十七页卷滚条设置卷滚条设置 用来设定滚动条用来设定滚动条yes 表示有，表示有，no表示没有表示没有auto表示由浏览器自动设置表示由浏览器自动设置#缺省值是缺省值是auto 卷滚条设置卷滚条设置本讲稿第十九页，共二十七页浮动窗口浮动窗口 Iframe标记，又叫浮动帧标记，你可以用它将一个标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌文档嵌入在一个入在一个HTML中显示中显示 如同如同“画中画画中画“电视电视 本讲稿第二十页，共二十七页Iframe标记的使用标记的使用 格式格式:文件的路径，既可是HTML文件，也可以是文本、ASP等 画中画区域的宽与高 是否出现滚动条区域边框的宽度 另外，另外，在在中还可以添加中还可以添加name=#属性，属性后面的属性，属性后面的文字将出现在不支持文字将出现在不支持FRAMES的浏览器中的浏览器中 本讲稿第二十一页，共二十七页浮动窗口实例浮动窗口实例我们先创建一个文件名叫我们先创建一个文件名叫a.html文件，其代码如下：文件，其代码如下：登鹳雀楼登鹳雀楼登鹳雀楼登鹳雀楼白日依山尽，黄河入海流。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。欲穷千里目，更上一层楼。效果如图所示效果如图所示 本讲稿第二十二页，共二十七页主页面代码主页面代码浮动窗口 效果如图所示效果如图所示 本讲稿第二十三页，共二十七页设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高浮动窗口 效果如图所示效果如图所示 本讲稿第二十四页，共二十七页设置浮动窗口区域边框设置浮动窗口区域边框浮动窗口 效果如图效果如图 本讲稿第二十五页，共二十七页体验体验 带有框架和浮动窗口的综合页面带有框架和浮动窗口的综合页面 这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现“画中画中画画”的功能。的功能。本讲稿第二十六页，共二十七页总结总结框架标记框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target)Frame的外观的外观本讲稿第二十七页，共二十七页