Dreamweaver网页设计之：框架.ppt

第7章框架 在设计网页页面布局的时候 一般我们可以通过表格来进行排版 但还有一类网页可以使用框架来设计 利用框架设计的页面 可以将不同的信息内容分类显示在不同的区域内 那样可以简化操作 使页面布局合理 访问者浏览查看也更方便 学习目标理解框架和框架集的概念 掌握使用框架设计网页的方法 本章内容 认识框架网页创建框架集为框架添加内容保存框架和框架集框架和框架集的选择编辑框架或框架集设置框架和框架集属性利用HTML创建网页框架 认识框架网页 框架是在同一个浏览窗口中显示多个网页的技术 框架网页是一种特殊的网页 框架将窗口划分为不同的部分 各部分中都有各自的网页 总体构架出一个框架集 此外 通过为超链接指定目标框架 可以在框架之间建立起以内容为媒介的联系 因而实现页面导航的功能 认识框架网页 框架 Frames 技术由框架集 Frameset 和框架 Frame 两部分组成 框架不是文件 它是浏览器窗口中的一个区域 是存放文档的容器 可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档 框架集是HTML文件 它定义一组框架的布局和属性 包括框架的数目 框架的大小和位置以及在每个框架中初始显示的页面的URL 返回 创建框架集 1 插入预置框架样式单击 插入 工具栏 布局 类别中的 框架 按钮 在弹出的下拉菜单中选择所需的框架类型 即可在页面上插入相应的框架 并弹出 框架标签辅助功能属性 对话框 可为框架指定框架名称 框架下拉菜单 创建框架集 2 直接新建预定义框架文件执行 文件 新建 命令 再弹出的 新建文档 对话框 类别 列表框中选择 框架集 选项 在右侧选择预定义的框架集类型 新建文档对话框 创建框架集 3 自定义框架样式先选择 查看 可视化助理 框架边框 命令 在页面中显示出框架的边框 然后将光标放置在框架的的边框线上 当指针变为双指的箭头时 按住鼠标左键拖动边框到欲建框架的位置 创建框架集 4 创建嵌套框架先在页面中创建一个框架 将插入点置于要创建嵌套的框架区域 再次执行创建框架的操作 返回 为框架添加内容 当窗口被分割为几个框架以后 每个框架都可以作为独立的网页进行编辑 也可以直接把某个已经存在的页面赋给一个框架 也可在框架中打开已有的HTML文档 具体操作步骤如下 1 在文档窗口中 将光标放置在某一框架内 2 选择 文件 在框架中打开 命令 打开一个已有文档 返回 保存框架和框架集 框架集文件和与之相关的框架文件必须先保存 才能在浏览器中预览整个框架网页内容 可以分别保存框架集页面或框架页面 也可以同时保存所有打开的框架文件和框架集页面 保存框架集文件 选择框架集 然后选择 文件 保存框架页 命令 保存框架中显示的文档 在框架中单击 然后选择 文件 保存框架 命令 保存所有文件 选择 文件 保存全部 命令 返回 框架和框架集的选择 在对框架或框架集进行操作之前 必须先选择框架或框架集 选择框架按住Alt键同时鼠标左键单击欲选择的框架 窗口 框架 启用框架控制面板 在面板中用鼠标左键单击欲选择的框架 选择框架集在框架面板中鼠标左键单击框架集的边框在文档窗口中鼠标左键单击框架的边框 返回 1 编辑框架对框架页面的编辑与对普通页面的编辑相同 包括输入文本 插入图像 添加表格和表单的方法都是相同的 此外 还有一种比较简便的编辑框架的方法 即先创建好整个框架集中各部分框架页面 然后将其在框架集中对应的窗口打开 编辑框架或框架集 2 调整框架的大小通常调整框架的大小的方法有两种 即通过拖动框架的边框或指定想要的确切设置来调整框架的大小 1 拖动框架的边框调整框架大小将光标放在要调整的框架边框上 当光标变为 形状时 按住鼠标左键 并拖动 2 通过属性面板可精确调整框架大小 编辑框架或框架集 3 拆分框架在框架网页中不但可以调整框架的大小 还可以设置网页中显示的框架的多少 在框架网页中可以任意地拆分框架 先将光标置于要拆分的框架窗口中 然后选择 修改 框架集 命令 弹出其子菜单 其中有4种拆分方式 先将光标置于要拆分的框架窗口中 然后单击 插入 面板 布局 选项卡中 框架 按钮右侧的黑色箭头 在弹出的菜单中选择一种拆分框架的方式 将框架窗口再划分 选定要拆分的框架集 按住键的同时 将鼠标指针放到框架的边框上 当鼠标指针呈双向箭头时 拖曳鼠标拆分框架 编辑框架或框架集 4 删除框架当加入了一条边线后 发现加错了 如何去掉这条线一种方法是修改HTML代码 把相关的语句删除 还有一种方法是用鼠标把要删除的边线拖曳到父框架的边框上 这条边线就被删除了 编辑框架或框架集 返回 设置框架和框架集属性 框架属性确定了框架集内各个框架的名称 源文件 边框的框架能否调整大小等 框架集属性确定框架的大小和框架之间的边框宽度和颜色等 在框架结构文档中 框架和框架集都有各自的属性设置面板 它们的属性应该分别进行设置 1 设置框架的属性在 框架 面板中单击某一框架区域 即可在页面中选择此框架 然后可在属性检查器中设置其属性 设置框架及框架集的属性 2 设置框架集的属性单击框架的边框 选择框架集 然后在属性检查器中设置此框架集的属性 框架集的属性检查器 设置框架及框架集的属性 返回 1 指定框架结构在框架集网页中 除了基本的HTML HEAD等标记符以外 主要包括框架集标记符FRAMESET 必须有结束标记符 和框架标记符FRAME 没有结束标记符 由于框架是按照行或列排列的 所以在建立框架结构时 使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架 利用HTML创建网页框架 2 框架的初始化框架初始化是指为各个框架指定初始显示的页面 此时应使用FRAME标记的src属性 将该属性的值指定为要在框架中显示的页面即可 利用HTML创建网页框架 3 框架的嵌套如果网页设计者需要创建一些复杂的框架集 即同时包含横向和纵向的框架 此时可以使用框架嵌套 框架嵌套是使用FRAMESET标记的嵌套来实现的 利用HTML创建网页框架 4 边框效果 1 框架边框的设置border属性可以用于设置边框的宽度 其值为像素数 2 框架滚动条的设置使用FRAME标记符的scrolling属性可以控制是否在框架内加入滚动条 其值可以取为yes no auto 3 设置边框的不可移动属性使用FRAME标记符的noresize属性 该属性不需要任何取值 即 4 设置框架空白FRAME标记符的marginwidth和marginheight属性可以控制框架边框与数据之间的距离 这个属性的取值都是像素数 利用HTML创建网页框架 5 指定超链接的目标框架控制超链接的目标文件在哪一个框架内显示的方法是在a标记符内使用target属性 格式为 超链接内容 利用HTML创建网页框架 返回 解决浏览器无法显示框架的问题 在Dreamweaver中允许指定在不支持框架的浏览器中编辑内容 选择 修改 框架页 编辑无框架内容 命令 然后在文档窗口中像处理普通文档一样输入或插入提示内容 课堂实践与练习 制作论坛框架 小结 框架提供将一个浏览器窗口划分为多个区域 每个区域都可以显示不同HTML文档的方法 利用框架