第4天上午使用框架和Div灵活布局网页

本章学习流程图

知识导读

今天上午我们将学习另外两个使用起来更加自由的网页布局排版工具，它们就是框架和Div。框架能够把Web浏览器的窗口分成几个独立的区域，每个区域可以单独显示一个网页或图像。Dreamweaver中的AP Div实际上就是来自CSS中的定位技术，只不过Dreamweaver将其进行了可视化操作。Spry框架是一个可用来构建更加丰富网页的JavaScript和CSS库，使用它可以显示XML数据，并创建显示动态数据的交互式页面元素，而无须刷新整个页面。

完成今天上午内容后，您将能够

◎ 掌握框架和框架集的创建方法

◎ 设置框架和框架集属性

◎ 掌握AP Div的插入和属性设置

◎ 掌握AP Div的基本操作

◎ 掌握AP Div与表格的转换

◎ 掌握使用Spry布局对象

实例展示

将AP Div转换为表格

利用AP Div制作网页下拉菜单

7.1 框架网页概述

使用框架可以将浏览器窗口分成包含单独网页的区域，这样可以使网页布局更合理，同时也能对网站或网页起到导航作用。

使用框架最常见的情况就是：一个框架显示包含导航控件的文档，而另一个框架显示只包含内容的文档。框架由框架集和框架组成。框架集就是框架的集合，它是在一个文档内一组框架结构的HTML网页，定义了网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等。框架是框架集中显示的文档。每个框架实质上都是一个独立存在的HTML文档。

指点迷津

浏览器不支持框架时应该怎么办？

虽然框架技术是较早使用的一种导航技术，但是仍然有一些早期版本的浏览器不支持框架。制作人员可能无法改变这一现象，他们所能做的只是显示该浏览器不支持框架技术，有些内容无法看到，仅此而已。如果用户愿意也可以再制作一个不带框架的页面，以防不测。使用HTML中的<noframes>和</noframes>标签可以完成这一任务，当浏览器不能加载框架集文件时，会检索到<noframes>标签，并显示标签中的内容。

7.2 创建框架和框架集

学习框架就是为了更好地使用框架。Dreamweaver CS4提供了多种创建框架的方法，用户可以自己随意地建立框架集，也可以使用Dreamweaver提供的预置框架集。

7.2.1 创建框架集

在Dreamweaver中可以很方便地创建框架和框架集，操作方法如下。

提示

框架就像一个茶杯，里面可以装入不同的液体，而框架集则是放杯子的托盘，可以在上面放置多个杯子。在一个框架集中可以有多个框架，在框架中分列显示不同的内容。

1 启动Dreamweaver，执行“文件”|“新建”命令，弹出“新建文档”对话框，在对话框中选择“空白页”|“HTML”|“无”选项，如图7-1所示。

图7-1 “新建文档”对话框

2 单击“创建”按钮，创建一个空白文档，如图7-2所示。

图7-2 新建空白文档

3 将光标置于页面中，执行“修改”|“框架集”命令，在弹出的子菜单中出现拆分框架的菜单项，如图7-3所示。

高手支招

也可以单击“布局”插入栏中框架按钮右边的小三角，在弹出的菜单中选择拆分框架的样式。

4 在弹出的子菜单中执行“拆分左框架”命令，将创建一个左右框架网页，如图7-4所示。

图7-3 执行“框架集”命令

图7-4 创建框架

7.2.2 插入预定义框架集

在Dreamweaver中提供了许多的框架集，直接应用这些框架结构，可以快速地创建出框架集，具体操作步骤如下。

1 执行“文件”|“新建”命令，弹出“新建文档”对话框，如图7-5所示。

图7-5 “新建文档”对话框

2 在对话框中选择“示例中的页”|“框架页”|“上方固定，左侧嵌套”选项，如图7-6所示。

图7-6 选择框架页

3 单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如图7-7所示。

图7-7 “框架标签辅助功能属性”对话框

4 单击“确定”按钮，创建一个“上方固定，左侧嵌套”的框架网页，如图7-8所示。

图7-8 创建框架网页

7.2.3 保存框架和框架集文件

当编辑完框架及框架文件后，必须对其进行保存，如果像保存普通文件一样保存框架，只会保存鼠标所定位的框架内容，其余的框架内容将会丢失，所以选择一个恰当的保存方法是非常重要的。

知识要点

在浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和框架中出现的所有文档。

1 执行“文件”|“保存全部”命令，弹出“另存为”对话框，将整个框架集命名为index.html，单击“保存”按钮，保存整个框架集，如图7-9所示。

图7-9 为整个框架集命名

2 将光标置于顶部的框架中，执行“文件”|“保存框架”命令，弹出“另存为”对话框，在对话框的“文件名”中输入名称top，如图7-10所示，为顶部的框架命名。单击“保存”按钮，保存顶部的框架。

图7-10 为顶部的框架命名

3 将光标置于左边的框架中，执行“文件”|“保存框架”命令，弹出“另存为”对话框，在对话框的“文件名”中输入left，如图7-11所示，为左边框架命名。单击“保存”按钮，保存左边的框架。

图7-11 为左边框架命名

4 将光标置于右边的框架中，执行“文件”|“保存框架”命令，弹出“另存为”对话框，在对话框的“文件名”中输入right，如图7-12所示，为右边框架命名。

图7-12 为右边框架命名

5 单击“保存全部”按钮，整个框架集将保存完毕。

提示

如果某个页面被划分为3个框架，那么它实际上包含的是4个独立的文件，包括一个框架集文件和3个框架内容文件。框架内容文件包含页面框架中的内容，框架集文件是使用框架定义页面的文件，包括框架集内存储页面框架大小和位置的信息，还存储了每个框架载入内容的文件名。

7.3 选择框架和框架集

框架和框架集的选择可在“框架”面板中进行，也可在文档窗口中选中框架或框架集，当某个框架被选中时，其边框将用虚线勾画出来；当选中框架集时，该框架集内所有的框架均用虚线勾画出来。

7.3.1 在框架面板中选择框架或框架集

执行“窗口”|“框架”命令，打开“框架”面板，在面板中单击需要选择的框架，框架的边界就会被虚线包围，如图7-13所示。

图7-13 在“框架”面板中选择框架

在“框架”面板中单击框架集的边框，也可以选择整个框架集。此时，框架集的边框变为虚线，如图7-14所示。

图7-14 在“框架”面板中选择框架集

提示

按Shift+F2组合键，也可以打开“框架”面板。

7.3.2 在文档窗口中选择框架或框架集

在文档窗口中，将光标置于要选择的框架中，按住Shift键和Alt键的同时单击框架内部，即可显示要选择的框架，如图7-15所示。

图7-15 在文档窗口中选择框架

在文档窗口中，当鼠标指针靠近框架集的边框且出现上下箭头时，单击整个框架集的边框，可以选择整个框架集，如图7-16所示。

图7-16 在文档窗口中选择框架集

7.4 设置框架和框架集属性

命名框架、设置边框和边距都要在框架“属性”面板中进行设置。预设框架集的默认属性值为无边框、无滚动条，在浏览器中查看时无法调整框架的大小，要改变这些属性，需要在“属性”面板中修改相应的选项。

7.4.1 设置框架属性

选中一个框架，打开其“属性”面板，如图7-17所示，在此面板中可以设置框架的基本属性。

图7-17 框架的属性面板

知识要点

框架属性面板中可以进行如下设置。

◎ 框架名称：用来作为链接指向的目标。

◎ 源文件：确定框架的源文档，可以直接输入名字，或单击文本框右侧的浏览文件图标查找并选取文件。也可以通过将插入点放在框架内并选择“文件”|“在框架中打开”命令打开文件。

◎“滚动”下拉列表：确定当框架内的内容显示不下的时候是否出现滚动条。选项有“是”、“否”、“自动”和“默认”。

◎ 不能调整大小：限定框架尺寸，防止用户拖动框架边框。

◎ 边框：用来控制当前框架边框。选项有“是”、“否”和“默认”。

◎ 边框颜色：设置与当前框架相邻的所有框架的边框颜色。

◎ 边界宽度：设置以像素为单位的框架边框和内容之间左右边距，以像素为单位。

◎ 边界高度：设置以像素为单位的框架边框和内容之间上下边距，以像素为单位。

7.4.2 设置框架集属性

要显示框架集的属性面板，首先单击框架的边框，选中框架集，此时在“属性”面板中将显示框架集的属性，如图7-18所示。

图7-18 框架集的属性面板

知识要点

框架集属性面板中可以进行如下设置。

◎ 边框：设置是否有边框，其下拉列表中包含“是”、“否”、“默认”，选择默认，将由浏览器端的设置来决定。

◎ 边框宽度：设置整个框架集的边框宽度，以像素为单位。

◎ 边框颜色：设置整个框架集的边框颜色。

◎ 行或列：属性面板中显示的是行或列，由框架集的结构而定。

◎ 单位：行、列尺寸的单位，其下拉列表中包含“像素”、“百分比”、“相对”3个选项。

7.5 关于AP Div

AP Div是一种HTML页面元素，可以将它定位在页面上的任意位置。AP Div可以包含文本、图像或其他HTML文档。AP Div的出现使网页从二维平面拓展到三维，可以使页面上的元素进行重叠或复杂的布局。

7.5.1 AP Div的概念

AP Div是CSS中的定位技术，在Dreamweaver中将其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，使用AP Div功能，可以将其放置在网页中的任何位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。层和行为的综合使用，还可以不使用任何的JavaScript或HTML编码创作出动画效果。

可以将AP Div理解为一个文档窗口内的又一个小窗口，像在普通窗口中的操作一样，在AP Div中可以输入文字，也可以插入图像、动画影像、声音、表格等，对其进行编辑。但是，利用层可以非常灵活地放置内容。

AP Div的功能主要有以下几个方面。

◎ 重叠排放网页中的元素：利用AP Div，可以实现不同的图像重叠排列，而且可以随意改变排放的顺序。

◎ 精确的定位：单击AP Div上方的四边形控制手柄，将其拖动到指定位置，就可以改变层的位置。如果要精确定位AP Div在页面中的位置，可以在AP Div的属性面板中输入精确的数值坐标。如果将AP Div的坐标值设置为负数，AP Div会在页面中消失。

◎ 显示和隐藏AP Div：AP Div的显示和隐藏可以在AP Div面板中完成。当AP Div面板中的AP Div名称前显示的是“闭合眼睛”的图标时，表示AP Div被隐藏；当AP Div面板中的AP Div名称前显示的是“睁开眼睛”的图标时，表示AP Div被显示。

7.5.2 AP Div面板

在网页中创建了AP Div元素后，在面板中可以方便地处理AP Div的操作并设置AP元素的属性，可以执行“窗口”|“AP元素”命令，打开“AP元素”面板，如图7-19所示。

图7-19 “AP元素”面板

高手支招

按F2键也可以打开“AP元素”面板。

“AP元素”面板分3栏，最左侧的是眼睛标记，用鼠标直接单击标记，可以显示或隐藏所有的AP元素；中间显示的是AP元素的名称；最右侧的是AP元素在Z轴排列的情况。

7.6 插入AP Div

在Dreamweaver中，AP Div和表格一样可以用于网页的版式和布局，在网页中适当地使用AP Div，可以让版式变得更加轻松。创建AP Div后，只需要将插入点放置于该AP Div中，然后就可以像在页面中添加内容一样，将内容添加到AP Div中。

提示

因为AP Div使用的是透明背景，所以当两个层重叠在一起时，如果不给上面的层设置背景图像，那么上面的层将不会影响下面层的浏览效果。

7.6.1 创建普通AP Div

Dreamweaver可以很方便地在网页上创建AP Div，并精确地定位AP Div，创建AP Div具体操作步骤如下。

1 打开网页文档，如图7-20所示。

图7-20 打开网页文档

2 将光标置于页面中，执行“插入”|“布局对象”|“AP Div”命令，如图7-21所示。

图7-21 执行“AP Div”命令

3 执行命令后，即可插入AP Div，如图7-22所示。

高手支招

插入AP Div还有以下两种方法。

◎ 在“布局”插入栏中直接用鼠标拖曳“绘制AP Div”按钮，插入AP Div。

◎ 在“布局”插入栏中单击“绘制AP Div”按钮，在文档窗口中按住鼠标不放并拖动，可以绘制一个AP Div。按住Ctrl键不放，可以连续绘制多个AP Div。

7.6.2 创建嵌套AP Div

在Dreamweaver CS4中，一个AP Div里还可以包含另外一个AP Div，也就是嵌套AP Div，嵌套的AP Div称为子AP Div，子AP Div外面的AP Div称为父AP Div。

图7-22 插入AP Div

将光标置于文档窗口中的现有AP Div中，执行“插入”|“布局对象”|“AP Div”命令，即可创建嵌套AP Div，如图7-23所示。

图7-23 创建嵌套AP Div

7.7 设置AP Div的属性

插入AP Div之后，可以对其进行属性的设置，首先选中插入的AP Div，在“属性”面板中进行相应的设置。

7.7.1 显示/隐藏属性

当处理文档时，可以使用“AP Div”面板手动显示和隐藏AP Div。设置AP Div的显示/隐藏属性具体操作步骤如下。

1 执行“窗口”|“AP元素”命令，打开“AP元素”面板，如图7-24所示。

图7-24 “AP元素”面板

2 单击“AP元素”面板中的眼睛按钮，可以显示或隐藏AP Div，当该按钮为时，显示AP Div，如图7-25所示。

图7-25 显示AP Div

3 单击“AP元素”面板中的眼睛按钮，当该按钮为时，为隐藏AP Div，如图7-26所示。

图7-26 隐藏AP Div

7.7.2 改变堆叠顺序

如果在AP Div面板的顶部选中“防止重叠”复选框，则AP Div之间将不能重叠，而只能并行排列，在移动时，也无法将AP Div移动到已经被其他AP Div覆盖的地方。

AP Div的堆叠顺序即是AP Div的显示顺序，在“AP元素”面板中改变AP Div的重叠顺序有以下两种方式。

◎ 在“AP元素”面板中选定某个AP Div，然后单击“Z”对应的属性列，此时会出现Z轴值设置框，在设置框中更改数值即可调整AP Div的堆叠顺序。数值越大，显示越在上面，如图77所示。

图7-27 设置Z轴值

◎在“AP元素”面板中选中要改变堆叠顺序的AP Div，然后按住鼠标拖动AP Div至想要的重叠位置，在移动AP Div时可以看到一条线，当该线显示在想要的堆叠顺序时释放鼠标即可改变AP Div的顺序，如图78所示。

图7-28 拖动AP Div

7.7.3 添加滚动条

选择AP Div后，在“属性”面板中将显示相应的属性选项，如图6-29所示。

图7-29 AP Div的属性面板

指点迷津

怎样动态改变AP Div的背景？

使用“改变属性”动作可以改变对象的属性值。比如，当某个鼠标事件发生之后，由于这个动作的影响，动态地改变AP Div背景等属性，以求获得相对动态的页面。

在“属性”面板中的“溢出”文本框中单击符号，在弹出的下拉列表中选择scroll滚动溢出选项，如图7-30所示。

图7-30 设置滚动条

溢出选项中有以下几种选择。

◎ visible（可见溢出）：选择该选项时，当AP Div中的内容超出了AP Div的范围时，将自动向右下方扩展AP Div，使溢出的部分也可以在页面中下显示。

◎ hidden（隐藏溢出）：选择该选项时，将不改变AP Div大小，并隐藏溢出部分。

◎ scroll（滚动溢出）：选择该选项时，将保持AP Div大小不变，不管是否超出，都显示滚动条。

◎ auto（自动溢出）：选择该选项时，可以根据AP Div中的内容决定是否溢出自动显示滚动条，当内容溢出AP Div时，将显示滚动条，反之将不显示。

指点迷津

怎样使用AP Div制作页面中的内嵌滚动条？

AP Div的“溢出”下拉?列表用来设置当AP Div的内容超过AP Div的指定大小时，对AP Div内容的显示方法，有4个选项：visible、hidden、scroll和auto。如果选择visible，则当AP Div的内容超过指定大小时，AP Div的边界会自动延伸以容纳这些内容；如果选择hidden，则当AP Div的内容超过指定大小时，将隐藏超出部分的内容；如果选择scroll，则浏览器将在AP Div上添加滚动条；如果选择auto，则当AP Div的内容超过指定大小时，浏览器才显示层的滚动条。利用AP Div的溢出属性可以进行网页排版。

7.7.4 改变可见性

在AP Div属性面板的“可见性”中有4种方式来设置AP Div的显示或隐藏状态，其下拉列表如图7-31所示。

图7-31 设置AP Div的可见性

知识要点

在“可见性”选项中可以进行如下设置。

◎ default（默认）：选择该选项时，则使用浏览器的默认设置。

◎ inherit（继承）：选择该选项时，在有嵌套的AP Div的情况下，当前AP Div使用父AP Div的可见性属性。

◎ visible（可见）：选择该选项时，则无论父AP Div是否可见，当前AP Div都可见。

◎ hidden（隐藏）：选择该选项时，则无论父AP Div是否可见，该AP Div都为隐藏。

7.8 AP Div与表格的转换

与表格相比，AP Div更方便，所以在设计网页的时候应首先考虑使用AP Div。但是浏览器版本对AP Div有一定的限制，因此不是所有的浏览器都支持AP Div的应用。相对来说使用表格能获得多个浏览器的支持。

7.8.1 将AP Div转换为表格

可以使用AP Div来排版网页，然后将AP Div转换为表格，以使该网页能够在Microsoft Internet Explorer 4.0和Netscape Navigator 4.0之前的版本中正确的显示。

执行“修改”|“转换”|“将AP Div转换为表格”命令，弹出“将AP Div转换为表格”对话框，如图7-32所示。

图7-32 “将AP Div转换为表格”对话框

高手支招

“将AP Div转换为表格”对话框中可以进行如下设置。

◎ 表格布局：“最精确”以精确方式转换，为每个AP Div建立一个单元格，并且创建所有的附加单元格，以保证各单元格之间的距离。“最小：合并空白单元”以最小方式转换，去掉宽度和高度小于指定像素数目的空单元格。“使用透明GIFs”用来定义是否使用透明GIF图像。“置于页面中央”表示转换的表格将在页面中居中对齐，否则将左对齐。

◎ 布局工具：“防止重叠”选项一般要选择，如果有AP Div发生重叠，将无法进行转换工作。“显示AP元素面板”、“显示网络”和“靠齐到网络”这3个选项可根据需要进行选择。

一般使用AP Div将元素精确定位，然后将AP Div转换为表格，将AP Div转换为表格的效果如图7-33所示，具体操作步骤如下。

图7-33 将AP Div转换为表格的效果

起始文件：CD-ROM/起始文件/第4天上午/7.8.1/index.htm

完成文件：CD-ROM/完成文件/第4天上午/7.8.1/index1.htm

1 打开网页文档，如图7-34所示。

图7-34 打开网页文档

2 执行“修改”|“转换”|“将AP Div转换为表格”命令，如图7-35所示。

图7-35 执行“将AP Div转换为表格”命令

3 执行命令后，弹出“将AP Div转换为表格”对话框，在对话框中进行相应的设置，如图7-36所示。

图7-36 “将AP Div转换为表格”对话框

4 单击“确定”按钮，将AP Div转换为表格，如图7-37所示。

图7-37 将AP Div转换为表格

5 保存文档，按F12键在浏览器中预览，效果如图7-33所示。

7.8.2 将表格转换为AP Div

在设计网页时经常需要不断地调整页面的布局。如果网页布局是表格形式，调整起来就会比较费劲，此时用户可以将表格布局转换为AP Div布局。

执行“修改”|“转换”|“将表格转换为AP Div”命令，弹出“将表格转换为AP Div”对话框，如图7-38所示。

图7-38 “将表格转换为AP Div”对话框

下面通过实例讲述将表格转换为AP Div的方法，效果如图7-39所示，具体操作步骤如下。

图7-39 将表格转换为AP Div

起始文件：CD-ROM/起始文件/第4天上午/7.8.2/index.htm

完成文件：CD-ROM/完成文件/第4天上午/7.8.2/index1.htm

1 打开网页文档，如图7-40所示。

图7-40 打开网页文档

2 执行“修改”|“转换”|“将表格转换为AP Div”命令，弹出“将表格转换为AP Div”对话框，在对话框中进行相应的设置，如图7-41所示。

图7-41 “将表格转换为AP Div”对话框

3 单击“确定”按钮，将表格转换为AP Div，如图7-42所示。

图7-42 将表格转换为AP Div

4 保存文档，按F12键在浏览器中预览，效果7-39所示。

指点迷津

在什么情况下需要将AP Div转换为表格？

需要将AP Div转换为表格通常情况下有两个原因：一是因为浏览器窗口大小或桌面分辨率改变而造成的严重偏位问题，转换为表格后会好一点；二是由于Internet Explorer 4.0与Netscape Navigator4.0之前的版本并不支持AP Div，因此如果考虑网页需要在各版本中都能正常显示的话，就必须将AP Div转换为表格。

7.9 使用Spry布局对象

Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。可以方便地插入这些构件（采用最简单的HTML和CSS代码），然后设置构件的样式。框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、与菜单项交互等。

7.9.1 使用Spry菜单栏

菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏构件可在紧凑的空间中显示大量可导航信息，并使站点访问者无须深入浏览站点即可了解站点上提供的内容。下面通过实例讲述Spry菜单栏的使用方法，效果如图7-43所示，具体操作步骤如下。

图7-43 Spry菜单栏效果

指点迷津

Spry菜单栏构件使用DHTML层来将HTML部分显示在其他部分的上方。如果页面中包含Flash内容，可能出现问题，因为Flash影片总是显示在所有其他DHTML层的上方，因此，Flash内容可能会显示在子菜单的上方。此问题的解决方法是，更改Flash影片的参数，让其使用wmode="transparent"。

完成文件：CD-ROM/完成文件/第4天上午/7.91/index1.htm

1 新建一文档，将光标置于页面中，执行“插入”|“布局对象”|“Spry菜单栏”命令，如图7-44所示。

图7-44 执行“Spry菜单栏”命令

2 执行命令后，弹出“Spry菜单栏”对话框，在对话框中勾选“水平”单选按钮，如图7-45所示。

图7-45 “Spry菜单栏”对话框

3 单击“确定”按钮，插入Spry菜单栏，如图7-46所示。

图7-46 插入Spry菜单栏

高手支招

插入Spry菜单栏还有以下两种方法。

◎ 在“布局”插入栏中直接用鼠标拖曳“Spry菜单栏”按钮，也可以插入Spry菜单栏。

◎ 在“布局”插入栏中单击“Spry菜单栏”按钮，也可以插入Spry菜单栏。

4 保存文档，按F12键在浏览器中预览，效果7-43所示。

7.9.2 使用Spry选项卡式面板

选项卡式面板是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，将会打开相应构件的面板。选项卡式面板构件中只有一个内容面板处于打开状态。下面通过实例讲述使用Spry选项卡式面板的方法，效果如图7-47所示，具体操作步骤如下。

图7-47 Spry选项卡式面板效果

完成文件：CD-ROM/完成文件/第4天上午/7.9.2/index1.htm

1 将光标置于页面中，执行“插入”|“布局对象”|“Spry选项卡式面板”命令，如图7-48所示。

图7-48 执行“Spry选项卡式面板”命令

2 执行命令后，即可插入Spry选项卡式面板，如图7-49所示。

图7-49 插入Spry选项卡式面板

3 保存文档，按F12键在浏览器中预览，效果如图7-47所示。

提示

选项卡式面板构件的HTML代码中包含所有面板的外部Div标签、一个标签列表、一个用来包含内容面板的Div和各面板对应的Div。在选项卡式面板构件的HTML中，在文档头中和选项卡式面板构件的HTML标记之后还包括脚本标签。

7.9.3 使用Spry折叠式

折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。下面通过实例讲述使用Spry折叠式的方法，效果如图7-50所示，具体操作步骤如下。

图7-50 Spry折叠式效果

完成文件：CD-ROM/完成文件/第4天上午/7.9.3/index1.htm

1 将光标置于页面中，执行“插入”|“布局对象”|“Spry折叠式”命令，如图7-51所示。

图7-51 执行“Spry折叠式”命令

2 执行命令后，即可插入Spry折叠式，如图7-52所示。

图7-52 插入Spry折叠式

提示

折叠构件的默认HTML中包含所有面板的外部Div标签以及各面板对应的Div标签，各面板的标签中还有一个标题Div和内容Div。折叠构件可以包含任意数量的单独面板。在折叠构件的HTML中，在文档头和折叠构件的HTML标记之后还包括脚本标签。

3 将文字“标签1”删除，输入文字，在“属性”面板中将“大小”设置为16像素，“文本颜色”设置为#FF0000，如图7-53所示。

图7-53 输入文字

4 将文字“内容1”删除，输入文字，在“属性”面板中将“大小”设置为12像素，如图7-54所示。

图7-54 输入文字

5 将文字“标签2”删除，输入文字“西方情人节”，在“属性”面板中将“大小”设置为16像素，“文本颜色”设置为#FF0000，如图7-55所示。

图7-55 输入文字

6 将光标置于文字“西方情人节”的后面，此时右边出现按钮，单击此按钮，将文字“内容2”删除，输入文字，如图7-56所示。

图7-56 输入文字

7 保存文档，按F12键在浏览器中预览，效果如图7-50所示。

7.9.4 使用Spry可折叠面板

可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。下面通过实例讲述使用Spry可折叠面板的方法，效果如图7-57所示，具体操作步骤如下。

图7-57 Spry可折叠面板效果

完成文件：CD-ROM/完成文件/第4天上午/7.9.4/index1.htm

1 将光标置于页面中，执行“插入”|“布局对象”|“Spry可折叠面板”命令，如图7-58所示。

图7-58 执行“Spry可折叠面板”命令

2 执行命令后，即可插入Spry可折叠面板，如图7-59所示。

图7-59 插入Spry可折叠面板

3 将文字“Tab”删除，输入文字，在“属性”面板中将“大小”设置为16像素，“文本颜色”设置为#FF0000，如图7-60所示。

图7-60 输入文字

4 将文字“内容”删除，插入3行2列的表格，如图7-61所示。

图7-61 插入表格

5 分别在单元格中插入相应的图像，如图7-62所示。

图7-62 插入图像

6 保存文档，按F12键在浏览器中预览，效果如图7-57所示。

提示

可折叠面板构件的HTML中包含一个外部Div标签，其中包含内容Div标签和选项卡容器Div标签。在可折叠面板构件的HTML中，在文档头和可折叠面板的HTML标记之后还包括脚本标签。

7.10 综合练习

本章主要学习了创建框架Div布局网页的基本知识和操作方法，下面通过两个实例进一步学习与掌握框架和Div技术的使用。

练习1——创建浮动框架

嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。下面通过实例讲述浮动框架的创建方法，效果如图7-63所示，具体操作步骤如下。

图7-63 浮动框架网页

指点迷津

浮动框架是什么？怎样制作浮动框架？

通过浮动框架，可以在一个页面中嵌入多个页面。由于Dreamweaver中并没有提供浮动框架的可视化制作方案，因此需要编写一些页面的源代码，如

            <iframe src="content.htm" width=520 height="600" frameborder="0"
        scrolling="auto"></iframe>

起始文件：CD-ROM/起始文件/第4天上午/综合练习1/index.htm

完成文件：CD-ROM/完成文件/第4天上午/综合练习1/index1.htm

1 打开网页文档，如图7-64所示。

图7-64 打开网页文档

2 将光标置于要插入浮动框架的位置，执行“插入”|“标签”命令，弹出“标签选择器”对话框，如图7-65所示。

图7-65 “标签选择器”对话框

提示

单击“常用”插入栏中的“标签选择器”按钮，也可以弹出“标签选择器”对话框。

3 在对话框中选择“HTML标签”|“浏览器特定”|“iframe”选项，如图7-66所示。

图7-66 选择iframe

4 单击“插入”按钮，弹出“标签编辑器-iframe”对话框，如图7-67所示。

图7-67 “标签编辑器-iframe”对话框

5 在对话框中单击“源”文本框右边的“浏览”按钮，弹出“选择文件”对话框，如图7-68所示。

图7-68 “选择文件”对话框

知识要点

标签库（在Dreamweaver中）是一组特定类型的标签，其中还包含Dreamweaver应如何设置标签格式的信息。标签库提供了Dreamweaver用于代码提示、目标浏览器检查、标签选择器和其他编码功能的标签信息。使用标签库编辑器，可以添加和删除标签库、标签、属性和属性值，可以设置标签库的属性（包括格式，以方便在代码中进行识别）并编辑标签和属性。

6 在对话框中选择文件后，单击“确定”按钮。在“名称”文本框中输入相应的名称kuangjia，“宽度”设置为585像素，“高度”设置为650像素，“对齐”设置为“中间”，“滚动”设置为“是”，勾选“显示边框”复选框，如图7-69所示。