通过本章学习,应该掌握以下内容:
1,认识框架网页
2,创建框架网页的方法
3,编辑框架网页的方法
4,设置框架属性的方法第 8章 利用框架技术制作网页
8.1 认识框架网页框架网页是 —种特殊的 HTML网页,它可将浏览器窗口分成不同的区域,称为框架区域 。 每个区域都可以显示不同的网页 。
在框架网页中,用来分隔网页的窗格称为框架 。
每个框架包括框架高度,框架宽度,滚动条和框架边框,此外还可指定框架的内边距 ( 框架与网页正文之间的距离 ) 。
( 1) 只要单击某一个框架区域内的超链接,其指向的网页就会在另一个框架区域中显示,而不必将整个浏览器窗口中的内容更换一遍 。
( 2) 固定网页中的某些内容 。
( 3) 并不是所有的浏览器都能显示框架网页,这也是框架网页的一个局限 。
1,框架网页的特点
2,框架网页的结构根据框架分布的不同和各框架作用的不同,框架网页被分为多种类型 。 常用到的框架结构有:左侧框架,右侧框架,顶部框架,底部框架,上方和下方框架以及各种嵌套框架结构 。
在 Dreamweaver MX中创建框架的具体操作步骤如下:
( 1) 选择主菜单中的,文件,|“新建,命令,打开一个新文档窗 。
( 2) 将插入面板切换到,框架,类,插入面板如图所示 。
8.2 利用 Dreamweaver MX处理框架
8.2.1 创建框架网页
1,建立框架
( 3) 执行以下操作之一,即可创建框架 。
选择,插入,|“框架,命令,从弹出的子菜单中选择任意一个选项 。
选择,修改,|“框架页,命令,从弹出的子菜单中选择任意一个选项 。
单击插入,框架,面板上的任一种插入框架图标按钮 。
2,建立嵌套的框架组一个框架组嵌套在另一个框架组内称之为嵌套框架组,使用嵌套框架组可以为一个文档创建多个框架 。
要创建嵌套的框架组,可执行以下操作操作步骤:
( 1) 将光标放到与插入嵌套框架组的框架中 。
( 2) 执行以下操作之一,即可创建嵌套的框架组 。
选择,插入,|“框架,命令,从弹出的子菜单中选择任意一个选项 。
选择,修改,|“框架页,命令,从弹出的子菜单中选择任意一个选项 。
单击插入,框架,面板中的插入框架图标按钮 。
( 1) 选择整个框架要选择整个框架可执行以下操作之一:
① 将鼠标指针移到整个边框位置的同时,按住 Alt键,
当鼠标指针变为垂直箭头 ( 或水平箭头 ) 时,单击边框即可选中整个框架 。
② 如果当前选择的是一个子框架,需要重新选择整个框架,可以将鼠标指针移到第一次分割框架的边框位置,当鼠标指针变为垂直箭头 ( 或水平箭头 ) 时,单击边框即可选中整个框架组 。
③ 除了上述方法之外,选择框架还可以通过,框架,
面板来完成 。
3,选择框架
( 2) 选择子框架在文档窗口中按住 Alt键,然后用鼠标单击欲选择的子框架 。 文档窗口中该子框架的周围被虚线包围,
表示它已经被选中,同时在状态栏上加黑显示标记符
<frame>。
同样也可以通过,框架,面板来选择子框架 。 只要在框架面板中单击相应的子框架即可,
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
( 必须有结束标记符 </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属性,该属性不需要任何取值,即,<FRAME noresize >
( 4) 设置框架空白
FRAME标记符的 framespacing属性可以控制框架边框与数据之间的距离,这个属性的取值都是像素数 。
如上例中,framespacing="0"”表示框架边框与数据之间的距离为零 。
FRAME标记符的 marginwidth属性可以控制框架内容和框架左右边框之间的距离,而 marginheight
属性则可以控制框架内容和框架上下边框之间的距离 。
这两个属性的取值都是像素数 。
所谓目标框架,就是指超链接的目标文件要在哪个框架中显示 。
控制超链接的目标文件在哪一个框架内显示的方法是在 A标记符内使用 target属性,格式为:
<a href="目标文件 " target="目标框架名 ">超链接内容
</a>
target属性的值可以是已定义的框架名 ( 必须是框架集文件中为 FRAME标记符指定的 name属性值 ),
也可以是以下特殊框架,_top,_self,_blank,
_parent 。
3,指定超链接的目标框架
E N D
1,认识框架网页
2,创建框架网页的方法
3,编辑框架网页的方法
4,设置框架属性的方法第 8章 利用框架技术制作网页
8.1 认识框架网页框架网页是 —种特殊的 HTML网页,它可将浏览器窗口分成不同的区域,称为框架区域 。 每个区域都可以显示不同的网页 。
在框架网页中,用来分隔网页的窗格称为框架 。
每个框架包括框架高度,框架宽度,滚动条和框架边框,此外还可指定框架的内边距 ( 框架与网页正文之间的距离 ) 。
( 1) 只要单击某一个框架区域内的超链接,其指向的网页就会在另一个框架区域中显示,而不必将整个浏览器窗口中的内容更换一遍 。
( 2) 固定网页中的某些内容 。
( 3) 并不是所有的浏览器都能显示框架网页,这也是框架网页的一个局限 。
1,框架网页的特点
2,框架网页的结构根据框架分布的不同和各框架作用的不同,框架网页被分为多种类型 。 常用到的框架结构有:左侧框架,右侧框架,顶部框架,底部框架,上方和下方框架以及各种嵌套框架结构 。
在 Dreamweaver MX中创建框架的具体操作步骤如下:
( 1) 选择主菜单中的,文件,|“新建,命令,打开一个新文档窗 。
( 2) 将插入面板切换到,框架,类,插入面板如图所示 。
8.2 利用 Dreamweaver MX处理框架
8.2.1 创建框架网页
1,建立框架
( 3) 执行以下操作之一,即可创建框架 。
选择,插入,|“框架,命令,从弹出的子菜单中选择任意一个选项 。
选择,修改,|“框架页,命令,从弹出的子菜单中选择任意一个选项 。
单击插入,框架,面板上的任一种插入框架图标按钮 。
2,建立嵌套的框架组一个框架组嵌套在另一个框架组内称之为嵌套框架组,使用嵌套框架组可以为一个文档创建多个框架 。
要创建嵌套的框架组,可执行以下操作操作步骤:
( 1) 将光标放到与插入嵌套框架组的框架中 。
( 2) 执行以下操作之一,即可创建嵌套的框架组 。
选择,插入,|“框架,命令,从弹出的子菜单中选择任意一个选项 。
选择,修改,|“框架页,命令,从弹出的子菜单中选择任意一个选项 。
单击插入,框架,面板中的插入框架图标按钮 。
( 1) 选择整个框架要选择整个框架可执行以下操作之一:
① 将鼠标指针移到整个边框位置的同时,按住 Alt键,
当鼠标指针变为垂直箭头 ( 或水平箭头 ) 时,单击边框即可选中整个框架 。
② 如果当前选择的是一个子框架,需要重新选择整个框架,可以将鼠标指针移到第一次分割框架的边框位置,当鼠标指针变为垂直箭头 ( 或水平箭头 ) 时,单击边框即可选中整个框架组 。
③ 除了上述方法之外,选择框架还可以通过,框架,
面板来完成 。
3,选择框架
( 2) 选择子框架在文档窗口中按住 Alt键,然后用鼠标单击欲选择的子框架 。 文档窗口中该子框架的周围被虚线包围,
表示它已经被选中,同时在状态栏上加黑显示标记符
<frame>。
同样也可以通过,框架,面板来选择子框架 。 只要在框架面板中单击相应的子框架即可,
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
( 必须有结束标记符 </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属性,该属性不需要任何取值,即,<FRAME noresize >
( 4) 设置框架空白
FRAME标记符的 framespacing属性可以控制框架边框与数据之间的距离,这个属性的取值都是像素数 。
如上例中,framespacing="0"”表示框架边框与数据之间的距离为零 。
FRAME标记符的 marginwidth属性可以控制框架内容和框架左右边框之间的距离,而 marginheight
属性则可以控制框架内容和框架上下边框之间的距离 。
这两个属性的取值都是像素数 。
所谓目标框架,就是指超链接的目标文件要在哪个框架中显示 。
控制超链接的目标文件在哪一个框架内显示的方法是在 A标记符内使用 target属性,格式为:
<a href="目标文件 " target="目标框架名 ">超链接内容
</a>
target属性的值可以是已定义的框架名 ( 必须是框架集文件中为 FRAME标记符指定的 name属性值 ),
也可以是以下特殊框架,_top,_self,_blank,
_parent 。
3,指定超链接的目标框架
E N D