第4章 框架与浮动窗口 HTML PPT 课件.ppt

第四章 框架与浮动窗口 知识要点 HTML页面的框架 浮动窗口的使用 体验 带有框架和浮动窗口的综合页面 框架 理解： 框架页面把浏览器窗口切割成几个独立的部分，打开的链接目标文件只占用浏览器窗口的某个区域，该区域就是框架网页的目标框架。框架页面的出现，使得访问者在浏览器窗口中可同时观察多个页面。 本章要点 框架标记 各窗口尺寸设置 各窗口间相互操作(Frame Target) Frame的外观 框架标记 设计框架页面时，Frame标记和Frameset标记用于定义框架网页的结构 各窗口尺寸设置 我们可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现 举例说明 首先我们先创建3个html文件，其文件名分别为“a.html、b.html、c.html” 横向排列多个窗口 纵向排列多个窗口 混合排列多个窗口 各窗口间相互操作(Frame Target) 由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化 我们必须为每一个窗口起一个名字，这个名字用属性Name来定义 窗口标识(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 * * 这样的页面是不是很漂亮？我们还可以为其添加一些浮动窗口，实现“画中画”的功能。 由于框架网页的出现，从根本上改变了HTML文档的传统结构,因此在出现Frameset标记的文档中，将不再使用Body标记 基本结构 Html Head /Head Frameset Frame src=url /Frameset /Html FRAMESET是用来划分框窗，每一窗框由一个FRAME标记所标示，FRAME必须在FRAMESET范围中使用 例如： 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 b.Html c.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