网页设计与制作 第16章 框架.ppt

《网页设计与制作 第16章 框架.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第16章 框架.ppt（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1616章章 框架框架第第1616章章 框架框架v16.1 16.1 16.1 16.1 框架的规划与建立框架的规划与建立框架的规划与建立框架的规划与建立v16.2 16.2 16.2 16.2 框架的操作框架的操作框架的操作框架的操作v16.3 16.3 16.3 16.3 在框架中显示页面在框架中显示页面在框架中显示页面在框架中显示页面v16.4 16.4 16.4 16.4 设置框架属性设置框架属性设置框架属性设置框架属性v16.5 16.5 16.5 16.5 本章小结本章小结本章小结本章小结 框架是网页制框架是网页制框架是网页制框架是网页制作过程中必不可少作过程中必不可少作过程中

2、必不可少作过程中必不可少的一种实用的一种实用的一种实用的一种实用WebWeb技技技技术。框架可以将网术。框架可以将网术。框架可以将网术。框架可以将网页划分为不同的区页划分为不同的区页划分为不同的区页划分为不同的区域，并在不同的区域，并在不同的区域，并在不同的区域，并在不同的区域中载入不同的页域中载入不同的页域中载入不同的页域中载入不同的页面。每个框架网页面。每个框架网页面。每个框架网页面。每个框架网页中都是由框架集和中都是由框架集和中都是由框架集和中都是由框架集和框架组成的。框架组成的。框架组成的。框架组成的。框架框架框架框架最常见的用法就是实现页面导航，一般是将最常见的用法就是实现页面导航，

3、一般是将最常见的用法就是实现页面导航，一般是将最常见的用法就是实现页面导航，一般是将页面划分为一个导航区和一个内容区。这些框架中的页面划分为一个导航区和一个内容区。这些框架中的页面划分为一个导航区和一个内容区。这些框架中的页面划分为一个导航区和一个内容区。这些框架中的每一个都是一个独立的每一个都是一个独立的每一个都是一个独立的每一个都是一个独立的 HTMLHTML页面。页面。页面。页面。框架集框架集框架集框架集是是是是HTMLHTML文件，它定义一组框架的布局和文件，它定义一组框架的布局和文件，它定义一组框架的布局和文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每属性

4、，包括框架的数目、框架的大小和位置以及在每属性，包括框架的数目、框架的大小和位置以及在每属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的个框架中初始显示的页面的个框架中初始显示的页面的个框架中初始显示的页面的 URLURL。框架集文件不在浏框架集文件不在浏框架集文件不在浏框架集文件不在浏览器中显示，只是向浏览器提供应如何显示一组框架览器中显示，只是向浏览器提供应如何显示一组框架览器中显示，只是向浏览器提供应如何显示一组框架览器中显示，只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。以及在这些框架中应显示哪些文档的有关信息。以及在这些框架中应显示

5、哪些文档的有关信息。以及在这些框架中应显示哪些文档的有关信息。16.1.1 16.1.1 16.1.1 16.1.1 规划框架规划框架规划框架规划框架16.1 16.1 框架的规划与建立框架的规划与建立 在在在在 Dreamweaver Dreamweaver 中有中有中有中有两种两种两种两种创建框架集的方法：创建框架集的方法：创建框架集的方法：创建框架集的方法：1.1.1.1.可以从若干预定义的框架集中选择可以从若干预定义的框架集中选择可以从若干预定义的框架集中选择可以从若干预定义的框架集中选择 DreamweaverDreamweaver预预预预先先先先设设设设计计计计了了了了1313种种

6、种种框框框框架架架架集集集集格格格格式式式式，可可可可以以以以选选选选择择择择插插插插入入入入面面面面板板板板上上上上的的的的“布布布布局局局局”选选选选项项项项卡卡卡卡，单单单单击击击击框框框框架架架架按按按按钮钮钮钮上上上上的下的下的下的下 拉箭头，拉箭头，拉箭头，拉箭头，然后选择预定义的框架集。然后选择预定义的框架集。然后选择预定义的框架集。然后选择预定义的框架集。2.2.2.2.可以自己设计框架集可以自己设计框架集可以自己设计框架集可以自己设计框架集 如如如如果果果果预预预预定定定定义义义义的的的的框框框框架架架架集集集集模模模模板板板板都都都都不不不不符符符符合合合合设设设设计计计计

7、要要要要求求求求，可可可可以以以以先先先先用用用用模模模模板板板板建建建建立立立立一一一一个个个个相相相相近近近近的的的的框框框框架架架架，然然然然后后后后再再再再添添添添加加加加一一一一些些些些新新新新的框架进去。（方法见的框架进去。（方法见的框架进去。（方法见的框架进去。（方法见16.2.316.2.3）16.1.2 16.1.2 16.1.2 16.1.2 创建框架创建框架创建框架创建框架16.1 16.1 框架的规划与建立框架的规划与建立 16.2.1 16.2.1 16.2.1 16.2.1 改变框架尺寸改变框架尺寸改变框架尺寸改变框架尺寸 要调整框架的大小，有以下要调整框架的大小，

8、有以下要调整框架的大小，有以下要调整框架的大小，有以下两种两种两种两种方法：方法：方法：方法：v如果要设置框架的粗略大小，在如果要设置框架的粗略大小，在如果要设置框架的粗略大小，在如果要设置框架的粗略大小，在“文档文档文档文档”窗口中，窗口中，窗口中，窗口中，将鼠标指针放在两个框架间的边框上，当指针变成将鼠标指针放在两个框架间的边框上，当指针变成将鼠标指针放在两个框架间的边框上，当指针变成将鼠标指针放在两个框架间的边框上，当指针变成双向箭头时，拖动边框到新位置，然后释放鼠标键。双向箭头时，拖动边框到新位置，然后释放鼠标键。双向箭头时，拖动边框到新位置，然后释放鼠标键。双向箭头时，拖动边框到新位

9、置，然后释放鼠标键。v如果要指定准确大小，并指定当浏览器窗口大小如果要指定准确大小，并指定当浏览器窗口大小如果要指定准确大小，并指定当浏览器窗口大小如果要指定准确大小，并指定当浏览器窗口大小不允许框架全部显示时，浏览器分配给框架的行或不允许框架全部显示时，浏览器分配给框架的行或不允许框架全部显示时，浏览器分配给框架的行或不允许框架全部显示时，浏览器分配给框架的行或列的大小，可使用列的大小，可使用列的大小，可使用列的大小，可使用“属性属性属性属性”检查器（请参见检查器（请参见检查器（请参见检查器（请参见16.416.4节节节节设置框架属性）来指定。设置框架属性）来指定。设置框架属性）来指定。设置

10、框架属性）来指定。16.2 16.2 框架的操作框架的操作16.2.2 16.2.2 16.2.2 16.2.2 嵌套框架嵌套框架嵌套框架嵌套框架 1.1.1.1.定义定义定义定义 一个框架集包含了另一个框架集就叫作嵌套框架一个框架集包含了另一个框架集就叫作嵌套框架一个框架集包含了另一个框架集就叫作嵌套框架一个框架集包含了另一个框架集就叫作嵌套框架集。一个框架集文件可以包含多个嵌套的框架集。每集。一个框架集文件可以包含多个嵌套的框架集。每集。一个框架集文件可以包含多个嵌套的框架集。每集。一个框架集文件可以包含多个嵌套的框架集。每一个框架集都有自己相应的一个框架集都有自己相应的一个框架集都有自己

11、相应的一个框架集都有自己相应的HTMLHTML文档。文档。文档。文档。2.2.2.2.要求要求要求要求 如果在一组框架里，不同行或不同列中有不同数如果在一组框架里，不同行或不同列中有不同数如果在一组框架里，不同行或不同列中有不同数如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。目的框架，则要求使用嵌套的框架集。目的框架，则要求使用嵌套的框架集。目的框架，则要求使用嵌套的框架集。3.3.3.3.创建创建创建创建 DreamweaverDreamweaver 会根据需要自动嵌套框架集。会根据需要自动嵌套框架集。会根据需要自动嵌套框架集。会根据需要自动嵌套框架集。16.2

12、 16.2 框架的操作框架的操作16.2.3 16.2.3 16.2.3 16.2.3 拆分框架拆分框架拆分框架拆分框架 要将一个框架拆分成几个框架，有以下几种情况：要将一个框架拆分成几个框架，有以下几种情况：要将一个框架拆分成几个框架，有以下几种情况：要将一个框架拆分成几个框架，有以下几种情况：v如如如如果果果果要要要要以以以以垂垂垂垂直直直直或或或或水水水水平平平平方方方方式式式式拆拆拆拆分分分分一一一一个个个个框框框框架架架架或或或或一一一一组组组组框框框框架架架架，可在文档窗口将框架边框从窗口边缘拖入中间。可在文档窗口将框架边框从窗口边缘拖入中间。可在文档窗口将框架边框从窗口边缘拖入中

13、间。可在文档窗口将框架边框从窗口边缘拖入中间。v如如如如果果果果要要要要拆拆拆拆分分分分的的的的框框框框架架架架不不不不靠靠靠靠近近近近文文文文档档档档窗窗窗窗口口口口边边边边缘缘缘缘，可可可可在在在在按按按按住住住住 Alt Alt Alt Alt 键的同时拖动框架边框。键的同时拖动框架边框。键的同时拖动框架边框。键的同时拖动框架边框。v如如如如果果果果要要要要将将将将一一一一个个个个框框框框架架架架拆拆拆拆分分分分成成成成四四四四个个个个框框框框架架架架，可可可可将将将将框框框框架架架架边边边边框框框框从文档窗口一角拖入框架的中间。从文档窗口一角拖入框架的中间。从文档窗口一角拖入框架的中间

14、。从文档窗口一角拖入框架的中间。16.2 16.2 框架的操作框架的操作16.2.4 16.2.4 16.2.4 16.2.4 保存框架保存框架保存框架保存框架 1.1.1.1.只保存框架集文件只保存框架集文件只保存框架集文件只保存框架集文件 （1 1）在）在）在）在“框架框架框架框架”面板或文档窗口中选择框架集。面板或文档窗口中选择框架集。面板或文档窗口中选择框架集。面板或文档窗口中选择框架集。（2 2）选择选择选择选择【文件文件文件文件】|【保存框架集保存框架集保存框架集保存框架集】菜单命令。菜单命令。菜单命令。菜单命令。2.2.2.2.保存框架中显示的文档保存框架中显示的文档保存框架中显

15、示的文档保存框架中显示的文档 （1 1）在要保存的框架中单击。）在要保存的框架中单击。）在要保存的框架中单击。）在要保存的框架中单击。（2 2）选择【文件】）选择【文件】）选择【文件】）选择【文件】|【保存框架】菜单命令【保存框架】菜单命令【保存框架】菜单命令【保存框架】菜单命令。3.3.3.3.保存与框架集相关联的所有文件保存与框架集相关联的所有文件保存与框架集相关联的所有文件保存与框架集相关联的所有文件 选择【文件】选择【文件】选择【文件】选择【文件】|【保存全部】菜单命令。系统会提示依【保存全部】菜单命令。系统会提示依【保存全部】菜单命令。系统会提示依【保存全部】菜单命令。系统会提示依次

16、保存框架集和所有框架。次保存框架集和所有框架。次保存框架集和所有框架。次保存框架集和所有框架。16.2 16.2 框架的操作框架的操作1.1.1.1.直接在框架中编辑空文档直接在框架中编辑空文档直接在框架中编辑空文档直接在框架中编辑空文档 如果要在框架集中显示的文档还未编辑，一种方法如果要在框架集中显示的文档还未编辑，一种方法如果要在框架集中显示的文档还未编辑，一种方法如果要在框架集中显示的文档还未编辑，一种方法是可以在框架集中直接编辑各框架文档。要使该文档成是可以在框架集中直接编辑各框架文档。要使该文档成是可以在框架集中直接编辑各框架文档。要使该文档成是可以在框架集中直接编辑各框架文档。要使

17、该文档成为框架中显示的默认文档，要选择为框架中显示的默认文档，要选择为框架中显示的默认文档，要选择为框架中显示的默认文档，要选择“保存全部保存全部保存全部保存全部”命令。命令。命令。命令。2.2.2.2.在框架中打开现有文档在框架中打开现有文档在框架中打开现有文档在框架中打开现有文档 如果要在框架集中显示的文档已编辑完成，则可以如果要在框架集中显示的文档已编辑完成，则可以如果要在框架集中显示的文档已编辑完成，则可以如果要在框架集中显示的文档已编辑完成，则可以把光标定位在框架中，选择【文件】把光标定位在框架中，选择【文件】把光标定位在框架中，选择【文件】把光标定位在框架中，选择【文件】|【在框架

18、中打开【在框架中打开【在框架中打开【在框架中打开】菜单命令。要使该文档成为框架中显示的默认文档，】菜单命令。要使该文档成为框架中显示的默认文档，】菜单命令。要使该文档成为框架中显示的默认文档，】菜单命令。要使该文档成为框架中显示的默认文档，要选择要选择要选择要选择“保存框架集保存框架集保存框架集保存框架集”命令。命令。命令。命令。16.3 16.3 在框架中显示页面在框架中显示页面3.3.3.3.在属性检查器为框架设置源文件在属性检查器为框架设置源文件在属性检查器为框架设置源文件在属性检查器为框架设置源文件 如如如如果果果果要要要要在在在在框框框框架架架架集集集集中中中中显显显显示示示示的的的

19、的文文文文档档档档已已已已编编编编辑辑辑辑完完完完成成成成，还还还还可可可可以以以以选选选选择择择择在在在在属属属属性性性性检检检检查查查查器器器器为为为为框框框框架架架架设设设设置置置置源源源源文文文文件件件件的的的的方方方方法法法法，要要要要使使使使该该该该文文文文档档档档成成成成为为为为框框框框架架架架中中中中显显显显示示示示的的的的默默默默认认认认文文文文档档档档，可可可可以以以以选选选选择择择择“保保保保存存存存框框框框架架架架集集集集”或或或或“保存全部保存全部保存全部保存全部”命令。命令。命令。命令。4.4.4.4.设置超链接的目标框架设置超链接的目标框架设置超链接的目标框架设置

20、超链接的目标框架 目标框架是针对某个框架页面中的超链接而言的。目标框架是针对某个框架页面中的超链接而言的。目标框架是针对某个框架页面中的超链接而言的。目标框架是针对某个框架页面中的超链接而言的。在在在在“属性属性属性属性”检查器的检查器的检查器的检查器的“目标目标目标目标”下拉列表中可以选择如下下拉列表中可以选择如下下拉列表中可以选择如下下拉列表中可以选择如下一项：一项：一项：一项：_blank_blank_blank_blank、_parent _parent _parent _parent、_self _self _self _self、_top _top _top _top、框架名称。、

21、框架名称。、框架名称。、框架名称。16.3 16.3 在框架中显示页面在框架中显示页面16.4.1 16.4.1 16.4.1 16.4.1 选择框架集和框架选择框架集和框架选择框架集和框架选择框架集和框架 1.1.1.1.在在在在“框架框架框架框架”面板中选择框架和框架集面板中选择框架和框架集面板中选择框架和框架集面板中选择框架和框架集选择框架选择框架选择框架选择框架：在在在在“框架框架框架框架”面板中，面板中，面板中，面板中，单击框架，可以选中框单击框架，可以选中框单击框架，可以选中框单击框架，可以选中框架，架，架，架，环绕框架的边框线较细。环绕框架的边框线较细。环绕框架的边框线较细。环绕

22、框架的边框线较细。16.4 16.4 设置框架属性设置框架属性选择框架集选择框架集选择框架集选择框架集：在在在在“框架框架框架框架”面板中，面板中，面板中，面板中，单击环绕框架集的边框，单击环绕框架集的边框，单击环绕框架集的边框，单击环绕框架集的边框，可以选可以选可以选可以选中框架集，中框架集，中框架集，中框架集，而环绕框架集的边框而环绕框架集的边框而环绕框架集的边框而环绕框架集的边框线较粗。线较粗。线较粗。线较粗。2 2 2 2在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集在文档窗口中选择框架和框架集选择框架：选择框架：选择框架：选择框架：在文档窗口中按

23、住在文档窗口中按住在文档窗口中按住在文档窗口中按住 Alt Alt Alt Alt 键的同时单击键的同时单击键的同时单击键的同时单击框架内部，可以选择一个框架，这时在框架周围会框架内部，可以选择一个框架，这时在框架周围会框架内部，可以选择一个框架，这时在框架周围会框架内部，可以选择一个框架，这时在框架周围会显示选择轮廓。显示选择轮廓。显示选择轮廓。显示选择轮廓。选择框架集选择框架集选择框架集选择框架集：在文档窗口中单击框架集内部的某在文档窗口中单击框架集内部的某在文档窗口中单击框架集内部的某在文档窗口中单击框架集内部的某一框架边框，可以选择一个框架集，这时在框架集一框架边框，可以选择一个框架集

24、，这时在框架集一框架边框，可以选择一个框架集，这时在框架集一框架边框，可以选择一个框架集，这时在框架集周围会显示选择轮廓。周围会显示选择轮廓。周围会显示选择轮廓。周围会显示选择轮廓。16.4 16.4 设置框架属性设置框架属性16.4.2 16.4.2 16.4.2 16.4.2 设置框架集属性设置框架集属性设置框架集属性设置框架集属性 选择要查看或设置属性的框架集，在选择要查看或设置属性的框架集，在选择要查看或设置属性的框架集，在选择要查看或设置属性的框架集，在“属性属性属性属性”检查检查检查检查器中，查看所有框架集属性，如图所示。器中，查看所有框架集属性，如图所示。器中，查看所有框架集属性

25、，如图所示。器中，查看所有框架集属性，如图所示。其中包括：其中包括：其中包括：其中包括：边框边框边框边框 ：该属性主要是确定在浏览器中查看文档时在框架该属性主要是确定在浏览器中查看文档时在框架该属性主要是确定在浏览器中查看文档时在框架该属性主要是确定在浏览器中查看文档时在框架周围是否显示边框。周围是否显示边框。周围是否显示边框。周围是否显示边框。16.4 16.4 设置框架属性设置框架属性边框宽度：边框宽度：边框宽度：边框宽度：该属性主要是指定框架集中所有边框的宽该属性主要是指定框架集中所有边框的宽该属性主要是指定框架集中所有边框的宽该属性主要是指定框架集中所有边框的宽度。度。度。度。边框颜色

26、：边框颜色：边框颜色：边框颜色：该属性主要是指定框架集所有边框的颜色。该属性主要是指定框架集所有边框的颜色。该属性主要是指定框架集所有边框的颜色。该属性主要是指定框架集所有边框的颜色。框架大小：框架大小：框架大小：框架大小：首先单击首先单击首先单击首先单击“行列选定范围行列选定范围行列选定范围行列选定范围”旁边的示意图旁边的示意图旁边的示意图旁边的示意图中的行或列。其次从中的行或列。其次从中的行或列。其次从中的行或列。其次从“单位单位单位单位”菜单中选择一种单位。菜单中选择一种单位。菜单中选择一种单位。菜单中选择一种单位。然后在然后在然后在然后在“值值值值”文本框中，输入高度或宽度的相对于单文

27、本框中，输入高度或宽度的相对于单文本框中，输入高度或宽度的相对于单文本框中，输入高度或宽度的相对于单位的值。其中位的值。其中位的值。其中位的值。其中“单位单位单位单位”的应用优先顺序为：的应用优先顺序为：的应用优先顺序为：的应用优先顺序为：“像素像素像素像素”“”“百分比百分比百分比百分比”“”“相对相对相对相对”16.4 16.4 设置框架属性设置框架属性16.4.3 16.4.3 16.4.3 16.4.3 设置框架属性设置框架属性设置框架属性设置框架属性选择要查看或设置属性的框架。在选择要查看或设置属性的框架。在选择要查看或设置属性的框架。在选择要查看或设置属性的框架。在“属性属性属性属

28、性”检查器检查器检查器检查器中，查看所有框架属性中，查看所有框架属性中，查看所有框架属性中，查看所有框架属性,如图所示。如图所示。如图所示。如图所示。其中：其中：其中：其中：框架名称：框架名称：框架名称：框架名称：是链接的是链接的是链接的是链接的 target target 属性或脚本在引用该框架属性或脚本在引用该框架属性或脚本在引用该框架属性或脚本在引用该框架时所用的名称。框架名称必须时所用的名称。框架名称必须时所用的名称。框架名称必须时所用的名称。框架名称必须以字母起始。以字母起始。以字母起始。以字母起始。16.4 16.4 设置框架属性设置框架属性源文件：源文件：源文件：源文件：指定在框

29、架中显示的源文档。指定在框架中显示的源文档。指定在框架中显示的源文档。指定在框架中显示的源文档。滚动滚动滚动滚动：指定在框架中是否显示滚动条。指定在框架中是否显示滚动条。指定在框架中是否显示滚动条。指定在框架中是否显示滚动条。不能调整大小不能调整大小不能调整大小不能调整大小：选择此项表示访问者在浏览器中无法通选择此项表示访问者在浏览器中无法通选择此项表示访问者在浏览器中无法通选择此项表示访问者在浏览器中无法通过拖动框架边框在浏览器中调整框架大小。过拖动框架边框在浏览器中调整框架大小。过拖动框架边框在浏览器中调整框架大小。过拖动框架边框在浏览器中调整框架大小。边框：边框：边框：边框：指定在浏览器

30、中查看框架时显示或隐藏当前框架指定在浏览器中查看框架时显示或隐藏当前框架指定在浏览器中查看框架时显示或隐藏当前框架指定在浏览器中查看框架时显示或隐藏当前框架的边框。的边框。的边框。的边框。边框颜色：边框颜色：边框颜色：边框颜色：为所有框架的边框设置边框颜色。为所有框架的边框设置边框颜色。为所有框架的边框设置边框颜色。为所有框架的边框设置边框颜色。边界宽度：边界宽度：边界宽度：边界宽度：以像素为单位设置左边距和右边距的宽度。以像素为单位设置左边距和右边距的宽度。以像素为单位设置左边距和右边距的宽度。以像素为单位设置左边距和右边距的宽度。边界高度：边界高度：边界高度：边界高度：以像素为单位设置上边

31、距和下边距的高度。以像素为单位设置上边距和下边距的高度。以像素为单位设置上边距和下边距的高度。以像素为单位设置上边距和下边距的高度。16.4 16.4 设置框架属性设置框架属性16.5 16.5 本章小结本章小结 在本章主要介绍了如何使用框架和框架集制作网在本章主要介绍了如何使用框架和框架集制作网在本章主要介绍了如何使用框架和框架集制作网在本章主要介绍了如何使用框架和框架集制作网页，通过本章的学习，可以学会怎样在页面中添加框页，通过本章的学习，可以学会怎样在页面中添加框页，通过本章的学习，可以学会怎样在页面中添加框页，通过本章的学习，可以学会怎样在页面中添加框架、拆分、删除框架，以及如何使用架

32、、拆分、删除框架，以及如何使用架、拆分、删除框架，以及如何使用架、拆分、删除框架，以及如何使用“框架框架框架框架”面板和面板和面板和面板和“属性属性属性属性”检查器对框架和框架集的相关属性进行设置。检查器对框架和框架集的相关属性进行设置。检查器对框架和框架集的相关属性进行设置。检查器对框架和框架集的相关属性进行设置。基于框架和框架集的概念在网页制作中应用的非基于框架和框架集的概念在网页制作中应用的非基于框架和框架集的概念在网页制作中应用的非基于框架和框架集的概念在网页制作中应用的非常广泛，读者应熟练掌握、灵活运用，已达到页面设常广泛，读者应熟练掌握、灵活运用，已达到页面设常广泛，读者应熟练掌握、灵活运用，已达到页面设常广泛，读者应熟练掌握、灵活运用，已达到页面设计的需要。计的需要。计的需要。计的需要。