网页制作-框架及其应用PPT课件

1、8.1框架的基本操作框架的基本操作8.2 框架和框架集的选择与属性设置框架和框架集的选择与属性设置 8.2.1 框架和框架集的选择框架和框架集的选择 8.2.2 框架和框架集的属性设置框架和框架集的属性设置8.3 框架和框架集的保存框架和框架集的保存8.4 框架与超级链接的应用实例框架与超级链接的应用实例第第8章章 框架及其应用框架及其应用 8.1 框架的基本操作框架的基本操作 1 框架的概述框架的概述 利用框架设计的网页就是把页面划分成相对独立的若干利用框架设计的网页就是把页面划分成相对独立的若干个区域，个区域，这些页面既，这些页面既各自独立又相互有联系。各自独立又相互有联系。 框架（框架（

2、Frame）技术是由）技术是由框架集框架集（Frameset）和）和框架框架两部分组成。两部分组成。框架集框架集定义了各框架的结构、数量、大小及定义了各框架的结构、数量、大小及装入框架中的页面文件名和路径等有关框架的属性。装入框架中的页面文件名和路径等有关框架的属性。框架框架则是框架集的组成元素，框架的页面是整个页面的一部分，则是框架集的组成元素，框架的页面是整个页面的一部分，是一个矩形区域，它具有网页所有的属性和功能，与框架是一个矩形区域，它具有网页所有的属性和功能，与框架集中其他框架页面的关系是平等的。集中其他框架页面的关系是平等的。天气在线：天气在线：http:/ 【下方及左侧嵌套下方及

3、左侧嵌套】表示底框架套左框架，表示底框架套左框架，【下方及右侧嵌套下方及右侧嵌套】表示底框架套右框架；表示底框架套右框架； 【左侧及下方嵌套左侧及下方嵌套】表示左框架套底框架，表示左框架套底框架，【右侧及下方嵌套右侧及下方嵌套】表示右框架套底框架；表示右框架套底框架； 【上方及下方上方及下方】表示顶框架和底框架；表示顶框架和底框架； 【左侧及上方嵌套左侧及上方嵌套】表示左框架套顶框架，表示左框架套顶框架，【右侧及上方嵌套右侧及上方嵌套】表示右框架套顶框架；表示右框架套顶框架；【顶部及左侧嵌套顶部及左侧嵌套】表示顶框架套左框架，表示顶框架套左框架，【上方及右侧嵌套上方及右侧嵌套】表示顶框架套右框

4、架。表示顶框架套右框架。 选择其中一个选项便可插入框架。选择其中一个选项便可插入框架。文件文件 | 新建新建 | 框架集框架集 8.1 框架的基本操作框架的基本操作1. 拆分框架拆分框架拆分框架的操作步骤如下。拆分框架的操作步骤如下。（1） 单击要拆分的框架内部，使光标单击要拆分的框架内部，使光标定位定位在该框架中。在该框架中。（2） 选择选择【修改修改】|【框架页框架页】命令，然后选择命令，然后选择【拆分左框拆分左框架架】、【拆分右框架拆分右框架】、【拆分上框架拆分上框架】、【拆分下框架拆分下框架】4个命令中的一个命令来完成框架的拆分。个命令中的一个命令来完成框架的拆分。（3） 按住按住Al

5、t键键不放，再用鼠标拖曳边框线，也可以拆分框不放，再用鼠标拖曳边框线，也可以拆分框架。架。2. 调整框架调整框架拖曳鼠标调整框架的步骤如下：拖曳鼠标调整框架的步骤如下：（1） 将鼠标指针放在两个框架的边框上，鼠标指针变成将鼠标指针放在两个框架的边框上，鼠标指针变成双双箭头箭头。（2） 用鼠标用鼠标拖曳拖曳边框到合适的位置，然后释放鼠标，可以边框到合适的位置，然后释放鼠标，可以调整框架的大小。调整框架的大小。（3） 如需要精确地定义框架的尺寸时，在框架集的如需要精确地定义框架的尺寸时，在框架集的【属性属性】面板面板中设置参数可精确地调整框架。中设置参数可精确地调整框架。3. 删除框架删除框架 删

6、除框架是创建框架的删除框架是创建框架的逆向操作逆向操作，其操作方法如下：，其操作方法如下： 将鼠标指向要删除的框架边框，当光标变成双向箭头时，将鼠标指向要删除的框架边框，当光标变成双向箭头时，拖动鼠标到上一级框架的上下或左右边框线处，松开鼠标即拖动鼠标到上一级框架的上下或左右边框线处，松开鼠标即可删除框架。当框架面板中的信息显示为可删除框架。当框架面板中的信息显示为【没有名称没有名称】时，时，表明当前无框架。表明当前无框架。 选择选择 【窗口窗口】|【框架框架】命令，命令，或按或按Shift+F2快捷键，打开快捷键，打开【框架框架】面板。面板。l 在网页编辑窗口中，按住在网页编辑窗口中，按住A

7、lt键键，然后单击要选中的框架的任意位然后单击要选中的框架的任意位置，便可选中该框架。置，便可选中该框架。8.2 框架和框架集的选择与属性设置框架和框架集的选择与属性设置8.2.1 框架和框架集的选择框架和框架集的选择l单击框架边框线单击框架边框线多个框架构成的框架多个框架构成的框架集。集。l单击某个框架区域单击某个框架区域选择该框架。选择该框架。l若选中一个框架，按住若选中一个框架，按住Alt 键键，再按键盘上的，再按键盘上的左、右箭头键左、右箭头键，可以选中同一级别的框架。可以选中同一级别的框架。l 按住按住Alt 键键，再按键盘上的，再按键盘上的向上箭头键向上箭头键，可以选中当前框架，可

8、以选中当前框架的上一级框架，连续重复操作，可以选中整个框架集。的上一级框架，连续重复操作，可以选中整个框架集。某个某个框架被选中时，框架的边框上会显示虚线。框架被选中时，框架的边框上会显示虚线。8.2.2 框架和框架集的属性设置框架和框架集的属性设置 框架和框架集有各自的框架和框架集有各自的【属性属性】面板。面板。 框架集框架集【属性属性】面板可用来设置框架的大小、框架边面板可用来设置框架的大小、框架边框线的颜色和宽度。框线的颜色和宽度。 框架框架【属性属性】面板可用来设置框架的名称、框架的源面板可用来设置框架的名称、框架的源文件、框架的滚动特性、框架边框特性等框架属性。文件、框架的滚动特性、

9、框架边框特性等框架属性。1. 设置框架集属性设置框架集属性（1） 单击两个框架的单击两个框架的公共边框线，公共边框线，或单击框架集或单击框架集【面板面板】中框架的中框架的最外围的边框线，最外围的边框线，选择要改变属性的框架集。选择要改变属性的框架集。（2） 此时屏幕显示的是框架集此时屏幕显示的是框架集【属性属性】面板。面板。【边框颜色边框颜色】的设置对在的设置对在IE浏览器预览时不一定有效。浏览器预览时不一定有效。【注意框架的嵌套注意框架的嵌套】【边框边框】下拉列表框：下拉列表框：可选择框架边框在浏览器窗口中显示的可选择框架边框在浏览器窗口中显示的情况。选择情况。选择【是是】选项，以立体效果显

10、示框架的边框；选项，以立体效果显示框架的边框； 选择选择【否否】选项，不显示框架的边框；选项，不显示框架的边框； 选择选择【默认默认】选项，由浏览选项，由浏览器决定是否显示框架。器决定是否显示框架。【边框宽度边框宽度】：设置当前框架集的边框宽度。设置当前框架集的边框宽度。【边框颜色边框颜色】：设置当前相邻的所有边框的颜色设置当前相邻的所有边框的颜色，覆盖框架集，覆盖框架集 边框颜色。边框颜色。 【行列选定范围行列选定范围】：深色为框架被选中部分，浅色为框架未选深色为框架被选中部分，浅色为框架未选中部分。中部分。在在【值值】文本框和文本框和【单位单位】下下拉列表框中，可指拉列表框中，可指定选中的

11、行或列的尺寸与单位。设置框架行、列尺寸有定选中的行或列的尺寸与单位。设置框架行、列尺寸有3种单种单位：位： 【像素像素】 【百分比百分比】 【相对相对】【框架名称框架名称】：可设置该框架的名称，框架名称将被用于超链可设置该框架的名称，框架名称将被用于超链接的接的【目标目标】下拉列表框中。框架名称只能用字母、数字及下下拉列表框中。框架名称只能用字母、数字及下划线，不允许用连字符、引号、句号或空格。划线，不允许用连字符、引号、句号或空格。【源文件源文件】：指定框架打开的源文件，设置框架源文件的指定框架打开的源文件，设置框架源文件的URL。【滚动滚动】：可设置是否允许有滚动条。可设置是否允许有滚动条

12、。【边框边框】：可设置框架边框在浏览器窗口中显示的情况。可设置框架边框在浏览器窗口中显示的情况。【不能调整大小不能调整大小】复选框：复选框：则禁止改变框架的尺寸。则禁止改变框架的尺寸。【边框颜色边框颜色】 【边界宽度边界宽度】 【边界高度边界高度】 按住按住Alt键键并单击一个框架，或单击框架并单击一个框架，或单击框架面板中的相应的框架，可选中一个框架。面板中的相应的框架，可选中一个框架。8.3 框架和框架集的保存框架和框架集的保存 框架结构的网页制作完成后，可以分别保存每个框架文档，框架结构的网页制作完成后，可以分别保存每个框架文档，也可单独保存框架集文档，还可以将整个框架集与它的各个框也可

13、单独保存框架集文档，还可以将整个框架集与它的各个框架文档一起保存。不同方式操作方法如下。架文档一起保存。不同方式操作方法如下。1. 保存框架文档保存框架文档（1） 在网页编辑区窗口中，选中要保存的框架。在网页编辑区窗口中，选中要保存的框架。（2）【文件文件】|【保存框架保存框架】命令，可保存该框架文件。命令，可保存该框架文件。（3） 若该框架文件尚未保存过，则系统会打开文件若该框架文件尚未保存过，则系统会打开文件【存存储为储为】对话框，输入正确的文件名和路径，按对话框，输入正确的文件名和路径，按【保存保存】按按钮便可保存该框架文档。若该框架文件已保存过，则该操钮便可保存该框架文档。若该框架文件

14、已保存过，则该操作在原有的基础上保存该框架文档。作在原有的基础上保存该框架文档。2. 保存框架集文档保存框架集文档1） 在网页编辑区窗口中，单击框架最外层边框，选中框在网页编辑区窗口中，单击框架最外层边框，选中框 架集。架集。2） 【文件文件】| 【保存框架页保存框架页】命令，保存框架集文档。命令，保存框架集文档。3） 如果希望将框架集文档用另外的路径或文件名保存，如果希望将框架集文档用另外的路径或文件名保存， 应选择应选择【文件文件】 | 【框架页另存为框架页另存为】命令，可另存命令，可另存 框架页文档。框架页文档。3. 保存框架集中所有文档保存框架集中所有文档（1） 选择选择【文件文件】|【保存全部保存全部】命令。命令。（2） 系统先保存框架集文档，然后再保存框架集中其他系统先保存框架集文档，然后再保存框架集中其他的框架文档。的框架文档。（3）