第4章 框架与浮动窗口优秀PPT.ppt

《第4章 框架与浮动窗口优秀PPT.ppt》由会员分享，可在线阅读，更多相关《第4章 框架与浮动窗口优秀PPT.ppt（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第4 4章章 框架与浮动窗口框架与浮动窗口现在学习的是第1页，共27页知识要点知识要点HTML页面的框架页面的框架 浮动窗口的使用浮动窗口的使用 现在学习的是第2页，共27页本章要点本章要点框架标记框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target)Frame的外观的外观现在学习的是第3页，共27页框架框架 理解：理解：框架页面把浏览器窗口切割成几个独立的部分，打框架页面把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架页面的出现，该区域就是

2、框架网页的目标框架。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。使得访问者在浏览器窗口中可同时观察多个页面。现在学习的是第4页，共27页框架标记框架标记设计框架页面时，设计框架页面时，标记和标记和标记用于定义框架网页的标记用于定义框架网页的结构结构 由于框架网页的出现，从根本上改变了由于框架网页的出现，从根本上改变了HTML文档的传统结构文档的传统结构,因此在出现因此在出现标记的文档中，将不再使用标记的文档中，将不再使用标记标记基本结构基本结构 是用来划分框窗，每一窗框由一是用来划分框窗，每一窗框由一个个标记所标示，标记所标示，必须必须在在范围中使用范围中使用现在学习的是第5页

3、，共27页各窗口尺寸设置各窗口尺寸设置 我们可以将窗口分割为几块，横向分用我们可以将窗口分割为几块，横向分用ROWS属性，纵向分用属性，纵向分用COLS属属性，每一块的大小可以由这两个属性的值来实现性，每一块的大小可以由这两个属性的值来实现 例如：例如：其中的任何一个数字也可以由其中的任何一个数字也可以由“*”来代替来代替 如：如：将将100像素以外的窗口平均分配像素以外的窗口平均分配 将窗口分为三等份将窗口分为三等份 s现在学习的是第6页，共27页举例说明举例说明首先我们先创建首先我们先创建3个个html文件，其文件名分别为文件，其文件名分别为“a.html、b.html、c.html”a.

4、html AAb.Html c.html同样同样现在学习的是第7页，共27页横向排列多个窗口横向排列多个窗口 横向排列多个窗口横向排列多个窗口 横向排列多个窗口横向排列多个窗口 纵向排列多个窗口纵向排列多个窗口 混合排列多个窗口混合排列多个窗口 现在学习的是第8页，共27页纵向排列多个窗口纵向排列多个窗口 Htm纵向排列多个窗口纵向排列多个窗口 现在学习的是第9页，共27页混合排列多个窗口混合排列多个窗口 混合排列多个窗口混合排列多个窗口 现在学习的是第10页，共27页各窗口间相互操作各窗口间相互操作(Frame Target)由由Frames分出来的几个窗口的内容并不是静止不变的，往往一个分

5、出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化窗口的内容随着另一个窗口的要求而不断变化 我们必须为每一个窗口起一个名字，这个名字用属性我们必须为每一个窗口起一个名字，这个名字用属性Name来定义来定义 现在学习的是第11页，共27页窗口标识窗口标识(Frame Name):格式：格式：例如：例如：现在学习的是第12页，共27页Target属性属性 定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性指定了属性指定了所链接的文件出现在哪一窗口。所链接的文件出现在哪一窗口。Target的值可以是的值可以是nam

6、e定义的名定义的名称，也可以是以下四类值称，也可以是以下四类值:显示一个新窗口显示一个新窗口 显示在同一个窗口显示在同一个窗口 显示在显示在Frameset的前一份文件的窗口的前一份文件的窗口 显示在整个浏览器窗口显示在整个浏览器窗口现在学习的是第13页，共27页Frame的外观的外观 1各窗口边框的设置各窗口边框的设置 2边框色彩边框色彩 3设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 4各窗口间空白区域的设置各窗口间空白区域的设置 5卷滚条设置卷滚条设置 6不可变动的框边不可变动的框边 来设置不可变动的框边来设置不可变动的框边现在学习的是第14页，共27页各窗口边框的设置各窗口

7、边框的设置 Frameborder属性用来设定各窗口边框的设置，属性用来设定各窗口边框的设置，yes表表示有边框，示有边框，no表示没有边框表示没有边框 这里使用一下前面介绍的例子这里使用一下前面介绍的例子窗口边框的设置窗口边框的设置 现在学习的是第15页，共27页边框色彩边框色彩 bordercolor=#属性用来设定边框色彩属性用来设定边框色彩 例例 边框色彩边框色彩 现在学习的是第16页，共27页设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 用来用来设定各窗口的上下左右边界宽度设定各窗口的上下左右边界宽度#的值为像素点的值为像素点 设置各窗口的上下左右边界宽度设置各窗口的上下

8、左右边界宽度现在学习的是第17页，共27页各窗口间空白区域的设置各窗口间空白区域的设置 framespacing=#属性用来设定各窗口间空白区域，其中属性用来设定各窗口间空白区域，其中#为空白区域的大小为空白区域的大小 现在学习的是第18页，共27页卷滚条设置卷滚条设置 用来设定滚动条用来设定滚动条yes 表示有，表示有，no表示没有表示没有auto表示由浏览器自动设置表示由浏览器自动设置#缺省值是缺省值是auto 卷滚条设置卷滚条设置现在学习的是第19页，共27页浮动窗口浮动窗口 Iframe标记，又叫浮动帧标记，你可以用它将一个标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一文档

9、嵌入在一个个HTML中显示中显示 如同如同“画中画画中画“电视电视 现在学习的是第20页，共27页Iframe标记的使用标记的使用 格式格式:文件的路径，既可是HTML文件，也可以是文本、ASP等 画中画区域的宽与高 是否出现滚动条区域边框的宽度 另外，另外，在在中还可以添加中还可以添加name=#属性，属性后面的属性，属性后面的文字将出现在不支持文字将出现在不支持FRAMES的浏览器中的浏览器中 现在学习的是第21页，共27页浮动窗口实例浮动窗口实例我们先创建一个文件名叫我们先创建一个文件名叫a.html文件，其代码如下：文件，其代码如下：登鹳雀楼登鹳雀楼登鹳雀楼登鹳雀楼白日依山尽，黄河入海

10、流。白日依山尽，黄河入海流。欲穷千里目，更上一层楼。欲穷千里目，更上一层楼。效果如图所示效果如图所示 现在学习的是第22页，共27页主页面代码主页面代码浮动窗口 效果如图所示效果如图所示 现在学习的是第23页，共27页设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高浮动窗口 效果如图所示效果如图所示 现在学习的是第24页，共27页设置浮动窗口区域边框设置浮动窗口区域边框浮动窗口 效果如图效果如图 现在学习的是第25页，共27页体验体验 带有框架和浮动窗口的综合页面带有框架和浮动窗口的综合页面 这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现“画中画画中画”的功能。的功能。现在学习的是第26页，共27页总结总结框架标记框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target)Frame的外观的外观现在学习的是第27页，共27页