《页面的分框显》PPT课件.ppt

页面的分框显示 如果要做一个很大的页面，所有的页面元素不可 能放在一个页面中，这样让人总有种凌乱和没有层 次的感觉，而如果将不同的内容放在不同的窗体中 ，效果会如何呢？另外，在某些时候，当我们需要 将几个文档进行比较时，总是很烦于在几个窗口之 间换来换去，如果将其放置于同一个大窗口的几栏 中进行直接比较，就很方便了。如果要做到这一效 果，我们必须使用框架技术。框架将画面分成数个 小窗口，而各个小窗口中，又可以显示不同的页面 ，达到在浏览器中同时浏览不同网页的效果。 当用户将一个浏览器画面分割成数个窗口后，各窗口将 扮演不同的功能。举例来说，分割后的窗口，可以运用其 中一个作为主要显示网页内容的主画面，而另一个则作为 菜单，控制主画面中显示的网页。这样的设计显然比起单 一个窗口的网页设计来得人性化，用户也可以在数个网页 间任意切换。 将整个浏览器分割的窗口框架，主要利用标 记和标记来定义。其中标记用于定义 一个窗口框架组件，而标记用于定义窗口框架中 某个子窗口组件。因此，一组窗口框架的标准格式如下： 但是注意，有标记所定义的窗口框架 组件，相当于标记所定义的文件主题组件 ，因此标记不可包含在标记中 ，否则，标记将会无法正常作用。因此 ，运用标记建立窗口框架时，仅可包含 于标记中。而用于定义窗口的标记 ，并没有结束标记，该标记的使用方式，仅为在标 记中通过各种属性的设定，以控制所代表的窗口框 。 1.标记 2.标记 3.创建一个简单的框架 4.框架的特殊效果 一、标记 标记的属性有： 1.Cols属性 cols=像素值 以像素值表示此框架的宽度。或： Cols=n% N为整数，表示将所列页面按纵向窗口排列，各个窗口按所设定 的百分之n比例在页面上排列。 2.Rows属性 与cols的用法完全一致，有两种方式表示。 Rows=像素值 以像素值表示此框架的高度。 Rows=n% N为整数，表示将所列页面按横向窗口排列，各个窗口按所设定 的百分之n比例在页面上排列。 3.Bordercolor属性 Bordercolor=#rrggbb 属于窗口的外部属性，表示窗口框架的颜色。其 中颜色设置与以前学习的设置方法一样。 4.Framespacing属性 Framespacing=n N为整数，属于窗口的外部属性，表示所以窗口 的边界所设定的整数（即n）个空白间隔符。 使用标记的属性值，可以将窗口横向 分成几部分，也可以纵向分成几部分，还可以混合 分框。 二、标记 1.Name属性 Name是一个可选项，它给框架指定一个名字， 使得框架能被其他的文档或链接所使用。所有的名 字都必须由一个字母或数字开始。另外，也可以设 置成下述名字： Blank：总是将这个链接载入新的未命名的窗口 Self：总是将这个链接载入它自身。 parent：总是将这个链接载入到它的父窗口，若 没有父窗口，则载入其自身。 top：通常装载这个链接到最高水平，若已在最 高水平，则装载到它自身。 2.Marginwidth属性 Marginwidth=n（n为整数） 3.Marginheight属性 Marginheight=n（n为整数） 窗口的内部属性，与marginwidth一样，只是它 控制的是框架上、下的页边距。 4.Frameborder属性 Frameborder=yes/no 属性窗口的内部属性，表示窗口是否需要边框（ 1为yes，0为no）。 5.Scrolling属性 Scrooling=yes/no/auto 属于窗口的内部属性，表示窗口是否需要滚动条 （默认为auto）。当设置为yes时，表示框架始终 都有滚动条，值no则表明不要滚动条，而值auto则 意味着当需要时自动添上滚动条。 6.Noresize属性 如果此属性出现在标记语句中，那么用户将不可 能再改变框架的大小。如果缺省，则框架的大小可 以改变。 三、创建一个简单的框架 横向分框显示效果 混合分框显示效果 以混合框架为例，创建框架的一般步骤 1.为各个窗口框架准备好要显示的页面 2.创建框架集文件 实例：1.html 四、框架的特殊效果 1.去掉框架 使用target可以建立一个从某个框架到一个框架上的页的链接。 此属性附属于标记。其中target是一个框架的 名字（像在标记中使用的name属性一样），或者可以设置 成如下表中的值。 值意义 _top使用href中指定的url装载入整个浏览器窗口，因而将去掉任何框架 _parent使用href中指定的url装载入框架集的父框架中 _self使用href中指定的url装载到当前窗口 _blank使用href中指定的url装载入一个新的未命名的浏览器窗口 建立从框架到不在框架的文档上的链接的一般步 骤： 1.建立一个包含框架的文档。 2.在其中的框架中加入标记 3.设置target属性。 显示文本 4.保存文档查看效果 实例：1.html 2.使用一个框架索引另一个显示详细信息的框架 在上面创建一个简单框架的实例中，我们学习了 将web页分成3部分的技术。平时我们常常能看到 一些网页使用框架将浏览器分成两部分，其中一部 分包含一个索引或一张表，给养护一些选项，另一 部分则根据用户在前一部分的选择显示相应的信息 。 实例：2.html（本例采用最简单的两个框架的布 局，左边的框架拥有一个索引，右边的框架则是显 示用户在左边框架中选择的结果） 3.如何在页面中建立一个浮动的框架 所谓浮动的框架，就是能像对待一个图像一样去对待框 架，即可以将之内嵌到文档中去。 在html中，这是通过标记来实 现的。当浏览器遇到一组标记时 ，它建立一个框架并将src中指定的文件装载到框架中。 标记的属性如下： Align=left|center|right Frameborder=1|0(1表示有边框) height、width、marginheight、marginwidth、name=“ 在target要用的名字”、src=“url” Scrolling=“yes|no” 实例：iframe.html(使用iframe) 4.框架边框的控制 对于框架边界而言，既可以