《制作框架网》word版.doc

第八章 制作框架网页框架是在同一个浏览窗口中显示多个网页的技术，框架网页是一种特殊的网页。框架将窗口划分为不同的部分，各部分中都有各自的网页，总体构架出一个框架集。此外，通过为超链接指定目标框架，可以在框架之间建立起以内容为媒介的联系，因而实现页面导航的功能。本章主要介绍如何使用Dreamweaver建立框架网页的方法。通过本章的学习，读者应该掌握以下内容：认识框架技术和框架网页创建框架网页的方法编辑框架网页的方法设置框架网页的属性创建框架页的链接8.1 认识框架网页框架(Frames)技术由框架集(Frameset)和框架(Frame)两部分组成。框架集顾名思义就是框架的集合，它定义了各框架的结构、数量、大小尺寸及装入框架中的页面文件名和路径等有关框架的属性，框架集并不在浏览器中显示，只是存储所属框架的有关信息，框架集中的全部框架文件构成一个网页页面。框架则是框架集的组成元素，框架的页面是整个网页页面的一部分，是一个矩形区域，它具有网页所有的属性和功能，与框架集中其他框架页面的关系是平等的。框架网页是一种特殊的HTML网页，它可以将浏览器窗口分成不同的区域，称为框架区域，每个区域都可以保存并显示一个不同的网页。在如图8-1所示的“天使部落”中的“理想篇”网页就是利用框架网页设计的，在该网页中包含有4个子框架网页。8.2 创建框架Dreamweaver MX创建框架集的方法有两种：一是可以自己设计，二是可以从几个预设的框架集中选择。从Dreamweaver MX所提供的框架集中选择一个自己需要的框架集和框架来创建布局网页，这是最简便的布局网页的方法。8.2.1 插入预设的框架集首先启动Dreamweaver MX打开一个空白网页文档，然后执行下列操作之一可以创建新的框架集。执行主菜单中的“插入”“框架”命令，从弹出的子菜单中选择任意一个选项。执行主菜单中的“修改”“框架页”命令，从弹出的子菜单中选择任意一个选项。执行主菜单中的“查看”“可视化助理”“框架边框”命令，得到一个只有边框的框架网页。执行主菜单中的“窗口”“插入”命令，调出“插入”面板，单击其中的“框架”标签，打开预设框架集的“框架”面板，如图8-2所示，可以从中选择任意一项。图8-2 “框架”面板提示：在“框架”面板中，预设的框架集是由两种颜色组成的，其中浅蓝色的区域表示在创建框架后，原文档内容所在的位置。白色区域则表示新创建的框架文档所在的位置。8.2.2 设计和插入框架集“框架”面板上的预设框架集几乎包含了一般的框架格式，当然也可以自己设计框架格式，灵活运用框架集。下面是设计和插入框架集的方法和步骤。(1)在“框架”面板上单击一种框架式样图标(共有13种)，如图8-3所示。(2)通过鼠标直接拖动内部边框，可以调整框架页面的大小。(3)利用鼠标拖动水平和垂直外边框，可以分割框架页面。按住Alt键后拖动内部边框，可以拆分内部框架页面，如图8-4所示。图8-3 “使用框架”面板插入框架图8-4 拖动框架内框分割页面8.3 编辑框架本节将介绍框架和框架集的基本操作，包括如何选定框架与框架集、如何保存框架与框架集，以及在框架中打开网页文档的方法。8.3.1 选定框架和框架集在对框架进行编辑操作之前必须先选择所需的框架，可以直接在网页文档视窗中选择框架，当然利用“框架”控制面板对框架进行操作比较方便。1.利用框架控制面板选定框架和框架集(1)执行主菜单中的“窗口”“其他”“框架”命令(或按Shift+F2键)，打开“高级布局”面板的“框架”控制面板，如图8-5所示。图8-5 “高级布局”的“框架”控制面板(2)在“框架”控制面板中出现的就是当前页面中的框架结构，如果要选定框架，使用鼠标直接单击“框架”控制面板中对应的框架即可，与此同时，在网页文档中被选定的相应框架四周边框以虚线显示。如果要选定当前网页文档中的所有框架，则利用鼠标单击“框架”控制面板周围的框架边框即可。如图8-6所示。 图8-6 在“框架”控制面板中选定框架和框架集2.在文档视窗中选定框架和框架集如果要选定一个框架，则需要在按住Alt键的同时单击框架内的任意位置。如果要选定整个框架集，只需单击任何一个框架边框即可。当一个框架被选定后，它的边框会显现成虚线；当选定框架集后，框架集中的所有框架边框都会以虚线框显示，如图8-7所示。 图8-7 在网页文档窗口中选定框架和框架集3.切换所选定框架和框架集要在选定的框架之间进行切换，可以执行如下的操作之一。若在相邻的框架之间进行切换，可按住Alt键的同时按下键盘上的右移箭头或左移箭头。若要切换到父框架集，可按住Alt键的同时按下键盘上的上移箭头。若要切换到子框架，可按住Alt键的同时按下键盘上的下移箭头。8.3.2 删除框架对于不需要的框架进行删除，方法很简单，只需将鼠标置于不需要框架的边框上，然后将其边框拖至父框架之外，即可将该框架删除。如果利用HTML代码设计，则可以直接在网页文档的HTML代码中删除框架集，。8.3.3 在框架中打开网页文档创建框架的目的是在框架中建立新的网页或打开已有的网页文档。下面是在框架中打开网页文档的操作方法。(1)用鼠标单击需要插入网页文档的框架内。(2)执行主菜单中的“文件”“在框架中打开.”命令(或按组合键Ctrl+Shift+O)，打开“选择HTML文件”对话框，如图8-8所示。图8-8 “选择HTML文件”对话框(3)在“选择HTML文件”对话框中搜索选择所需的网页文档，单击“确认”按钮，网页文档就会呈现在指定的框架中。(4)用同样的方法，可以在其他的框架中打开已经设计好的不同网页文档，然后分别对各个框架进行保存。8.3.4 保存框架和框架集框架集文件和与之相关的框架文件必须先保存，才能在浏览器中预览整个框架网页内容。可以分别保存框架集页面或框架页面，也可以同时保存所有打开的框架文件和框架集页面。1.保存框架当利用Dreamweaver MX创建框架网页文档时，每个新的框架网页文档都会被赋予一个临时的文件名，如文件名UntitleFrame-1(或UntitleFrameset-1)代表框架集页面，文件名Untitled-1、Untitled-2等代表框架页面。当选择一个保存框架集或框架后，执行主菜单中的“文件”“保存框架页”命令，打开“保存为”对话框。由于每个文件都是以“Untitled”(未定义)并冠以序号作为临时文件名，势必很难确定哪一个框架网页文档是要保存的。此时，可以通过查看文档窗口中的框架选定线来判别当前正在保存的网页文档，所选区域就是“保存为”对话框中当前要保存的框架，被选定的框架集或框架的网页文件名也会显现在标题栏中。如图8-9所示。图8-9 “另存为”对话框2.保存框架集在“框架”控制面板或网页文档窗口中选择要保存的框架集，然后执行下列一项操作。要保存框架集网页文件，执行主菜单中的“文件”“保存框架页”命令。要将框架集保存为一个新的文件时，执行主菜单中的“文件”“框架网页另存为”命令。如果要保存框架内的网页文档，则先选定框架，然后再执行主菜单中的“文件”“保存框架”命令，或“框架网页另存为”命令。如果要保存框架集内所有的网页文件，则执行主菜单中的“文件”“保存全部”命令，就会将所有打开的网页文档保存，包括独立的网页文档、框架网页文档以及框架集网页文档。8.4 设置框架和框架集属性框架属性确定了框架集内各个框架的名称、源文件、边框的框架能否调整大小等。框架集属性确定框架的大小和框架之间的边框宽度和颜色等。在框架结构文档中，框架和框架集都有各自的属性设置面板，它们的属性应该分别进行设置。8.4.1 框架的属性1.启动框架属性面板(1)执行主菜单中的“窗口”“其他”“框架”命令，打开“框架”控制面板。(2)按住Alt键的同时，用鼠标单击一个框架，或直接在“框架”控制面板上选定框架。框架被选中后即可在框架属性面板上进行相应的设置，如图8-10所示。 图8-10 “框架”控制面板和框架属性面板2.设直框架的属性使用框架属性面板可以设置框架的属性，包括为框架命名、设置边框和边距等。框架属性面板上各个选项的含义如下。框架名称：用于设置子框架的名称，可以用来标识一个子框架，也可以用在超级链接属性设置面板源文件选项的下拉列表中。框架的名称应该是一个单词，可以使用下划线(_)，不能使用连字符(-)、句点(.)及空格。由于框架名称有可能被脚本引用，所以不能用JavaScript的保留字。源文件：用于设置框架的文件名。如果在此之前没有保存该框架，则使用系统默认的文件名滚动：用于设置当没有足够的空间来显示当前框架的内容时是否显示滚动条。它有4个选项：其中“是”表示显示滚动条；“否”表示不显示滚动条；“自动”表示由浏览器根据需要决定是否显示滚动条；“默认”表示使用系统的默认设置，大部分的浏览器默认为“自动”。不能调整大小：选择此复选框，可防止用户在浏览时拖动框架边框来调整当前框架的大小。边框：用于设置当前框架是否显示边框。它有3个选项：“是”表示显示边框：“否”表示不显示边框：“默认”表示使用系统默认设置，浏览器一般采用默认设置。边框颜色：用于设置边框的颜色。边界宽度：用于设置框架中的内容与左右边框之间的距离，以像素为单位。边界高度：用于设置框架中的内容与上下边框之间的距离，以像素为单位。8.4.2 框架集的属性1.启动框架集属性面板(1)执行主菜单中的“窗口”“其他”“框架”命令，打开“框架”控制面板。(2)在网页设计窗口中单击两个框架之间的边框，或者在“框架”控制面板中选定框架集。框架集被选中后即可在框架集的属性面板上进行相应的设置，如图8-11所示。 图8-11 “框架”控制面板和框架集属性面板2.设置框架集的属性使用框架集属性面板可以设置边框和框架的大小。框架属性的设置会覆盖框架集的属性设置。例如，框架属性中设置的边框属性会将框架集中设置的边框属性覆盖掉。预设的框架集可以使网页文档快速应用框架集。预设框架集具有下列默认的属性值：无边框，无滚动条，在浏览器中显示时无法进行框架尺寸的调整。要修改默认设置，在框架集属性面板上选取需要修改的选项即可。框架集属性面板上各个选项的含义如下。边框：用于设置当前框架是否显示边框。它有3个选项：“是”表示显示边框：“否”表示不显示边框：“默认”表示使用系统默认设置，大部分浏览器默认为“是”。边框颜色：用于设置边框的颜色。边框宽度：在该文本框中输入一个数值，用以指定当前框架集的边框宽度。如果输入0，表示不显示边框。值：在行列指定区域中单击行选择标签则选择行，或单击列选择标签则选择列。然后，在值文本框中输入一个数值，设置选定行或列的大小。单位：在该下拉列表框中选择行或列的只寸的量度单位。量度单位有3个选项。其中“像”表示以像素为单位设置列宽度或行高度。这个选项对总是要保持一样大小的框架(如导航栏的设计)是最好的选择。如果将页面中的框架量度单位设置为另外不同的选工页，在调整浏览器窗口的尺寸时，将首先保证以像素为单位的框架的尺寸。“百分比”表示当前框架占所属框架集高度(或宽度)的百分比。以“相对”为单位的框架在分配空间时，优先权在以像素和百分比为单位的框架之后，但它占据浏览器窗口所有的剩余空间。8.4.3 设置或更改框架的属性1.设置框架的大小在网页文档窗口中拖动框架的边界，可以粗略地改变框架的大小，而使用框架属性面板来设置，可以精确地分配各个框架所占用的空间。具体操作方法如下。(1)单击框架边界，选定一个框架集。(2)执行主菜单中的“窗口”“属性”命令，调出框架集的属性设置面板。(3)单击属性面板右侧框架结构缩略图框的区域，从中选定要设置尺寸的行或列。(4)在“值”所对应的行或列的文本框中输入调整框架只寸的数值，并在“单位”下拉列表框中选择一种量度单位(像素、百分比或相对)。2.设置框架和框架集的边框使用框架或框架集的属性面板可以设置框架及框架集的边框，共有3个选项：是、否和默认。如果设置了框架的边框属性，也就相应地设置了其所在框架集的边框属性。3.设置框架或框架集的边框颜色在框架或框架集的属性面板中可以设置框架或框架集的边框颜色。首先选定框架，然后单击框架属性面板中的“边框颜色”按钮，从打开的颜色拾取器中用吸管选择一种颜色即可。当然，边框的颜色只有当“边框”选项设置为“是”时才有效，否则，边框颜色的设置是不起作用的。注意：当设置框架的边框颜色时会将已经设置框架集的边框颜色覆盖。4.改变框架的背景色可以对框架集中的各个框架分别设置不同的背景颜色。在设置框架中网页文档的背景色时，可以先选定所需的框架，然后执行主菜单中的“修改”“网页属性”命令，打开“网页属性”对话框，从中选择一种背景颜色或背景图像。8.5 链接框架的内容利用框架结构，可以把导航条内容固定在页面的顶部、左边或右边。在浏览网页时，用户可以直接选择导航条上相应的内容，切换到所对应的页面，这都需要事先对各个框架建立超链接。要想在框架内使用链接，必须为链接设置一个目标，该目标是指框架内链接要打开的网页内容。根据链接目标的不同，框架中的链接主要有两种：框架内的链接和关键字的链接。8.5.1 框架内的链接框架内的链接就是建立一个框架内不同HTML页面间内容的链接和跳转。当选择了某一个框架内的链接后，相应的链接目标页面内容会在当前框架结构中指定的另一个框架区域中显示出来。例如，在图8-1所示的示例网页中，当用鼠标单击左框架(leftFrame)导航条中的“理想篇”按钮时，相应的被链接内容将会显示在右边的正文框架(mainFrame)区域中。具体的操作方法如下。(1)选中左边导航条中的“理想篇”按钮。(2)打开属性面板，单击“链接”右侧的文件夹图标，从打开的“选择文件”对话框中浏览所要链接到的网页文件(如同Web4.htm)。(3)在属性面板中的“目标”下拉列表框中选择名为“mainframe”的框架，如图8-12所示，所链接的目标文件将显示在名为“mainframe”的框架内，即右下侧的框架中。图8-12 选择“目标”文件的显示位置(4)设置完毕后进行保存，然后按F12键浏览网页，并用鼠标单击“理想篇”按钮，可以看到目标内容显示在右下角的框架中，而左边的框架内容不会改变，其网页效果如图8-1所示。8.5.2 关键字的链接关键字的链接是指在属性面板中的“目标”下拉列表框中列出的原有参