HTML框架.pptx

第第 四四 章章框架与浮动窗口框架与浮动窗口 第 2 页软软 件件 开开 发发 世世 界界 课程目标课程目标课程目标课程目标p通过本章学习，可以掌握：通过本章学习，可以掌握：HTML页面的框架框架标记页面的框架框架标记各窗口尺寸设置各窗口尺寸设置各窗口间相互操作各窗口间相互操作(Frame Target)Frame的外观的外观 浮动窗口的使用浮动窗口的使用 第 3 页软软 件件 开开 发发 世世 界界 什么是框架什么是框架 框架（框架（frame）页面把浏览器窗口切割成几个独立的部分。）页面把浏览器窗口切割成几个独立的部分。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。框架也可以理解为是一种窗口，有些文章把它翻译为框架也可以理解为是一种窗口，有些文章把它翻译为“窗口窗口”框架，其中含框架，其中含2个个网页网页第 4 页软软 件件 开开 发发 世世 界界 框架标记框架标记p设计框架页面时，设计框架页面时，标记和标记和标记用于定义框架网页的结构标记用于定义框架网页的结构 p由于框架网页的出现，从根本上改变了由于框架网页的出现，从根本上改变了HTML文档的传统结构文档的传统结构,因此在出现因此在出现标记的文档中，将不再使用标记的文档中，将不再使用标记标记p是用来划分框窗，每一窗框由一个是用来划分框窗，每一窗框由一个标记所标示，标记所标示，必须在必须在范围中使范围中使用用基本结构基本结构 第 5 页软软 件件 开开 发发 世世 界界 框架尺寸设置框架尺寸设置 p可以将窗口分割为几块，横向分用可以将窗口分割为几块，横向分用ROWS属性，纵向分用属性，纵向分用COLS属性，每一块的大小可以由这两个属性，每一块的大小可以由这两个属性的值来实现属性的值来实现 例如：例如：其中的任何一个数字也可以由其中的任何一个数字也可以由“*”来代替来代替 如：如：将将100像素以外的窗口平均分配像素以外的窗口平均分配 将窗口分为三等份将窗口分为三等份 s第 6 页软软 件件 开开 发发 世世 界界 示示 例例p首先我们先创建首先我们先创建3个个html文件，其文件名分别为文件，其文件名分别为“a.html、b.html、c.html”a.html AA第 7 页软软 件件 开开 发发 世世 界界 横向排列多个窗口横向排列多个窗口横向排列多个窗口横向排列多个窗口p 横向排列多个窗口横向排列多个窗口 第 8 页软软 件件 开开 发发 世世 界界 纵向排列多个窗口纵向排列多个窗口纵向排列多个窗口纵向排列多个窗口p Htm纵向排列多个窗口纵向排列多个窗口 第 9 页软软 件件 开开 发发 世世 界界 混合排列多个窗口混合排列多个窗口混合排列多个窗口混合排列多个窗口p 混合排列多个窗口混合排列多个窗口 第 10 页软软 件件 开开 发发 世世 界界 各窗口间相互操作各窗口间相互操作各窗口间相互操作各窗口间相互操作p由由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化而不断变化 p必须为每一个窗口起一个名字，这个名字用属性必须为每一个窗口起一个名字，这个名字用属性Name来定义来定义 p通过通过 name 属性，可以在编程中调用并处理框架对象，比如在属性，可以在编程中调用并处理框架对象，比如在 javascript 中中p通过通过 name 属性，也可以在网页中引用这个框架，比如指定链接目标：属性，也可以在网页中引用这个框架，比如指定链接目标：target=第 11 页软软 件件 开开 发发 世世 界界 窗口标识窗口标识窗口标识窗口标识(Frame Name)(Frame Name)p格式：格式：例如：例如：第 12 页软软 件件 开开 发发 世世 界界 TargetTarget属性属性属性属性p 定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性属性指定了所链接的文件出现在哪一窗口。指定了所链接的文件出现在哪一窗口。Target的值可以是的值可以是name定义的名称，也可以是以下四类值定义的名称，也可以是以下四类值:显示一个新窗口显示一个新窗口 显示在同一个窗口显示在同一个窗口 显示在显示在Frameset的前一份文件的窗口的前一份文件的窗口 显示在整个浏览器窗口显示在整个浏览器窗口第 13 页软软 件件 开开 发发 世世 界界 FrameFrame的外观的外观的外观的外观 p1各窗口边框的设置各窗口边框的设置 p2边框色彩边框色彩 p3设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度 p4各窗口间空白区域的设置各窗口间空白区域的设置 p5卷滚条设置卷滚条设置 p6不可变动的框边不可变动的框边 来设置不可变动的框边来设置不可变动的框边第 14 页软软 件件 开开 发发 世世 界界 各窗口边框的设置各窗口边框的设置各窗口边框的设置各窗口边框的设置p Frameborder属性用来设定各窗口边框的设置，属性用来设定各窗口边框的设置，yes表示有边框，表示有边框，no表示没有边框表示没有边框 窗口边框的设置窗口边框的设置 第 15 页软软 件件 开开 发发 世世 界界 边框色彩边框色彩边框色彩边框色彩p bordercolor=#属性用来属性用来设定边框色彩设定边框色彩 例例 边框色彩边框色彩 第 16 页软软 件件 开开 发发 世世 界界 设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度p 用来设定各窗口的上下左右边界宽度用来设定各窗口的上下左右边界宽度#的值为像素点的值为像素点 设置各窗口的上下左右边界宽度设置各窗口的上下左右边界宽度第 17 页软软 件件 开开 发发 世世 界界 各窗口间空白区域的设置各窗口间空白区域的设置各窗口间空白区域的设置各窗口间空白区域的设置p framespacing=#属性用来设定各窗口间空白区域，其中属性用来设定各窗口间空白区域，其中#为空白区域的大小为空白区域的大小 第 18 页软软 件件 开开 发发 世世 界界 卷滚条设置卷滚条设置卷滚条设置卷滚条设置p 用来设定滚动条用来设定滚动条yes 表示有，表示有，no表示没有表示没有auto表示由浏览器自动设置表示由浏览器自动设置#缺省值是缺省值是auto 卷滚条设置卷滚条设置第 19 页软软 件件 开开 发发 世世 界界 浮动窗口浮动窗口浮动窗口浮动窗口 pIframe标记，又叫浮动帧标记，可以用它将一个标记，又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个文档嵌入在一个HTML中显示中显示 如同如同“画中画画中画“电视电视 第 20 页软软 件件 开开 发发 世世 界界 IframeIframe标记的使用标记的使用标记的使用标记的使用 p格式格式:文件的路径，既可是文件的路径，既可是HTML文件，也可以是文本、文件，也可以是文本、ASP等等 画中画画中画区域的宽与高区域的宽与高 是否出现滚动条是否出现滚动条区域边框的宽度区域边框的宽度 另外，另外，在在中还可以添加中还可以添加name=#属性，属性后属性，属性后面的文字将出现在不支持面的文字将出现在不支持FRAMES的浏览器中的浏览器中 第 21 页软软 件件 开开 发发 世世 界界 浮动窗口实例浮动窗口实例浮动窗口实例浮动窗口实例p我们先创建一个文件名叫我们先创建一个文件名叫a.html文件，其代码如下：文件，其代码如下：登鹳雀楼登鹳雀楼登鹳雀楼登鹳雀楼白日依山白日依山尽，黄河入海流。尽，黄河入海流。欲穷千里目，更上一层楼。欲穷千里目，更上一层楼。第 22 页软软 件件 开开 发发 世世 界界 主页面代码主页面代码主页面代码主页面代码p浮动窗口浮动窗口 p第 23 页软软 件件 开开 发发 世世 界界 设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高设置浮动窗口区域的宽与高p浮动窗口浮动窗口 p 效果如图所示效果如图所示 第 24 页软软 件件 开开 发发 世世 界界 设置浮动窗口区域边框设置浮动窗口区域边框设置浮动窗口区域边框设置浮动窗口区域边框p浮动窗口浮动窗口 p 第 25 页软软 件件 开开 发发 世世 界界 动手实践动手实践动手实践动手实践 p带有框架和浮动窗口的综合页面带有框架和浮动窗口的综合页面 这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现实现“画中画画中画”的功能。的功能。再 见