网页设计与制作案例教程-电子教案第13单元

7.4 使用框架布局网页 课程引导
本章主要学习如何使用框架对网页中的 文本、图像等对象进行合理的布局。 文本、图像等对象进行合理的布局。
知识技能目标
（1）掌握在网页中创建框架的操作方法。 掌握在网页中创建框架的操作方法。 （2）掌握为框架命名并导入框架源文件 的操作方法。 的操作方法。 （3）掌握如何保存框架集选择框架 方法之一：打开框架面板， 方法之一：打开框架面板，然后在框架 面板中单击要选择的框架即可选中单个框架。 面板中单击要选择的框架即可选中单个框架。 方法之二：按住“Alt”键，在框架内 方法之二：按住“Alt”键 部单击某个框架，即可选中单个框架。 部单击某个框架，即可选中单个框架。
7.4.2 框架的创建与设置
1．新建网页
（1）在站点“长沙世界之窗”下创建子 在站点“长沙世界之窗” 文件夹“07框架网页 框架网页” 07框架网页 框架网页” 文件夹“07框架网页”，在“07框架网页” 文件夹中创建一个网页文档07.html 07.html， 文件夹中创建一个网页文档07.html，保存 该网页。 该网页。 创建三个网页文件：title.html、 （2）创建三个网页文件：title.html、 navi.html、main.html。 navi.html、main.html。
（2）保存框架 选中整个框架，单击菜单【文件】 选中整个框架，单击菜单【文件】→ 保存全部】 先保存框架集文件， 【保存全部】，先保存框架集文件，然后依 次保存所有的框架文件。 次保存所有的框架文件。
如果只单独保存某一个框架， 如果只单独保存某一个框架，只需先选 中某个需要保存的框架，然后单击菜单【 中某个需要保存的框架，然后单击菜单【文 保存全部】 在弹出的“另存为” 件】→【保存全部】，在弹出的“另存为” 对话框中，选择合适的保存位置，输入合适 对话框中，选择合适的保存位置， 的文件名，然后单击【确定】按钮， 的文件名，然后单击【确定】按钮，即可保 存所选择的框架。 存所选择的框架。 对于包括3个框架的网页，保存时共有4 对于包括3个框架的网页，保存时共有4 个文件，一个是框架集文件， 个文件，一个是框架集文件，另外三个是框 架文件。 架文件。
2．显示框架边框和框架面板
（1）显示框架边框 8主窗口中 主窗口中， 在Dreamweaver 8主窗口中，单击菜单 查看】 可视化助理】 框架边框】 【查看】→【可视化助理】→【框架边框】， 使框架边框在文档窗口中可见。 使框架边框在文档窗口中可见。
（2）显示框架面板 8主窗口中 主窗口中， 在Dreamweaver 8主窗口中，单击菜单 窗口】 框架】 显示框架面板。 【窗口】→【框架】，显示框架面板。
（3）切换到“07.html”网页的编辑窗口， 切换到“07.html”网页的编辑窗口， 网页的编辑窗口 在左侧的导航栏中选中文字“旋转木马” 在左侧的导航栏中选中文字“旋转木马”， 在属性面板的“链接”栏右侧单击【 在属性面板的“链接”栏右侧单击【浏览文 件】按钮，在“选择文件”对话框中选择刚 按钮， 选择文件” 07_1.html”。 才创建的网页文档 “07_1.html”。然后 单击属性面板“目标”栏右侧的下拉列表， 单击属性面板“目标”栏右侧的下拉列表， 从中选择“mainFrame”打开方式 打开方式， 从中选择“mainFrame”打开方式，即在主 框架中打开链接网页。 框架中打开链接网页。
（2）设置框架集和框架的属性，调整各框 设置框架集和框架的属性， 架区域的大小。 架区域的大小。 （3）在站点中文件夹“07框架网页”下新 在站点中文件夹“07框架网页” 框架网页 建一个子文件夹“link”，在该文件夹中新 建一个子文件夹“link”， 建几个用于链接的网页，然后设置超级链接。 建几个用于链接的网页，然后设置超级链接。
3．创建框架
（1）显示框架的边框线。 显示框架的边框线。 插入”工具栏上，单击按钮， （2）在“插入”工具栏上，单击按钮， 在下拉菜单中单击菜单项【布局】 在下拉菜单中单击菜单项【布局】，切换到 “布局”插入工具栏。 布局”插入工具栏。
（3）单击“布局”插入工具栏中的【框 单击“布局”插入工具栏中的【 按钮，弹出下拉菜单， 架】按钮，弹出下拉菜单，单击该下拉菜单 中的菜单项【顶部和嵌套的左侧框架】 中的菜单项【顶部和嵌套的左侧框架】，弹 框架标签辅助功能属性”对话框， 出 “框架标签辅助功能属性”对话框，在 该对话框中为每一个框架指定一个标题， 该对话框中为每一个框架指定一个标题，然 后单击【确定】按钮， 后单击【确定】按钮，编辑窗口被划分成三 个区域，即三个框架。 个区域，即三个框架。
2．效果展示
课堂实践的框架网页07.html 浏览效果 课堂实践的框架网页 07.html浏览效果 07 如图7 69所示 所示。 如图7-69所示。
图7-69
课堂实践的框架网页的浏览效果
3．制作要点提示
（1）将框架上半部分的下边框设置为0， 将框架上半部分的下边框设置为0 将框架下半部分的上边框设置为0 将框架下半部分的上边框设置为0。 （2）各个框架的源文件网页必须设置居 中对齐，以保证整个框架在浏览时是居中对 中对齐， 齐。
5．分割框架和调整框架的大小
（1）显示框架边框 （2）显示框架面板 （3）分割框架 （4）调整框架的大小 （5）删除框架
6．保存框架集和框架
预览或者关闭包含有框架的网页文档时， 预览或者关闭包含有框架的网页文档时， 必须先对框架集文件和框架文件进行保存。 必须先对框架集文件和框架文件进行保存。 创建框架时， 创建框架时，默认的框架集文件名称是 UntitleFrameset-1、UntitleFramesetUntitleFramesetUntitleFrameset……， 2、……，默认的框架文件名称是 UntitleFrame- UntitleFrame……。 UntitleFrame-1、UntitleFrame-1、……。 显然，这样的命名是不合适，必须重新重名。 显然，这样的命名是不合适，必须重新重名。
（1）保存框架集 选中整个框架： 选中整个框架：在框架面板上单击外边框 选中整个框架。 选中整个框架。 在 Dreamweaver 8 主 窗 口 中 ， 单 击 菜 单 文件】 保存框架页】或者【 【文件】→【保存框架页】或者【框架集另 存为】或者【保存全部】 在弹出的“ 存为】或者【保存全部】，在弹出的“另存 为”对话框中，选择合适的保存位置，输入 对话框中，选择合适的保存位置， 合适的文件名，然后单击【确定】按钮， 合适的文件名，然后单击【确定】按钮，即 可保存框架集文件。 可保存框架集文件。
7.4.1 框架的概述
1．框架的概念
如果想将一个页面拓展为多个页面， 如果想将一个页面拓展为多个页面，可 以在页面中创建一个框架。 以在页面中创建一个框架。
框架可以把浏览器窗口划分为若干个区 每个区域可以分别显示不同的网页。 域，每个区域可以分别显示不同的网页。使 用框架可以非常方便地完成导航工作， 用框架可以非常方便地完成导航工作，一般 情况下， 情况下，用户需要不停地在文档内容和导航 内容之间进行切换。如果利用框架结构， 内容之间进行切换。如果利用框架结构，把 导航内容固定在页面的顶部或者左边或者右 边，用户可以直接通过导航条切换到想要浏 览的页面， 览的页面，而且各个框架之间不存在相互干 扰问题。 扰问题。
（2）顶部框架的源文件为 top07.html”，该网页中插入了一张2 “top07.html”，该网页中插入了一张2行1 列的表格，第一行输入一行文字， 列的表格，第一行输入一行文字，第二行中 插入一张1行10列的嵌套表格，该表格每个 插入一张1 10列的嵌套表格， 列的嵌套表格 单元格中输入文字作为超级链接。 单元格中输入文字作为超级链接。 （3）底部框架的源文件为 main07.html”， “main07.html”，该网页文档原先已制作 只需设置框架的源文件就可以。 好，只需设置框架的源文件就可以。
2．框架的特点
框架主要包括两个部分：一个是框架集， 框架主要包括两个部分：一个是框架集， 另一个就是框架。框架集的HTML文件描述的 另一个就是框架。框架集的HTML文件描述的 HTML 是框架的结构信息，框架集定义了框架数、 是框架的结构信息，框架集定义了框架数、 框架的尺寸、载入到框架的网页等， 框架的尺寸、载入到框架的网页等，而框架 是指在网页中定义的一个显示区域。 是指在网页中定义的一个显示区域。
图7-48
框架网页07.html的浏览效果 的浏览效果 框架网页
本章操作任务
（1）在站点“长沙世界之窗”下创建子文 在站点“长沙世界之窗” 件夹“07框架网页” 件夹“07框架网页”，在“07框架网页”文 框架网页 07框架网页” 框架网页 件夹中创建框架集文件07.html和三个网页 件夹中创建框架集文件07.html和三个网页 07.html 文档title.html、navi.html、main.html。 文档title.html、navi.html、main.html。 title.html
★ 课外拓展实践 ★
在“湖铁职院学院网站”站点文件夹 湖铁职院学院网站” 07框架网页 框架网页” “07框架网页”中创建网页文档 07.html”，该网页采用了“ “07.html”，该网页采用了“顶部和嵌套 左侧框架”结构。 左侧框架”结构。
（4）掌握设置框架集属性和框架属性的 操作方法。 操作方法。 （5）掌握编辑框架内容的操作方法。 掌握编辑框架内容的操作方法。 （6）了解设置超级链接的操作方法。 了解设置超级链接的操作方法。
网页浏览效果展示
框架网页07.html的浏览效果如图所示。 框架网页07.html的浏览效果如图所示。 07.html的浏览效果如图所示
7．设置框架集和框架的属性
（1）设置框架集属性 （2）设置框架属性
8．导入框架源文件
（1）选中上方的框架，则在框架属性面 选中上方的框架， 板中的“源文件” 板中的“源文件”文本框中显示的是框架文 件的源文件地址。 件的源文件地址。 （2）单击“源文件”文本框右边打开按 单击“源文件” 在弹出的“选择HTML文件” HTML文件 钮，在弹出的“选择HTML文件”对话框中选 择已制作好的网页文件。 择已制作好的网页文件。 （3）用同样的方法在另外两个框架中导 入已制作好的网页文件。 入已制作好的网页文件。