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

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

2、。 比如可以将索引放在一个区域，文件内容显示在另一个区域。,所谓框架就是网页页面分成几个窗口，同时可取得多个URL。 只要使用标记和设置即可，而所有框架标记要放在一个总的html文档中，这个文档只记录了该框架是如何划分的，而不会显示任何其它的资料，所以不必放入 标记，浏览该框架必须先读取这个文档。 是用来划分窗口的，每一窗口由一个 标记所标识。,中的内容显示在不支持分框的浏览器窗口中，因而这里需指向一个普通版本的html文件，以便供使用不支持分框浏览器的用户阅读。 分框由指定，并且可以嵌套，,二、分框的基本结构如下:例 ,1.基本语法 标记用来分割窗口，在多窗口页面中的地位就相当于在普通单窗口

3、页面中的地位 在页面中用标志页面主体部分的起止位置。 标记决定了怎样划分窗口，以及每个窗口的位置和大小。, 语法形式：,.,作用： 用来标记HTML文件为框架模式，并设定视窗如何分割。,注： cols和rows：决定页面如何分割的两个参数。分割左右窗口用cols，各帧的左右宽度用占窗口宽度的百分比来表示。分割上下窗口用rows，也用百分比来设定。 frameborder：设定各分窗口是（yes）否（no）要加边框。 border:如果加过框的话，则设定边框的宽度。 bordercolor:设定边框的颜色。 framespacing：设定框架与框架间的保留空白的距离，默认值是0。, 用标记把窗口

4、分割好后，各窗口的属性是用HTML的标记来定义的，所以标记中必须包含标记，用以定义各子窗口的属性。,语法形式： ,作用： 设定某一个子窗口的参数属性。,注： src：设定此窗口中要显示的网页文件名称，每个窗口一定要对应着一个网页文档。你可使用绝对路径或相对路径来指定。 name：设定这个窗口的名称，这样才能指定框架来作连结，必须但可任意命名。 frameborder：设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框，也可使用 yes 或 no 。 framespacing：设定框架与框架间的保留空白的距离。 bordercolor：设定框架的边框颜色。,scro

5、lling：设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。 noresize：设定不让浏览者改变这个边框的大小。没有设定此参数，浏览者则可以很随意地拉动框架，改变其大小。 marginhight：设定框架高度部份边缘所保留的空白空间。 marginwidth：设定框架宽度部份边缘所保留的空白空间。,3.举例 1.左小右大两窗口: 分帧窗口示例很抱歉！这是一个分帧页面，但由于你的浏览器不支持，所以不能浏览！ 执行,效果：,2.一顶一左一右页面 执行,1.简介 框架超级链接的优点主要体现在站点导航上，将要产生超级链接的文字或图形置于左框架中，像菜

6、单一样，当你在做框架点选某个超级链接，被链接的网页将出现在右框加内。 左框架的页面不会被别的页面所覆盖。这样在进行多次超级链接时就不会迷失掉。,二、框架超级链接,2.分割框架 首先通过标记中的cols属性设定左右两个框架，宽度比为200:*。 接着用标记的name属性设定格框架的名称 ，以及src属性设定各框架欲显示的网页文件，执行结果如下图：,3.设定超级链接的目的页 对于上图程序如下： 课程表课程表课程表课程表. 实例,具体程序如下： ,6.1 框架与框架集,6.2 框架的基本操作,6.2.1 在HTML代码中创建框架 1.创建基本框架 基本HTML中使用，和标签来定义框架。 （1）框架集

7、标签 标签用于定义一个框架集，成对出现。框架集的作用是将一个窗口划分成多个子窗口，即框架，每个框架都是一个独立的页面，又叫框架页面。通过cols属性和rows属性来将一个窗口划分为多个框架。 （2）框架标签 框架标签用于设定单个框架页面，单个出现。也可以通过属性设置框架的外观,6.2 框架的基本操作,（3）标签 使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。标签是成对使用的，首尾标签之间的内容就是告之浏览者的信息。 （4）基本结构 标签是可以嵌套使用的，也就是说，可以将其中某一个或几个子窗口划分为若干个更小的窗口。,6.2 框架的基本操作

8、,6.2.2 在Dreamweaver中创建框架 Dreamweaver提供了两种创建框架结构网页的方法，即：可以从若干预定义的框架集中选择，也可以自己设计框架集。 1.创建预定义的框架集 （1）选择预定义框架集 （2）为各个框架设置标题 2.自定义框架集 自定义框架集是指由网页设计者根据需要，自己设置框架集中框架的数量、布局等属性，适合于创建复杂框架结构页面。,6.2 框架的基本操作,6.2.3 框架页的选择 1在“框架”面板中选择框架和框架集 选择主菜单的【窗口】【框架】或者按下Ctrl+F10，打开框架面板。 在“框架”面板中点击框架则可选取框架，若要在“框架”面板中选取框架页，则需在“

9、框架”面板中点击环绕着框架的边框。 2在“文档”窗口中选择框架和框架集 按住Alt键的同时单击框架内部； 要选择一个框架集，则需单击框架内部的分隔线。 通过单击窗口左下角的标签选择器来选择相应的框架或框架集。,6.2 框架的基本操作,6.2.4 框架页的保存 框架网页由框架页（也叫框架集）和（子）框架两部分组成。 框架页定义框架的结构、数量、尺寸及装入框架的网页文件。 框架页是一种特殊的网页文件。其中，保存描述子框架数量，以及在各个子窗口中显示网页的文件名（路径）等信息。 子框架是子窗口、框架。每个子框架中打开一个独立的网页文件。 一个包含三个框架（子）窗口的网页，由四个网页文件组成。,6.2

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

11、2 框架的基本操作,6.2.7设置框架中的链接 在框架中可以使用超链接，并且可以通过一个框架中的超链接改变另一个框架中的内容，这种方法通常用于创建导航页面。要在一个框架汇总使用超链接打开另一个框架中的文档，必须设置链接目标。链接目标用于确定链接内容在哪里打开。 为框架网页设置超链接的操作步骤如下： 1.在网页文件中选择要设置链接的对象（如具体的文字、图片等）； 2.在属性面板的“链接”选项中设置链接的网页文件。 3.在属性面板的“目标”下拉列表中选择打开链接文件的窗口,6.3 框架的属性,设置框架集的属性 （1）使用框架集属性面板 （2）设置框架集标题 首先选中要设置标题的框架集，然后再在“文

12、档”工具栏的“标题”框中键入框架集文档的名称即可。,6.3 框架的属性,2.设置框架属性,6.4 框架布局网页实例,6.4 框架布局网页实例,6.5制作浮动框架,1.浮动框架基础 浮动框架又叫嵌入式框架，就是在HTML文档中的一个区域内插入一个HTML文档，就像在HTML文档的一部分区域中显示图像一样。 浮动框架不需要在单独的网页中创建框架，而是通过标签建立的，其常用属性,6.5制作浮动框架,2.在记事本中制作浮动框架执行 嵌入式框架 美好回忆 ,6.5制作浮动框架,3.在Dreamweaver中制作浮动框架 （1）插入浮动框架 （2）将光标定位在“代码”模式中已插入的“”标签内，然后按回车键

13、，自动打开下拉列表，选择“src”选项， （3）接着显示“浏览”按钮 （4）依照前两个步骤或以直接输入的方法，编写代码“width=300 height=400”，设置浮动框架的宽度和高度， （5）保存该网页，按F12在浏览器中预览，,6.5制作浮动框架,7.3.1 用框架布局页面,返回本节,要制作框架网页，就要建立框架集。框架集是组织页面内容的常见方法，通过框架集可以将网页的内容组织到相互独立的HTML页面内，相对固定的内容（比如导航栏、标题栏）和经常变动的内容分别以不同的文件保存将会大大提高网页设计和维护的效率。 本节制作一个简单的框架网页，先对框架集和框架等概念有一个概括的认识。 1建立

14、框架集 2保存框架和框架集 3理解框架集HTML代码,7.3.1 用框架布局页面,返回本节,打开文件7.3.1.html，切换到代码视图，如图7-49所示。为了便于阅读，图中的代码进行了折叠。定义框架集的HTML标签是，含有这对标签的源代码存放在框架集文件中。,图7-49 框架集源代码,中含有标签，每个标签定义一个框架，并为框架设置名称、源文件等属性，如图7-50所示。 示例,图7-50 标签,7.3.2 创建框架和框架集,返回本节,每一个框架都是一个独立的 HTML 页面，它是浏览器窗口中的一个区域，可以显示与浏览器窗口的其余部分中所显示内容无关的HTML 文档。通过框架集的使用，这些框架能

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

16、返回本节,框架和框架集是一些独立的HTML 文档。可以通过设置某些框架或框架集的属性来对框架或框架集进行修改。 1选取要进行更改的框架和框架集 2设置框架属性 选取框架，打开框架的【属性】面板。如图7-55所示。,图7-55框架属性面板,框架名称：为当前框架命名（为了便于确定超链接应给框架命名）。 源文件：确定框架的源文档。可以直接在文本框中输入文件路径，也可以单击文件夹图标查找并选取文件。还可以通过将插入点放在框架内并执行【文件】|【在框架中打开】命令来打开文件,7.3.3 设置框架及框架集属性,返回本节,边框：用来控制当前框架有无边框。选项有“是”（显示边框）、“否”（隐藏边框）和“默认值

17、”。大多数浏览器默认为显示边框，除非父框架集已将“边框”设置为“否”。只有当共享该边框的所有框架都将“边框”设置为“否”时，或者当父框架集的“边框”属性设置为“否”并且共享该边框的框架都将“边框”设置为“默认值”时，边框才是隐藏的。 滚动：确定当框架内的内容显示不下的时候是否出现滚动条。选项有“是”、“否”、“自动”和“默认”。“是”表示显示滚动条，“否”表示不显示滚动条，“自动”则是自动显示，也就是当该框架内的内容超过当前屏幕上下或左右边界时，滚动条才会显示，否则不显示。“默认”将不设置相应属性的值，从而使各个浏览器使用其默认值。 不能调整大小：限定框架尺寸，令访问者无法通过拖动框架边框在浏

18、览器中调整框架大小。在 Dreamweaver 中始终可以调整边框大小，该选项仅适用于在浏览器中查看框架的访问者。 边框颜色：为所有框架的边框设置边框颜色。此颜色应用于和框架接触的所有边框，并且重写框架集的指定边框颜色。 边界宽度：设置以像素为单位的框架边框和内容之间左右边距。 边界高度：设置以像素为单位的框架边框和内容之间上下边距。,7.3.3 设置框架及框架集属性,返回本节,3设置框架集属性 选取框架集，打开框架集的【属性】面板。如图7-56所示。,边框：在边框下拉列表中选择在浏览器中查看时是否显示框架边框。 边框颜色：设置边框的颜色。 边框宽度：指定框架集中所有边框的宽度。 框架大小：单

19、击【行列选择范围】区域左侧或顶部的选项卡；然后在“值”文本框中，输入高度或宽度。 单位：包括“像素”、“百分比”和“相对”。“像素”将选定列或行的大小设置为一个绝对值。对于应始终保持相同大小的框架（例如导航条）而言，此选项是最佳选择。“百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。“相对”指定在为“像素”和“百分比”框架分配空间后，为选定列或行分配其余可用空间。,图7-56框架集属性面板,7.3.4 保存框架和框架集,返回本节,框架集文件和与之相关的框架文件必须先保存，然后才可以在浏览器中预览该页面。当使用 Dreamweaver来创建框架文档时，每个新的框架文档都会被赋予一个临时的文件名。例如，UntitledFrameset-1.html是代表框架集页面，UntitledFrame-1.html、UntitledFrame-2.