网页设计与制作 工业和信息化普通高等教育十二五 规划教材立项项目 教学课件 作者 雷伟军 第8章 设计框架网页.ppt

《网页设计与制作 工业和信息化普通高等教育十二五 规划教材立项项目 教学课件 作者 雷伟军 第8章 设计框架网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第8章设计框架网页10/1/202118.1框架网页框架的作用就是可以把浏览器窗口划分为若干个区域，每个区域用来分别显示不同的网页。框架由两个主要部分组成：框架集和单个框架。框架集在一个文档内定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL；单个框架是指在网页上定义的一个区域。10/1/202128.1.1框架网页概述框架的作用就是为了把浏览器窗口划分为若干个区域，而且每个区域可以分别显示不同的网页。这样可以使得整个页面的布局和信息展现更为灵活。但是于大多数的搜索引

2、擎都无法识别网页中的框架，或者就是无法对框架中的内容进行遍历或搜索，但是作为html发展过程中不可或缺的一部分，我们还是有必要了解它。10/1/202138.1.2创建各种框架1.创建框架集在创建框架集前，首先请选择“查看”→“框架边框”，这样就可以使框架边框在文档窗口中可见。如果想要创建框架集，那么就可以执行以下操作之一：选择“修改”→“框架集”→“左、右、上或下拆分框架”。10/1/20214按住Alt键，然后拖曳任一条框架边框，这样可以垂直或水平分割文档（或已有的框架）；按住Alt键，然后从一个角上拖曳框架

3、边框，这样也可以把文档（或已有的框架）划分为四个框架。其实用这种方法创建框架集的最为方便的。把框架边框拖曳到父框架的边框上，这样就可以删除框架。2.插入预定义框架集Dreamweaver通常预定义了8种框架集，通过使用预定义框架集，我们就可以轻易创建想要的框架集。选择“插入”→“HTML”-“10/1/20215框架”然后选择一种框架。选择“窗口”→“属性”菜单命令，然后打开属性检查器，设置“边框”为“是”，“边框宽度”为1。选择“文件”→“保存框架集”，然后在弹出的保存文件对话框中，把原来的文件名改为myfra

4、meset，最后单击保存按钮保存框架集。3.创建嵌套框架集要想实现一个框架集套在另一个框架集内称为嵌套框架集上，那么就可以使用嵌套框架为一个文档设置多个框架。10/1/20216创建嵌套框架集的具体步骤如下所示：①把鼠标光标定位在需要插入嵌套框架集的框架中。②执行如下操作之一：选择“修改”→“框架集”→“左、右、上或下拆分框架”。“插入”→“HTML”→“框架”然后选择一种框架。4.框架实例我们先设计好4个网页文件：①welcome.htm通常在顶框架显示10/1/20217②dir.htm通常在左框架显示③le

5、ssion1.htm通常在主框架显示④lession2.htm通常在主框架显示设定框架的源文件其实就是指定在某个框架中需要打开的网页文件，具体步骤如下所示：选择“文件”→“打开”菜单命令，就会打开上面第一步创建的框架集文件myframeset.htm。（注意：如果提示某些文件不存在，单击确认后忽略即可。出现10/1/20218这种情况是因为第一步只保存框架集文件却没有保存框架文件。）按住Alt键，然后在顶框架中单击，选择顶框架。选择“窗口”→“属性”菜单命令，打开属性检查器。单击“源”域右边的文件夹图标，接着在弹

6、出的对话框中选择想要在顶框架中打开的网页文件welcome.htm。单击“选择”按钮，welcome.htm网页文件就10/1/20219会在顶框架中被打开。重复上述步骤，首先在左框架中打开dir.htm，然后在主框架中打开lession1.htm。选择“文件”→“保存所有文件”，保存所有文件。然后用浏览器预览myframeset.htm文件，这样就可以看到用框架设计的网页了。如果想要选择左框架的一项，同时希望主框架的内容也同步更新，那么就需要通过10/1/202110创建链接来控制框架的显示内容。首先使用属性检

7、查器的Target(目标)弹出菜单，可以指定在哪个框架中打开被链接的文件。具体步骤如下所示：首先选择文本或对象，然后在属性检查器的Link域，执行如下操作：输入要链接的文件名；单击文件夹图标，可以选择要链接的文件或者拖动指向文件图标，指向要选择链接的文件；在此需要指定链接到文件中的锚点，然后在锚点名10/1/202111前输入号码符号#，表示这是一个空链接（空链接点击后页面不变）。在Target弹出菜单上，为被链接文档的显示选择一个合适的目标：_blank可以在新的浏览器窗口中打开被链接文档，而且可以保持当前窗口

8、可用。_parent可以在链接所在的父框架集中打开链接文档。_self可以在当前框架打开链接，替换该框架中的内容。_top可以在当前文档的最外层框架集中打开10/1/202112链接，替换所有框架。选择一个命名框架（本例中选的是择mainframe，主框架），然后指定在选定的框架中打开被链接文档。重复上述步骤，就可以创建“设置框架属性”与lession2.htm的连接，最