(Dreamweaver+CS4课件)第11章 框架.ppt

第11章框架 框架是网页中常使用的效果 使用框架 可以在同一浏览窗口中显示多个不同的文件 最常见的用法是将窗口的左侧或上侧的区域设置为目录区 用于显示文件的目录或导航条 而将右边一块面积较大的区域设置为页面的主体区域 通过在文件目录和文件内容之间建立的超级链接 用户单击目录区中的文件目录 文件内容将在主体区域内显示 用这种方法便于用户继续浏览其他的网页文件 本章将介绍关于框架的基本知识 并结合具体实例讲解在DreamweaverCS3中如何创建 使用框架 设置框架属性 利用框架进行布局 11 1关于框架 下面的实例显示了一个使用框架的网页 如图11 1所示 这是由三个框架组成的框架布局 一个框架横放在顶部 其中包含Web站点的Logo和一些常用按钮 左侧较窄的框架包含导航条 右侧的框架占据了页面的大部分 其中包含主要内容 这些框架中的每一个都显示单独的HTML文档 11 1 1基本概念 框架实际上是一种特殊的网页 它可以根据需要把浏览器窗口划分为多个区域 每个框架区域都是一个单独的网页 框架 Frames 由框架集 Frameset 和单个框架 Frame 两部分组成 框架集是一个定义框架结构的网页 它包括网页内框架的数量 每个框架的大小 框架内网页的来源和框架的其它属性等 单个框架包含在框架集中 是框架集的一部分 每个框架中都放置一个内容网页 组合起来就是浏览者看到的框架式网页 11 1 2框架的优缺点 在网页中使用框架具有以下优点 使网页结构清晰 易于维护和更新 访问者的浏览器不需要为每个页面重新加载与导航相关的图形 每个框架网页都具有独立的滚动条 因此访问者可以独立控制各个页面 然而 在网页中使用框架也具有一些缺点 某些早期的浏览器不支持框架结构的网页 下载框架式网页速度慢 不利于内容较多 结构复杂页面的排版 大多数的搜索引擎都无法识别网页中的框架 或者无法对框架中的内容进行遍历或搜索 11 2框架的使用 在11 1节介绍了框架的基本概念以及在网页中使用框架的优缺点 使读者对框架有了一定的了解 下面就来学习如何创建框架和框架集 以及框架的基本操作 属性设置等具体操作步骤 11 2 1创建框架和框架集 DreamweaverCS3提供了15种框架类型 分别是上方固定 上方固定下方固定 上方固定右侧嵌套 上方固定左侧嵌套 下方固定 下方固定右侧嵌套 下方固定左侧嵌套 右侧固定 右侧固定上方嵌套 右侧固定下方嵌套 垂直拆分 左侧固定 左侧固定上方嵌套 左侧固定下方嵌套 水平拆分等 可以使用新建文档的方式创建空白框架网页 也可以将普通网页转变为框架结构 具体操作步骤如下 1 创建空白框架网页2 将现有文档创建为框架网页 11 2 2框架的嵌套 框架的嵌套是指一个框架集套在另一个框架集内 上方固定 左侧嵌套 实际上就是一个嵌套的框架集 是在上下结构的框架集中嵌套一个左右结构的框架集 具体操作步骤如下 1 将鼠标移至要创建嵌套框架集的框架内 如图11 8所示 2 单击 插入 HTML 框架 左对齐 命令菜单 新插入一个框架集 如图11 9所示 此时 嵌套框架集制作完成 11 2 3框架的基本操作 框架的基本操作主要包括 选取框架和框架集 保存框架和框架集 调整框架大小 拆分框架和删除框架等 1 选取框架或框架集2 保存框架3 调整框架大小4 拆分 删除框架 11 2 4设置框架集属性 使用 属性检查器 可以方便地设置框架集的边框宽度和颜色 设置框架行和列的大小 对于初学者来说这种方法简单易用 下面来学习如何使用 属性检查器 设置框架集属性 11 2 5设置框架属性 11 2 3小节学习了如何设置框架集的属性 此外利用 属性检查器 还可以设置框架的属性 包括框架名称 源文件 滚动条 边框 边界等 具体操作步骤如下 11 3嵌入式框架Iframe 嵌入式框架 标签为 也是框架的一种形式 它与普通框架的区别在于 它可以嵌入在网页中的任意部分 比如可以在表格中插入嵌入式框架 正是由于这一特点 使得嵌入式框架使用广泛 本节将结合具体实例 学习如何创建嵌入式框架 以及设置嵌入式框架的属性 应用嵌入式框架的网页效果如图11 27所示 单击左边的导航文字 右边的内容会发生改变 这实际上是由两个页面组成 下面就以该