第5章网页框架的处理 通过本章学习,应该掌握以下内容: 1.认识框架网页 2.创建框架网页的方法 3.编辑框架网页的方法 4.设置框架属性的方法
通过本章学习，应该掌握以下内容： 1. 认识框架网页 2. 创建框架网页的方法 3. 编辑框架网页的方法 4. 设置框架属性的方法 第5章 网页框架的处理
51利用 FrontPage2002处理框架 51.1创建框架网页 1.认识框架网页 框架网页是种特殊的HTML网页,它可将浏览器窗口分成不 同的区域,称为框架区域。每个区域都可以显示不同的网页 (1)框架网页的特点 ①只要单击某一个框架区域内的超链接,其指向的网页就会在另 个框架区域中显示,而不必将整个浏览器窗口中的内容更换一遍 ②固定网页中的某些内容。 ③并不是所有的浏览器都能显示框架网页,这也是框架网页的一个 局限。 (2)框架网页的种类 根据框架分布的不同和各框架作用的不同,框架网页被分为多种 类型。使用 Frontpage制作网页时,常用到的框架网页是:标题、 标题页脚和目录、垂直拆分、横幅和目录、脚注、目录、嵌套式层 次结构、水平拆分、页脚和自顶向下的层次结构
5.1 利用FrontPage 2002处理框架 5.1.1 创建框架网页 1．认识框架网页 框架网页是—种特殊的HTML网页，它可将浏览器窗口分成不 同的区域，称为框架区域。每个区域都可以显示不同的网页. （1）框架网页的特点 ① 只要单击某一个框架区域内的超链接，其指向的网页就会在另 一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。 ② 固定网页中的某些内容。 ③并不是所有的浏览器都能显示框架网页，这也是框架网页的一个 局限。 （2）框架网页的种类 根据框架分布的不同和各框架作用的不同，框架网页被分为多种 类型。使用FrontPage制作网页时，常用到的框架网页是：标题、 标题页脚和目录、垂直拆分、横幅和目录、脚注、目录、嵌套式层 次结构、水平拆分、页脚和自顶向下的层次结构
2.创建框架网页 ①选择“文件”|“新建”|“网页或站点”命令,打开“新建网页或 站点”窗格; ②单击“网页模板”超级链接,打开“网页模板”对话框; ③单击“框架网页”选项卡,显示十种网页模板,选择其中任一种 形式,在对话框右边会出现该模板形式的说明,以及模板预览。选 择“嵌套式”层次结构,单击“确定”按钮,出现初始框架网页; ④单击每个框架中的“新建网页”按钮,各编辑区变成编辑状态, 可以依次编辑各个网页。单击每一个框架区域中的“设置初始网页” 按钮将打开一个对话框,可以在该对话框中选择一个网页作为框架 网页最初显示的网页,并显示在框架区域中。 51.2编辑框架网页 编辑框架网页与编辑普通的网页相同,也可以在框架网页中添加 和格式化文本、设置网页的背景颜色和背景图片、在网页中插入图 片和添加组件,还可以调整框架的大小等
2．创建框架网页 ① 选择“文件”| “新建”| “网页或站点”命令，打开“新建网页或 站点”窗格； ② 单击“网页模板”超级链接，打开“网页模板”对话框； ③ 单击“框架网页”选项卡，显示十种网页模板，选择其中任一种 形式，在对话框右边会出现该模板形式的说明，以及模板预览。选 择“嵌套式”层次结构，单击“确定”按钮，出现初始框架网页； ④ 单击每个框架中的“新建网页”按钮，各编辑区变成编辑状态， 可以依次编辑各个网页。单击每一个框架区域中的“设置初始网页” 按钮将打开一个对话框，可以在该对话框中选择一个网页作为框架 网页最初显示的网页，并显示在框架区域中。 5.1.2 编辑框架网页 编辑框架网页与编辑普通的网页相同，也可以在框架网页中添加 和格式化文本、设置网页的背景颜色和背景图片、在网页中插入图 片和添加组件，还可以调整框架的大小等
1.在框架网页中添加和格式化文本 在框架网页中添加和格式化文本与在普通的网页中添加和格式化 文本相同。 2.调整框架的大小 在输入文本时,可能输入的文本内容比较多,但框架又比较小, 所以输入文本时会有一部分文本不能显示,这样在查看文本时就有 可能看不到文本的整体效果,这时可以调整框架的大小来显示文本 通常调整框架的大小的方法有两种,即通过拖动框架的边框或指 定想要的确切设置来调整框架的大小。 1)拖动框架的边框调整框架大小 将光标放在要调整的框架边框上,当光标变为“1”形状时,按 住鼠标左键,并向下拖动。按此方法调整上图中右边两个框架的大 小,调整后的框架网页如图57所示。 (2)精确设置框架大小 ①单击框架,将光标置于框架内,点击鼠标右键,从弹出的快捷菜单 中选择“框架属性”命令,弹出“框架属性”对话框; ②在“框架大小”选项组中设置框架大小为固定像素数后,再指定框 架的宽度和行高,单击“确定”按钮
1．在框架网页中添加和格式化文本 在框架网页中添加和格式化文本与在普通的网页中添加和格式化 文本相同。 2．调整框架的大小 在输入文本时，可能输入的文本内容比较多，但框架又比较小， 所以输入文本时会有一部分文本不能显示，这样在查看文本时就有 可能看不到文本的整体效果，这时可以调整框架的大小来显示文本。 通常调整框架的大小的方法有两种，即通过拖动框架的边框或指 定想要的确切设置来调整框架的大小。 （1）拖动框架的边框调整框架大小 将光标放在要调整的框架边框上，当光标变为“”形状时，按 住鼠标左键，并向下拖动。按此方法调整上图中右边两个框架的大 小，调整后的框架网页如图5.7所示。 （2）精确设置框架大小 ① 单击框架，将光标置于框架内，点击鼠标右键，从弹出的快捷菜单 中选择“框架属性”命令，弹出“框架属性”对话框； ② 在“框架大小”选项组中设置框架大小为固定像素数后，再指定框 架的宽度和行高，单击“确定”按钮
3.拆分框架 在框架网页中不但可以调整框架的大小,还可以设置网页中显示 的框架的多少。在框架网页中可以任意地拆分框架。 (1)拖动边框拆分框架 将光标放在要拆分的框架边框上,按住“Ctr健,同时按住 鼠标左键拖动框架边框,拖出一段距离后放开鼠标左键和“Ctr” 建,出现一个框架。 (2)将框架平均分成两行或两列 将光标放在要拆分的框架边框内,选择“框架”拆分框架”命 令弹出“拆分框架”对话框。选择“拆分为行”或“拆分为列”, 单击“确定”按钮。 4.删除框架 ①将光标放在要删除的框架中; ②选择“框架”|“删除框架”命令 注意:从框架网页中删除框架时,该框架中显示的网页也会被 删除,但是框架网页中其余的内容并没有被删除。若框架网页仅含 有一个框架,就不能删除该框架
3．拆分框架 在框架网页中不但可以调整框架的大小，还可以设置网页中显示 的框架的多少。在框架网页中可以任意地拆分框架。 （1）拖动边框拆分框架 将光标放在要拆分的框架边框上，按住“Ctrl”健，同时按住 鼠标左键拖动框架边框，拖出一段距离后放开鼠标左键和“Ctrl” 键，出现一个框架。 （2）将框架平均分成两行或两列 将光标放在要拆分的框架边框内，选择“框架”|“拆分框架”命 令弹出“拆分框架”对话框。选择 “拆分为行”或“拆分为列” ， 单击“确定”按钮。 4．删除框架 ① 将光标放在要删除的框架中； ② 选择“框架”| “删除框架”命令。 注意：从框架网页中删除框架时，该框架中显示的网页也会被 删除，但是框架网页中其余的内容并没有被删除。若框架网页仅含 有一个框架，就不能删除该框架
5.为框架网页设置背景颜色和背景图片 (1)设置框架网页的背景颜色 ①将光标放在要设置背景颜色的框架中; ②单击鼠标右键,从弹出的快捷菜单中选择“网页属性”命令,打开 “网页属性”对话框; ③单击“背景”标签,打开“背景”选项卡; ④单击“背景”右侧的按钮,从弹出的颜色面板中选择背景颜色; ⑤单击“确定”按钮。 (2)设置框架网页的背景图片 设置框架网页的背景图片与设置框架网页的背景颜色类似。 51.3设置框架网页属性 设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和 间距以及设置框架中滚动条的显示和隐藏
5．为框架网页设置背景颜色和背景图片 （1）设置框架网页的背景颜色 ① 将光标放在要设置背景颜色的框架中； ② 单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，打开 “网页属性”对话框； ③ 单击“背景”标签，打开“背景”选项卡； ④ 单击“背景”右侧的按钮，从弹出的颜色面板中选择背景颜色； ⑤ 单击“确定”按钮。 （2）设置框架网页的背景图片 设置框架网页的背景图片与设置框架网页的背景颜色类似。 5.1.3 设置框架网页属性 设置框架的属性包括设置边框的隐藏或显示、设置框架的边距和 间距以及设置框架中滚动条的显示和隐藏
显示和隐藏框架边框 可以根据所需的网页外观来选择显示或隐藏框架网页的框架 周围的边框。 显示和隐藏边框的操作步骤如下: ①将光标放在任意一个框架中; ②单击鼠标右键,从弹出的快捷菜单中选择“框架属性”命令,弹 出“框架属性”对话框;单击“框架网页”按钮,打开“网页属 性”对话框; ③选择或禁用“显示边框”复选框,就显示和隐藏框架边框; ④单击“确定”按钮,回到“框架属性”对话框; ⑤单击“确定”按钮。 2.显示和隐藏框架滚动条 在“框架属性”对话框中,从“显示滚动条”的下拉列表中选择 “显示”或“不显示”或者“需要时显示
1．显示和隐藏框架边框 可以根据所需的网页外观来选择显示或隐藏框架网页的框架 周围的边框。 显示和隐藏边框的操作步骤如下： ① 将光标放在任意一个框架中； ② 单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，弹 出“框架属性”对话框；单击“框架网页”按钮，打开“网页属 性”对话框； ③ 选择或禁用“显示边框”复选框，就显示和隐藏框架边框； ④ 单击“确定”按钮，回到“框架属性”对话框； ⑤ 单击“确定”按钮。 2．显示和隐藏框架滚动条 在“框架属性”对话框中，从“显示滚动条”的下拉列表中选择 “显示”或“不显示”或者“需要时显示”
514在框架网页中设置超链接 在框架组中设置超级链接后,单击超级链接,该链接所指向的 网页通常会在另一个框架中打开,即会在目标框架中打开。在使 用 FrontPage2002的框架网页模板所创建的框架网页下,目标框架 已经设置好了。在框架组中设置超链接与在普通的网页中设置超 链接相同,也可以设置文本超链接和图片超链接。 在框架中设置文本超链接 其操作步骤如下: ①在框架中选择要设置超链接的文本,单击“常用工具栏”中的“插 入超链接”按钮,弹出“插入超链接”对话框; ②选择要链接的文件,单击“目标框架”按钮,弹出“目标框架” 对话框 ③选择目标框架,单击“确定”按钮,回到“插入超链接”对话框; ④单击“确定”按钮,则超链接设置完成。 2.在框架中设置图片超链接 在框架中设置图片超级链接与在框架中设置文本超级链接基本相 同
5.1.4 在框架网页中设置超链接 在框架组中设置超级链接后，单击超级链接，该链接所指向的 网页通常会在另一个框架中打开，即会在目标框架中打开。在使 用FrontPage 2002的框架网页模板所创建的框架网页下，目标框架 已经设置好了。在框架组中设置超链接与在普通的网页中设置超 链接相同，也可以设置文本超链接和图片超链接。 1．在框架中设置文本超链接 其操作步骤如下： ① 在框架中选择要设置超链接的文本，单击“常用工具栏”中的“插 入超链接”按钮，弹出“插入超链接”对话框； ② 选择要链接的文件，单击“目标框架”按钮，弹出 “目标框架” 对话框； ③ 选择目标框架，单击“确定”按钮，回到“插入超链接”对话框； ④ 单击“确定”按钮，则超链接设置完成。 2．在框架中设置图片超链接 在框架中设置图片超级链接与在框架中设置文本超级链接基本相 同
51.5.保存框架网页 创建和编辑完框架后就可以对框架进行保存了。保存框架与保 存普通的页面方法相同 52其他处理网页框架的方法 521利用 Dreamweaver4.0处理框架网页 1.建立框架 Dreamweaver40在对象面板“ Frames(框架)”类中提供了 许多组框架组,使用者点击鼠标就可以创建框架。 2.编辑框架 框架创建好以后,就可以对框架进行编辑了。每一个框架里都 是一个文档,可以直接添加内容,也可以在框架内打开已经存在的 文档。 3.保存框架 每一个框架都包含一个文档,因此一个框架集会包含多个文档 在保存文档的时候,不能只简单地保存一个文档,要将整个网页文 档都保存下来。 4.框架属性及框架集属性设置 使用框架属性面板可以查看和设置框架的属性
5.1.5．保存框架网页 创建和编辑完框架后就可以对框架进行保存了。保存框架与保 存普通的页面方法相同。 5.2 其他处理网页框架的方法 5.2.1 利用Dreamweaver 4.0处理框架网页 1. 建立框架 Dreamweaver 4.0在对象面板“Frames（框架）”类中提供了 许多组框架组，使用者点击鼠标就可以创建框架。 2．编辑框架 框架创建好以后，就可以对框架进行编辑了。每一个框架里都 是一个文档，可以直接添加内容，也可以在框架内打开已经存在的 文档。 3．保存框架 每一个框架都包含一个文档，因此一个框架集会包含多个文档。 在保存文档的时候，不能只简单地保存一个文档，要将整个网页文 档都保存下来。 4．框架属性及框架集属性设置 使用框架属性面板可以查看和设置框架的属性
522利用HTML创建网页框架 1。指定框架结构 在框架集网页中,除了基本的HTML、HEAD等标记符以外, 主要包括框架集标记符 FRAMESET(必须有结束标记符)和框架标记符 FRAME(没有结束标记符)。 由于框架是按照行或列排列的,所以在建立框架结构时,使用 FRAMESET标记符的rows属性或cols属性分别可以构造出横向分 隔框架和纵向分隔框架。 2.框架的嵌套 如果网页设计者需要创建一些复杂的框架集,即同时包含横向 和纵向的框架,此时可以使用框架嵌套。框架嵌套时只要在要使 用 FRAME标记时再使用 FRAMESET标记一个框架集即可。 3.框架的初始化 框架初始化是指为各个框架指定初始显示的页面,此时应使用 FRAME标记的sre属性,将该属性的值指定为要在框架中显示的 页面即可
5.2.2利用HTML创建网页框架 1。指定框架结构 在框架集网页中，除了基本的HTML、HEAD等标记符以外， 主要包括框架集标记符FRAMESET（必须有结束标记符）和框架标记符FRAME（没有结束标记符）。 由于框架是按照行或列排列的，所以在建立框架结构时，使用 FRAMESET标记符的rows属性或cols属性分别可以构造出横向分 隔框架和纵向分隔框架。 2．框架的嵌套 如果网页设计者需要创建一些复杂的框架集，即同时包含横向 和纵向的框架，此时可以使用框架嵌套。框架嵌套时只要在要使 用FRAME标记时再使用FRAMESET标记一个框架集即可。 3．框架的初始化 框架初始化是指为各个框架指定初始显示的页面，此时应使用 FRAME标记的src属性，将该属性的值指定为要在框架中显示的 页面即可