第七章ppt教案.ppt

第7章 第7章 框架 ● 了解框架和框架集的概念 ● 掌握框架的创建方法 ● 掌握如何在框架中显示不同页面的内容 ● 熟悉对框架和框架集的编辑方法 本章学习知识点 7.1 了解框架与框架集 本章内容目录 7.3 拆分框架 7.2 创建框架与框架集 7.4 保存框架与框架集 7.5 删除框架 7.6 嵌套框架集 7.7 设置框架与框架集属性 7.8 浏览器不支持框架的处理方法 7.1 了解框架与框架集 框架是指浏览器窗口被分为几个区域分别显示不同的内容的页面布局方式。 与表格布局不同的是，框架是将浏览器窗口分为几个不同的区域，在不同的区域中可以显示不同的网页文档的内容，从而可以对每个区域中的显示的内容单独控制，并且在页面上某个区域的内容发生改变时，其他区域的内容可以保持不变。 框架集文件简单的说就是框架的集合，它记录了页面内的每一个框架的信息，它们如何在页面中显示，以及每个框架中要显示的页面的链接。 一个框架集文件用frameset标签标识，它包括了其中的框架的大小和位置等信息，一个框架用frame标签标识，它包括了要在这个框架中显示的页面的链接和其他的一些信息。 7.2 创建框架与框架集 7.2.1 创建预定义框架集 7.2.2 创建自定义框架集 7.2.1 创建预定义框架集 要创建框架与框架集，首先显示框架的边框，方法是选择“查看”→“可视化助理”→“框架边框”命令，或者单击编辑窗口上方的“可视化助理”按钮 ，在弹出的菜单中选择“框架边框”命令，编辑窗口中的页面四周将出现框架边框，如图7-1所示。 图7-1 框架边框 Dreamweaver 8中预先定义了很多种框架集，使框架集的创建变得更加简单快捷。Dreamweaver 8中预定义的框架集基本上可以满足网页制作过程中所需要的各种形式的框架集的创建。 单击“布局”插入栏上的“框架”按钮 ，弹出下拉菜单，如图7-2所示，其中显示了Dreamweaver8中预定义的框架集结构，其中蓝色部分表示框架集创建后当前文档将显示的位置，选中需要创建的框架集结构命令即可创建框架集，如选择“左侧和嵌套的顶部框架”命令，创建左侧和嵌套的顶部框架，如图7-3所示。 图7-2 下拉菜单 图7-3 创建的框架集 7.2.2 创建自定义框架集 如果Dreamweaver 8中预定义的框架集不能够满足要求，可以自己定义框架集的结构。 （1）选择“查看” →“可视化助理” →“框架边框”命令，或者单击编辑窗口上方的“可视化助理”按钮 ，在弹出的菜单中选择“框架边框”命令，编辑窗口中的页面四周将出现框架集的粗边框线。 （2）选择“修改” →“框架页”命令，在弹出的菜单中选择相应的命令创建新的框架，如图7-4所示。 （3）要在新创建的框架中再创建新的框架，只需将鼠标光标置于框架中，继续选择“修改” →“框架页”命令，在菜单中选择相应命令即可。 图7-4 修改框架页 另一种快捷的框架集创建方法是通过拖动框架的边框创建新的框架，方法如下： （1）将鼠标光标置于框架边框线上，当鼠标光标变为双箭头 形状时，拖动鼠标到合适的位置，即可创建新的框架，将鼠标光标向右拖动，可以分割右框架；将鼠标光标向下拖动，可以分隔下框架，以此类推。 （2）将鼠标光标置于框架的边角上，当鼠标光标变为十字箭头形状时，拖动鼠标到合适的位置，可以一次拖出垂直和水平的两条边框，将框架分隔为4个框架，如图7-5所示。 若拖动内部框架的边角，可以一次调整周围所有框架的大小，但不能创建新的框架，要创建新的框架，可以按住Alt键同时拖动鼠标，可以对框架进行垂直而且水平的分隔。 图7-5 创建框架 7.3 拆分框架 在创建好网页框架后，如果在制作过程中要重新编辑框架可以对框架进行拆分，与表格不同的是框架只可以拆分，不可以合并。 将鼠标光标定位到要拆分的框架中，选择“修改”→“框架页”命令，在弹出的菜单中选择相应的命令，如图7-6所示。 1、编辑无框架内容：用于编辑在不支持框架的浏览器中显示的页面。 2、拆分左框架：将当前框架拆分为两个左右相邻的框架，原来的内容放到左侧的框架中。 3、拆分右框架：将当前框架拆分为两个左右相邻的框架，原来的内容放到右侧的框架中。 4、拆分上框架：将当前框架拆分为两个上下相邻的框架，原来的内容放到上方的框架中。 5、拆分下框架：将当前框架拆分为两个上下相邻的框架，原来的内容放到下