web页面框架_用框架使您的Web页面图片完美

最新推荐文章于 2024-04-19 03:33:40 发布

cuyi7076

最新推荐文章于 2024-04-19 03:33:40 发布

阅读量2.1k

点赞数 1

文章标签： html python css java javascript ViewUI

原文链接：https://www.ibm.com/developerworks/web/library/wa-fram/index.html

版权

web页面框架

查看当今许多网页HTML源代码，您会发现大量表格嵌套在一起，并定义了各种内联颜色和字体。除了向网页添加不必要数量HTML之外，这些表还会使页面难以维护。此外，表通常要求站点上的每个网页都包含站点导航和其他常见的站点信息，这意味着，如果要在一页上对这些元素进行更改，则必须在每个页面上进行更改。

当您使用框架时，一个框架可以包含带有网站导航HTML文件，而另一个框架可以包含您的内容。包含导航的框架仅会加载到浏览器一次，并且当用户滚动浏览您的内容时，导航仍然可见。

本文介绍了如何使用框架来保持网页的清洁和高效。我将解释框架的用法，向您展示如何计划要与框架一起使用的Web页面，向您介绍常见的框架标签，并提供一些实际的框架示例。

框架介绍

框架提供了一种查看网页的全新方法。 HTML框架最初是由Netscape引入的。尽管frame标签没有纳入HTML 3.2规范中（frame标签在HTML 4.0规范中），但Netscape Navigator 2和所有更高版本的Netscape以及Microsoft Internet Explorer 3和更高版本均支持它们。这标志着使用框架的唯一限制：不要使用主要在旧版本浏览器中查看的Web内容框架。但是，请记住，当今大多数Internet用户正在使用或可以访问Netscape Navigator或Microsoft Internet Explorer 4.x或更高版本。通常，它们是通过其操作系统或通过其Internet服务提供商提供的。

解释框架的最好方法是看一个例子。图1展示了一个使用四个框架的示例Web页面。这四个框架是：

标头，其中包含蓝色和黑色横幅。
页脚为黑色，其中包含一些标准站点信息。
左侧导航区域（蓝色）。
包含网站的欢迎信息的右侧框架（白色）。

可以更新这四个框架中的每个框架而不会影响另一个框架的内容。

例如，在图1中，如果您单击左侧蓝色导航区域中的任何链接，则右侧框中的内容将更改以显示适当的信息。但是，使用帧意味着其他三个部分不会更改，因此可以避免浪费资源来重新加载它们。另外，由于这些框架没有改变，因此当用户滚动浏览右白色框架中的内容时，剩余的三个框架中包含的信息不会改变，并且随时可以使用。

可以使用表设计相同的Web页面，但是当用户访问站点的不同部分时，必须重复加载页眉，页脚和导航区域的内容。而且，由于所有内容都将在一页（和一帧）中，因此导航和标题可能会滚动到视线之外，并且如果用户不滚动，他们将根本看不到页脚。

图1：使用框架的示例网页

基础

我上面描述的某些内容（例如，单击一个框架中的链接以将内容加载到另一框架中）在这一点上似乎有些神秘。为说明起见，让我们看一下使用两个框架的基本Web页面，并介绍一下框架集的创建。

每当您在网站上看到框架时，就会使用许多HTML文件。每个框架始终都有一个HTML文件，以及定义框架布局HTML文件。例如， FIgure 2由三个HTML文件组成：framessample1.html（这是管理两个剩余文件布局的frames文件），bannerfile.html和contentfile.html。

图2：使用框架的示例网页

仅创建两个框架时，需要进行最少的计划。每个框架的源都需要两个HTML文件。您还需要选择两个帧的大小，并确定要水平还是垂直拆分屏幕。清单1中HTML用于创建图2所示的框架。

清单1.两帧HTML示例文件

<html>

<head>

<title>Sample two frame HTML file</title>

</head>

<frameset rows="18%,82%">

      <frame src="bannerfile.html">

      <frame src="contentfile.html">

<noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer
3 or higher is

required to view frames.</noframes>

</frameset>

</html>

解释用于创建图2所示的两帧Web页面HTML的最好方法是单独查看每个标签。这些标签是创建框架所需的最低要求。（有关其他框架属性，请参见本文后面的“ 自定义框架 ”部分。）

1. `<html>...</html>`

与使用任何HTML文件一样，使用<html>标记。

2. `<head>...</head>`

与使用任何HTML文件一样，使用<head>标记。因为没有要格式化的内容，所以不必添加样式或引用级联样式表。

3. `<title>...</title>`

您在框架文件中输入的标题就是浏览器窗口顶部标题中显示的标题。在框架内显示时，每个框架HTML文件中的标题都不会出现。

4. `<body>...</body>`和其他格式标记和链接

在HTML文件中使用<frameset>标记意味着您不能包括<body>标记，任何其他格式的标记或此处所述标记之外的链接。

5. `<frameset>...</frameset>`

根据定义的rows和cols属性创建一组框架。定义<frameset>标记时，还必须包括两个大小调整属性之一（ rows或cols ）作为标记的一部分。

rows="percent, pixels或*"属性 rows属性将浏览器窗口分为水平框架。这些框架的高度由用逗号分隔的行高度值定义。您可以通过以下三种方式之一来定义行高：以像素为单位，以占框架集总高度的百分比表示，或者以星号（*）表示，并使用尽可能多的剩余空间。
例如，在清单1中， <frameset rows="18%, 82%">水平分割框架集，顶部框架占据浏览器窗口的18％，第二框架占据剩余的82％。
cols="percent, pixels或*"属性 cols属性将浏览器窗口分为垂直框架。这些帧的宽度由用逗号分隔的列宽度值定义。您可以通过以下三种方式之一来定义列宽：以像素为单位，以占框架集总宽度的百分比表示，或者以星号（*）表示，并使用尽可能多的剩余空间。
例如，参见清单3 ， <frameset cols="25%, 75%">垂直分割框架集，第一列占据浏览器窗口的25％，第二列占据其余的75％。
另一rows和cols例另外，也可以混合单元，例如， <frameset rows="50,50%,*"> 这将创建一个具有三个框架的窗口。第一帧为50像素，第二帧为屏幕的50％，第三帧使用屏幕上的其余空间。

6. `<frame>`

用于定义要在每个框架中显示的网页。定义<frame>标记时，还必须包括src属性作为标记的一部分。

src="source URL"属性此属性是定义要在每个框架中显示的文件所必需的。
用法示例： <frame src="filename.html">

7. `<noframes>...</noframes>`

如果您将框架文件加载到不支持框架的Web浏览器中，则允许您输入显示的文本。

嵌套框架集

现在我们已经涵盖了一些基本的框架标签和布局，让我们来看一些更复杂的框架布局。图3使用了朝多个方向移动的帧，而不仅仅是行或列。在设计这样的布局时，最好对框架的布局方式有个清晰的了解。在这种情况下，每个框架的源都需要三个HTML文件，当然，还需要一个HTML文件来定义框架。

图3：示例三帧网页

要制作此Web页面，首先创建一个包含两个水平框架或行的框架集，类似于图2所示的Web页面。然后，您需要垂直拆分底部框架，创建两列。要创建两个垂直框架，必须在第一个框架内创建另一个框架集。清单2显示了用于创建图2中的两帧Web页面的代码，并添加了添加第二个帧集所需的其他代码。更改以粗体显示。

清单2.示例三帧HTML文件

<html>

<head>

<title>Sample three frame HTML file</title>

</head>

<frameset rows="18%,82%">

   <frame src="bannerfile.html">

   <frameset cols="25%,75%">

      <frame src="navigationfile.html">

      <frame src="contentfile.html">

   </frameset>

<noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer
3 or higher is

required to view frames.</noframes>

</frameset>

</html>

命名框架

之前我曾解释过，如果您单击图1中导航框架中的任何链接，则仅内容框架中的内容会发生变化，并且在页眉，导航和页脚框架中找到的内容将保持不变。这是通过为每个框架指定一个名称来实现的。

name属性是框架的标识符。框架的名称用作链接的目标，告诉浏览器在何处显示页面。清单3显示了用于创建上面的三帧Web页面的示例代码，并将name属性添加到每个frame标签。更改以粗体显示。

清单3.包含name属性的三帧HTML示例文件

<html>

<head>

<title>Sample three frame HTML file</title>

</head>

<frameset rows="18%,82%">

   <frame src="bannerfile.html" name="banner">

   <frameset cols="25%,75%">

      <frame src="navigationfile.html"
name="nav">

      <frame src="contentfile.html"
name="content">

   </frameset>

<noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer
3 or higher is

required to view frames.</noframes>

</frameset>

</html>

名称和目标属性将在下面更详细地描述。

1. `name="framename"`属性

每个框架都可以有一个名称，但这不是必需的。名称属性是框架的标识符。它允许您定义可以在其中加载页面的特定框架。用法示例： <frame src="filename.html" name="name">

2. `target="framename"`属性

使用链接属性“ target ”定义浏览器显示页面的位置。框架或窗口名称用作target的值。 target属性的典型用法是在一帧中具有链接列表，并使链接的页面在定义的目标或窗口中打开。

例如，“导航”框架中HTML页面包含指向要在“内容”框架中打开的另一个页面的链接。在“导航”框架中单击链接时，“内容”框架文件会更改。用法示例： <a href="newpage.html" target="content">New page</a>

同样，如果您不希望页面加载或替换框架集，请将链接目标定义为“ _blank" 这将打开浏览器的另一个实例，并在该实例中加载页面。用法示例： <a href="http://www.ibm.com" target="_blank">IBM</a>

自定义相框

还有其他框架和框架集属性，可用于进一步自定义每个框架的外观和功能。将图4与图3进行比较，您会看到框架边框消失了，横幅中不再有滚动条，并且内容框架中的文档在文档和框架边缘之间的边距增加了。清单4 （其他属性以粗体显示）显示了用于创建图4所示框架的代码。

图4：使用其他属性的示例三帧网页

清单4.具有附加属性的示例三帧HTML文件

<html>

<head>

<title>Sample three frame HTML file</title>

</head>

<frameset rows="18%,82%" frameborder="no">

   <frame src="bannerfile.html" name="banner"
scrolling="no">

   <frameset cols="25%,75%">

      <frame src="navigationfile.html"
name="nav" noresize>

      <frame src="contentfile.html"
name="content" marginheight="50" marginwidth="50">

   </frameset>

<noframes>Netscape Navigator 2 or higher and Microsoft Internet Explorer
3 or higher is

required to view frames.</noframes>

</frameset>

</html>

使用属性，可以通过删除框架之间的凸起边框来控制框架集的外观。您可以控制每个单独框架的滚动和调整大小，以及每个框架HTML源周围的边距。

1. `frameborder="yes or no"`属性

定义边框是否可见。通常，frameborders的浏览器默认值为yes，因此，如果要使用frameborders，则无需使用此属性。用法示例： <frameset rows="50%, 50%" frameborder="no">

2. `scrolling="yes, no, or auto"`属性

您可以控制是否希望用户能够滚动框架。通常，浏览器默认的滚动默认值为“是”或“自动”。用法示例： <frame src="filename.html" scrolling="auto">

3. `noresize`属性

默认情况下，用户可以调整框架的大小，而不管您定义的框架集rows和cols属性如何。如果要阻止调整大小，请将noresize属性添加到<frame>标记中。用法示例： <frame src="filename.html" noresize>

4. `marginheight="pixels"`属性

一帧中文档上方和下方的像素数。不同的浏览器具有不同的边距默认值。它确认目标浏览器中框架的外观。用法示例： <frame src="filename.html" marginheight="0">

5. `marginwidth="pixels"`属性

一帧中文档左右两边的像素数。不同的浏览器具有不同的边距默认值。它确认目标浏览器中框架的外观。用法示例： <frame src="filename.html" marginwidth="5">

添加一些样式

可能的是，一旦设置好框架，您将需要自定义每个框架的外观。级联样式表可轻松管理整个框架集的整体外观。如果您不熟悉级联样式表，请查看“ 相关主题”部分以获取有用的文章。

使用样式表时，将默认样式应用于更改最多的框架。这样，您不必在所有标签（ <body>与<body class="nav"> ）中连续引用样式表类。然后为保持不变或变化很小的每个帧定义一个类（ BODY.nav ，其中"nav"为类）（例如，横幅或站点导航）。通过更改颜色或仅添加一个文件添加背景图像，可以轻松更改整个框架集的整体外观。

清单5显示了本文中的示例Web页面使用的样式表。每个框架HTML文件都在此样式表中链接并引用适当的类。

清单5.与框架一起使用的示例级联样式表

/* Frames sample cascading style sheet */
/* BANNER FRAME STYLE */

BODY.banner {font-family: Arial, sans-serif;background-color: #006699;color:
#FFFFFF;}
/* NAVIGATION FRAME STYLE */

BODY.nav {font-family: Arial, sans-serif;background-color: #99ccff;color:
#000000;}
/* CONTENT FRAME STYLE FOR PAGE CONTENT */

BODY {font-family : Arial, sans-serif;background-color : #FFFFFF;color:
#000000;}

现在您已经知道足以将框架弹出到整个地方。我非常喜欢使用框架，因为它们易于维护，创建了用户友好的环境，并且最重要的是它们倾向于减少Web页面的重新加载。我希望您能找到与我一样有用的框架。

翻译自: https://www.ibm.com/developerworks/web/library/wa-fram/index.html

web页面框架

cuyi7076

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
web页面框架_用框架使您的Web页面图片完美

查看当今许多网页HTML源代码，您会发现大量表格嵌套在一起，并定义了各种内联颜色和字体。除了向网页添加不必要数量HTML之外，这些表还会使页面难以维护。此外，表通常要求站点上的每个网页都包含站点导航和其他常见的站点信息，这意味着，如果要在一页上对这些元素进行更改，则必须在每个页面上进行更改。当您使用框架时，一个框架可以包含带有网站导航HTML文件，而另一个框架可以包含您的内容。包含...
复制链接

扫一扫

web页面框架_用框架使您的Web页面图片完美

框架介绍

图1：使用框架的示例网页

基础

图2：使用框架的示例网页

清单1.两帧HTML示例文件

1. <html>...</html>

2. <head>...</head>

3. <title>...</title>

4. <body>...</body>和其他格式标记和链接

5. <frameset>...</frameset>

6. <frame>

7. <noframes>...</noframes>