2.8 框架布局(课件）-高二《网页设计与制作》同步教学（北京理工版）

2.8 框架布局 框架将浏览器的窗口分成多个区域，每个区域可以单独显示一个HTML文件，各个区域也可以相关联地显示某一个内容。因此，框架可以更好地组织结构比较复杂的网站页面，一般可以将索引放在一个区域，文件内容显示在另一个区域。单击其中的某个链接时，链接的网页将出现在其他框架中，而索引页面本身不发生变化。 在分配时可以将窗口横向或纵向分成多个部分，还可以混合框架。 框架网页的创建步骤和普通网页有所区别，具体的创建顺序如下: (1)创建框架结构。首先需要创建一个新网页，并将此网页分割，从而获得自己需要的框架结构，并称这个新网页为框架的主页面。 返回 下一页 上一页 2.8 框架布局 (2)设置框架。为分割后的框架指定或新建一个显示具体内容的页面。 (3)创建链接。为每个框架命名，并通过“属性”面板为文本或图像指定链接。 (4)保存框架网页。将所有的网页全部保存起来。 2.8.1框架的创建 (1)新建一个文件，然后在插入栏的“布局”类别中单击 ，图标上的下三角按钮，将展开一个框架列表菜单，如图2-108所示。 (2)选择“左侧框架”选项，弹出如图2-109所示的“框架标签辅助功能属性”对话框。 返回 下一页 上一页 2.8 框架布局 (3)此处可以为每个框架命名。当然，若没有命名，以后也可以通过“属性”面板重新命名。因此，这里直接单击“确定”按钮。 (4)网页如图2-110所示，如果要调整框架的宽度，可以直接拖放框架的边框。 (5)选择“文件”菜单中的“保存全部”命令，将会弹出两次“另存为”对话框。因为将网页分成了左、右两个分网页，所以此次保存的分别为3个文件中的另外两个。 注意:利用框架可以将网页进行分割，如一个网页被分割为左右两个网页时，会产生3个文件。其中，一个为主文件，另外两个中，左边为一个文件，右边为一个文件，这也是第5步中为什么会弹出两次“另存为”对话框的原因所在。 返回 下一页 上一页 2.8 框架布局 2.8.2“框架”面板及属性栏 1.“框架”面板 选择“窗口”∣“框架”命令，可以打开“框架”面板，如图2-111所示。其中显示的是当前文档中的框架布局。使用“框架”面板只为网页提供一个快速选中某框架的功能，不提供其他功能。 2.框架的属性栏 若要选中框架中的某页面，可以直接在“框架”面板中单击，此时会打开对应框架的属性。 1)框架集属性 框架集属性如图2-112所示。 各选项的含义和作用如下: 返回 下一页 上一页 2.8 框架布局 ·边框设定框架是否有边框，其值有“是”(有边框)、“否”(无边框)、“默认”(根据浏览器的默认设置决定是否有边框，对于大多数浏览器而言，这一项都默认为有边框)。 ·边框宽度设定边框的宽度，单位为像素。 ·边框颜色设定边框的颜色。 ·值、单位如果要设置框架结构的分割比例，可以在右侧的示意图中选择要进行设置的框架，然后在“值”文本框中输入数值即可。 小提示:框架集与框架的区别是什么? 框架是浏览器窗口中的一个区域，可以显示与浏览器窗口其余部分中所显示内容无关的HTML文档。框架集是HTML文件，定义了一组框架的布局和属性。 返回 下一页 上一页 2.8 框架布局 2)各分页框架属性 各分页框架属性如图2-113所示。 各选项的含义和作用如下: ·框架名称用来为当前选中的模型框架命名。 ·源文件指定其中要显示的网页的路径。 ·滚动设定当框架中的内容超出框架范围时是否出现滚动条，其值有“是”(任何情况下都显示)、“否”(始终不显示)、“自动”(只在超出时才显示)、“默认”(为浏览器的默认值， 在大部分浏览器中等同于自动)。 ·不能调整大小默认情况下，可以拖动框架网页的拆分边框以调整框架的大小，若选中此项，则不能拖动。 ·边界宽度、边界高度设定框架边框和框架内容之间的空白区域。 返回 下一页 上一页 2.8 框架布局 3.框架内的链接 此时每个框架中页都是一个单独的网页，在对框架会页进行编辑时，只要将光标放在框架中的页面内，就可以像编辑普通页面一样对框架页进行编辑。 在左边框架中单击某项后，在右边框架会显示其内容，其操作步骤如下: (1)选中要链接的对象，并在“属性”面板的“链接”文本框中指定要链接到的网页，如图2-114所示。 返回 下一页 上一页 2.8 框架布局 (2)在“目标”下拉列表框中选择mainFrame，即在mainFrame框架中打开链接的网页。 HTML知识—框架的基本结构 <html> <head><line>…</title></head> <frameset> <frame src=“url"> <frame src=“url"> </firameset> </html 框架由<frameset>指定，并且可以嵌套，分区中各部分显示的内容由<