网页设计与制作 教学课件 作者 雷伟军 第8章 设计框架网页.pptVIP

第8章 设计框架网页 8.1 框架网页 框架的作用就是可以把浏览器窗口划分为若干个区域，每个区域用来分别显示不同的网页。框架由两个主要部分组成：框架集和单个框架。框架集在一个文档内定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL；单个框架是指在网页上定义的一个区域。 8.1.1 框架网页概述 框架的作用就是为了把浏览器窗口划分为若干个区域，而且每个区域可以分别显示不同的网页。 这样可以使得整个页面的布局和信息展现更为灵活。 但是于大多数的搜索引擎都无法识别网页中的框架，或者就是无法对框架中的内容进行遍历或搜索，但是作为html发展过程中不可或缺的一部分，我们还是有必要了解它。 8.1.2创建各种框架 1.创建框架集 在创建框架集前，首先请选择“查看”→“框架边框”，这样就可以使框架边框在文档窗口中可见。 如果想要创建框架集，那么就可以执行以下操作之一： 选择“修改”→“框架集”→“左、右、上或下拆分框架”。 按住Alt键，然后拖曳任一条框架边框，这样可以垂直或水平分割文档（或已有的框架）；按住Alt键，然后从一个角上拖曳框架边框，这样也可以把文档（或已有的框架）划分为四个框架。其实用这种方法创建框架集的最为方便的。 把框架边框拖曳到父框架的边框上，这样就可以删除框架。 2.插入预定义框架集 Dreamweaver通常预定义了8种框架集，通过使用预定义框架集，我们就可以轻易创建想要的框架集。选择“插入”→“HTML”-“ 框架”然后选择一种框架。选择 “窗口”→“属性”菜单命令，然后打开属性检查器，设置“边框”为“是”，“边框宽度”为1。 选择“文件”→“保存框架集”，然后在弹出的保存文件对话框中，把原来的文件名改为myframeset，最后单击保存按钮保存框架集。 3.创建嵌套框架集 要想实现一个框架集套在另一个框架集内称为嵌套框架集上，那么就可以使用嵌套框架为一个文档设置多个框架。 创建嵌套框架集的具体步骤如下所示： ①把鼠标光标定位在需要插入嵌套框架集的框架中。 ②执行如下操作之一： 选择“修改”→“框架集”→“左、右、上或下拆分框架”。 “插入”→“HTML” →“框架”然后选择一种框架。 4.框架实例 我们先设计好4个网页文件： ①welcome.htm 通常在顶框架显示 ②dir.htm 通常在左框架显示 ③lession1.htm 通常在主框架显示 ④lession2.htm 通常在主框架显示 设定框架的源文件其实就是指定在某个框架中需要打开的网页文件，具体步骤如下所示： 选择 “文件”→“打开”菜单命令，就会打开上面第一步创建的框架集文件myframeset.htm。（注意：如果提示某些文件不存在，单击确认后忽略即可。出现 这种情况是因为第一步只保存框架集文件却没有保存框架文件。） 按住Alt键，然后在顶框架中单击，选择顶框架。 选择 “窗口”→“属性”菜单命令，打开属性检查器。 单击“源”域右边的文件夹图标，接着在弹出的对话框中选择想要在顶框架中打开的网页文件welcome.htm。 单击“选择”按钮，welcome.htm网页文件就 会在顶框架中被打开。 重复上述步骤，首先在左框架中打开dir.htm，然后在主框架中打开lession1.htm。 选择“文件”→“保存所有文件”，保存所有文件。 然后用浏览器预览myframeset.htm文件，这样就可以看到用框架设计的网页了。 如果想要选择左框架的一项，同时希望主框架的内容也同步更新，那么就需要通过 创建链接来控制框架的显示内容。首先使用属性检查器的Target(目标)弹出菜单，可以指定在哪个框架中打开被链接的文件。具体步骤如下所示： 首先选择文本或对象，然后在属性检查器的Link域，执行如下操作： 输入要链接的文件名；单击文件夹图标，可以选择要链接的文件或者拖动指向文件图标，指向要选择链接的文件；在此需要指定链接到文件中的锚点，然后在锚点名 前输入号码符号#，表示这是一个空链接（空链接点击后页面不变）。 在Target弹出菜单上，为被链接文档的显示选择一个合适的目标： _blank 可以在新的浏览器窗口中打开被链接文档，而且可以保持当前窗口可用。 _parent可以在链接所在的父框架集中打开链接文档。 _self可以在当前框架打开链接，替换该框架中的内容。 _top可以在当前文档的最外层框架集中打开 链接，替换所有框架。 选择一个命名框架（本例中选的是择mainframe，主框架），然后指定在选定的框架中打开被链接文档。 重复上述步骤，就可以创建“设置框架属性”与lession2.htm