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