21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第八章 利用框架技术制作网页

第8章利用框架技术制作网页 通过本章学习,应该掌握以下内容: 1.认识框架网页 2.创建框架网页的方法 3.编辑框架网页的方法 4.设置框架属性的方法

通过本章学习，应该掌握以下内容： 1. 认识框架网页 2. 创建框架网页的方法 3. 编辑框架网页的方法 4. 设置框架属性的方法 第8章 利用框架技术制作网页

81认识框架网页 框架网页是一种特殊的HTML网页,它可将浏 览器窗口分成不同的区域,称为框架区域。每个区域 都可以显示不同的网页。 在框架网页中,用来分隔网页的窗格称为框架 每个框架包括框架高度、框架宽度、滚动条和框架边 框,此外还可指定框架的内边距(框架与网页正文之 间的距离)

8.1 认识框架网页 框架网页是—种特殊的HTML网页，它可将浏 览器窗口分成不同的区域，称为框架区域。每个区域 都可以显示不同的网页。 在框架网页中，用来分隔网页的窗格称为框架。 每个框架包括框架高度、框架宽度、滚动条和框架边 框，此外还可指定框架的内边距（框架与网页正文之 间的距离）

1.框架网页的特点 (1)只要单击某一个框架区域内的超链接,其指 向的网页就会在另一个框架区域中显示,而不必将整 个浏览器窗口中的内容更换一遍。 (2)固定网页中的某些内容。 (3)并不是所有的浏览器都能显示框架网页,这 也是框架网页的一个局限

（1）只要单击某一个框架区域内的超链接，其指 向的网页就会在另一个框架区域中显示，而不必将整 个浏览器窗口中的内容更换一遍。 （2）固定网页中的某些内容。 （3）并不是所有的浏览器都能显示框架网页，这 也是框架网页的一个局限。 1．框架网页的特点

2.框架网页的结构 根据框架分布的不同和各框架作用的不同,框 架网页被分为多种类型。常用到的框架结构有:左 侧框架、右侧框架、顶部框架、底部框架、上方和 下方框架以及各种嵌套框架结构

2．框架网页的结构 根据框架分布的不同和各框架作用的不同，框 架网页被分为多种类型。常用到的框架结构有：左 侧框架、右侧框架、顶部框架、底部框架、上方和 下方框架以及各种嵌套框架结构

82利用 Dreamweaver mx处理框架 821创建框架网页 1.建立框架 在 Dreamweaver mX中创建框架的具体操作步骤 如下: (1)选择主菜单中的“文件”|“新建”命令,打开 个新文档窗。 (2)将插入面板切换到“框架”类,插入面板如图所 示 图插入「常用布局文本表格框架表单模板字符媒体文件头脚本AsP应用程序 口团日口口巴囗团目旧团|emhm

在Dreamweaver MX中创建框架的具体操作步骤 如下： （1）选择主菜单中的“文件”|“新建”命令，打开一 个新文档窗。 （2）将插入面板切换到“框架”类，插入面板如图所 示。 8.2 利用Dreamweaver MX处理框架 8.2.1 创建框架网页 1. 建立框架

(3)执行以下操作之一,即可创建框架 选择“插入”“框架”命令,从弹出的子菜单中选 择任意一个选项。 选择“修改”“框架页”命令,从弹出的子菜单中 选择任意一个选项 单击插入“框架”面板上的任一种插入框架图标按 钮

（3）执行以下操作之一，即可创建框架。 • 选择“插入”|“框架”命令，从弹出的子菜单中选 择任意一个选项。 • 选择“修改”|“框架页”命令，从弹出的子菜单中 选择任意一个选项。 • 单击插入“框架”面板上的任一种插入框架图标按 钮

2.建立嵌套的框架组 一个框架组嵌套在另一个框架组内称之为嵌套框架 组,使用嵌套框架组可以为一个文档创建多个框架 要创建嵌套的框架组,可执行以下操作操作步骤: (1)将光标放到与插入嵌套框架组的框架中。 (2)执行以下操作之一,即可创建嵌套的框架组。 选择“插入”“框架”命令,从弹出的子菜单中选 择任意一个选项。 选择“修改”|“框架页”命令,从弹出的子菜单中 选择任意一个选项。 单击插入“框架”面板中的插入框架图标按钮

2．建立嵌套的框架组 一个框架组嵌套在另一个框架组内称之为嵌套框架 组，使用嵌套框架组可以为一个文档创建多个框架。 要创建嵌套的框架组，可执行以下操作操作步骤： （1）将光标放到与插入嵌套框架组的框架中。 （2）执行以下操作之一，即可创建嵌套的框架组。 • 选择“插入”|“框架”命令，从弹出的子菜单中选 择任意一个选项。 • 选择“修改”|“框架页”命令，从弹出的子菜单中 选择任意一个选项。 • 单击插入“框架”面板中的插入框架图标按钮

3.选择框架 (1)选择整个框架 要选择整个框架可执行以下操作之 ①将鼠标指针移到整个边框位置的同时,按住A1t键, 当鼠标指针变为垂直箭头(或水平箭头)时,单击边 框即可选中整个框架。 ②如果当前选择的是一个子框架,需要重新选择整个 框架,可以将鼠标指针移到第一次分割框架的边框位 置,当鼠标指针变为垂直箭头(或水平箭头)时,单 击边框即可选中整个框架组。 ③除了上述方法之外,选择框架还可以通过“框架” 面板来完成

（1）选择整个框架 要选择整个框架可执行以下操作之一： ① 将鼠标指针移到整个边框位置的同时，按住Alt键， 当鼠标指针变为垂直箭头（或水平箭头）时，单击边 框即可选中整个框架。 ② 如果当前选择的是一个子框架，需要重新选择整个 框架，可以将鼠标指针移到第一次分割框架的边框位 置，当鼠标指针变为垂直箭头（或水平箭头）时，单 击边框即可选中整个框架组。 ③ 除了上述方法之外，选择框架还可以通过“框架” 面板来完成。 3．选择框架

(2)选择子框架 在文档窗口中按住AIt键,然后用鼠标单击欲选择 的子框架。文档窗口中该子框架的周围被虚线包围, 表示它已经被选中,同时在状态栏上加黑显示标记符 。 同样也可以通过“框架”面板来选择子框架。只 要在框架面板中单击相应的子框架即可, 4.删除框架 将光标放在框架的边框上,当光标变成垂直箭头 (或水平箭头)时,按住鼠标左键,将框架的边框拖 出父框架或页面之外,即可将这个框架删除

（2）选择子框架 在文档窗口中按住Alt键，然后用鼠标单击欲选择 的子框架。文档窗口中该子框架的周围被虚线包围， 表示它已经被选中，同时在状态栏上加黑显示标记符 。 同样也可以通过“框架”面板来选择子框架。只 要在框架面板中单击相应的子框架即可， 4．删除框架 将光标放在框架的边框上，当光标变成垂直箭头 （或水平箭头）时，按住鼠标左键，将框架的边框拖 出父框架或页面之外，即可将这个框架删除

8.22编辑框架网页 框架创建好以后,就可以对框架进行编辑了。每 一个框架里都是一个文档,可以直接添加内容,也可 以在框架内打开已经存在的文档。 演示编辑框架网页

8.2.2 编辑框架网页 框架创建好以后，就可以对框架进行编辑了。每 一个框架里都是一个文档，可以直接添加内容，也可 以在框架内打开已经存在的文档。 演示编辑框架网页