《网站设计指南》 第10章 网页框架Frame

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

第10章 网页框架Frame在网页中，一个网页可以包含多个页面，此时需要用到 框架。使用框架可以进行页面布局，把网页化分为几个 区域。例如，一个水平框架用于放置Banner(也就是标 题);左垂直框架用于放置导航；右垂直框架用于放置 正文。每一个框架单独使用一个网页，从而使页面设计 简单化。框架除了用于页面布局，还可用于制作目录。 包含框架的网页称为框架集。框架集定义了各个框架的 结构、数量、大小和目标等属性。本章将介绍框架的使 用方法。

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.1 创建框架

一个完整的框架页面应该包括两个部分：框架和框架集。前面介绍 了框架集的作用，它用来定义框架的各种属性。在网页中框架集是 不可见的，显示出来的只是各个框架。框架集本身是一个网页再加 上框架的目标页面，所以一个完整的框架集包含有多个页面。

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.1.1 自定义框架在创建自定义框架之前，首先确定是否打开框架可视元 素。如果没有，需要按照以下步骤进行操作：单击【查 看】|【可视化助理】|【框架边框】命令，使其处于选 中状态。此时，页面中可以显示框架边框。创建自定义 框架的具体步骤如下：

自定义左右框架效果

自定义上下框架效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.1.2 预定义框架在Dreamweaver CS3中，系统预定义了13种框架类型。 通过插入栏中【布局】标签的框架按钮，可以为页面设 置框架，具体步骤如下：

框架子菜单

【框架标签辅助功能属性】对话框

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.1.2 预定义框架单击【确定】按钮，完成创建预定义框架，效果如图左 所示。按照以上步骤，可以创建其他类型框架，如左侧 和嵌套的顶部框架，效果如图右所示。

顶部和嵌套的左侧框架效果

左侧和嵌套的顶部框架效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.1.3 自定义嵌套框架前面介绍了框架的创建方法，使用系统预定义的方法可 以快速创建出复杂的框架。但是预定义框架有时并不能 完全满足需要，此时需要创建自定义框架。框架像表格 一样可以多重嵌套，具体步骤如下：

下框架嵌套框架效果

多重嵌套框架效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.2 框架源码前一小节介绍如何创建框架集和框架，接下来查看构成框架的源码会有怎 样的变化。本小节将介绍框架源码，以10.1.3小节的实例进行讲解，打开 实例框架集.从源码中可以看出，网页中有两个陌生的标签<frameset>和 <frame>。其中<frameset>标签用于设置框架集，<frame>标签用于设置 框架。这些标签都是成对出现，如果不结束标签可能会造成页面混乱。 <frameset>标签包含rows和cols两个属性，这两个属性分别用于设置水平 拆分和垂直拆分框架，还用于设置框架的尺寸。

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.2 框架源码<frame>标签有多个属性，其使用语法

如表 。(续表)

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3 调整框架

前面了解了如何创建框架。新创建的框架需要进行一些 调整才能符合设计的要求，如框架结构、尺寸大小和数 量等。在实际应用中，还需要对框架集及其属性进行修 改。本节将介绍如何调整框架以适合需要。

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.1 选择框架修改对象属性时首先选中对象。对框架集或框架进行修 改时，首先选中框架对象。选中框架集时，其所有框架 边框显示出虚线，表示该框架处于选中状态。同样当框 架选中时，也会显示虚线，表示选中，效果如图10.9所 示。

【框架】面板

嵌套框架效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.1 选择框架选中一个框架后，可以结合Alt键和方向键进行框架选择 的切换 。

选中第一层框架集效果

选中最右下方框架效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.2 保存框架设计好框架页面后，要保存框架。因为框架页面包含了多个网页，所以保 存时与普通页面不一样。在Dreamweaver CS3中可以保存一个框架集，也 可以单独保存一个框架，还可以保存所有的框架集及框架。最快捷的方式 是保存框架集。保存框架集的具体步骤如下： 单击框架边框选中框架集。 单击【文件】|【框架集另存为】命令，弹出【另存为】对话框。输入路 径及名称，单击【确定】按钮。 如果框架集已经保存过，单击【文件】|【保存框架集】命令。

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.3 设置框架集插入框架集后，需要对框架集进行一些设置，如边框架 有无、大小和颜色等。在Dreamweaver CS3中，可通过 框架集的【属性】面板进行设置。框架集的【属性】面 板如图所示。

边框集属性设置效果

预览效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.4 设置框架设置框架集后，同样也需要设置框架的属性。例如，设 置框架的名称、尺寸大小、边框和滚动条等属性。接着 上一小节中的实例设置框架属性，具体步骤如下：

框架滚动条效果

框架属性设置效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.5 命名框架集页面在Dreamweaver CS3中，不能通过【属性】面板进行命 名，而是通过设计视图工具栏和页面属性来进行设置。 设计视图工具栏设置的具体步骤如下：

设计视图工具栏

框架集标题效果

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.6 修改框架尺寸前面介绍通过【属性】面板可以修改框架的尺寸，还可 通过拖动鼠标进行框架的大小修改，具体步骤如下：

调整框架尺寸

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.3.7 使用无框架内容当浏览器不支持框架元素时，可以设置提示信息，告诉 浏览者浏览的页面不能正常显示。此时通过编辑无框架 内容来提示浏览者，具体步骤如下：

编辑无框架内容

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.4 设置框架链接

在框架中可以使用链接来控制框架内容，把链接的目标定位在指定 的框架。例如，电子书类网页的左框架用于放置目录等导航信息， 右框架用于放置主体内容

。此时需要把右框架设置为主框架 (main_frame),当单击目录导航时，链接内容即可显示在主框架 内，具体步骤如下：

网站设计指南：《通过Dreamweaver.CS3学习HTML+DIV+CSS》全套教学PPT

10.4 设置框架链接按F12键预览网页，效果如图左所 …… 此处隐藏：1567字，全部文档内容请下载后查看。喜欢就下载吧 ……