第5章使用框架布局网页关于框架和框架集关于框架和框架集创建框架集创建框架集框架和框架集的基本操作框架和框架集的基本操作框架和框架集的属性设置框架和框架集的属性设置保存框架和框架集保存框架和框架集5.1 5.1 关于框架和框架集关于框架和框架集 框架网页：是框架网页：是种特殊的种特殊的HTMLHTML网页，它可将浏览器窗口分网页，它可将浏览器窗口分成不同的区域，每个区域都可以显示不同的网页，而且成不同的区域，每个区域都可以显示不同的网页，而且在替换窗口中的网页文件时，各个窗口之间没有影响。在替换窗口中的网页文件时，各个窗口之间没有影响。一个框架结构有两部分网页文件构成：框架集一个框架结构有两部分网页文件构成：框架集Frameset Frameset ）和框架）和框架FrameFrame）。）。框架：是指用来分隔网页的窗格；每个框架都是浏览器中框架：是指用来分隔网页的窗格；每个框架都是浏览器中的一个区域，它可以显示与浏览器窗口中所显示内容相的一个区域，它可以显示与浏览器窗口中所显示内容相关的关的htmlhtml文档，是一个独立的文档，是一个独立的htmlhtml页面。每个框架包括页面。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距框架与网页正文之间的距离）。定框架的内边距框架与网页正文之间的距离）。框架集：是指定义一组网页布局结构与属性的框架集：是指定义一组网页布局结构与属性的html html 页页面，其中包含了显示在页面中框架的数目、尺寸、装面，其中包含了显示在页面中框架的数目、尺寸、装入框架的页面的来源及其他可定义的属性的相关信息。入框架的页面的来源及其他可定义的属性的相关信息。框架集页面不会在浏览器中显示，只是向浏览器提供框架集页面不会在浏览器中显示，只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些文档如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。的有关信息。框架和框架集的关系：框架集文档调用引用各个框架和框架集的关系：框架集文档调用引用各个框架文档。改变框架文件是指改变在框架中打开的文框架文档。改变框架文件是指改变在框架中打开的文件。件。 为了更好的理解什么是框架和框架集，详看下面的示意图。这是一个左右结构的框架，其结构是由三个网页文件组成的。首先外部的框架是一个文件，用index.htm命名。左框架为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。 框架网页的优点：框架网页的优点：访问者的浏览器不需要为每个页面重新加载与访问者的浏览器不需要为每个页面重新加载与导航相关的图形即固定网页中的某些部分）导航相关的图形即固定网页中的某些部分） 。框架集可以将网页的内容组织到相互独立的框架集可以将网页的内容组织到相互独立的HTMLHTML页面内，相对固定的内容比如导航栏、页面内，相对固定的内容比如导航栏、标题栏和经常变动的内容分别以不同的文标题栏和经常变动的内容分别以不同的文件保存，将会大大提高网页设计和维护的效件保存，将会大大提高网页设计和维护的效率。率。每个框架都有自己的滚动条，访问者可以独立每个框架都有自己的滚动条，访问者可以独立滚动框架。滚动框架。基于上述优点，框架通常用于创建网站导航。基于上述优点，框架通常用于创建网站导航。 框架网页的缺点：框架网页的缺点：难以实现不同框架中个元素的精确图形对齐。难以实现不同框架中个元素的精确图形对齐。使用框架制作的网页很难被搜索引擎搜索到。使用框架制作的网页很难被搜索引擎搜索到。对导航测试可能很费时间对导航测试可能很费时间各个带有框架的页面各个带有框架的页面URLURL不显示在浏览器中，因不显示在浏览器中，因此可能难以将特定网页设为书签，除非使用了此可能难以将特定网页设为书签，除非使用了服务器代码，允许访问者加载特定的带框架版服务器代码，允许访问者加载特定的带框架版本。本。5.2 创创建框架集建框架集 用户可以直接创建框架集，也可以在普通页面用户可以直接创建框架集，也可以在普通页面中加载预定义的框架集。其中，直接创建框架中加载预定义的框架集。其中，直接创建框架集的方法与创建普通页面的方法相似。集的方法与创建普通页面的方法相似。选择选择“文件文件”“”“新新建菜单，翻开建菜单，翻开“新建文档对话框新建文档对话框在在“类别列表中选择类别列表中选择“框架集选项，右侧将显框架集选项，右侧将显示系统预定义的框架集类示系统预定义的框架集类型，选择其中一种，然后型，选择其中一种，然后单击单击“创建按钮创建按钮5.3 框架和框架集的基本操作框架和框架集的基本操作 1 1认识认识“框架面板框架面板 利用利用“框架面板可以对框架和框架集进行框架面板可以对框架和框架集进行操作，选择操作，选择“窗口窗口”“”“框架菜单，可以框架菜单，可以打开打开“框架面板。框架面板。 2选择选择框架和框架集框架和框架集 在文档窗口中选择框架的方法为，按住【在文档窗口中选择框架的方法为，按住【AltAlt】键，然后在要选择的框架内单击，被】键，然后在要选择的框架内单击，被选中的框架边线将显示为虚线。选中的框架边线将显示为虚线。 如要选择框架集，单击该框架集上的任意如要选择框架集，单击该框架集上的任意边框即可，此时框架集的所有边框都呈虚线边框即可，此时框架集的所有边框都呈虚线显示。显示。 利用利用“框架面板选择框架时，直接在面框架面板选择框架时，直接在面板中相应区域单击即可。选择框架集时，在板中相应区域单击即可。选择框架集时，在面板中单击框架集的边框即可。面板中单击框架集的边框即可。 3.删删除框架除框架 将光将光标标放在框架的放在框架的边边框上，当光框上，当光标变标变成垂直箭成垂直箭头头 或水平箭或水平箭头头 时时，按住鼠按住鼠标标左左键键，将框架的，将框架的边边框拖框拖出父框架或出父框架或页页面之外，即可将面之外，即可将这这个框架个框架删删除。除。5.4 框架和框架集的属性框架和框架集的属性设设置置 1 1设置框架属性设置框架属性 选中框架后，选中框架后，“属性面板上将显示相应框属性面板上将显示相应框架的属性。架的属性。 显示框架显示框架源文件的源文件的保存路径保存路径选择是否选择是否显示框架显示框架的边框的边框设置框设置框架滚动架滚动条的属条的属性性2设设置框架集属性置框架集属性 选中框架集，属性面板中将显示框架集的属选中框架集，属性面板中将显示框架集的属性。性。 该面板中各参数的含义同框架属性面板基本该面板中各参数的含义同框架属性面板基本相同，不同的是在相同，不同的是在“行或行或“列文本框中列文本框中可设置框架的行高或列宽，在可设置框架的行高或列宽，在“单位下拉单位下拉列表框中可选择具体单位。列表框中可选择具体单位。 5.5 保存框架和框架集保存框架和框架集 保存框架和框架集：一个包含保存框架和框架集：一个包含n n个框架的网页实际上由个框架的网页实际上由 n+1 n+1 个独立的个独立的htmlhtml页面组成，页面组成，1 1个框架集文件和个框架集文件和n n个包个包含在框架中显示的文件。这含在框架中显示的文件。这 n+1 n+1 个页面必须单独保存个页面必须单独保存，才能在浏览器中正常工作。，才能在浏览器中正常工作。 插入的网页元素位于哪插入的网页元素位于哪个框架，就保存在哪个框架的网页中。个框架，就保存在哪个框架的网页中。点击点击“文件文件保存全部保存全部”，则打开几个另存为对话，则打开几个另存为对话框，提示保存各个部分；设计视图中的选择线框，提示保存各个部分；设计视图中的选择线或说成阴影也会自动的移动到对应的被保存的或说成阴影也会自动的移动到对应的被保存的框架中，据此可以知道正在保存的是哪一个框架框架中，据此可以知道正在保存的是哪一个框架文件。文件。DwDw先保存框架集文件，再保存框架文件。先保存框架集文件，再保存框架文件。若只保存了框架集，而未保存某个框架即没指定若只保存了框架集，而未保存某个框架即没指定该载入该框架的文档），可以直接选定该框架，该载入该框架的文档），可以直接选定该框架，然后创建链接来指向要载入的文档。类似于根据然后创建链接来指向要载入的文档。类似于根据现有文档创建框架页。现有文档创建框架页。5.6课课堂堂实实例例制作框架网制作框架网页页作业布置：作业布置：1 1、使用框架的优点是什么？、使用框架的优点是什么？2.2.课后习题课后习题本章主要内容结束，谢谢合作！本章主要内容结束，谢谢合作！