通过Dreamweaver_CS3学习HTML+DIV+CSS_第10章__网页框架Frame.ppt

第10章网页框架Frame 在网页中 一个网页可以包含多个页面 此时需要用到框架 使用框架可以进行页面布局 把网页化分为几个区域 例如 一个水平框架用于放置Banner 也就是标题 左垂直框架用于放置导航 右垂直框架用于放置正文 每一个框架单独使用一个网页 从而使页面设计简单化 框架除了用于页面布局 还可用于制作目录 包含框架的网页称为框架集 框架集定义了各个框架的结构 数量 大小和目标等属性 本章将介绍框架的使用方法 10 1创建框架 一个完整的框架页面应该包括两个部分 框架和框架集 前面介绍了框架集的作用 它用来定义框架的各种属性 在网页中框架集是不可见的 显示出来的只是各个框架 框架集本身是一个网页再加上框架的目标页面 所以一个完整的框架集包含有多个页面 10 1 1自定义框架 在创建自定义框架之前 首先确定是否打开框架可视元素 如果没有 需要按照以下步骤进行操作 单击 查看 可视化助理 框架边框 命令 使其处于选中状态 此时 页面中可以显示框架边框 创建自定义框架的具体步骤如下 自定义左右框架效果自定义上下框架效果 10 1 2预定义框架 在DreamweaverCS3中 系统预定义了13种框架类型 通过插入栏中 布局 标签的框架按钮 可以为页面设置框架 具体步骤如下 框架子菜单 框架标签辅助功能属性 对话框 10 1 2预定义框架 单击 确定 按钮 完成创建预定义框架 效果如图左所示 按照以上步骤 可以创建其他类型框架 如左侧和嵌套的顶部框架 效果如图右所示 顶部和嵌套的左侧框架效果左侧和嵌套的顶部框架效果 10 1 3自定义嵌套框架 前面介绍了框架的创建方法 使用系统预定义的方法可以快速创建出复杂的框架 但是预定义框架有时并不能完全满足需要 此时需要创建自定义框架 框架像表格一样可以多重嵌套 具体步骤如下 下框架嵌套框架效果多重嵌套框架效果 10 2框架源码 前一小节介绍如何创建框架集和框架 接下来查看构成框架的源码会有怎样的变化 本小节将介绍框架源码 以10 1 3小节的实例进行讲解 打开实例框架集 从源码中可以看出 网页中有两个陌生的标签和 其中标签用于设置框架集 标签用于设置框架 这些标签都是成对出现 如果不结束标签可能会造成页面混乱 标签包含rows和cols两个属性 这两个属性分别用于设置水平拆分和垂直拆分框架 还用于设置框架的尺寸 10 2框架源码 标签有多个属性 其使用语法如表 续表 10 3调整框架 前面了解了如何创建框架 新创建的框架需要进行一些调整才能符合设计的要求 如框架结构 尺寸大小和数量等 在实际应用中 还需要对框架集及其属性进行修改 本节将介绍如何调整框架以适合需要 10 3 1选择框架 修改对象属性时首先选中对象 对框架集或框架进行修改时 首先选中框架对象 选中框架集时 其所有框架边框显示出虚线 表示该框架处于选中状态 同样当框架选中时 也会显示虚线 表示选中 效果如图10 9所示 框架 面板嵌套框架效果 10 3 1选择框架 选中一个框架后 可以结合Alt键和方向键进行框架选择的切换 选中第一层框架集效果选中最右下方框架效果 10 3 2保存框架 设计好框架页面后 要保存框架 因为框架页面包含了多个网页 所以保存时与普通页面不一样 在DreamweaverCS3中可以保存一个框架集 也可以单独保存一个框架 还可以保存所有的框架集及框架 最快捷的方式是保存框架集 保存框架集的具体步骤如下 单击框架边框选中框架集 单击 文件 框架集另存为 命令 弹出 另存为 对话框 输入路径及名称 单击 确定 按钮 如果框架集已经保存过 单击 文件 保存框架集 命令 10 3 3设置框架集 插入框架集后 需要对框架集进行一些设置 如边框架有无 大小和颜色等 在DreamweaverCS3中 可通过框架集的 属性 面板进行设置 框架集的 属性 面板如图所示 边框集属性设置效果预览效果 10 3 4设置框架 设置框架集后 同样也需要设置框架的属性 例如 设置框架的名称 尺寸大小 边框和滚动条等属性 接着上一小节中的实例设置框架属性 具体步骤如下 框架滚动条效果框架属性设置效果 10 3 5命名框架集页面 在DreamweaverCS3中 不能通过 属性 面板进行命名 而是通过设计视图工具栏和页面属性来进行设置 设计视图工具栏设置的具体步骤如下 设计视图工具栏 框架集标题效果 10 3 6修改框架尺寸 前面介绍通过 属性 面板可以修改框架的尺寸 还可通过拖动鼠标进行框架的大小修改 具体步骤如下 调整框架尺寸 10 3 7使用无框架内容 当浏览器不支持框架元素时 可以设置提示信息 告诉浏览者浏览的页面不能正常显示 此时通过编辑无框架内容来提示浏览者 具体步骤如下 编辑无框架内容 10 4设置框架链接 在框架中可以使用链接来控制框架内容 把链接的目标定位在指定的框架 例如 电子书类网页的左框架用于放置目录等导航信息 右框架用于放置主体内容 此时需要把右框架设置为主框架 main frame 当单击目录导航时 链接内容即可显示在主框架内 具体步骤如下 10 4设置框架链接 按F12键预览网页 效果如图左所示 选择 目录三 选项 右边出现 目录三的内容 如图右所示 框架链接效果改变框架链接效果 10 5使用浮动框架iframe 浮动框架比普通框架要灵活 它可以像层一样在网页中放置 浮动框架结合脚本程序可制作出页面的局部更新 在此将介绍浮动框架的基本用法 10 5使用浮动框架iframe 在DreamweaverCS3中不能在 属性 面板中设置iframe 只能手动进行修改源码 将前面的源码复制到网页的 标签之间 预览效果如图所示 iframe效果 10 6专家总结 本章介绍了框架的基本概念 读者可以学习如何创建框架 设置框架大小和框架命名等基本操作 在使用框架的过程中 注意要理解框架的基本概念和结构 以及框架的