《框架主要用于在一个浏览器窗口中显示多个》由会员分享，可在线阅读，更多相关《框架主要用于在一个浏览器窗口中显示多个（22页珍藏版）》请在金锄头文库上搜索。
1、 下载下载第11章框架框架主要用于在一个浏览器窗口中显示多个 H T M L文档。通过构建这些文档之间的相互关系，从而实现文档导航、文档浏览以及文档操作等目的。框架是 I n t e r n e t网页中最常使用的页面设计方式，具不完全统计，大约有 8 0以上的主页都采用了框架技术。本章将介绍如何在D r e a m w e a v e r中实现框架。11.1 框架概述在浏览网页时，我们肯定遇到过这样的情形：在浏览器窗口中被分隔成了几个不同的区域，每个区域中显示不同的文档内容。最常见的方式是将左方或上方的区域设置为目录区域，其中显示文档页面的目录索引或导航条，而将右方或下方的区域设置为主体区域
2、，其中显示网页主体内容。通过单击不同的目录索引项或导航条按钮，就可以在主体区域实现网页之间的导航，在浏览网页的同时，目录索引或导航条始终显示于页面的目录区域中，这样便于用户继续浏览其他的网页。在上述的情形中实际上就是应用了框架（ F r a m e s）技术。利用框架技术，可以将不同的文档显示在同一个浏览器窗口中。通过构建这些显示在同一窗口中的文档之间的相互链接关系，可以实现文档之间的相互控制。实际上，我们不必连入 I n t e r n e t，也可以看到框架效果，启动 D r e a m w e a v e r的帮助系统，框架1框架2框架3图11-1 使用了框架技术的Dreamweaver
3、帮助系统您就可以看到带有三个框架区域的浏览器窗口，如图 11 - 1所示。本节将介绍一些框架技术的基本概念，以便于读者更好地了解如何在 D r e a m w e a v e r中设计框架。11.1.1 框架和框架集一般来说，框架（ F r a m e s）技术主要通过两种类型的元素来实现，一个是框架集（F r a m e s e t） ，另一个是框架（ F r a m e） 。请注意这每个术语对应的英文单词，其中第一个“框架”是复数形式的单词F r a m e s，而后一个“框架”对应的单词是单数形式的单词 F r a m e。在中文中我们很难区分它们，但前者表示技术，后者表示具体的元素，它
4、们确实是概念不同的东西，所以有时候，我们又将前者的“框架” （F r a m e s）称作“框架技术” ，而将后者的“框架”（F r a m e）称作“框架文档” 。所谓框架集，顾名思义，就是框架的集合。框架集实际上是一个页面，用于定义在一个文档窗口中显示多个文档的框架结构。例如，它可以决定文档窗口中显示的文档数目、每个文档的大小，以及文档被载入框架集窗口中的方式等。一般来说，框架集文档中的内容不会显示在浏览器中。所以有时候，我们可以将框架集仅仅看成是一个可以容纳和组织多个文档的容器。所谓框架，就是在框架集中被组织和显示的文档。在框架集中显示的每个框架事实上都是一个独立存在的H T M L文档
5、。图11 - 2显示了框架和框架集之间的关系。在图中， 1个框架集中包含了 3个框架文档。它很形象地显示了图 11 - 1中的框架结构关系。在图 11 - 1中，框架集是C o n t e x t H e l p . h t m文档，框架1是n a v i g a t i o n . h t m文档；框架2是c o n t 11 . h t m文档；框架3是1 0 f r a m e s 1 . h t m l文档。您可以分别在相应的区域，单击鼠标右键，然后选择“查看源文件”命令来查看每个框架文档的源文件；打开浏览器的“编辑”菜单，选择“查看源文件”命令，可以查看框架集文档本身的源文件。图11
6、-2 框架和框架集框架技术经常用于实现文档的导航。其作用有些像 Wi n d o w s的资源管理器，一个窗格显示站点中的的文件结构，另一个窗格显示站点中文档的具体内容。利用框架技术将两个或多第11章 框架247下载框架 框架集框架框架248Dreamweaver 3网页设计下载个网页联系起来，使得在一个网页中的操作，会对另一个网页中发生影响。11.1.2 用HTML实现框架技术框架技术最早是由N e t s c a p e公司提出的，并在Netscape Navigator浏览器中最早得以实现，最初出现的时候，很多人对之提出了批评，认为它搞乱了文档之间的关系，使对文档的控制变得难于理解。然而
7、随着它在I n t e r n e t上使用的普及，其巨大的优势也逐渐显露出来，终于被 W 3 C组织接纳，最终被写入H T M L规范。目前绝大多数浏览器，包括微软的 Internet Explorer，都提供了对它的完美支持。在H T M L代码中，实现框架技术非常简单，它主要通过三个标记：标记、标记和标记来实现。1. 和标记采用框架技术的网页和普通的网页，在代码结构上有稍许差别。普通的网页将文档的主体内容放置于 和标记间，而在采用框架技术的网页中，则用 和标记替代了和标记。和标记决定了在文档中如何对框架文档进行布局，换句话说，它决定如何对浏览器窗口进行分区，以及在每个分区中显示什么文档的
8、内容。大多数情况下，在其中还包含 和标记，以放置当浏览器不支持框架时显示的内容。下面显示了一个使用框架技术的网页代码，它将浏览器窗口分割为左右两个等宽的窗格，左边窗格中显示名为l e f t . h t m l的文档，而右边窗格显示名为r i g h t . h t m l的文档：框架技术示例标记带有很多属性，除了通用的属性之外，在控制框架集结构方面， c o l s属性和r o w s属性最为重要，我们将之介绍如下：cols = MultiLengthsc o l s属性用于定义在框架集中每个框架的宽度，其中 M u l t i L e n g t h s用于描述多个框架的宽度列表。每个框架
9、宽度之间以逗号分隔。框架的宽度可以是像素值，可以是相对于整个框架集文档宽度的百分比，也可以使用相对宽度来定义。如果要用像素值定义框架宽度，可以直接用数值来表示，例如， “2 0”表示宽度是2 0像素；如果要用百分比定义框架宽度，则可以用数字后带有百分比符号的形式来表示，例如， “2 0 %”表示该框架的宽度是整个框架集宽度的 2 0 %；如果要用相对宽度定义框架宽度，则可以用整数后加星号（*）的形式来表示，例如， “cols = “2*, 5*“”表示左方框架宽度同右方框架宽度的比例为2 : 5。在下面的代码中，定义了一个在水平方向上包含 3个框架的框架集文档，其中，左方的框架宽度为4 0像素
10、，右方的框架宽度为整个框架集宽度的 3 0，而中间的框架宽度则是剩余的宽度：rows = MultiLengthsr o w s属性用于定义在框架集中每个框架的高度，其中 M u l t i L e n g t h s是用于描述多个框架的高度列表。每个框架高度之间以逗号分隔。与c o l s属性类似，框架的高度可以是像素值，可以是相对于整个框架集文档高度的百分比，也可以使用相对高度来定义。在下面的代码中，定义了一个在垂直方向上包含 3个框架的框架集文档，其中，上方的框架高度为4 0像素，下方的框架高度为整个框架集宽度的 3 0，而中间的框架高度则是剩余的宽度：frameborder = boo
11、lf r a m e b o r d e r属性用于确定在框架集中是否显示框架边框。实际上，它设置的就是是否显示框架和框架之间分隔条。如果属性值为1或Ye s，表明该框架集中所有的框架都显示边框。如果属性值为0或N o，表明该框架集中所有的框架都不显示边框。bordercolor = color该属性设置框架集中所有框架边框的颜色值，其中 c o l o r是颜色的十六进制数值。border = length该属性用于设置框架集中各框架边框的宽度，其中 l e n g t h是宽度值，其单位是像素。framespacing = length该属性用于设置框架集中各框架之间的间隔，其中 l e
12、n g t h是距离值，其单位是像素。2. 和标记和标记决定了在文档中如何对框架文档进行布局，而 和标记则具体定义了框架集文档中的每个框架。每个 和标记对应于一个框架，它们必须出现在和标记之间。带有很多非常重要的属性，我们将之介绍如下：name = cdata在使用框架技术的网页中， 标记的n a m e属性特别重要，它用于为每个框架文档设置名称。在利用链接在框架集文档窗口的窗格中打开框架文档时，通过将n a m e属性和链接的t a rg e t属性相结合，可以指定在哪个窗格中打开文档。src = urls r c属性用于指定框架文档的来源，其中 u r l是框架文档的U R L地址。一般来
13、说，框架文档是一个 H T M L文档，它以文件的形式，单独存储于磁盘上，从文件的角度上来看，框架文档和框架集文档是分属不同文件的。frameborder = boolf r a m e b o r d e r属性用于确定在框架集中是否显示框架边框。实际上，它设置的就是是否显示框架和框架之间分隔条。如果属性值为1或Ye s，表明该框架与其四周的框架相邻处显示分隔条。如果属性值为0或N o，表明该框架与其四周的框架相邻处不显示分隔条。该属性设置会覆盖标记中f r a m e b o r d e r属性的设置。marginwidth = pixels该属性用于定义框架左右两边的空白间距，也即框架中
14、内容同框架左右边框的距离。其中p i x e l s是空白间距的像素值。第11章 框架249下载marginheight = pixels该属性用于定义框架上下两边的空白间距，也即框架中内容同框架上下边框的距离。其中p i x e l s是空白间距的像素值。noresize 该属性用于设置是否允许调整当前框架的大小。如果在 标记中出现该属性，则表明框架大小不可调节；如果在 标记中没有出现该属性，则表明框架大小可以调节，这时可以利用鼠标拖动该框架同其他框架之间的分隔条，改变框架大小。scrolling = method该属性用于确定是否允许滚动框架中的内容。其中 m e t h o d是滚动属性
15、，其可能的取值有“a u t o” 、 “y e s”或“n o” 。如果属性值为“ a u t o” ，则如果框架文档内容超出了框架的大小时，会出现框架滚动条，允许通过拖动滚动条，显示框架内容。如果属性值为“ y e s” ，则无论框架文档中的内容是否超出框架的大小，都会显示框架滚动条。如果属性值为“n o” ，则即使框架文档中的内容超出了框架的大小，也不会出现框架滚动条。bordercolor = color该属性设置框架边框的颜色值，其中 c o l o r是颜色的十六进制数值。该属性设置会覆盖标记中b o r d e r c o l o r属性的设置。3. 和标记不是所有的浏览器都一定
16、支持框架技术，在 I n t e r n e t上存在着五花八门的浏览器，有些浏览器甚至是基于字符模式的。如果您的主页使用了框架技术，则使用不支持框架技术的浏览器进行浏览时，用户将看不到任何东西。为了避免这种情况的发生，一般应该在框架集文档中显示一些提示信息，告诉用户当前网页使用了框架技术，需要使用支持框架的浏览器观看，如有必要，还可以制作没有使用框架技术的网页，以便所有的人都能访问网站。利用和标记，可以解决在不支持框架的浏览器中显示提示信息的问题。如果浏览器支持框架，则会完全忽略 和标记间的内容。如果浏览器不支持框架，则会显示和标记间的内容。您甚至可以在和标记之间添加和标记，然后像编辑正常网页一样进行编辑，构建不包含框架的网页内容。在下面的例子里，我们创建了一条提示，告诉用户当前网页使用了框架技术，并提供一个链接，引导用户访问没有使用框架技术的网页：框架技术示例本页面使用了框架技术，如果您看到这条提示信息，表明您的浏览器不支持框架，无法正确浏览本网页。您可以单击这里，进入不包含框架的250Dreamweaver 3网页设计下载第11章 框架251下载主
