第六章 框架.ppt

第六章 页面布局设计 框架信息工程系张婷婷 2 目标 6 1框架概述6 2预设框架集6 3自定义框架集6 4框架的基本操作6 5创建嵌入式框架 3 6 1框架概述 框架是网页中常使用的效果 使用框架 可以在同一浏览窗口中显示多个不同的文件 最常见的用法是将窗口的左侧或上侧的区域设置为目录区 用于显示文件的目录或导航条 而将右边一块面积较大的区域设置为页面的主体区域 通过在文件目录和文件内容之间建立的超级链接 用户单击目录区中的文件目录 文件内容将在主体区域内显示 用这种方法便于用户继续浏览其他的网页文件 4 在网络带宽十分有限的情况下 如何提高网页的下载速度 是设计网页时必须考虑的问题 如果多个网页拥有相同的导航区 只是内容有所不同 则可以考虑使用框架来设计网页布局 这样浏览者在查看不同内容时 便无需每次都下载整个页面 而可以保持导航部分不变 只下载网页中需要更新的内容部分即可 从而能够极大提高网页的下载速度 这样的网页也称为框架页 其最典型的应用便是当前十分流行的各种论坛 如天涯 搜狐论坛等 5 6 这是由三个框架组成的框架布局 一个框架横放在顶部 其中包含Web站点的Logo和一些常用按钮 左侧较窄的框架包含导航条 右侧的框架占据了页面的大部分 其中包含主要内容 这些框架中的每一个都显示单独的HTML文档 7 框架实际上是一种特殊的网页 它可以根据需要把浏览器窗口划分为多个区域 每个框架区域都是一个单独的网页 框架 Frames 由框架集 Frameset 和单个框架 Frame 两部分组成 框架集是一个定义框架结构的网页 它包括网页内框架的数量 每个框架的大小 框架内网页的来源和框架的其它属性等 单个框架包含在框架集中 是框架集的一部分 每个框架中都放置一个内容网页 组合起来就是浏览者看到的框架式网页 8 框架的优缺点 在网页中使用框架具有以下优点 使网页结构清晰 易于维护和更新 访问者的浏览器不需要为每个页面重新加载与导航相关的图形 每个框架网页都具有独立的滚动条 因此访问者可以独立控制各个页面 9 框架的优缺点 在网页中使用框架也具有一些缺点 某些早期的浏览器不支持框架结构的网页 下载框架式网页速度慢 不利于内容较多 结构复杂页面的排版 大多数的搜索引擎都无法识别网页中的框架 或者无法对框架中的内容进行遍历或搜索 10 6 2预设框架集 DreamweaverCS3提供了15种框架类型 分别是上方固定 上方固定下方固定 上方固定右侧嵌套 上方固定左侧嵌套 下方固定 下方固定右侧嵌套 下方固定左侧嵌套 右侧固定 右侧固定上方嵌套 右侧固定下方嵌套 垂直拆分 左侧固定 左侧固定上方嵌套 左侧固定下方嵌套 水平拆分等 11 创建空预设框架集 文件 新建 示例中的页 12 使文档窗口的框架边框可见 13 创建嵌套框架集 方法1 使用系统预定义的方法可以快速创建出复杂的框架 但是预定义框架有时并不能完全满足需要 此时需要创建嵌套框架 14 上方固定 左侧嵌套 实际上就是一个嵌套的框架集 是在上下结构的框架集中嵌套一个左右结构的框架集 1 将鼠标移至要创建嵌套框架集的框架内 2 单击 插入 HTML 框架 左对齐 命令菜单 新插入一个框架集 15 16 框架像表格一样可以多重嵌套 下框架嵌套框架效果多重嵌套框架效果 17 创建嵌套框架集 方法2 可以再文档窗口中拖动一个框架边框来垂直或水平切割文档 若分割的是内部框架 可以按住ALT键进行拖曳 删除一个框架 可以将此框架边框拖离页面或拖至父框架的边框 18 6 4框架的基本操作 选择框架 修改对象属性时首先选中对象 对框架集或框架进行修改时 首先选中框架对象 选中框架集时 其所有框架边框显示出虚线 表示该框架处于选中状态 同样当框架选中时 也会显示虚线 表示选中 既可以通过文档窗口选择 ALT键 鼠标可以选中子框架 也可以使用 框架 面板选择 19 框架的基本操作 保存 设计好框架页面后 要保存框架 因为框架页面包含了多个网页 所以保存时与普通页面不一样 在DreamweaverCS3中可以保存一个框架集 也可以单独保存一个框架 还可以保存所有的框架集及框架 最快捷的方式是保存全部 20 框架的基本操作 命名框架集页面 网页的名称要在框架集页面中命名 注意不要命名到子框架中 设计视图工具栏 框架集标题效果 21 框架的基本操作 修改框架尺寸 可通过拖动鼠标进行框架的大小修改 调整框架尺寸 22 框架的基本操作 设置框架集属性 使用 属性检查器 可以方便地设置框架集的边框宽度和颜色 设置框架行和列的大小 对于初学者来说这种方法简单易用 23 框架的基本操作 设置框架属性 框架名称 源文件 滚动条 边框 边界等 24 框架的基本操作 使用无框架内容 当浏览器不支持框架元素时 可以设置提示信息 告诉浏览者浏览的页面不能正常显示 此时通过编辑无框架内容来提示浏览者 编辑无框架内容 25 框架的基本操作 设置框架链接 在框架中可以使用链接来控制框架内容 把链接的目标定位在指定的框架 注意属性的设置 代码中是 和 26 小练习 框架链接 27 小练习 框架链接 28 小练习 框架链接 1 创建空白文档2 插入左侧框架3 保存全部 分别命名为index left和main 4 设置框架集边框线宽度为3 颜色为蓝色 5 设置框架边框为no6 创建mainframe1 mainframe2 mainframe3 mainframe4的内容 7 创建leftframe的链接 注意设置 链接 和 目标 属性 29 6 5创建嵌入式框架iframe 嵌入式框架 标签为 又名悬浮式框架 是框架的另一种形式 它与普通框架的区别在于 它可以嵌入在网页中的任意部分 比如可以在表格中插入嵌入式框架 正是由于这一特点 使得嵌入式框架使用广泛 30 可以配合表格使用 布局更美观 在DreamweaverCS3中不能在 属性 面板中设置iframe 只能手动进行修改源码 初始化页面 也就是第一次加载的页面 嵌入式框架页的宽度 嵌入式框架页的宽度 框架的名字 去掉边框 去掉滚动条 31