网页设计与制作8.ppt

通过本章学习 应该掌握以下内容 认识框架网页创建框架网页的方法编辑框架网页的方法设置框架属性的方法 第8章利用框架技术制作网页 8 1认识框架网页 框架网页是一种特殊的HTML网页 它可将浏览器窗口分成不同的区域 称为框架区域 每个区域都可以显示不同的网页 在框架网页中 用来分隔网页的窗格称为框架 每个框架包括框架高度 框架宽度 滚动条和框架边框 此外还可指定框架的内边距 框架与网页正文之间的距离 1 只要单击某一个框架区域内的超链接 其指向的网页就会在另一个框架区域中显示 而不必将整个浏览器窗口中的内容更换一遍 2 固定网页中的某些内容 3 并不是所有的浏览器都能显示框架网页 这也是框架网页的一个局限 1 框架网页的特点 2 框架网页的结构 根据框架分布的不同和各框架作用的不同 框架网页被分为多种类型 常用到的框架结构有 左侧框架 右侧框架 顶部框架 底部框架 上方和下方框架以及各种嵌套框架结构 在DreamweaverMX中创建框架的具体操作步骤如下 1 选择主菜单中的 文件 新建 命令 打开一个新文档窗 2 将插入面板切换到 框架 类 插入面板如图所示 8 2利用DreamweaverMX处理框架 8 2 1创建框架网页 1 建立框架 3 执行以下操作之一 即可创建框架 选择 插入 框架 命令 从弹出的子菜单中选择任意一个选项 选择 修改 框架页 命令 从弹出的子菜单中选择任意一个选项 单击插入 框架 面板上的任一种插入框架图标按钮 2 建立嵌套的框架组 一个框架组嵌套在另一个框架组内称之为嵌套框架组 使用嵌套框架组可以为一个文档创建多个框架 要创建嵌套的框架组 可执行以下操作操作步骤 1 将光标放到与插入嵌套框架组的框架中 2 执行以下操作之一 即可创建嵌套的框架组 选择 插入 框架 命令 从弹出的子菜单中选择任意一个选项 选择 修改 框架页 命令 从弹出的子菜单中选择任意一个选项 单击插入 框架 面板中的插入框架图标按钮 1 选择整个框架要选择整个框架可执行以下操作之一 将鼠标指针移到整个边框位置的同时 按住Alt键 当鼠标指针变为垂直箭头 或水平箭头 时 单击边框即可选中整个框架 如果当前选择的是一个子框架 需要重新选择整个框架 可以将鼠标指针移到第一次分割框架的边框位置 当鼠标指针变为垂直箭头 或水平箭头 时 单击边框即可选中整个框架组 除了上述方法之外 选择框架还可以通过 框架 面板来完成 3 选择框架 2 选择子框架在文档窗口中按住Alt键 然后用鼠标单击欲选择的子框架 文档窗口中该子框架的周围被虚线包围 表示它已经被选中 同时在状态栏上加黑显示标记符 同样也可以通过 框架 面板来选择子框架 只要在框架面板中单击相应的子框架即可 4 删除框架 将光标放在框架的边框上 当光标变成垂直箭头 或水平箭头 时 按住鼠标左键 将框架的边框拖出父框架或页面之外 即可将这个框架删除 8 2 2编辑框架网页 框架创建好以后 就可以对框架进行编辑了 每一个框架里都是一个文档 可以直接添加内容 也可以在框架内打开已经存在的文档 演示编辑框架网页 8 2 3保存框架网页 每一个框架都包含一个文档 因此一个框架集会包含多个文档 在保存文档的时候 不能只简单地保存一个文档 要将整个网页文档都保存下来 8 2 4框架属性及框架组属性设置 1 框架属性 利用框架属性面板可以查看和设置框架的属性 如为框架命名 设置框架的边框及颜色等 首先选择 窗口 其它 框架 命令 或按快捷键 Shift F2 打开 框架 面板 然后在框架面板中选中框架 此时属性面板所显示的即为框架的属性面板 如图所示 在框架属性面板中设定框架的属性 新创建的框架组默认属性值为 无边框 无滚动条 在浏览器中无法看到创建的框架 要改变这些属性 需在属性面板中修改相应的选项 首先单击框架的边框 选中框架组 此时属性面板中将自动切换显示框架组的属性 如图所示 在框架组属性面板中设定框架组的属性 2 框架组属性 3 设置框架的大小 调整框架尺寸可以拖动框架的边框来调整 但在需要精确定义框架尺寸的大小时 可以在属性面板中进行框架尺寸的设置 设置框架尺寸的步骤如下 1 单击框架边界 选定一个框架组 2 选择 窗口 属性 命令 打开框架组属性面板 3 单击框架组属性面板右侧图框中的区域 选定框架组中的行或列 4 在 值 文本框中输入调整框架尺寸的数值 然后在 单位 下拉列表框中选择一种度量单位 4 设置框架和框架组的边框 1 设置框架边框的属性设置框架边框属性的步骤如下 在文档窗口按住Alt键 然后单击一个框架 或通过 框架 面板来选择一个框架 在框架属性面板上的 边框 下拉列表项中选择任意一个选项 在 边框颜色 文本框中设置当前框架的边框颜色 也可单击其后面的按钮 打开颜色选择面板来选择所需颜色 2 设置框架组边框的属性 在文档窗口单击一个框架边框 或通过 框架 面板来选择一个框架组 在框架组属性面板上的 边框 下拉列表项中选择任意一个选项 用于控制当前框架组的边框显示 在 边框颜色 文本框中设置当前框架组中所有框架的边框颜色 但是这一设置将被单个框架的边框颜色所覆盖 在 边框宽度 文本框中设置当前框架组中所有框架的边框宽度 如输入为0 表示不显示边框 8 2 5设置框架中的链接目标 在框架网页中建立超链接的操作步骤如下 1 选中要创建超链接的文本 或图像 打开其属性面板 2 在 链接 文本框中输入要链接文件的URL地址 或单击按钮 选取要链接的文件 3 单击 目标 下拉列表 选择一种框架名称 链接文件将在该框架中打开 4 保存框架网页 浏览页面 8 3利用HTML创建网页框架 8 3 1利用HTML创建框架网页 利用HTML创建框架网页时首先要指定框架结构 即必须有一个网页用于指定整个浏览器窗口如何划分 也就是所谓的框架集网页 在框架集网页中不包含任何可显示的内容 而只是包含如何组织各个框架的信息和框架中的初始页面信息 1 指定框架的结构 在框架集网页中 除了基本的HTML HEAD等标记符以外 主要包括框架集标记符FRAMESET 必须有结束标记符 和框架标记符FRAME 没有结束标记符 使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架 根据rows属性或cols属性的取值 可以确定框架结构中包含多少框架 相应也就必须设置对应个数的FRAME标记符 8 3 2框架结构的定义 rows属性和cols属性的取值包括三种类型 一是直接指定像素数 二是指定百分数 即相对于浏览器窗口大小的百分数 三是使用n 其中n是 1的整数 指定相对大小 指定属性值时 数值之间用逗号分开并且不能有空格 根据值的个数和设置可以确定框架数目和位置 当属性值为n时 表示框架的大小为由前两种方法 即像素数或百分数 指定框架大小后浏览器窗口的剩余部分 如果取值包括多个n 那么n 表示框架之间的比例关系 如果网页设计者需要创建一些复杂的框架集 即同时包含横向和纵向的框架 此时可以使用框架嵌套 框架嵌套时只要在要使用FRAME标记时再使用FRAMESET标记一个框架集即可 2 框架的嵌套 框架初始化是指为各个框架指定初始显示的页面 此时应使用FRAME标记的src属性 将该属性的值指定为要在框架中显示的页面即可 指定页面时可以使用相对路径 也可以使用绝对路径 8 3 3框架属性设置 1 框架的初始化 1 框架边框的设置border属性可以用于设置边框的宽度 其值为像素数 使用FRAME标记符的frameborder属性可以控制是否显示框架边框 该属性的取值为1或0 如果取值为1 表示生成3D边框 此为默认设置 如果取值为0 如frameborder 0 则不显示边框 只有将所有相邻框架的边框都设置为0 才能隐藏边框 2 边框效果 2 框架滚动条的设置使用FRAME标记符的scrolling属性可以控制是否在框架内加入滚动条 其值可以取为yes no auto yes表示强制加垂直滚动条和水平滚动条 no表示框架内不加滚动条 auto表示需要时加滚动条 默认设置 一般情况下采用默认设置即可 3 设置边框的不可移动属性一般而言 浏览者可以使用鼠标移动框架的边框 以便查看内容 但很多时候为了保持页面的整体效果 需要将各框架的位置和大小固定 此时应使用FRAME标记符的noresize属性 该属性不需要任何取值 即 4 设置框架空白FRAME标记符的framespacing属性可以控制框架边框与数据之间的距离 这个属性的取值都是像素数 如上例中 framespacing 0 表示框架边框与数据之间的距离为零 FRAME标记符的marginwidth属性可以控制框架内容和框架左右边框之间的距离 而marginheight属性则可以控制框架内容和框架上下边框之间的距离 这两个属性的取值都是像素数 总结 的6个属性 cols 25 rows framespacing 10 frameborder yes border 10 bordercolor 0000FF 的8个属性 src menu htm name Left frameborder yes scrolling yes noresizemarginwidth 10 marginheight 10 bordercolor 0000FF 所谓目标框架 就是指超链接的目标文件要在哪个框架中显示 控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性 格式为 超链接