2.8.1创建框架集网页

时间：2023-10-15 百科知识版权反馈

【摘要】：框架集中包含多个框架，其中每个框架指定显示一张网页，这样就能把多张网页组织到一张网页中。用户在访问框架集网页时，多张网页按照框架集制定的规则显示出来。使用Dreamweaver CS4能够可视化创建框架集，创建、编辑框架内各个网页，并可选择“文件”>“保存全部”命令，依次保存框架集和框架内各个网页。

2.8.1　创建框架集网页

框架集(frameset)中包含多个框架(frame)，其中每个框架指定显示一张网页，这样就能把多张网页组织到一张网页中。用户在访问框架集网页时，多张网页按照框架集制定的规则显示出来。框架集标签<frameset>……</frameset>既不放在头部head元素内，也不放在body元素内。而是放在head元素之后、body元素之前。

框架集和框架的基本格式如下：

<frameset rows="n1,n2,……" cols="m1,m2,……" frameborder="yes|no"

border="x1" framespacing="x2">

……

</frameset>

frameset是框架集标签。rows="n1,n2,…"属性将整个窗口水平分割为几部分，并指定从上到下每部分的高度分别是n1,n2,…像素；cols="m1,m2,…"属性将窗口竖直分割为几部分，并指定从左到右每部分的宽度分别是m1,m2,…像素；n1,n2,m1,m2,x1,x2都是正整数。rows属性和cols属性一般不同时存在于同一个frameset标签内。Frameborder属性指定框架是否要边框，border属性定义边框线的粗细，framespacing属性定义边框间距。

frame是框架标签。src属性指定该框架内显示哪个网页文件，name属性为该框架定义一个名称，id属性为该框架定义一个id号，title属性为该框架定义一个标题。

1. 创建简单的框架集

为了便于大家理解框架与框架集，下面先以编辑代码的方式，从一个最简单的例子入手来学习框架集。例如，已有两个html网页：top.html和bottom.html，top.html网页的内容是显示文字“这是上边的网页”，bottom.html网页的内容是显示文字“这是下边的网页”。

用记事体编辑一个框架集，将整个窗口分成上、下两部分(分别显示网页top.html和bottom.html)的框架集网页frameset1.html。该框架集的代码如下。

---------------------------frameset1.html ---------------------------

<html>

<head>

</head>

</frameset>

你的浏览器不支持框架。

</body></noframe>

</noframes>

</html>

--------------------------------------------------------------------

这里的rows="80,∗"属性指定框架集将页面分成上、下两行，上行高度为80像素，下行的高度为整个窗口的高度减去上边的高度。从图2-53可以看出，框架之间默认是有边框的，默认的边框线粗细为1，边框间距为1。

图2-53　最简单的框架集

该例中，<frame src="top.html">指定把网页top.html显示在上边框架；<frame src="bottom.html">指定把网页bottom.html显示在下边框架内。

<noframe>……</noframe>标签的作用是当用户浏览器不支持框架，<frameset>……</frameset>中的内容不能正常显示时，显示<noframe>……</noframe>中的内容。由于目前绝大多数浏览器都支持框架，所以通常省略该标签。

提示：如果down.html又是一个框架集，则可以形成复杂的框架结构，如把页面分成3部分或更多部分。

2. 框架的嵌套

当网页需要更复杂的框架结构时，可以采用框架的嵌套。使用<frameset>……</frameset>标签替换<frame>……</frame>标签，实现框架的嵌套。

除了上例中的top.html以外，设另有两个简单网页：left.html和right.html，left.html网页只显示“这是左边网页”，right.html网页只显示“这是右边网页”。以下是创建了一个带有嵌套框架的框架集HTML代码。

--------------------------清单frameSet2.html------------------------

<html>

<head>

<title>框架的嵌套</title>

</head>

</frameset>

</html>

--------------------------------------------------------------------

浏览效果如图2-54所示。

图2-54　框架的嵌套

frameset1.html、frameset2.html及相关文件，都放在打包文件的frameset1文件夹里。

3. 使用Dreamweaver CS4创建框架页

使用Dreamweaver CS4能够可视化创建框架集，创建、编辑框架内各个网页，并可选择“文件”−>“保存全部”命令，依次保存框架集和框架内各个网页。

选择菜单“文件”−>“新建”命令，在弹出的“新建文档”对话框中选择“示例中的页”类别，再从“示例文件夹”下选择“框架页”，然后在右边的列表中选择某种框架集，单击“创建”按钮，出现一个“框架标签辅助功能属性”对话框，在该对话框内为每一个框架指定一个标题，单击“确定”按钮，即可创建框架页，如图2-55所示。

这时自动创建了几个新文档：框架集和各个框架中存放的网页。

Dreamweaver CS4提供了框架面板，在“窗口”菜单下选中“框架”，或者按Shift+F2快捷键，可打开框架面板(见图2-56(b))，在框架面板中可以方便地选取框架集和框架，在属性面板(见图2-56(a))中可对选中的框架集或框架属性进行修改。例如，选中框架集以后，在属性面板中可设置框架集是否有边框、边框的宽度、边框的颜色等。

在框架内单击，即可编辑这个框架内的网页内容，编辑好全部框架内的网页以后，选择“文件”−>“保存全部”命令，弹出“另存为”对话框，要求命名保存的是框架集网页，单击“保存”按钮，系统会按照从上到下、从左到右的顺序，依次出现命名保存各个框架中网页的对话框。