第6课 框架实现多窗口页面

1、PART-6 PART-6 框架实现多框架实现多窗口网页窗口网页第第6章章 框架实现多窗口网页框架实现多窗口网页6.1 框架与框架集框架与框架集u 框架集也是一个网页布局工具，使用框架集可以把浏览器窗口划分成若干区域，分别在不同的区域显示不同的网页文档。一个框架是一个独立的HTML页面，就是浏览器窗口中的一个区域。u 框架通过框架集的使用能够很好的在一起运作；u 框架集是由多个框架嵌套组合而成的，它包含同一网页上多个框架的布局、链接和属性信息。u 框架集文档本身不包含要在浏览器中显示的HTML内容，但noframes部分除外。u 要在浏览器中查看一组框架，必须打开框架集文档。一、概述：一、概述

2、：分框分框将浏览器的窗口分成多个区域，每个区将浏览器的窗口分成多个区域，每个区域可以单独显示一个域可以单独显示一个htmlhtml文件，各个区域也可相文件，各个区域也可相关连地显示某一个内容。关连地显示某一个内容。比如可以将索引放在一个区域，文件内容显示在比如可以将索引放在一个区域，文件内容显示在另一个区域。另一个区域。所谓框架所谓框架就是网页页面分成几个窗口，同时就是网页页面分成几个窗口，同时可取得多个可取得多个URL。只要使用标记只要使用标记和和设置设置即可，而所有框架标记要放在一个总的即可，而所有框架标记要放在一个总的html文档文档中，这个文档只记录了该框架是如何划分的，而不中，这个文

3、档只记录了该框架是如何划分的，而不会显示任何其它的资料，所以不必放入会显示任何其它的资料，所以不必放入 标记，浏览该框架必须先读取这个文档。标记，浏览该框架必须先读取这个文档。是用来划分窗口的，每一窗口由是用来划分窗口的，每一窗口由一个一个 标记所标识。标记所标识。 中的内容显示在不支中的内容显示在不支持分框的浏览器窗口中，因而这里需指向一个普持分框的浏览器窗口中，因而这里需指向一个普通版本的通版本的htmlhtml文件，以便供使用不支持分框浏览文件，以便供使用不支持分框浏览器的用户阅读。器的用户阅读。分框由分框由指定，并且可以嵌套，指定，并且可以嵌套，二、分框的基本结构如下二、分框的基本结构

4、如下: :例例1.基本语法基本语法标记用来分割窗口，标记用来分割窗口，在多窗口页面中的地位就相当于在多窗口页面中的地位就相当于在普通单在普通单窗口页面中的地位窗口页面中的地位在页面中用在页面中用标志标志页面主体部分的起止位置。页面主体部分的起止位置。标记决定了怎样划分窗口，以及每个标记决定了怎样划分窗口，以及每个窗口的位置和大小。窗口的位置和大小。 语法形式语法形式：. 作用作用： 用来标记用来标记HTML文件为框架模式，并设定视窗文件为框架模式，并设定视窗如何分割。如何分割。注注： vcols和和rows：决定页面如何分割的两个参数。分割左右：决定页面如何分割的两个参数。分割左右窗口用窗口用

5、cols，各帧的左右宽度用占窗口宽度的百分比来表示。，各帧的左右宽度用占窗口宽度的百分比来表示。分割上下窗口用分割上下窗口用rows，也用百分比来设定。，也用百分比来设定。vframeborder：设定各分窗口是（：设定各分窗口是（yes）否（）否（no）要加）要加边框。边框。vborder:如果加过框的话，则设定边框的宽度。如果加过框的话，则设定边框的宽度。vbordercolor:设定边框的颜色。设定边框的颜色。vframespacing：设定框架与框架间的保留空白的距离，：设定框架与框架间的保留空白的距离，默认值是默认值是0。 用用标记把窗口分割好后，各窗口的标记把窗口分割好后，各窗口的

6、属性是用属性是用HTML的的标记来定义的，所标记来定义的，所以以标记中必须包含标记中必须包含标记，标记，用以定义各子窗口的属性。用以定义各子窗口的属性。 语法形式语法形式： 作用作用：设定某一个子窗口的参数属性。设定某一个子窗口的参数属性。注注：qsrc：设定此窗口中要显示的网页文件名称，每个窗设定此窗口中要显示的网页文件名称，每个窗口一定要对应着一个网页文档。你可使用绝对路径或口一定要对应着一个网页文档。你可使用绝对路径或相对路径来指定。相对路径来指定。 qname：设定这个窗口的名称，这样才能指定框架设定这个窗口的名称，这样才能指定框架来作连结，必须但可任意命名。来作连结，必须但可任意命名

7、。 qframeborder：设定框架的边框，其值只有设定框架的边框，其值只有 0 和和 1 ， 0 表示不要边框，表示不要边框， 1 表示要显示边框，也可使用表示要显示边框，也可使用 yes 或或 no 。 qframespacing：设定框架与框架间的保留空白的设定框架与框架间的保留空白的距离。距离。 qbordercolor：设定框架的边框颜色。设定框架的边框颜色。 qscrolling：设定是否要显示卷轴，设定是否要显示卷轴，YES 表表示要显示卷轴，示要显示卷轴，NO 表示无论如何都不要显表示无论如何都不要显示，示， AUTO是视情况显示。是视情况显示。 qnoresize：设定不让

8、浏览者改变这个边框设定不让浏览者改变这个边框的大小。没有设定此参数，浏览者则可以很的大小。没有设定此参数，浏览者则可以很随意地拉动框架，改变其大小。随意地拉动框架，改变其大小。 qmarginhight：设定框架高度部份边缘所设定框架高度部份边缘所保留的空白空间。保留的空白空间。 qmarginwidth：设定框架宽度部份边缘所设定框架宽度部份边缘所保留的空白空间。保留的空白空间。3.举例举例 1.左小右大两窗口左小右大两窗口:分帧窗口示例分帧窗口示例 很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能浏览！浏览！ 执行执行效果

9、： 2.一顶一左一右页面一顶一左一右页面 执行执行1.简介简介框架超级链接的优点框架超级链接的优点主要体现在站点导航上，主要体现在站点导航上，将要产生超级链接的文字或图形置于左框架中，像菜将要产生超级链接的文字或图形置于左框架中，像菜单一样，当你在做框架点选某个超级链接，被链接的单一样，当你在做框架点选某个超级链接，被链接的网页将出现在右框加内。网页将出现在右框加内。 左框架的页面不会被别的页面所覆盖。这样在进行左框架的页面不会被别的页面所覆盖。这样在进行多次超级链接时就不会迷失掉。多次超级链接时就不会迷失掉。二、框架超级链接二、框架超级链接2.分割框架分割框架首先通过首先通过标记中的标记中的

10、cols属性设定左属性设定左右两个框架，宽度比为右两个框架，宽度比为200:*。接着用接着用标记的标记的name属性设定格框架的属性设定格框架的名称名称 ，以及，以及src属性设定各框架欲显示的网页文件，属性设定各框架欲显示的网页文件，执行结果如下图：执行结果如下图：3.设定超级链接的目的页设定超级链接的目的页对于上图程序如下：对于上图程序如下：课程表课程表课程表课程表课程表课程表课程表课程表.实例实例具体程序如下：具体程序如下： 第第6章章 框架实现多窗口网页框架实现多窗口网页6.1 框架与框架集框架与框架集第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作

11、6.2.1 6.2.1 在在HTMLHTML代码中创建框架代码中创建框架1.1.创建基本框架创建基本框架基本HTML中使用，和标签来定义框架。（1）框架集标签标签用于定义一个框架集，成对出现。框架集的作用是将一个窗口划分成多个子窗口，即框架，每个框架都是一个独立的页面，又叫框架页面。通过cols属性和rows属性来将一个窗口划分为多个框架。（2）框架标签框架标签用于设定单个框架页面，单个出现。也可以通过属性设置框架的外观第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作（3）标签使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗

12、口画面感觉莫名其妙。标签是成对使用的，首尾标签之间的内容就是告之浏览者的信息。（4）基本结构标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作6.2.2 6.2.2 在在DreamweaverDreamweaver中创建框架中创建框架 Dreamweaver提供了两种创建框架结构网页的方法，即：可以从若干预定义的框架集中选择，也可以自己设计框架集。1.1.创建预定义的框架集创建预定义的框架集（1）选择预定义框架集（2）为各个框架设置标题2.2.自定义框架集自定义框架集自定义框架

13、集是指由网页设计者根据需要，自己设置框架集中框架的数量、布局等属性，适合于创建复杂框架结构页面。第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作6.2.3 6.2.3 框架页的选择框架页的选择1 1在在“框架框架”面板中选择框架和框架集面板中选择框架和框架集u 选择主菜单的【窗口】【框架】或者按下Ctrl+F10，打开框架面板。u 在“框架”面板中点击框架则可选取框架，若要在“框架”面板中选取框架页，则需在“框架”面板中点击环绕着框架的边框。 2 2在在“文档文档”窗口中选择框架和框架集窗口中选择框架和框架集u 按住Alt键的同时单击框架内部；u 要选择一个

14、框架集，则需单击框架内部的分隔线。u 通过单击窗口左下角的标签选择器来选择相应的框架或框架集。第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作6.2.4 6.2.4 框架页的保存框架页的保存u 框架网页由框架页（也叫框架集）和（子）框架两部分组成。u 框架页定义框架的结构、数量、尺寸及装入框架的网页文件。u 框架页是一种特殊的网页文件。其中，保存描述子框架数量，以及在各个子窗口中显示网页的文件名（路径）等信息。u 子框架是子窗口、框架。每个子框架中打开一个独立的网页文件。u 一个包含三个框架（子）窗口的网页，由四个网页文件组成。第第6章章 框架实现多窗口网页

15、框架实现多窗口网页6.2 框架的基本操作框架的基本操作6.2.56.2.5指定框架网页文件指定框架网页文件 当完成框架集的创建后，还需要为每个框架指定一个网页文件，该操作的实质就是把网页文件放到相应的框架中。当这个框架中被保存后，所指定的文档就成为在浏览器中打开框架页时该框架显示的默认网页文档。这些被放入框架中的网页可以是空白网页，也可以是事先编辑好的网页文件。实际上，当创建一个框架页文件时，就已经创建了框架所对应的空白网页文件。操作方法是：1.将插入点放在需要插入网页的框架中；2.选择【文件】【在框架中打开】菜单命令，打开“选择HTML文件”对话框。3.在“选择HTML文件”对话框中选择要打

16、开的网页文件，单击“确定”，即可完成网页的插入。第第6章章 框架实现多窗口网页框架实现多窗口网页6.2 框架的基本操作框架的基本操作6.2.76.2.7设置框架中的链接设置框架中的链接 在框架中可以使用超链接，并且可以通过一个框架中的超链接改变另一个框架中的内容，这种方法通常用于创建导航页面。要在一个框架汇总使用超链接打开另一个框架中的文档，必须设置链接目标。链接目标用于确定链接内容在哪里打开。为框架网页设置超链接的操作步骤如下：为框架网页设置超链接的操作步骤如下：1.在网页文件中选择要设置链接的对象（如具体的文字、图片等）；2.在属性面板的“链接”选项中设置链接的网页文件。3.在属性面板的“

17、目标”下拉列表中选择打开链接文件的窗口第第6章章 框架实现多窗口网页框架实现多窗口网页6.3 框架的属性框架的属性设置框架集的属性设置框架集的属性（1）使用框架集属性面板（2）设置框架集标题首先选中要设置标题的框架集，然后再在“文档”工具栏的“标题”框中键入框架集文档的名称即可。第第6章章 框架实现多窗口网页框架实现多窗口网页6.3 框架的属性框架的属性2.2.设置框架属性设置框架属性第第6章章 框架实现多窗口网页框架实现多窗口网页6.4 框架布局网页实例框架布局网页实例第第6章章 框架实现多窗口网页框架实现多窗口网页6.4 框架布局网页实例框架布局网页实例第第6章章 框架实现多窗口网页框架实

18、现多窗口网页6.5制作浮动框架制作浮动框架1.浮动框架基础u 浮动框架又叫嵌入式框架，就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样。u 浮动框架不需要在单独的网页中创建框架，而是通过标签建立的，其常用属性属性属性说明说明srcsrc嵌入框架内容的源嵌入框架内容的源namename标记框架名标记框架名frameborderframeborder设置和隐藏框架边界设置和隐藏框架边界scrollingscrolling设置框架滚动条，取值设置框架滚动条，取值yesyes，nono或或autoautowidthwidth设置浮动框架宽度，单位像素设

19、置浮动框架宽度，单位像素heightheight设置浮动框架高度，单位像素设置浮动框架高度，单位像素第第6章章 框架实现多窗口网页框架实现多窗口网页6.5制作浮动框架制作浮动框架2.在记事本中制作浮动框架执行 嵌入式框架 美好回忆 第第6章章 框架实现多窗口网页框架实现多窗口网页6.5制作浮动框架制作浮动框架3.在Dreamweaver中制作浮动框架（1）插入浮动框架（2）将光标定位在“代码”模式中已插入的“”标签内，然后按回车键，自动打开下拉列表，选择“src”选项，（3）接着显示“浏览”按钮（4）依照前两个步骤或以直接输入的方法，编写代码“width=300 height=400”，设置浮

20、动框架的宽度和高度，（5）保存该网页，按F12在浏览器中预览，第第6章章 框架实现多窗口网页框架实现多窗口网页6.5制作浮动框架制作浮动框架第第5章章 网页布局网页布局7.3.1 用框架布局页面用框架布局页面返回本节返回本节 要制作框架网页，就要建立框架集。框架集是组织页面内容的常见方法，通过框架集可以将网页的内容组织到相互独立的HTML页面内，相对固定的内容（比如导航栏、标题栏）和经常变动的内容分别以不同的文件保存将会大大提高网页设计和维护的效率。 本节制作一个简单的框架网页，先对框架集和框架等概念有一个概括的认识。 1 1建立框架集建立框架集 2 2保存框架和框架集保存框架和框架集 3 3

21、理解框架集理解框架集HTMLHTML代码代码第第5章章 网页布局网页布局7.3.1 用框架布局页面用框架布局页面返回本节返回本节 打开文件7.3.1.html，切换到代码视图，如图7-49所示。为了便于阅读，图中的代码进行了折叠。定义框架集的HTML标签是，含有这对标签的源代码存放在框架集文件中。 图7-49 框架集源代码 中含有标签，每个标签定义一个框架，并为框架设置名称、源文件等属性，如图7-50所示。 示例图7-50 标签 第第5章章 网页布局网页布局7.3.2 创建框架和框架集创建框架和框架集返回本节返回本节 每一个框架都是一个独立的 HTML 页面，它是浏览器窗口中的一个区域，可以显

22、示与浏览器窗口的其余部分中所显示内容无关的HTML 文档。通过框架集的使用，这些框架能够很好的在一起运作。所谓框架集就是指定义网页结构与属性的HTML页面，这其中包含了显示在页面中框架的数目，框架的尺寸，装入框架的页面的来源，以及其他一些可定义的属性的相关信息。框架集页面不会在浏览器中显示（noframes 部分除外），它只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。 在 Dreamweaver 中有两种创建框架集的方法：既可以从若干预定义的框架集中选择，也可以自己设计框架集。 1 1使用预定义的框架集使用预定义的框架集 1）创建新的空预定义框架集 2）在现在有文档

23、中创建预定义的框架集 2 2自己设计框架集自己设计框架集 3 3拆分或删除框架拆分或删除框架 4 4创建嵌套框架创建嵌套框架第第5章章 网页布局网页布局7.3.3 设置框架及框架集属性设置框架及框架集属性返回本节返回本节 框架和框架集是一些独立的HTML 文档。可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。 1 1选取要进行更改的框架和框架集选取要进行更改的框架和框架集 2 2设置框架属性设置框架属性 选取框架，打开框架的【属性】面板。如图7-55所示。图7-55框架属性面板 框架名称：为当前框架命名（为了便于确定超链接应给框架命名）。 源文件：确定框架的源文档。可以直接在文本框

24、中输入文件路径，也可以单击文件夹图标查找并选取文件。还可以通过将插入点放在框架内并执行【文件】|【在框架中打开】命令来打开文件第第5章章 网页布局网页布局7.3.3 设置框架及框架集属性设置框架及框架集属性返回本节返回本节 边框：用来控制当前框架有无边框。选项有“是”（显示边框）、“否”（隐藏边框）和“默认值”。大多数浏览器默认为显示边框，除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。 滚动：确定当框架内的内容显示不下的时候是否出现滚动条。选

25、项有“是”、“否”、“自动”和“默认”。“是”表示显示滚动条，“否”表示不显示滚动条，“自动”则是自动显示，也就是当该框架内的内容超过当前屏幕上下或左右边界时，滚动条才会显示，否则不显示。“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。 不能调整大小：限定框架尺寸，令访问者无法通过拖动框架边框在浏览器中调整框架大小。在 Dreamweaver 中始终可以调整边框大小，该选项仅适用于在浏览器中查看框架的访问者。 边框颜色：为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。 边界宽度：设置以像素为单位的框架边框和内容之间左右边距。 边界高度：

26、设置以像素为单位的框架边框和内容之间上下边距。 第第5章章 网页布局网页布局7.3.3 设置框架及框架集属性设置框架及框架集属性返回本节返回本节3 3设置框架集属性设置框架集属性选取框架集，打开框架集的【属性】面板。如图7-56所示。 边框：在边框下拉列表中选择在浏览器中查看时是否显示框架边框。 边框颜色：设置边框的颜色。 边框宽度：指定框架集中所有边框的宽度。 框架大小：单击【行列选择范围】区域左侧或顶部的选项卡；然后在“值”文本框中，输入高度或宽度。 单位：包括“像素”、“百分比”和“相对”。“像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。“百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。“相对”指定在为“像素”和“百分比”框架分配空间后，为选定列或行分配其余可用空间。图7-56框架集属性面板 第第5章章 网页布局网页布局7.3.4 保存框架和框架集保存框架和框架集返回本节返回本节 框架集