HTML框架要点分析.pptVIP

第 九 章 框架与浮动窗口 课程目标 通过本章学习，可以掌握： HTML页面的框架框架标记 各窗口尺寸设置 各窗口间相互操作(Frame Target) Frame的外观 浮动窗口的使用 什么是框架 框架（frame）页面把浏览器窗口切割成几个独立的部分。 框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。 框架也可以理解为是一种窗口，有些文章把它翻译为“窗口” 框架标记 设计框架页面时，Frame标记和Frameset标记用于定义框架网页的结构 由于框架网页的出现，从根本上改变了HTML文档的传统结构,因此在出现Frameset标记的文档中，将不再使用Body标记 FRAMESET是用来划分框窗，每一窗框由一个FRAME标记所标示，FRAME必须在FRAMESET范围中使用 框架尺寸设置 可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现 示 例 首先我们先创建3个html文件，其文件名分别为“a.html、b.html、c.html” 横向排列多个窗口 纵向排列多个窗口 混合排列多个窗口 各窗口间相互操作 由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化 必须为每一个窗口起一个名字，这个名字用属性Name来定义 通过 name 属性，可以在编程中调用并处理框架对象，比如在 javascript 中 通过 name 属性，也可以在网页中引用这个框架，比如指定链接目标：target=框架名 窗口标识(Frame Name) 格式： Target属性 Frame的外观 1．各窗口边框的设置 2．边框色彩 3．设置各窗口的上下左右边界宽度 4．各窗口间空白区域的设置 5．卷滚条设置 6．不可变动的框边 各窗口边框的设置 边框色彩 设置各窗口的上下左右边界宽度 各窗口间空白区域的设置 卷滚条设置 浮动窗口 Iframe标记，又叫浮动帧标记，可以用它将一个HTML文档嵌入在一个HTML中显示 Iframe标记的使用 格式 : 浮动窗口实例 我们先创建一个文件名叫a.html文件，其代码如下： 主页面代码 Html Head Title 浮动窗口 /Title /Head Iframe src=a.html /iframe /Html 设置浮动窗口区域的宽与高 Html Head Title 浮动窗口 /Title /Head Iframe src=a.html width=250 height=200 /iframe /Html 设置浮动窗口区域边框 Html Head Title 浮动窗口 /Title /Head Iframe src= a.html width=250 height=200 frameborder=0 /iframe /Html 动手实践 带有框架和浮动窗口的综合页面 第 * 页 框架课件 框架，其中含2个网页 基本结构 Html Head /Head Frameset Frame src=url /Frameset /Html 例如： frameset cols=# 　 frameset cols=100，200，300 frameset rows=# 　 frameset rows=10%，20%，70% 其中的任何一个数字也可以由“*”来代替 如：frameset cols=100，200，* 　　frameset cols=100，*，* 　　将100像素以外的窗口平均分配 　　frameset cols=*，*，* 　　　将窗口分为三等份 s a.html Html Head Title A /Title /Head Body h1 align=center A /h1 /Body /Html Html Head Title 横向排列多个窗口 /Title /Head Frameset cols=25%，50%，25% Frame src=a.html Frame src=b.html Frame src=c.html /Frameset /Html Htm Head Title 纵向排列多个窗口 /Title /Head Frameset rows=25%，25% ，50% Frame src=a.html Frame src=b.html Frame src=c.html /Frameset /Html Html Head Title 混合排列多个窗口 /Title /Head Frameset row