框架技术.ppt

通过本章学习，应该掌握以下内容： 认识框架网页 创建框架网页的方法 编辑框架网页的方法 设置框架属性的方法,第5章 利用框架技术制作网页,5.1 认识框架网页,框架网页是种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页。 在框架网页中，用来分隔网页的窗格称为框架。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。,（1）只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。 （2）固定网页中的某些内容。 （3）并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。,1框架网页的特点,2框架网页的结构,根据框架分布的不同和各框架作用的不同，框架网页被分为多种类型。常用到的框架结构有：左侧框架、右侧框架、顶部框架、底部框架、上方和下方框架以及各种嵌套框架结构。,在Dreamweaver MX中创建框架的具体操作步骤如下： （1）选择主菜单中的“文件”|“新建”命令，打开一个新文档窗。 （2）将插入面板切换到“框架”类，插入面板如图所示。,5.2 利用Dreamweaver MX处理框架,5.2.1 创建框架网页,1. 建立框架,（3）执行以下操作之一，即可创建框架。 选择“插入”|“框架”命令，从弹出的子菜单中选择任意一个选项。 选择“修改”|“框架页”命令，从弹出的子菜单中选择任意一个选项。 单击插入“框架”面板上的任一种插入框架图标按钮。,2建立嵌套的框架组,一个框架组嵌套在另一个框架组内称之为嵌套框架组，使用嵌套框架组可以为一个文档创建多个框架。要创建嵌套的框架组，可执行以下操作操作步骤： （1）将光标放到与插入嵌套框架组的框架中。 （2）执行以下操作之一，即可创建嵌套的框架组。 选择“插入”|“框架”命令，从弹出的子菜单中选择任意一个选项。 选择“修改”|“框架页”命令，从弹出的子菜单中选择任意一个选项。 单击插入“框架”面板中的插入框架图标按钮。,（1）选择整个框架 要选择整个框架可执行以下操作之一： 将鼠标指针移到整个边框位置的同时，按住Alt键，当鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架。 如果当前选择的是一个子框架，需要重新选择整个框架，可以将鼠标指针移到第一次分割框架的边框位置，当鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架组。 除了上述方法之外，选择框架还可以通过“框架”面板来完成。,3选择框架,（2）选择子框架 在文档窗口中按住Alt键，然后用鼠标单击欲选择的子框架。文档窗口中该子框架的周围被虚线包围，表示它已经被选中，同时在状态栏上加黑显示标记符。 同样也可以通过“框架”面板来选择子框架。只要在框架面板中单击相应的子框架即可，,4删除框架,将光标放在框架的边框上，当光标变成垂直箭头（或水平箭头）时，按住鼠标左键，将框架的边框拖出父框架或页面之外，即可将这个框架删除。,5.2.2 编辑框架网页,框架创建好以后，就可以对框架进行编辑了。每一个框架里都是一个文档，可以直接添加内容，也可以在框架内打开已经存在的文档。,演示编辑框架网页,5.2.3 保存框架网页,每一个框架都包含一个文档，因此一个框架集会包含多个文档。在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。,演示编辑框架网页,5.2.4 框架属性及框架组属性设置,1框架属性,利用框架属性面板可以查看和设置框架的属性，如为框架命名、设置框架的边框及颜色等。 首先选择“窗口”|“其它”|“框架”命令，或按快捷键“Shift+F2”，打开“框架”面板；然后在框架面板中选中框架，此时属性面板所显示的即为框架的属性面板，如图所示。 在框架属性面板中设定框架的属性。,新创建的框架组默认属性值为：无边框，无滚动条，在浏览器中无法看到创建的框架，要改变这些属性，需在属性面板中修改相应的选项。 首先单击框架的边框，选中框架组，此时属性面板中将自动切换显示框架组的属性，如图所示。 在框架组属性面板中设定框架组的属性。,2框架组属性,3设置框架的大小,调整框架尺寸可以拖动框架的边框来调整，但在需要精确定义框架尺寸的大小时，可以在属性面板中进行框架尺寸的设置。设置框架尺寸的步骤如下： （1）单击框架边界，选定一个框架组。 （2）选择“窗口”|“属性”命令，打开框架组属性面板。 （3）单击框架组属性面板右侧图框中的区域，选定框架组中的行或列。 （4）在“值”文本框中输入调整框架尺寸的数值，然后在“单位”下拉列表框中选择一种度量单位。,4设置框架和框架组的边框,（1）设置框架边框的属性 设置框架边框属性的步骤如下： 在文档窗口按住Alt键，然后单击一个框架，或通过“框架”面板来选择一个框架。 在框架属性面板上的“边框”下拉列表项中选择任意一个选项。 在“边框颜色”文本框中设置当前框架的边框颜色，也可单击其后面的按钮 ，打开颜色选择面板来选择所需颜色。,（2）设置框架组边框的属性 在文档窗口单击一个框架边框，或通过“框架”面板来选择一个框架组。 在框架组属性面板上的“边框”下拉列表项中选择任意一个选项，用于控制当前框架组的边框显示。 在“边框颜色”文本框中设置当前框架组中所有框架的边框颜色，但是这一设置将被单个框架的边框颜色所覆盖。 在“边框宽度”文本框中设置当前框架组中所有框架的边框宽度，如输入为0，表示不显示边框。,5.2.5 设置框架中的链接目标,在框架网页中建立超链接的操作步骤如下： （1）选中要创建超链接的文本（或图像），打开其属性面板。 （2）在“链接”文本框中输入要链接文件的URL地址，或单击按钮 ，选取要链接的文件。 （3）单击“目标”下拉列表，选择一种框架名称，链接文件将在该框架中打开。 （4）保存框架网页，浏览页面。,5.3 利用HTML创建网页框架,5.3.1 利用HTML创建框架网页,利用HTML创建框架网页时首先要指定框架结构。即必须有一个网页用于指定整个浏览器窗口如何划分，也就是所谓的框架集网页。在框架集网页中不包含任何可显示的内容，而只是包含如何组织各个框架的信息和框架中的初始页面信息。,1指定框架的结构,在框架集网页中，除了基本的HTML、HEAD等标记符以外，主要包括框架集标记符FRAMESET（必须有结束标记符）和框架标记符FRAME（没有结束标记符）。 使用FRAMESET标记符的rows属性或cols属性分别可以构造出横向分隔框架和纵向分隔框架；根据rows属性或cols属性的取值，可以确定框架结构中包含多少框架，相应也就必须设置对应个数的FRAME标记符。,5.3.2 框架结构的定义,rows属性和cols属性的取值包括三种类型，一是直接指定像素数；二是指定百分数（即相对于浏览器窗口大小的百分数）；三是使用n*（其中n是1的整数）指定相对大小。指定属性值时，数值之间用逗号分开并且不能有空格，根据值的个数和设置可以确定框架数目和位置。 当属性值为n时，表示框架的大小为由前两种方法（即像素数或百分数）指定框架大小后浏览器窗口的剩余部分。如果取值包括多个n*，那么n*表示框架之间的比例关系。,如果网页设计者需要创建一些复杂的框架集，即同时包含横向和纵向的框架，此时可以使用框架嵌套。框架嵌套时只要在要使用FRAME标记时再使用FRAMESET标记一个框架集即可。,2框架的嵌套,框架初始化是指为各个框架指定初始显示的页面，此时应使用FRAME标记的src属性，将该属性的值指定为要在框架中显示的页面即可。指定页面时可以使用相对路径，也可以使用绝对路径，,5.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属性，该属性不需要任何取值，即：,（4）设置框架空白 FRAME标记符的framespacing属性可以控制框架边框与数据之间的距离，这个属性的取值都是像素数。如上例中“framespacing=“0“”表示框架边框与数据之间的距离为零。 FRAME标记符的marginwidth属性可以控制框架内容和框架左右边框之间的距离，而marginheight属性则可以控制框架内容和框架上下边框之间的距离。这两个属性的取值都是像素数。,所谓目标框架，就是指超链接的目标文件要在哪个框架中显示。 控制超链接的目标文件在哪一个框架内显示的方法是在A标记符内使用target属性，格式为： 超链接内容 target属性的值可以是已定义的框架名（必须是框架集文件中为FRAME标记符指定的name属性值），也可以是以下特殊框架 ：_top 、_self 、_blank 、_parent 。,3指定超链接的目标框架,E N D,