《使用框架和框架集》PPT课件.ppt

中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训第第9章章 使用框架和框架集使用框架和框架集 在网页中，框架主要用于分隔多个HTML页，每一个框架都是一个独立的HTML页，它们聚集在一起形成一个框架集。框架集也是一个HTML页，定义了网页的结构和属性，包括页面中显示的框架数量、框架尺寸、调用到框架中的源页面以及其他可定义的属性，但是框架集页不能显示在浏览器中。本章将主要介绍在Dreamweaver 8中创建和编辑框架和框架集的方法。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训通过本章的理论学习和上机实训，读者应了解和掌握以下内容:v框架和框架集的概念 v创建和编辑框架集的方法 v框架或框架集的选择方法 v框架和框架集的属性设置 v使用链接控制框架内容 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训本章章节内容安排如下:v9.1 使用框架 v9.2 设置框架和框架集属性 v9.3 使用链接控制框架内容 v9.4 处理浏览器不能显示的框架 v9.5 框架制作综合实例 v9.6 思考与练习 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.1 使 用 框 架 使用框架可以方便地实现网页的定位，与其他定位方式不同的是，使用框架可以将一个浏览器窗口划分为多个区域，在每个区域都可以显示不同的HTML 文档。一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档，这是使用框架的一个极其典型的例子。v认识框架和框架集 v创建预定义框架集 v创建和编辑框架集 v创建嵌套框架集 v选择框架和框架集 v保存框架和框架集文件 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训认识框架和框架集 框架实际上由两部分组成，即框架与框架集。框架就是网页中被分割开的各个部分，每部分都是一个完整的HTML网页。网页中的各个框架组成框架集，框架集实际也是一个HTML文件，用于定义文档中框架的结构、数量、尺寸及装入框架的页面文件，所以框架集并不显示在浏览器中，只是存储了一些框架如何显示的信息。相应地，框架集被称为父框架，框架被称为子框架。当用户将某个页面划分为若干个框架时，既可独立地操作各个框架，既可以创建新文档，也可为框架指定已制作好的文档。通过选择“查看”|“可视化助理”|“框架边框”命令，可以显示或隐藏框架边界。框架最常见的用途就是导航，但是设计框架时的过程可能比较复杂，并且在很多情况下，创建没有框架的 Web 页也可以达到使用一组框架所能达到的许多同样效果。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建预定义框架集 在Dreamweaver 8中，要创建框架集通常是使用系统预定义的框架集。使用预定义的框架集可以快速地在文档中插入框架布局结构，并且只有在文档设计视图窗口中才能创建框架。要创建框架集，应先选择“查看”|“可视化助理”|“框架边框”命令，使框架边框显示出来。在Dreamweaver 8中，系统预定义了13种框架集形式。选择“插入”工具栏中的“布局”选项卡，单击“框架”按钮，打开包含有13种预定义框架集的菜单，从中可以选择需要创建的类型。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建和编辑框架集 可以对已经创建好的框架集进行编辑和修改，例如将一个框架拆分成几个更小的框架，或是移动框架的边框来改变框架显示的范围大小。如果要编辑和修改框架集，可以使用以下方法：l要拆分插入点所在的框架，可以从“修改”|“框架集”的子命令中选择相应拆分项。l要以垂直或水平方式拆分一个框架或一组框架，可以将框架边框从“设计”视图的边缘拖至“设计”视图的中间。反之，将框架的边框从“设计”视图的中间拖至“设计”视图的边缘可以删除框架。l要使用不在“设计”视图边缘的框架边框拆分一个框架，可以按下Alt键的同时拖动框架边框。与上面相似，反之可以删除框架。l要将一个框架拆分成4个框架，可以将框架边框从“设计”视图一角拖入框架的中间，反之可以删除框架。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训创建嵌套框架集 一个框架集文件可以包含多个嵌套框架集，大多数使用框架的 Web 页实际上都使用了嵌套的框架，并且在 Dreamweaver 8中的多数预定义的框架集也使用嵌套。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套框架集。要创建嵌套框架集，将光标移动到相应的框架中，用通常创建框架集的方法创建框架集即可。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训选择框架和框架集 要改变框架或框架集，首先必须选中该框架或框架集。选择框架或框架集的最好方法是使用“框架”面板。选择“窗口”|“框架”命令，显示“框架”面板。在其中选中某个框架或框架集时，在“框架”面板和文档窗口的同一个框架中都将显示框架选择线，在文档窗口中，当框架被选中时，边框线显示为虚线。当框架集被选中时，所有包含在该框架集中的框架边线都显示为虚线。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训保存框架和框架集文件 框架及框架集都是HTML文件，因此，在保存文件时这些文件都必须一起保存。在Dreamweaver 8中，用户可以单独保存一个框架集文件，或一个框架文件，或保存所有打开的框架文件和框架集文件。要保存框架集文档窗口中的某个框架，可将插入点置于需要保存的框架中，选择“文件”|“保存框架页”命令。如果该框架文档是新建的，这时将打开“另存为”对话框，在对话框中选择存储路径并输入文件名，然后保存该框架文档。要保存框架集，可以在文档中单击并选中需要保存的框架集，选择“文件”|“保存框架页”命令。如果该框架集是新建的，这时将打开“另存为”对话框，在对话框中选择存储路径并输入文件名，然后保存该框架集。另外，选择“文件”|“保存全部”命令，这时Dreamweaver 8将逐个保存页面中的所有框架。在保存的过程中，在为文件命名时必须要注意以下规则。l框架的名称必须是一个单词，其中可以出现下划线符号(_)，但是不能出现连字符号(-)、句号(.)以及空格。l框架的名称可以以字母开头，但不能用数字开头。l不要使用JavaScript的保留关键字，如top或navigator之类。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.2 设置框架和框架集属性 在Dreamweaver 8中，使用“框架”属性检查器可以定义框架名称、源文件、页边距等属性，使用“框架集”属性检查器可以定义框架集边线颜色、宽度等属性。v设置框架属性 v设置框架集属性 中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训设置框架属性 要设置框架的属性，可在网页文档中选择一个框架，然后选择“窗口”|“属性”命令打开“框架”属性检查器，如图所示。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训设置框架集属性 要设置框架集的属性，可在网页文档中选择一个框架集，然后选择“窗口”|“属性”命令，打开“框架集”属性检查器，如图所示。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.3 使用链接控制框架内容 使用链接控制框架内容，也就是在一个框架中用链接来控制另一个框架中的显示内容，这才是使用框架的主要作用。要实现这样的功能，在使用链接时，必须指定链接的目标位置，也就是指明要操作的框架对象。框架的位置是通过框架的名称来确定和标示的。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.4 处理浏览器不能显示的框架 如果浏览器不支持框架，则无法显示框架集和框架文档内容。在框架集文件中可以创建位于和标记之间的提示信息，告诉用户如何访问基于框架的网页。要定义浏览器不能显示的框架内容，可以选择“修改”|“框架页”|“编辑无框架内容”命令，这时将打开一个普通文档窗口。在文档窗口中可以输入非框架内容，如文本、图像以及链接等，中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.5 框架制作综合实例 本节通过使用Dreamwerver 8中的框架和框架集来创建一个简单网页，通过该综合示例来复习使用框架和框架集布局页面的相关内容。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 填空题填空题 1.在Dreamweaver 8中，框架实际上是由 和 两部分组成的。2.在Dreamweaver 8中，要显示框架的边框线，应选择 命令。3.对“使用链接控制框架内容”起着重要作用的一个操作是 。4.在另一个框架集之内的框架集称作 框架集。5.在网页中，框架主要用于分隔 ，每一个框架都是一个独立的 ，它们聚集在一起形成一个框架集，框架集也是 。6.“框架”面板除了用于选择框架和框架集外，还可以显示 ，这在文档窗口中是无法看到的。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 选择题选择题 7.在Dreamweaver 8中，在设置各分框架属性时，“滚动”参数是用来设置()属性的。A.是否进行颜色设置 B.是否出现滚动条 C.是否设置边框宽度 D.是否使用默认边框宽度。8.以下不可以用作网页定位的是()。A.表格 B.层 C.框架 D.库中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 选择题选择题9.一个“顶部框架”类型的框架，应该包括()个HTML文件。A.1B.2 C.3D.410.在处理浏览器不能显示的框架内容时，可在网页的()标记间插入提示信息。A.和 B.和 C.和 D.和中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 简答题简答题11.在保存框架文档的过程中，在为文件命名时必须要注意哪些注意事项？12.在Dreamweaver 8中应怎样处理浏览器不能显示的框架？中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 操作题操作题13.在网页文档中创建一个嵌套框架集，效果如图所示。中文版中文版Dreamweaver Dreamweaver 8基础与上机实训基础与上机实训9.6 思考与练习 14.在网页文档中创建一个“顶部和嵌套的左侧框架”类型的框架，在左框架创建3个文字链接，单击每个链接时，在右框架分别显示相应的古诗词，效果如图所示。