第8章 设计框架网页ppt课件（完整版）.pptx

《第8章 设计框架网页ppt课件（完整版）.pptx》由会员分享，可在线阅读，更多相关《第8章 设计框架网页ppt课件（完整版）.pptx（45页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第8章 设计框架网页ppt课件（完整版）第8章设计框架网页设计框架网页第 8 章本书编写组网页设计与制作（微课版第3 版）第8章设计框架网页8.1框架网页应用8.2框架属性8.3内嵌框架iframe8.4综合实训案例：布置框架第8章设计框架网页学习目标 理解框架网页的意义和结构；理解框架网页的意义和结构； 掌握建立和保存框架网页的方法；掌握建立和保存框架网页的方法； 能够设置框架网页的属性；能够设置框架网页的属性； 能够应用框架结构建立框架网页能够应用框架结构建立框架网页。框架网页曾经是很流行的网页布局技术，使用框架结构可以将整体网页框架网页曾经是很流行的网页布局技术，使用框架结构可以将整体网

2、页分割成不同的区域，展示不同的内容。本章主要介绍框架网页的构成、分割成不同的区域，展示不同的内容。本章主要介绍框架网页的构成、框架页面中的重要概念、如何在网页中建立框架结构、如何设置框架和框架页面中的重要概念、如何在网页中建立框架结构、如何设置框架和框架集属性等基本操作。框架集属性等基本操作。第8章设计框架网页8.1框架网页应用8.1.1 8.1.1 框架网页框架网页概述概述框架的作用就是把浏览器窗口划分为若干个区域，而且每个区域可以框架的作用就是把浏览器窗口划分为若干个区域，而且每个区域可以分别显示不同的网页，这样可以使整个网页的布局结构更加清晰，信分别显示不同的网页，这样可以使整个网页的布

3、局结构更加清晰，信息的展现方式更为灵活。每个框架网页都具有独立的滚动条，因此浏息的展现方式更为灵活。每个框架网页都具有独立的滚动条，因此浏览者可以独立控制各个网页览者可以独立控制各个网页。8.1.2 8.1.2 创建各种创建各种框架框架1 1创建和删除框架集创建和删除框架集在创建框架集之前，首先在菜单栏中选择在创建框架集之前，首先在菜单栏中选择“查看查看”“”“可视化助可视化助理理”“”“框架边框框架边框”命令，这样可以使框架边框在网页窗口中可见命令，这样可以使框架边框在网页窗口中可见。第8章设计框架网页8.1框架网页应用8.1.2 8.1.2 创建各种创建各种框架框架如果想要创建框架集，可以

4、执行以下两种操作。如果想要创建框架集，可以执行以下两种操作。 在菜单栏中选择在菜单栏中选择“修改修改”“”“框架集框架集”“”“拆分左、右、上、下拆分左、右、上、下框架框架”命令。命令。 按按AltAlt键，然后拖曳任意一个框架的边框，这样可以垂直或水平分键，然后拖曳任意一个框架的边框，这样可以垂直或水平分割网页（或已有的框架）；按割网页（或已有的框架）；按AltAlt键，然后从框架的一个顶点拖动框架键，然后从框架的一个顶点拖动框架边框，这样可以把网页（或已有的框架）划分为边框，这样可以把网页（或已有的框架）划分为4 4个框架。用这种方法个框架。用这种方法创建框架集最为方便。创建框架集最为方便

5、。把子框架边框拖曳到父框架的边框上，这样就可以删除框架把子框架边框拖曳到父框架的边框上，这样就可以删除框架。第8章设计框架网页8.1框架网页应用8.1.2 8.1.2 创建各种创建各种框架框架2 2插入预定义框架集插入预定义框架集Dreamweaver CS6Dreamweaver CS6通常预定义了多种框架集，通过使用预定义框架集，通常预定义了多种框架集，通过使用预定义框架集，可以轻易创建想要的框架集。可以轻易创建想要的框架集。 在在菜单栏中选择菜单栏中选择“插入插入”“”“HTML”“HTML”“框架框架”命令，然后选择命令，然后选择一种框架，在弹出的对话框中为框架命名。一种框架，在弹出的

6、对话框中为框架命名。 在在菜单栏中选择菜单栏中选择“窗口窗口”“”“属性属性”命令，然后打开命令，然后打开“属性属性”面面板，单击任意一个框架的边框，板，单击任意一个框架的边框，“属性属性”面板中的内容就变成了面板中的内容就变成了框架的属性。在框架的属性。在“属性属性”面板中可以设置面板中可以设置“边框边框”的可见属性，的可见属性，包括包括“边框宽度边框宽度”和和“边框颜色边框颜色”。第8章设计框架网页8.1框架网页应用8.1.2 8.1.2 创建各种创建各种框架框架 在在菜单栏中选择菜单栏中选择“文件文件”“”“保存全部保存全部”命令，然后在弹出的命令，然后在弹出的“另存为另存为”对话框中把

7、原来的文件名改为对话框中把原来的文件名改为myframesetmyframeset，最后单击，最后单击“保存保存”按钮保存框架集。除了保存框架集页面，还要保存所有按钮保存框架集。除了保存框架集页面，还要保存所有的框架页面，否则预览时不能正常显示全部的框架页面。如果页的框架页面，否则预览时不能正常显示全部的框架页面。如果页面被定义为左右两个框架，则需要保存面被定义为左右两个框架，则需要保存3 3次，即分别保存框架集页次，即分别保存框架集页面、左边页面和右边页面。每次保存的时候，当前需要保存的页面、左边页面和右边页面。每次保存的时候，当前需要保存的页面边框会被粗斜线包围面边框会被粗斜线包围。第8章

8、设计框架网页8.1框架网页应用8.1.2 8.1.2 创建各种创建各种框架框架3 3创建嵌套框架集创建嵌套框架集要想实现一个框架集嵌套在另一个框架集内，可以使用嵌套框架集为要想实现一个框架集嵌套在另一个框架集内，可以使用嵌套框架集为一个网页设置多个框架。一个网页设置多个框架。创建嵌套框架集的具体步骤如下。创建嵌套框架集的具体步骤如下。把把光标定位在需要插入嵌套框架集的框架中光标定位在需要插入嵌套框架集的框架中。执行。执行如下操作之一。如下操作之一。 在菜单栏中选择在菜单栏中选择“修改修改”“”“框架集框架集”“”“拆分框架拆分框架”命令。命令。 在菜单栏中选择在菜单栏中选择“插入插入”“”“H

9、TML”“HTML”“框架框架”命令，然后选择命令，然后选择一种框架。一种框架。第8章设计框架网页8.1框架网页应用8.1.2 8.1.2 创建各种创建各种框架框架4 4创建框架网页实例创建框架网页实例通常也可以通过以下的方式创建框架网页，先设计好通常也可以通过以下的方式创建框架网页，先设计好3 3个网页文件。个网页文件。 top.htmtop.htm，通常在顶部框架显示。，通常在顶部框架显示。 left.htmleft.htm，通常在左侧框架显示。，通常在左侧框架显示。 main.htmmain.htm，通常在主框架显示，通常在主框架显示。第8章设计框架网页8.1框架网页应用8.1.2 8.

10、1.2 创建各种创建各种框架框架5 5定义非框架内容定义非框架内容定义非框架内容的具体操作步骤如下。定义非框架内容的具体操作步骤如下。在菜单栏中选择在菜单栏中选择“修改修改”“”“框架集框架集”“”“编辑无框架内容编辑无框架内容”命令。命令。Dreamweaver CS6Dreamweaver CS6清除文件窗口中的内容，清除文件窗口中的内容，“非框架内容非框架内容”就会出现在就会出现在窗口上部，然后在文件窗口输入或插入内容，在菜单栏中选择窗口上部，然后在文件窗口输入或插入内容，在菜单栏中选择“窗窗口口”“”“标签检查器标签检查器”命令，然后在命令，然后在标签之间输入相应的标签之间输入相应的内

11、容或内容或HTMLHTML代码，再次在菜单栏中选择代码，再次在菜单栏中选择“修改修改”“”“框架集框架集”“”“编编辑无框架内容辑无框架内容”命令，此时就会返回框架集文件的正常视图命令，此时就会返回框架集文件的正常视图。第8章设计框架网页8.1框架网页应用8.1.3 8.1.3 编辑框架集和保存框架编辑框架集和保存框架集集1 1通过通过Dreamweaver CS6Dreamweaver CS6编辑框架集编辑框架集网页中经常可能混有框架和框架集，此时就需要选取不同对象来进行网页中经常可能混有框架和框架集，此时就需要选取不同对象来进行不同的属性设置。设置属性的主要步骤如下。不同的属性设置。设置属

12、性的主要步骤如下。 设置设置框架集的属性。单击任意框架分割线，可以选中框架集，此框架集的属性。单击任意框架分割线，可以选中框架集，此时页面底部的时页面底部的“属性属性”面板就变成了对框架集属性进行设置的面面板就变成了对框架集属性进行设置的面板。其中的板。其中的“边框边框”用来设定是否显示边框，用来设定是否显示边框，“边框宽度边框宽度”用来用来设定边框宽度，设定边框宽度，“边框颜色边框颜色”用来设定边框的颜色，除此之外，用来设定边框的颜色，除此之外，还可以设置每个边框的尺寸，可以选择像素或者百分比作为单位还可以设置每个边框的尺寸，可以选择像素或者百分比作为单位。第8章设计框架网页8.1框架网页应

13、用8.1.3 8.1.3 编辑框架集和保存框架编辑框架集和保存框架集集 设置设置框架的属性。可以通过在菜单栏中选择框架的属性。可以通过在菜单栏中选择“窗口窗口”“”“框架框架”命令，打开框架活动面板。如果在框架活动面板中任意选择一个命令，打开框架活动面板。如果在框架活动面板中任意选择一个框架，那么在框架活动面板中被选中的框架就会用黑色的虚线边框架，那么在框架活动面板中被选中的框架就会用黑色的虚线边框显示，此时就可以在框显示，此时就可以在“属性属性”面板中进行相应的设置。例如，面板中进行相应的设置。例如，在在“属性属性”面板中，面板中，“源文件源文件”地址栏用来设置框架中的网页文地址栏用来设置框

14、架中的网页文件地址，件地址，“滚动滚动”用来设置是否加入滚动条，用来设置是否加入滚动条，“边框边框”用来设置用来设置是否显示边框，是否显示边框，“不能调整大小不能调整大小”用来设置是否允许在浏览器中用来设置是否允许在浏览器中改变框架大小改变框架大小。第8章设计框架网页8.1框架网页应用8.1.3 8.1.3 编辑框架集和保存框架编辑框架集和保存框架集集 “ “边界宽度边界宽度”和和“边界高度边界高度”分别用来设置边界的宽度和高度，它分别用来设置边界的宽度和高度，它 们可以决定框架中内容和边框的距离，如图所示。们可以决定框架中内容和边框的距离，如图所示。 在框架中输入内容。单击任意一个框架之后，

15、就可以像编辑网页在框架中输入内容。单击任意一个框架之后，就可以像编辑网页一样，在框架中插入各种文本内容、图像、一样，在框架中插入各种文本内容、图像、FlashFlash动画和背景音乐动画和背景音乐等网页元素。等网页元素。第8章设计框架网页8.1框架网页应用8.1.3 8.1.3 编辑框架集和保存框架编辑框架集和保存框架集集2 2通过通过HTMLHTML编辑框架集编辑框架集框架集的代码基本格式如下：框架集的代码基本格式如下：第8章设计框架网页8.1框架网页应用8.1.4 8.1.4 向框架中添加向框架中添加内容内容框架创建好以后，就可以往里面添加内容。每一个框架都是一个独立框架创建好以后，就可以

16、往里面添加内容。每一个框架都是一个独立的网页文件，不仅可以直接编辑网页文件内容，还可以在框架内打开的网页文件，不仅可以直接编辑网页文件内容，还可以在框架内打开已经存在的网页文件。已经存在的网页文件。要在框架中添加网页内容，首先选择框架活动面板内的某一框架，然要在框架中添加网页内容，首先选择框架活动面板内的某一框架，然后利用后利用“属性属性”面板上的面板上的“源文件源文件”来设定框架的网页，如来设定框架的网页，如图所图所示示。第8章设计框架网页8.1框架网页应用示例：示例：创建如图所创建如图所示的框架，并在相应的框示的框架，并在相应的框架中添加架中添加top.htmtop.htm、left.ht

17、mleft.htm和和main.htm 3main.htm 3个个网页，设定左侧框架的宽度为网页，设定左侧框架的宽度为8080像素，顶部像素，顶部框架的高度为框架的高度为200200像素，主框架占据剩余空间。像素，主框架占据剩余空间。操作步骤如下。操作步骤如下。 首先首先创建一个整体框架，然后将鼠标指创建一个整体框架，然后将鼠标指针置于框架边框上，按住针置于框架边框上，按住AltAlt键拖动边框，键拖动边框，对原始页面进行分割，然后在对原始页面进行分割，然后在“属性属性”面板里进行具体数值的设置。面板里进行具体数值的设置。 分别分别在框架活动面板中选择相应的框架，在框架活动面板中选择相应的框架

18、，然后在框架然后在框架“属性属性”面板里插入相应的面板里插入相应的网页。网页。第8章设计框架网页8.1框架网页应用8.1.5 8.1.5 保存框架保存框架集集框架集是定义了一组框架结构的框架集是定义了一组框架结构的HTMLHTML网页，网页，而单个框架是指在网页上定义的一个区域。而单个框架是指在网页上定义的一个区域。首先创建一个左上框架集，即在当前框架的首先创建一个左上框架集，即在当前框架的左侧添加一个框架，然后在这两个框架的上左侧添加一个框架，然后在这两个框架的上面添加另一个框架，效果如面添加另一个框架，效果如图所示。框架图所示。框架集集由由3 3个框架组成，当把个框架组成，当把Dreamw

19、eaver CS6Dreamweaver CS6网网页拆分为框架网页时，其实就已经为框架集页拆分为框架网页时，其实就已经为框架集和其中的每个框架创建了独立的和其中的每个框架创建了独立的HTMLHTML网页。网页。图图8-48-4中有中有3 3个框架网页，但是它实际上包括个框架网页，但是它实际上包括了了4 4个独立的文件，即个独立的文件，即1 1个框架集文件和个框架集文件和3 3个个框架文件。框架文件。第8章设计框架网页8.1框架网页应用第8章设计框架网页8.2框架属性框架属性是用来确定框架集内各个框架的名称、源文件、链接、边距、滚框架属性是用来确定框架集内各个框架的名称、源文件、链接、边距、滚

20、动条、边框和大小的。每个框架和框架集都有属于自己的动条、边框和大小的。每个框架和框架集都有属于自己的“属性属性”面板，面板，用于查看与设置框架和框架集的属性，其中框架集属性不仅控制着框架的用于查看与设置框架和框架集的属性，其中框架集属性不仅控制着框架的大小和几个子框架之间边框的颜色和宽度，还控制着打开链接的目标框架大小和几个子框架之间边框的颜色和宽度，还控制着打开链接的目标框架窗口等窗口等。第8章设计框架网页8.2框架属性8.2.1 8.2.1 设置框架设置框架属性属性1 1设置框架属性设置框架属性在在框架活动面板中选择任意一个框架，这里选择的是顶部框架活动面板中选择任意一个框架，这里选择的是

21、顶部框架，如框架，如图所图所示，示，“属性属性”面板就变成了该框架的面板就变成了该框架的“属性属性”面板面板。单击。单击“属性属性”面板右下角的扩展箭头，就可以查看面板右下角的扩展箭头，就可以查看框架的所有框架的所有属性。属性。框架框架创建好以后，就可以往里面添加内容。每一个框架都创建好以后，就可以往里面添加内容。每一个框架都是一个独立的网页文件，不仅可以直接编辑网页文件内容，是一个独立的网页文件，不仅可以直接编辑网页文件内容，还可以在框架内打开已经存在的网页文件还可以在框架内打开已经存在的网页文件。第8章设计框架网页8.2框架属性8.2.1 8.2.1 设置框架设置框架属性属性2 2设置框架

22、集属性设置框架集属性使用框架集属性检查器可以设置边框和框架大小。设置框架属性时会覆盖在使用框架集属性检查器可以设置边框和框架大小。设置框架属性时会覆盖在框架集中设置的相应属性。例如，设置某框架的边框属性，将覆盖在框架集框架集中设置的相应属性。例如，设置某框架的边框属性，将覆盖在框架集中对该框架设置的边框属性。中对该框架设置的边框属性。选择一个框架集。在选择一个框架集。在“设计设计”视图（文档窗口）中单击两框架之间的边框，视图（文档窗口）中单击两框架之间的边框，或者在框架活动面板中单击框架集边框，可以调出框架集或者在框架活动面板中单击框架集边框，可以调出框架集“属性属性”面板。面板。单击位于单击

23、位于“属性属性”面板右下角的扩展箭头，就可以查看框架集所有属性，如面板右下角的扩展箭头，就可以查看框架集所有属性，如图所图所示。示。第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接如果如果在有框架的网页中设置了超链接，那么就必须指定所链接的目标文件是在有框架的网页中设置了超链接，那么就必须指定所链接的目标文件是在哪一个框架中显示，此时就需要用到在哪一个框架中显示，此时就需要用到标签中标签中namename属性所定义的框属性所定义的框架名。如果在框架网页中设置了超链接但未指定框架名，那么单击框架内的架名。如果在框架网页中设置了超链接但未指定框架名，那么单击框架内的超链接时

24、，目标文件就只会显示在当前框架内超链接时，目标文件就只会显示在当前框架内。如果想要在一个框架中使用超链接，用来打开另一个框架中的文档，那么就如果想要在一个框架中使用超链接，用来打开另一个框架中的文档，那么就必须设置链接目标（必须设置链接目标（targettarget）。例如，如果导航条位于左侧框架中，并且希）。例如，如果导航条位于左侧框架中，并且希望链接的目标显示在右侧的主框架中，那么就必须要将主框架的名称指定为望链接的目标显示在右侧的主框架中，那么就必须要将主框架的名称指定为每个导航条链接的目标。这样当浏览者单击导航链接时，指定的文件就会在每个导航条链接的目标。这样当浏览者单击导航链接时，指

25、定的文件就会在主框架中打开。主框架中打开。targettarget属性使用的基本格式如下：属性使用的基本格式如下：a href=超链接内容超链接内容第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接targettarget属性的值不仅可以使用已定义的框架名，还可以是属性的值不仅可以使用已定义的框架名，还可以是_top_top、_self_self、_blank_blank和和_parent_parent，它们的含义分别是将目标文件装入整个浏览器窗口、装，它们的含义分别是将目标文件装入整个浏览器窗口、装入当前框架、装入一个新的浏览器窗口和装入父框架，其中，入当前框架、装入一

26、个新的浏览器窗口和装入父框架，其中，_blank_blank使用最使用最多。多。要设置目标框架时，在要设置目标框架时，在“设计设计”视图中选择文本或对象。在视图中选择文本或对象。在“属性属性”面板面板“链接链接”文本框右侧单击文件夹图标并且选择要链接的文件，或将文本框右侧单击文件夹图标并且选择要链接的文件，或将“指向文指向文件件”图标拖动到图标拖动到“文件文件”面板中，以选择要链接的文件。在面板中，以选择要链接的文件。在“属性属性”面板的面板的“目标目标”下拉列表框中，选择显示链接的文件的框架或窗口。下拉列表框中，选择显示链接的文件的框架或窗口。框架名此时也会出现在该下拉列表框中，这样就可以选

27、择一个命名框架用以框架名此时也会出现在该下拉列表框中，这样就可以选择一个命名框架用以打开该框架中链接的文件。打开该框架中链接的文件。第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接下方的下方的5 5个个HTMLHTML文件分别是文件分别是2 2个初始化文件、个初始化文件、2 2个被链接的目标文件和个被链接的目标文件和1 1个框架个框架集文件。集文件。main.htmmain.htm初始化文件，代码如下：初始化文件，代码如下：超链接的目标框架超链接的目标框架框架的初始内容框架的初始内容第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接content.

28、htmcontent.htm初始化文件，代码如下：初始化文件，代码如下：htmlhead超链接的目标框架超链接的目标框架单击目录，然后在右侧框架中查看对应图片：单击目录，然后在右侧框架中查看对应图片：目录目录 (1 (1）图片图片11 (2 (2）图片图片22/bodyhtml第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接file1.htmfile1.htm被链接的目标文件被链接的目标文件1 1，代码如下：，代码如下：超链接的目标框架超链接的目标框架此处是图片此处是图片11第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接file2.htmfil

29、e2.htm被链接的目标文件被链接的目标文件2 2，代码如下：，代码如下：超链接的目标框架超链接的目标框架/head 此处是图片此处是图片22imgsrc=FOO.GIF第8章设计框架网页8.2框架属性8.2.2 8.2.2 框架框架链接链接frameset.htmframeset.htm框架集文件，代码如下：框架集文件，代码如下：目录式框架的实现目录式框架的实现frameset cols=150,第8章设计框架网页8.2框架属性8.2.3 8.2.3 框架框架标签标签1 1基本标签基本标签framesetframeset标签用于定义框架，主要的属性如表标签用于定义框架，主要的属性如表8-18

30、-1所示。所示。第8章设计框架网页8.2框架属性8.2.3 8.2.3 框架框架标签标签2 2标签标签作用：为不能显示框架的浏览器提供一种比较容易的解决方案。作用：为不能显示框架的浏览器提供一种比较容易的解决方案。使用方法：使用方法：请换成支持框架功能的浏览器请换成支持框架功能的浏览器标签解释：如果有些浏览器版本较低，那么可能无法显示框架功能，此时可标签解释：如果有些浏览器版本较低，那么可能无法显示框架功能，此时可使用此标签来提醒用户更换浏览器；也可以在使用此标签来提醒用户更换浏览器；也可以在标签中输入没有框标签中输入没有框架语法的网页标签，这样不支持框架功能的浏览器会自动显示没有框架语法架语

31、法的网页标签，这样不支持框架功能的浏览器会自动显示没有框架语法的网页的网页。第8章设计框架网页8.2框架属性8.2.3 8.2.3 框架框架标签标签3 3targettarget属性属性基本用法：基本用法：target=target=框架名称框架名称使用方法：使用方法：需要显示的内容需要显示的内容标签解释：如果想要在框架标签解释：如果想要在框架leftleft页面内单击链接，希望它的内容出现在框架页面内单击链接，希望它的内容出现在框架rightright页面中，添加页面中，添加target=target=框架名称框架名称 就可以实现就可以实现。第8章设计框架网页8.3内嵌框架iframe8.3

32、.1 8.3.1 关于关于iframeiframeiframeiframe框架是在当前页面中内嵌一个窗口，该窗口可以嵌在网页中的任意部框架是在当前页面中内嵌一个窗口，该窗口可以嵌在网页中的任意部分，并可以为随意大小。分，并可以为随意大小。在使用框架的网页中，使用在使用框架的网页中，使用标签，可以将一个页面拆分成标签，可以将一个页面拆分成多个区域。此时每一个区域中都会放置一个网页，这些网页之间既可以相互多个区域。此时每一个区域中都会放置一个网页，这些网页之间既可以相互独立，也可以有所关联。通常框架内的网页以平铺的形式充满整个页面空间，独立，也可以有所关联。通常框架内的网页以平铺的形式充满整个页面

33、空间，但是，有些时候需要在网页中开辟一块区域用于放置其他网页，形成但是，有些时候需要在网页中开辟一块区域用于放置其他网页，形成“画中画中画画”效果，这种效果的实现就需要利用嵌入式框架效果，这种效果的实现就需要利用嵌入式框架iframeiframe技术。一般嵌入其技术。一般嵌入其他网页的初始页面框架被称为父框架，而嵌入父框架内的页面框架则被称为他网页的初始页面框架被称为父框架，而嵌入父框架内的页面框架则被称为子框架或嵌入框架。子框架或嵌入框架。iframeiframe技术不仅在很大程度上丰富了网页的布局设计，技术不仅在很大程度上丰富了网页的布局设计，还可以简单便捷地实现多种复杂的网页特效。还可以

34、简单便捷地实现多种复杂的网页特效。第8章设计框架网页8.3内嵌框架iframe8.3.1 8.3.1 关于关于iframeiframeiframeiframe框架是在当前页面中内嵌一个窗口，该窗口可以嵌在网页中的任意部框架是在当前页面中内嵌一个窗口，该窗口可以嵌在网页中的任意部分，并可以为随意大小。分，并可以为随意大小。在使用框架的网页中，使用在使用框架的网页中，使用标签，可以将一个页面拆分成标签，可以将一个页面拆分成多个区域。此时每一个区域中都会放置一个网页，这些网页之间既可以相互多个区域。此时每一个区域中都会放置一个网页，这些网页之间既可以相互独立，也可以有所关联。通常框架内的网页以平铺的

35、形式充满整个页面空间，独立，也可以有所关联。通常框架内的网页以平铺的形式充满整个页面空间，但是，有些时候需要在网页中开辟一块区域用于放置其他网页，形成但是，有些时候需要在网页中开辟一块区域用于放置其他网页，形成“画中画中画画”效果，这种效果的实现就需要利用嵌入式框架效果，这种效果的实现就需要利用嵌入式框架iframeiframe技术。一般嵌入其技术。一般嵌入其他网页的初始页面框架被称为父框架，而嵌入父框架内的页面框架则被称为他网页的初始页面框架被称为父框架，而嵌入父框架内的页面框架则被称为子框架或嵌入框架。子框架或嵌入框架。iframeiframe技术不仅在很大程度上丰富了网页的布局设计，技术

36、不仅在很大程度上丰富了网页的布局设计，还可以简单便捷地实现多种复杂的网页特效。还可以简单便捷地实现多种复杂的网页特效。第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用1 1文件地址文件地址语法：语法：src=urlsrc=url说明：说明：URLURL为嵌入的为嵌入的HTMLHTML文件的地址，可以是相对地址，也可以是绝对地址。文件的地址，可以是相对地址，也可以是绝对地址。 示例：示例：2 2对象名称对象名称语法：语法：name=# name=# 说明：该属性可以给对象命名，以便被其他对象利用，说明：该属性可以给对象命名，以便

37、被其他对象利用，# #表示对象的名称。表示对象的名称。示例：示例：iframe src=Iframe.html name=Iframe1第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用3 3idid选择符选择符 语法：语法：id=# id=# 说明：用来指定该标签的唯一说明：用来指定该标签的唯一idid选择符。选择符。示例：示例：4 4容器属性容器属性语法：语法：height=#height=#，width=#width=#说明：该属性用来指定子框架的高度和宽度。一般取值为正整数（单位为像说明：该属性用来指定子框架的高度和宽度

38、。一般取值为正整数（单位为像素）或百分比。素）或百分比。示例：示例：第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用5 5尺寸调整尺寸调整语法：语法：noresizenoresize说明：一般是说明：一般是IEIE浏览器专有属性，用来指定子框架不可调整尺寸。浏览器专有属性，用来指定子框架不可调整尺寸。示例：示例：6 6边框显示边框显示语法：语法：frameborder=0frameborder=0或或1 1说明：该属性用来规定是否显示子框架边框。说明：该属性用来规定是否显示子框架边框。 0 0：表示不显示子框架边框。：表示不显

39、示子框架边框。 1 1：表示显示子框架边框。：表示显示子框架边框。示例：示例： 第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用7 7边框厚度边框厚度语法：语法：border=#border=#说明：该属性用来指定子框架边框的厚度，一般取值为正整数或说明：该属性用来指定子框架边框的厚度，一般取值为正整数或0 0，单位为，单位为像素。为了实现子框架与页面无缝结合，一般取像素。为了实现子框架与页面无缝结合，一般取0 0。示例：示例：8 8边框颜色边框颜色语法：语法：bordercolor=colorbordercolor=colo

40、r说明：该属性用来指定子框架边框的颜色。说明：该属性用来指定子框架边框的颜色。colorcolor既可以是既可以是RGBRGB色，也可以是色，也可以是颜色名。颜色名。示例：示例：第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用9 9对齐方式对齐方式语法：语法：align=leftalign=left、rightright或或centercenter说明：该属性用来指定子框架和其他对象的对齐方式。说明：该属性用来指定子框架和其他对象的对齐方式。 leftleft：左对齐。：左对齐。 rightright：右对齐。：右对齐。 ce

41、ntercenter：居中对齐。：居中对齐。示例：示例： 第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用1010相邻间距相邻间距语法：语法：framespacing=#framespacing=#说明：该属性用来指定相邻子框架之间的间距，一般取值为正整数或说明：该属性用来指定相邻子框架之间的间距，一般取值为正整数或0 0，单，单位为像素。位为像素。示例：示例：iframe src=Iframe.htmlframespacing=10第8章设计框架网页8.3内嵌框架iframe8.3.2 iframe8.3.2 iframe的

42、属性及的属性及应用应用1111内补白属性内补白属性语法：语法：hspace=#hspace=#，vspace=#vspace=#说明：用来指定子框架内的边界大小；一般取值为正整数或说明：用来指定子框架内的边界大小；一般取值为正整数或0 0，单位为像素；，单位为像素；两个属性一般同时使用。两个属性一般同时使用。 hspacehspace：表示子框架内的左右边界大小。：表示子框架内的左右边界大小。 vspacevspace：表示子框架内的上下边界大小。：表示子框架内的上下边界大小。示例：示例：iframe src=Iframe.html hspace=1vspace=1第8章设计框架网页8.3内嵌

43、框架iframe8.3.2 iframe8.3.2 iframe的属性及的属性及应用应用1212外补白属性外补白属性语法：语法：marginheight=#marginheight=#，marginwidth=#marginwidth=#说明：用来指定子框架外的边界大小；一般取值为正整数或说明：用来指定子框架外的边界大小；一般取值为正整数或0 0，单位为像素；，单位为像素；两个属性一般同时使用。两个属性一般同时使用。 marginheightmarginheight：表示子框架外的左右边界大小。：表示子框架外的左右边界大小。 marginwidthmarginwidth：表示子框架外的上下边界

44、大小。：表示子框架外的上下边界大小。示例：示例：iframe src=Iframe.html marginheight=1marginwidth=1第8章设计框架网页8.4综合实训案例：布置框架创建一个框架网页，其框架结构如创建一个框架网页，其框架结构如图所图所示。其中框架集文件命名为示。其中框架集文件命名为index.htmlindex.html，3 3个框架文件根据其位置分别命名为个框架文件根据其位置分别命名为top.htmltop.html、left.htmlleft.html和和main.htmlmain.html。在。在3 3个框架页面内分别添加内容，并在个框架页面内分别添加内容，并

45、在left.htmlleft.html页面内做导航页面内做导航链接，将链接的页面在链接，将链接的页面在main.htmlmain.html页面中打开，由于页面中打开，由于main.htmlmain.html页面比较长，页面比较长，所以还需要在此页面内设置命名锚记，使所以还需要在此页面内设置命名锚记，使left.htmlleft.html中的链接能够准确定位中的链接能够准确定位到到main.htmlmain.html页面的具体位置处。页面的具体位置处。第8章设计框架网页8.4综合实训案例：布置框架第8章设计框架网页本章小结框架网页是比较常用的网页技术，使用框架可以将浏览器窗口划分为框架网页是比较常用的网页技术，使用框架可以将浏览器窗口划分为若干个区域，每个区域用来分别显示不同的网页。这样可以使整个网若干个区域，每个区域用来分别显示不同的网页。这样可以使整个网页的布局结构更加清晰，信息的展现方式更为灵活。本章主要介绍了页的布局结构更加清晰，信息的展现方式更为灵活。本章主要介绍了框架网页的制作方法及注意事项，使读者能够掌握框架结构的特点和框架网页的制作方法及注意事项，使读者能够掌握框架结构的特点和框架网页技术框架网页技术。