(共45张PPT)
第4章 表 格
表格是网页中的一种重要元素，表格除了用于组织数据以方便显示和浏览外，还常常用于网页其它元素的布局定位。本章主要介绍表格在网页制作中的应用，包括插入表格、表格的格式设置、表格的基本操作以及表格在布局中的应用等。
4.1 表格的插入
在文档窗口的“设计视图”中，通常使用以下方法插入表格。
① 选择菜单【插入】|【表格】，或在插入工具栏中选择“常用”类别，单击其中的“表格”按钮(图4.1)。
② 在弹出的表格对话框(如图4.2所示)中，输入行数、列数等相关参数后点击“确定”按钮，就在文档中当前位置插入一个表格。
也可以将其它应用软件制作的表格数据导入成为一个表格，操作方法在4.5节介绍。
4.2 表格的有关参数
表格除了要设置行数、列数外，还要设置表格宽度、边框、边距、间距等参数。
(1) 表格的宽度
在设置表格宽度时，可以选择两种单位——像素和百分比。选择像素，在浏览时，不管浏览器窗口如何调整，表格的宽度都保持不变；当选择百分比时，表示其相对于浏览器窗口宽度的百分比，当浏览器窗口的宽度改变时，表格宽度会随之调整。
(2) 表格的边框
边框用于指定表格边框的粗细(以像素为单位)。如果
4.2 表格的有关参数
希望浏览器显示的表格没有边框，可将边框粗细设置为0，这时，在浏览器中将看不到表格的边框。
(3) 单元格的边距
“单元格边距”又称为“填充”，用来设置单元格内对象距单元格边缘的距离。
(4) 单元格的间距
“单元格间距”用来设置相邻单元格之间的距离。
表格边框、单元格边距、单元格间距的表现形式如图4.3所示。
4.3 表格的基本操作
表格插入以后，如果对表格的行列数或其它参数不满意，可以对表格的行和列进行添加和删除、对单元格进行合并和拆分、对表格的边框、单元格的边距和间距进行设置。
4.3.1 选取表格元素
在对表格进行编辑前，首先要选取表格元素，要选择表格，可以采取以下几种方法之一。
① 将插入点定位在表格中，然后单击状态栏中标签选择区中的
标签，如图4.4所示。
② 将鼠标指针移到表格的上边框或下边框，当鼠标指
4.3 表格的基本操作
针变成如图4.5所示的形状时，单击鼠标即可选中表格。
③ 在表格的任意位置右键单击，然后在弹出的菜单中选择【表格】|【选择表格】命令选中表格。
④ 将插入点定位在表格中，选择菜单【修改】|【表格】|【选择表格】命令选中表格。
选中表格后，表格四周会出现黑线，并且显示表格的控制柄。当鼠标移到控制柄上时，鼠标指针会变成双向箭头，此时按下鼠标左键拖动，可以调整表格的大小。
如果要选择表格中的单元格，可以采用以下几种方法之一。
4.3 表格的基本操作
① 将鼠标指针置于单元格中，沿任意方向拖动，可以选中一个或多个连续的单元格，如图4.6所示。
② 将鼠标指针置于单元格中，按下Ctrl键的同时单击多个单元格，可以选中一组不连续的单元格，如图4.7所示。
③ 将鼠标指针置于单元格中，按下Shift键，再将鼠标指针移到其它单元格单击，可以选择矩形区域的所有单元格。
④ 要选中整行或整列的单元格，将鼠标指针移到行的左端或者列的上端，当鼠标指针变为黑色箭头( 或 )
4.3 表格的基本操作
时，单击鼠标，即可选中整行或整列中的单元格。
4.3.2 修改表格
表格创建以后，可以对表格添加或删除行或列，对表格中的单元格进行合并或拆分。
要删除表格的行(列)，可以采取下列方法之一。
① 选中要删除的表格行(列)，直接按下Del键。
② 在要删除的表格行(列)的任意一个单元格上单击鼠标右键，在弹出的菜单中选择【表格】|【删除行】(【删除列】)，则会删除该行(列)，如图4.8所示。
要增加表格的行(列)，首先将鼠标置于要增加新行(列)的位置，然后采取下列方法之一。
4.3 表格的基本操作
① 右键单击，在弹出的菜单中选择【表格】|【插入行】(【插入列】)命令，就会在鼠标指针所在单元格的上(左)面插入行(列)。如果选择【表格】|【插入行或列】命令，会弹出对话框(如图4.9)，可以在其中设置插入的是行还是列，插入多少行/列，是插入到当前单元格之上(前)还是之下(后)。设置完毕后单击“确定”即可为表格插入行或者列。
② 选择主菜单【插入】|【表格对象】，在【表格对象】的子菜单中有四个命令，分别是【在上面插入行】、【在下面插入行】、【在左边插入列】和【在右边插入列】，如图4.10所示。执行相应的命令，就可以为
4.3 表格的基本操作
表格插入行(列)。
修改表格行列数还可以在选中整个表格后，在文档窗口下方的“表格属性”面板中，修改行数和列数。如图4.11所示。
在Dreamweaver中，可以根据需要将一个单元格拆分成几个单元格，也可以将几个单元格合并成为一个单元格。
要拆分单元格执行以下操作：将插入点置于要拆分的单元格，执行主菜单【修改】|【表格】|【拆分单元格】，或在要拆分的单元格中右键单击，在弹出的快捷菜单中选择【表格】|【拆分单元格】，弹出如图
4.3 表格的基本操作
4.12所示的对话框，在对话框中选择是拆分为行还是列，在行数(列数)后设置要拆分的行数(列数)，设置完成后点击“确定”，原有的一个单元格就被分成了多个单元格，如图4.13所示。
以将鼠标指针置于要拆分的单元格内，然后在文档窗口下方的“单元格属性”面板中，点击“拆分单元格为行或列”按钮 (如图4.14)，也会弹出如图4.12所示的对话框。
要合并单元格，首先要选定进行合并的一组单元格(该组单元格必须连续且组成矩形区域，否则无法合并)，
4.3 表格的基本操作
然后执行主菜单【修改】|【表格】|【合并单元格】，或者右键单击，在弹出的菜单中选择【表格】|【合并单元格】完成合并。
属性面板中的“合并单元格”按钮 (图4.15)也具有合并单元格的功能。
4.3.3 制作一个单线表格
在实际应用当中，表格的边框在浏览器中线条太粗，不美观。即使把表格边框宽度设置为1，单元格间距设置为0，效果仍然不理想(如图4.16所示)。在很多情况下(如用表格制作的导航栏)，需要制作更为美观的单线表格。
4.3 表格的基本操作
制作单线表格的步骤如下：
① 创建一个表格。设置表格的行、列数(如3行3列)，边框为0，间距为1。根据需要调整表格的大小。
② 选择表格，为表格添加一种背景颜色(即边线颜色)。
③ 选中所有单元格，为单元格添加与页面背景相同的颜色(通常为白色)。
④ 保存文件，按下F12键，在浏览器中显示效果如图4.17所示。
由以上步骤可以看出，单线表格实际上设置了表格间距的颜色，然后把间距值设置为最小。表格边线实质上是表格间距。
4.3 表格的基本操作
4.3.4 表格的嵌套
表格的单元格中再插入表格即构成表格的嵌套。表格的嵌套广泛应用于网页的排版当中。通常在网页排版时，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到页面内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其
4.3 表格的基本操作
职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到不同于总表格的效果。
插入总表格后，将插入点置于要插入嵌套表格的单元格内，按照4.1节所述方法插入表格，即完成嵌套表格的创建。嵌套表格的效果如图4.18所示。
4.4 表格数据的导入和导出
4.4.1表格数据的导入
在Dreamweaver中，可以将其它应用软件制作完成后的表格数据导入到网页文档中。能够导入的数据有EXCEL表格数据和其它应用软件制作的文本格式表格数据两种。
导入EXCEL表格数据，可选择主菜单【文件】|【导入】|【EXCEL文档】命令，浏览一个外部EXCEL文档，并将其导入到当前页面中。也可以在打开的EXCEL文档中将要导入的内容复制后，粘贴到当前页面中。
4.4 表格数据的导入和导出
导入文本格式的表格数据要求文件中要以制表符、逗号、分号、引号或者其它定界符分隔数据项。导入时，选择主菜单【文件】|【导入】|【表格式数据】命令，弹出“导入表格式数据”对话框(如图4.19)。对话框中各项含义如下：
【数据文件】文本框用于输入需要导入的数据文件的保存路径和文件名，单击其后的“浏览”按钮可以在打开的对话框中选择要导入的文件。
【定界符】用于选择欲导入的文件以什么符号来分隔表格数据，也可以在后面的文本框输入指定的定界符。
4.4 表格数据的导入和导出
“表格宽度”、“单元格边距”、“单元格间距”和“边框”等用于设置所生成的表格的有关参数。
【格式化首行】项设置首行标题的格式。
例如，将下面以“Tab制表符”分隔的一个文本文件导入为网页中的表格后效果如图4.20所示。
第一季度销售额 第二季度销售额 第三季度销售额 第四季度销售额
华北：40.6万 华北：52.6万 华北：54.4万 华北：70.5万
华南：53.2万 华南：50.8万 华南：72.1万 华南：62.9万
4.4 表格数据的导入和导出
4.4.2 表格数据的导出
如果要将网页中的表格数据导出为文本文件，首先将插入点置于该表格的任意单元格内，执行主菜单【文件】|【导出】|【表格】命令，弹出“导出表格”对话框(如图4.21所示)，设置文本文件中要使用的定界符和换行符，点击“导出”按钮，在随后出现的“表格导出为”对话框中确定目标位置和文件名后，点击“保存”按钮即可得到数据文本文件。
4.5 修饰表格
表格插入后，可以通过属性面板修改其相关属性，还可以通过【命令】菜单中的【排序表格】和【格式化表格】命令对表格进行处理。
4.5.1 在属性面板中修饰表格
选中一个表格后，即可在表格的属性面板中对其属性进行修改设置。表格的属性面板如图4.22所示。
在该面板中，除了前面已经介绍的“行数”、“列数”、“宽度”、“填充”、“间距”、“边框”外，还有以下设置项：
【表格Id】：可以在此处为表格起一个名字，用于脚本程序调用。
4.5 修饰表格
【高】：可以以像素或比例为单位设置表格的高度。
【对齐】：用于确定表格相对于页面的显示位置，包括左对齐、右对齐和居中对齐。当对齐方式为默认时，表格的旁边不能显示其它内容。
【类】：可以将CSS规则应用于表格对象。
【背景色】：设置表格的背景颜色。
【边框颜色】：设置表格的边框颜色。
【背景图像】：为表格添加背景图像。
在表格属性面板中，还有“清除已设置的列宽”按钮 、
4.5 修饰表格
“将表格宽度转化为像素”按钮 、“将表格宽度转化为百分比”按钮 、“清除已设置的行高”按钮 、“将表格高度转化为像素”按钮 、“将表格高度转化为百分比”按钮 。
如果选择表格中的单元格，在属性面板中则可以设置选中的单元格的属性(图4.23)，既可以选中单独的单元格，也可以同时选中多个单元格。可以进行单元格的宽度、高度、背景图像、背景颜色、边框颜色、拆分、合并等设置，其中“不换行”指的是使单元格中的所有文本都在一行上，若要将所选的单元格设置为标
4.5 修饰表格
题格式，可以选中“标题”复选框，默认情况下，表格标题内容显示为粗体居中。另外，“水平”和“垂直”可以。对单元格内的文本对齐方式进行设置。
4.5.2 排序表格
如果要使表格中的数据按一定的规律排列，可以使用【排序表格】命令对表格中数据进行排序。例如，有如图4.24所示的表格数据需要排序，首先将插入点定位到表格内，选择主菜单【命令】|【排序表格】命令，弹出“排序表格”对话框，如图4.25所示，在对话框中进行相应设置，单击“确定”按钮完成排序。
4.5 修饰表格
该对话框中各项参数的含义如下：
【排序按】列表框：用于确定依据哪一列的值对表格行进行排序。
【顺序】：确定是按字母顺序还是按数字顺序(数值大小)以及是以升序还是降序进行排序。
【再按】：确定所选择的“顺序”列内容相同的行再按什么方式排序。
【排序包含第一行】：该选项指定表格的第一行是否参加排序。如果第一行是不应移动的标题，则不选择此选项。
4.5 修饰表格
【排序标题行】和【排序脚注行】：用于当一个表被分为thead、tbody、tfoot三部分时，指定对thead和tfoot进行排序。一般不选中。
【完成排序后所有行颜色保持不变】：指定排序之后表格行属性(如颜色)应该与同一内容保持关联。如果表格行使用两种交替的颜色，则不要选择此选项以确保排序后的表格仍具有颜色交替的行。如果行属性特定于每行的内容，则选择此选项以确保这些属性保持与排序后表格中对应的行关联在一起。
对图4.24的表格，选择按“成绩”降序排列，第一行不
4.5 修饰表格
参加排序，排序后的结果如图4.26所示。
4.5.3 格式化表格
在Dreamweaver中，可以通过使用系统自带的表格模板格式化表格，省去很多繁琐的设置表格步骤，提高工作效率。
将插入点定位到表格中，执行主菜单【命令】|【格式化表格】命令，弹出如图4.27所示的对话框，在“格式化表格”对话框中，可以进行如下设置。
在对话框左上角的列表中，可以选择预置的设计方案。示例表格将显示在右侧。
4.5 修饰表格
【行颜色】：指定应用于行的颜色，以及颜色交替的频率。
【第一行】：指定表格第一行的对齐方式、文本样式、背景颜色和文本颜色。如果第一行是标题行，应将其设置为有别于其它行。
【最左列】：指定表格第一列的对齐方式和文本样式。
【边框】：用于设置表格边框以像素为单位的宽度。
【将所有属性套用至TD标注而不是TR标签】复选框：选中此复选框，可以将设计应用于表格单元格(TD标签)而不是表格行(TR标签)。
4.6 布局表格
由于最初表格并不是为布局设计，而是用于显示数据，所以对于初学者要想使用表格设计出布局合理的页面，可能会适得其反。为了简化利用表格布局页面，Dreamweaver中提供了一种“布局”模式。在这种模式下使用布局工具，设计者可以轻松地在页面中画出布局表格以及单元格，并可以对其进行修改、移动，以实现快速布局。使网页设计者能腾出更多的精力，用在页面设计的创意上。
4.6 布局表格
4.6.1 布局视图
在绘制布局表格或单元格以前，必须从标准视图切换到布局视图，首先确认在文档窗口中显示的是设计视图(代码视图中无法直接切换到布局视图模式)，然后执行主菜单【查看】|【表格模式】|【布局模式】命令，或者将插入工具栏切换为“布局”选项卡，单击其中的“布局模式”按钮(图4.28)，即可转换为布局视图。
在第一次选择“布局模式”时，会弹出一个“从布局模式开始”对话框，显示一些提示性信息。如果希望以后不
4.6 布局表格
要显示此提示对话框，可以选中“不要再显示此信息”复选框。
要制作出满意的页面布局，就要在布局视图和标准视图中来回切换，可以单击“布局模式”文档工具栏中的“退出”按钮或“布局”工具栏中的“标准”按钮回到标准视图模式，如图4.29所示。也可以选择主菜单【查看】|【表格模式】|【标准模式】命令回到标准视图模式。
4.6.2 创建布局表格和布局单元格
将视图切换到布局模式后，选择主菜单【插入】|【布
4.6 布局表格
局对象】|【布局表格】命令，或者点击“布局”工具栏中的布局表格按钮 ，当鼠标指针移到文档窗口时，就会变成“＋”形状。按住鼠标左键进行拖动，即可绘制一个布局表格。布局表格的边框显示为绿色，如图4.30所示。
在绘制布局表格后，就可以在其内部绘制布局单元格。选择主菜单【插入】|【布局对象】|【布局单元格】命令，或者点击“布局”工具栏中的布局单元格按钮 ，将鼠标指针移到文档窗口时，就会变成“＋”形状。按住鼠标左键进行拖动，即可绘制一个布局单元格。布局
4.6 布局表格
单元格的边框显示为蓝色，如图4.31所示。
如果未在布局表格内绘制单元格，或者未绘制表格直接绘制单元格，则Dreamweaver会自动为该单元格插入一个布局表格。
如果要连续创建布局表格(单元格)，可以点击布局表格(单元格)按钮后，在绘制布局表格(单元格)时按住Ctrl不放，这样就可以连续绘制布局表格(单元格)了。
注意：不能在布局表格的侧面插入其它布局表格或单元格，只能在布局表格内或下方添加布局表格或单元格。在布局表格的左上角有布局表格的标记，方便区
4.6 布局表格
分和选中表格，在布局表格的上方或下方有表格的宽度像素值。布局表格和布局表格之间不能相互重叠，创建相邻的布局表格时，当距离小于8像素时，Dreamweaver会自动将它们对齐，如果在绘制布局表格时按下Alt键，可以取消Dreamweaver的自动对齐功能。
布局表格和单元格绘制后，鼠标指针置于其边框上，当出现双向箭头时，拖动可以改变布局表格和单元格的大小。选中单元格时拖动可以移动单元格至合适的位置。
“布局”工具栏右侧有四个按钮，可以利用这些按钮增加表格的行和列。如图4.32所示。
4.6 布局表格
当切换到标准视图模式时，可以看到所创建的布局表格被Dreamweaver自动地转化为表格。如图4.33所示。
4.6.3 布局表格的嵌套
在布局表格的内部，可以再绘制一个布局表格，即嵌套表格，效果如图4.34所示。
单击嵌套表格的表格标签，可以像拖动单元格一样拖动它，实现嵌套表格位置的移动。
4.6.4 在布局单元格中添加内容
绘制一个布局表格而未绘制布局单元格时，布局表格的表面是灰色的，此时不能向布局表格内输入任何文本或插入图像，只有在布局表格的单元格中才可以进
4.6 布局表格
行这些操作。
在布局单元格内输入文本的方法以及文本格式的设置和3.2节所述方法相同。如图4.35所示。
4.6.5 布局表格底部下拉菜单
在布局表格的底部(或顶部)，标有表格宽度和表格的列宽度，如图4.36所示。在宽度的数值旁有一个▼符号，点击列宽度数值旁的▼符号出现如图4.37所示的下拉菜单。
在下拉菜单中，有两个选项：【列设置为自动伸展】、【添加间隔图像】。如果使用自动伸展，则无论浏览
4.6 布局表格
器的窗口有多宽，设计的布局都会自动充满。表格中
只能有一列设置为自动伸展，当设置另一列为自动伸
展时，原自动伸展列会转化为固定宽度。间隔图像又称为占位图像，是一种在浏览器中不显示的透明图像，但是它可以用来控制包含自动伸展列的表格。如果在包含自动伸展列的表格中不添加占位图像，固定宽度列的大小会被压缩，当它里面没有内容时甚至会不显示。若首次选择【列设置为自动伸展】时，则弹出图4.38所示的“选择占位图像”对话框。有三个选项：
① 【创建占位图像文件】：创建一个GIF图像以用作
4.6 布局表格
间隔图像，并允许选择一个存储该间隔图像文件的文件夹，例如站点的图像文件夹。
② 【使用现存的占位图像文件】：允许指定现有的间
隔图像文件用于自动伸展表格中，间隔图像应该是透明的GIF格式文件。
③ 【对于自动伸展表格不要使用间隔图像】：如果选用此选项，则布局中固定宽度的列可能收缩到一个较小的宽度，甚至收缩为零宽度。间隔图像帮助将布局的结构维持在最初绘制它时的状态。只有当用户已经将足够的内容放置在固定宽度的列中以防止它们收缩
4.6 布局表格
时或者已经手工添加了间隔图像时，才使用此选项。
对已经添加了间隔图像的列，可以通过单击▼按钮，在下拉菜单中选择【删除间隔图像】删除它，如图4.39所示。同样，对尚未添加或已经删除间隔图像的列，也可以通过单击▼按钮，在下拉菜单中选择【添加间隔图像】为它添加间隔图像。
若点击布局表格宽度数值旁的▼符号，出现如图4.40所示的下拉菜单。
【清除所有高度】命令用于从表格中清除所有单元格高度。当创建布局单元格时，Dreamweaver自动指定
4.6 布局表格
单元格的高度，使单元格以用户绘制的高度显示，即使单元格是空的也是如此。将内容插入到单元格之后，可能不再需要指定的高度，因此可以选择该命令清除。
当添加的内容到比表格宽度大时，会发生“设计”视图中显示的可视宽度与HTML代码中指定的宽度不一致的情况，此时可看到一个列的宽度有两个数字，【使所有宽度一致】命令可以使代码中指定的宽度与可视宽度相匹配。
【移除所有分隔符图像】可以将列中的间隔图像全部移除。
4.6 布局表格
【删除嵌套】可以删除嵌套在另一个布局表格中的布局表格，而且不丢失它的任何内容。
4.6.6 结合跟踪图像使用布局表格规划页面
在布局设计中结合“跟踪图像”对页面进行规划是一种常见方法，能够快速规划页面布局。例如有一个如图4.41所示的页面设计图。规划页面布局时就可以比照该设计图绘制布局表格及单元格。
首先，保证此图像与实际网页的大小相匹配，然后选择选择主菜单【修改】|【页面属性】打开“页面属性”对
4.6 布局表格
话框，在该对话框中选择“跟踪图像”分类，如图4.42 所示。在对话框中选择页面设计图为跟踪图像，点击“确定”。在文档窗口中会出现该图像。
切换到“布局”视图模式，如图4.43所示，就可以利用这个设计图对页面进行规划了。
比照图4.41所示的6个区域创建布局表格和布局单元格。首先创建一个包含整个设计图的布局表格，然后对不同的区域创建布局单元格。建议对不同的区域使用嵌
套表格，避免不同单元格发生行高或列宽的冲突。布
4.6 布局表格
局效果如图4.44所示。
在页面属性对话框中将跟踪图像设置为透明后，就可以看到参照设计图对页面作的规划效果如图4.45所示。
本章小结
在网页中，表格是页面排版的重要手段，利用Dreamweaver可以快捷地在网页中创建表格、可以很方便地修改表格的行列数、拆分和合并单元格、修改表格边框、单元格的边距和间距等属性，可以在表格中插入表格形成嵌套表格，同时还提供了布局表格用来辅助页面的规划设计。通过本章的学习，读者应熟练掌握创建表格、修改表格的方法，并能利用布局表格进行页面规划。(共74张PPT)
第16章 网页中常用的Flash技术
Flash是Macromedia公司开发的面向Web的矢量图形和动画制作软件，它可以创建具有动感、交互、声音等特点的动画。Flash 8的推出，给网页设计带来了新的活力，它能够创建广告条、动画菜单、网站标志等动画，甚至整个网站。因为Flash文件体积非常小，可同步下载和播放，特别适用于创建网页上的动画和网上游戏。
16.1 Flash中的基本概念
启动中文版Macromedia Flash Professional 8后，可以看出，Flash的工作区主要包含标题栏、菜单栏、常用工具栏、时间轴、工具箱、舞台、属性面板和其它控制面板等部分。
16.1 Flash中的基本概念
标题栏
菜单栏
工具箱
时间轴
舞台
属性面板
控制面板
16.1 Flash中的基本概念
① 标题栏：标题栏注明了程序的名称以及当前所编辑的文档名称。
② 菜单栏：菜单栏中包含了Flash中的所有命令，通过在菜单栏中选择相应的菜单项，用户可以制作出精彩的动画。
③ 时间轴：时间轴是影片编排的主要场所，可以分层摆放各元素并规划它们的出场顺序，显示动画的运行效果，以及不同图层之间的关系。
④ 工具箱：工具箱中包含了编辑矢量图形的工具，跟Photoshop的工具箱有点相似。使用这些工具，可以编辑动画元素而不需要调用其他外部程序。
16.1 Flash中的基本概念
⑤ 舞台：舞台用于显示动画当前帧的状态，是编辑、制作动画的主要区域。
⑥ 属性面板：默认在界面最下方，当没有选中对象时，属性面板会显示当前动画文件的属性；当选中工作区中的对象后，属性面板中就会显示该对象的属性。
⑦ 控制面板：默认在界面的右边，跟它们在Dreamweaver中的位置和使用方法相似。这些控制面板包含了常用的动画编辑命令，可以根据需要设置面板的数量和类型，以方便动画的编辑。
16.1 Flash中的基本概念
执行菜单【窗口】|【工具】命令，可打开或关闭工具箱。执行菜单【窗口】|【时间轴】命令，可打开或关闭时间轴面板。单击菜单【窗口】下其他命令可打开或关闭相应的其他面板。
Flash动画也称为影片或电影。Flash动画的制作是以时间轴为主线，利用图层来组织和安排影片中的文字、图像等对象，在舞台区域编辑帧来完成的。
1．舞台
舞台是创作对象的区域，也就是文件窗口，可以在里面绘制图形或编辑图像，也可以测试播放电影。动画最终只显示场景中舞台区域的内容。这就如同演出一样，无论在后台做多少准备工作，最后呈现给观众的只能是舞台上的表演。
2．时间轴
时间轴是Flash进行动画制作和内容编排的主要场所，用它可以查看每一帧的情况，调整动画播放的速度，安排帧的内容，改变帧与帧之间的关系，从而实现不同效果的动画。它就好像导演的剧本，决定了各个场景的切换、演员出场和退场以及表演的时间等。
3．图层
图层可以理解为一摞透明的纸，每一张都保持独立，对当前图层进行编辑不会影响其他图层，同时又可以层层叠加合成一个完整的电影。每个层本身都是透明的，所以图像叠加到一起时仍感觉像在同一个层上。图层就相当于舞台中演员所处的前后位置。图层靠上，相当于该图层的对象在舞台的前面。在同一个纵深位置处，前面的对象会挡住后面的对象。而在不同纵深位置处，可以透过前层看到后层的对象。新创建的影片只有一个图层，可以增加多个图层，利用图层来组织和安排影片中的对象。
4．场景
场景就好比是舞台剧中的一幕，一幕完成后，再进行下一幕的表演，由于各个场景有先后顺序，因此各个场景彼此独立，互不干扰。当我们开始编辑电影时，都是在第一个场景“场景1”中开始，场景的数量没有限制。
5．帧和关键帧
在时间轴上，每一个小方格就是一个帧，在Flash动画中，帧就是某个时间点上的图形，不同帧中对象的变化就产生了动画效果。任何动画都是由一个个帧连接而成的，帧是动画的最小单位。动画播放的内容即帧的内容，动画中帧的数量及其放映速度决定了动画的整个长度。
时间轴上的栅格表示空帧。空帧不是真正的帧，而是些矩形框，框里可以放帧。在设计Flash动画时，没有内容的帧占了时间轴的大部分。只有有了帧后动画才能播放，如果在播放时遇到所有图层均为空帧时，就会停止播放。
5．帧和关键帧
关键帧是指动画中定义的可以更改的帧，它通常显示动画的开始与结束的决定画面。当你希望动画发生改变，或者希望发生某种动作时，必须使用关键帧。
虽然大多数关键帧都包含有内容，但是关键帧也可以为空，这常常出现在将对象移出动画之后的情形中。在Flash中开始新项目设计时，通常以“图层1”的第一个空关键帧开始。一个常规的关键帧以一个实心的圆点为标志，一个空关键帧以一个空心的圆点为标志；一个带有附加动作的关键帧以一个小“a”表示。
5．帧和关键帧
普通帧也称为静态帧，显示同一层上最后一个关键帧的内容。在时间轴上，关键帧总是在普通帧的前面，前置关键帧的内容显示在随后的每个普通帧中，直到到达另一个关键帧为止。在已经有内容的关键帧后面的普通帧为银灰色，在空关键帧后的普通帧为白色。
Flash渐变动画帧序列由起始帧和结束帧这两个关键帧以及它们之间的过渡帧组成。过渡帧是起始关键帧动作向结束关键帧动作变化的过渡部分，表示了对象在过渡点的外观。这部分的延续时间越长，整个动作变化越流畅，动作前后的联系越自然。
16.2 动画的三种基本类型
Flash能够制作的动画类型很多，根据生成原理和制作方法的不同，Flash动画可分为三种基本类型：逐帧动画、移动动画和形变动画。
一种类型的动画也可以构成一个简单动画，为了使Flash作品更加形象、生动，往往需要在一个Flash作品中综合应用不同类型的动画。
16.2.1 逐帧动画的制作
逐帧动画也叫帧帧动画，是由若干个连续关键帧组成的动画序列，是和传统的动画制作方式类似的最为基础的动画制作方式。其原理是在“连续的关键帧”中分解动画动作。在制作这种动画时，需要对每一帧的内容进行逐个绘制，也就是在不同帧上设置不同内容，使其连续播放而生成动画。逐帧动画适合于每一帧的图像都有复杂变化，不能用补间动画完成的动画。
因为逐帧动画的帧序列内容不一样，不但给制作增加了负担，而且最终输出的文件容量也很大。
1．逐帧动画的制作步骤
① 单击某个图层使其成为当前层；
② 在该层上选择起始帧；
③ 把起始帧设置为关键帧；
④ 设置背景图；
⑤ 在起始帧建立动画内容；
⑥ 设置起始帧后的第2帧，将该帧设置为关键帧，然后编辑内容；
⑦ 重复第6步，设计其他的每一帧；
⑧ 执行【控制】|【测试影片】命令，观看设计效果。
关闭播放窗口，回到编辑舞台，如不满意重新编辑，直到设计出满意的效果为止。
2．创建逐帧动画的常用方法
① 用导入的静态图片建立逐帧动画。用JPG等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。
② 绘制矢量逐帧动画。用绘图工具在场景中一帧一帧的画出帧的内容。
③ 文字逐帧动画。用文字作帧中的内容，实现文字跳跃、旋转等特效。
④ 导入序列图像。可以导入Gif序列图像、Swf动画文件或者Swish、Swift 3d等第3方软件产生的动画序列。
⑤ 动作脚本逐帧动画。在时间轴面板上，逐帧写入动作脚本语句来完成元件的变化。
【例16.1】制作书写汉字动画。
“书写汉字”动画播放后，一个“汉”字慢慢按笔画顺序书写呈现。
图16.3“书写汉字”动画的时间轴 图16.4 “书写汉字”动画的两个画面
16.2.2 移动动画的制作
移动动画是Flash动画中最常用的动画形式，它是创建物体随时间移动、缩放或旋转等动画的一种有效方法，并且最大程度地减小所生成文件的大小。
1. 移动动画的特点
移动动画就是改变两帧之间物体的位置，令物体从一个位置移动到另一个位置的动画。移动动画的对象是组、元件(实例)、文本和位图图像等。除了实现对象位置的移动外，还可以使对象产生大小、旋转和颜色的渐变效果等。
Flash 8创建移动动画时，自动将实例、图形、图像、文本、组合等转换成补间的实例，“库”面板中会自动增加元件，名字为“补间1”、“补间2”和“补间3”等。
2. 移动动画的制作方法
移动动画的制作只需在一个时间点(关键帧)放置一个对象，然后在另一个时间点(关键帧)改变这个对象的大小、位置、透明度等属性，Flash根据二者自动完成移动动画的创建。
Flash创建移动动画时，各种属性的变化可独立进行，也可合成复杂的动画，例如，一个对象在移动中还不断在旋转放大等。
3. 移动动画关键帧“属性”面板的使用
在“属性”面板内，选择了“补间”下拉列表框中的“动画”选项后，“属性”面板内还有另外两个重要的选项经常需要设置，即“缓动”和“旋转”选项。
①“缓动”选项调整过程帧变化速率的加速度，它的数值范围规定在-100到100之间。可以在后面直接输入数值，也可以单击“缓动”列表框的下拉按钮，调节滑块来设定数值。“缓动”选项默认值为“0”，这表示过程帧以匀速运动变化。当输入的数值是负值时，帧变化的速率逐渐加大，动画呈加速度(先慢后快)变化；当输入的数值是正值时，帧变化的速率逐渐减小，动画呈减速度变化。
3. 移动动画关键帧“属性”面板的使用
②“旋转”选项设置可以选择“自动”、“顺时针”和“逆时针”等几种方式。如选择了“顺时针”或“逆时针”旋转，则可以在其后的文本框中输入旋转的次数。“旋转”选项默认值为“自动”，这表示Flash自动选择起始帧和结束帧对象变化最小的角度旋转。
【例16.2】制作小球跳动动画。
“小球跳动”动画播放时，一个小球上下跳动。
① 新建一个Flash文档，在工具箱中单击椭圆工具，并将填充色设置为放射状渐变色。按住Shift键在舞台上端画一个圆形。
② 在时间轴右击第1帧，在弹出的快捷菜单中选择【创建补间动画】命令。即可将该帧创建为动作动画的第1帧，同时将小球转换为元件。
③ 在时间轴的第15、第30帧上单击鼠标右键，然后从弹出的快捷菜单中选择【插入关键帧】命令，在第15、第30帧插入关键帧。
④ 选中第15帧，将圆形移到舞台下端。至此动画完成。
16.2.3 形变动画的制作
形变动画也称为形状补间动画，就是使图形对象在一段时间内由一种形态变成另一种形态。形态包括图形对象的外观样式、位置、大小和颜色等。形状补间描述了在一段时间内将一个形状变形为另一个形状的过程。在Flash中，可以补间或过渡图形对象的形状、颜色、透明度、大小及位置等属性。
形状渐变动画的对象只能是矢量图形。如果要对实例、组、文字或者位图图像进行形状过渡，需要先将他们打散，让它们变成矢量图后设置形变过渡。虽然可以同时为同一层上的多个对象设置过渡，但将不同对象放置在各自的图层中进行过渡会好一些。
16.2.3 形变动画的制作
虽然Flash通常试图以最有逻辑的方式过渡两个形状，但Flash还没有智能到可以变形任何形状的地步，有时它也会产生令人不满意的效果。当你需要控制形状的过渡时，可以用形状提示来控制形状以什么方式渐变。形状提示会标识起始形状和结束形状中的相对应的点，这些点在过渡形状中将保持不变。
【例16.3】图形变换为文字的制作。
动画播放时，一个矩形慢慢变化为文本“Flash” 。
① 新建一个Flash文档。在工具箱中单击矩形工具，并将填充色设置为红色，在舞台中画一个矩形。
②在第30帧上右击鼠标，从弹出的快捷菜单中选择插入空白关键帧命令，在第30帧插入一个空白关键帧。
③ 单击第30帧，选择文本工具，在舞台中输入文本“Flash”。执行【窗口】|【属性】命令，打开属性面板，设置文本的字体、字号和颜色。
④ 单击选择工具，刚才键入的字母将被自动选择。执行两次【修改】|【分离】命令将文本转化为图形。
⑤单击第1帧，打开属性面板，单击补间列表框的下拉按钮，在列表中选择“形状”。
16.3 三种基本元件类型
元件和实例是制作动画的基础。在Flash中，无论是简单的渐变动画，还是复杂的动作脚本，都是基于元件的。元件是在元件库中存放的各种图形、图像、动画、按钮或者导入的声音和电影文件等。常用的元件有图形、按钮和影片剪辑三种基本类型。
制作动画时，会遇到某个对象在舞台中多处出现的情况。如果把每个对象都分别制作，这样既费事又会增加动画文件的大小。可以将重复使用的对象建立成元件，一个元件的多个实例只占一个元件的空间。这样不仅能方便地重复调用同一个元件，还有利于减少文件的大小、缩短文件下载的时间，加快动画播放的速度。
16.3 三种基本元件类型
在Flash中设置了一个“库”面板，用来存放各种元件。在需要元件对象上场时，只需用鼠标将元件从库面板拖曳到舞台中即可。此时舞台中该元件的复制品称为实例。舞台中可以放置多个相同元件复制的实例，但在“库”面板中与之对应的元件只有一个。
当元件的属性(如大小、颜色等)改变时，由它生成的实例也会随之改变。当实例的属性改变时，与它相应的元件和由该元件复制的其他实例不会随之改变。应用元件可以使动画的编辑更简单化。
16.3.1 图形元件
图形元件主要用来制作动画中的静态图形，也可以是动画，但不能产生交互效果。
1. 图形元件的特点
图形元件具有相对独立的编辑区域和播放时间，当应用到场景中时，会受到当前场景中帧序列和其他交互式设置的影响。图形元件所制作的动画依赖于主影片时间轴，会随主影片运转而运转，如果主影片停止，图形元件的动作也会停止。
2. 图形元件的创建
建立元件有两种方式，①使用工作区上的对象，将其转换为元件；②使用元件编辑模式，在元件编辑窗口编辑。
16.3.1 图形元件
3. 图形元件的颜色属性
元件在场景中实例都具备颜色属性，可以通过属性面板来改变实例的色调、明亮度与透明度等颜色属性。元件实例颜色属性各选项含义如下：
① 无，表示不执行任何的颜色转换工作。
② 亮度，用于设置实例的明亮度。明亮度的设置值从-100％到100％之间，数值越小则越暗，可以拖动滑块来改变这项设置。
③ 色调，用于调整实例的色调，可以从色盘中选择颜色，并调整颜色亮度。
④ Alpha(透明度)，用来设置实例的透明度，数值越高则越不透明(预设值)。
⑤ 高级，提供了RGB三原色的调整、亮度调整与透明度调整。
【例16.4】渐渐消失的气球。
“渐渐消失的气球”动画播放后，一个气球飞向天空越来越小，越来越模糊渐渐消失在视线之外。
具体制作过程见教材208页。
16.3.2按钮元件
按钮元件是一个只含有4帧的特殊影片剪辑。主要用于创建在影片中对标准的鼠标或键盘事件(如点击、滑过或按键等)做出响应的交互性按钮。
在Flash中，首先要为按钮设计不同形状的外观，然后为按钮的实例分配对事件产生的动作。可以在电影中创建交互按钮，当产生事件(如鼠标单击等)时，按钮会改变它的外观。
1．按钮的4个状态
在编辑按钮元件时，时间轴上显示了四个帧即按钮的4个状态：
①“弹起”帧是默认的关键帧，表示的是按钮处在一般状态，也就是鼠标指针没有移到按钮之上时，按钮所呈现的状态。
②“指针经过”帧表示鼠标移动到按钮上时，按钮所呈现的状态。
③“按下”帧表示用鼠标单击按钮时，按钮所呈现的状态。
④“点击”帧通常用来设置鼠标敏感区域的。如果没有设置“点击”状态的区域，则鼠标事件的响应范围由按钮图形本身大小作为敏感区域。
2．按钮的创建方法
① 执行【插入】|【新建元件】命令，调出“创建新元件”对话框。在该对话框内输入元件的名字，选择“按钮”类型。单击“确定”按钮，切换到按钮元件编辑模式。
② 用鼠标选中第l帧(弹起)，编辑图形或导入影片剪辑或图形元件实例等 ，作为按钮“弹起”状态的外观。
③ 右击“指针经过”帧，选择插入关键帧。第l帧的按钮图像仍出现在工作区中。改变图形，作为鼠标指针经过时的按钮外观；或者按F7键，使指针经过帧成为空白关键帧，重新创建一个对象。
2．按钮的创建方法
④ 按照上述方法，制作鼠标“按下”、“点击”时的按钮外观。
⑤ 单击元件编辑窗口中的场景名称图标，回到主场景。可以看到“库”面板中已有了刚刚制作的按钮元件。从“库”面板中将它拖曳到工作区中，即可创建按钮实例。
⑥执行【控制】|【测试影片】命令，测试按钮的动作效果。
【例16.5】制作鼠标滑过效果。
16.3.3影片剪辑元件
影片剪辑元件又称为影片片段，是可单独重复使用的动画片段。
1．影片剪辑元件的特点
影片剪辑元件有自己的时间线，主要用来制作独立于主影片时间轴的动画，可以包括交互性控制、声音甚至其他影片的部分剪辑，也可以把影片剪辑实例加载到按钮的时间轴中，从而实现动画按钮。有时候为了实现动画的交互性，还可以将单独的图象制作成影片剪辑元件。影片剪辑元件是组成动画的基础。为了避免反复创建相同的动画片段，可以将很多小动画创建为影片剪辑元件。
16.3.3影片剪辑元件
2．影片剪辑元件和图形元件的区别
影片剪辑元件和图形元件均可以是一个动画，但是在播放时是有区别的，影片剪辑实例只需要一个关键帧就可以播放，它是完全独立于主场景的。如果主场景播放已经结束，但它的时间轴还是继续向前播放，直到影片剪辑播放完，然后它将返回到影片剪辑的第1帧。而图形实例必须放在需要它的每一帧里，所以图形实例动画可以设置其播放的具体位置。
16.3.3影片剪辑元件
3．影片剪辑元件的测试
在编辑时，执行【控制】|【播放】命令后，不能看到由影片剪辑元件和按钮元件产生的实例组成的动画和交互性效果，必须执行【控制】|【测试影片】或执行【控制】|【测试场景】命令，才能在播放器窗口内演示它的动画和交互效果。
【例16.6】变色的彩灯效果。
“变色的彩灯”动画播放时，一个圆形彩灯会不停的变换颜色。
具体制作过程，见教材210页。
16.4 文本动画的制作实例
Flash文本动画能产生强烈的视觉冲击，唤起读者的兴趣，在视觉上留下深刻印象。
【例16.7】风吹文字动画的制作。
【例16.8】光线文字的制作。
16.5 图形动画的制作实例
图片切换是网页中常见的效果，网页广告条很多是通过图片切换制作的。常见的图片切换方式有百叶窗式、开门式、翻页式、渐隐渐现式等图片切换效果。
【例16.9】图片切换效果的制作。
本例通过移动、变形和元件的alpha属性改变来制作图片的切换展示效果。“图片切换”动画播放后，首先显示一副图片，随后第二副图片从左向右展开显示，逐渐将第一副图片覆盖；接着第二副图片慢慢模糊，逐渐显示出第一副图片。
具体操作步骤见教材213页。
【例16.10】书本翻页效果
本例通过简单的“形状渐变”和“移动渐变”动画制作方法，来实现比较逼真的书本翻页效果。
具体操作步骤见教材214页。
16.6 Flash中的两种特殊图层
运动引导层和遮罩层是两种特殊的图层，借助于它们能制作出非常神奇的动画效果。
利用遮罩层可以创建遮罩动画，制作出“探照灯”、“放大镜”等动画效果；
利用运动引导层可以创建运动引导层动画，制作出使对象沿任意路径运动的移动动画。
遮罩动画和运动引导层动画是Flash中不可或缺的常用动画制作方法。
16.6.1 运动引导层
前面所讲的移动动画只能实现对象从一点直接到另一点的运动，无法实现一些复杂的运动。使用运动引导层可以控制对象沿任意自定义的路径运动，制作出类似“月亮围绕地球旋转”、“鱼儿在大海里遨游”等运动动画效果。
1．运动引导层动画的概念
如果想让物体沿着自定义的路径运动，就需要添加一个运动引导层，在引导层里画出运动路径，做一定的设置，对象就能沿着自定义的路径运动。将一个或多个层链接到一个引导层，使一个或多个对象沿引导层里运动路径运动的动画形式被称为“运动引导层动画” 。
在引导层内可以用钢笔、铅笔、线条、椭圆工具、矩形工具或画笔工具等绘制出曲线、图形等，这可以起到对象运动时的导向作用。引导层的内容只能在舞台工作区内看到，不会输出到动画，在发布后的影片中不会出现。
2．创建运动引导层动画的方法
运动引导层动画至少需要两个图层，即引导层和被引导层。选中一个图层，单击时间轴面板的“添加引导层”按钮 ，可以为该图层创建引导层。
2．创建运动引导层动画的方法
（跳动的小球）
① 新建一个Flash文档，在舞台工作区绘制一个圆形，单击填充色工具，在填充色面板选择中心渐变填充。
② 选中关键帧，右击鼠标在弹出的快捷菜单中选择“创建补间动画”项，即可将该帧创建为动作动画的第1帧。
③ 选中时间轴中的第30帧，按F6键，创建一个关键帧并选中该关键帧，改变其位置。
④ 点击时间轴面板的“添加引导层”按钮 ，在新建引导层内用铅笔绘制出一条曲线。
⑤ 单击图层1，按住鼠标左键拖动起始帧圆形的中心到路径起点处，当路径起点处出现圆圈融合标志时(如图16.29中a所示)，松开鼠标左键，圆形与路径就结合起来了。按照同样的方法，把结束帧上的圆形中心与路径结束点结合起来。至此，整个动画制作完成。
2．创建运动引导层动画的方法
（跳动的小球）
a 圆圈标志 b 动画时间轴 c 引导线
3．应用运动引导层动画的技巧
① 引导层内引导线不能组合成组，否则引导动画失败。
② 如果想让对象作闭合路径运动，可以在“引导层”画一个闭合曲线，再用橡皮擦去一小段，使闭合曲线出现2个端点，再把对象的起始、终止点分别对准端点。
③ 按下工具栏上的“对齐对象”功能按钮，可以使“对象附着于引导线”的操作更容易成功。
④ 过于陡峭的引导线可能使引导动画失败，而平滑圆润的线段有利于引导动画成功制作。
⑤如果被引导对象为不规则形，可以按下工具栏上的任意变形工具，会显示对象中心点，这样调整中心点后更容易成功。
16.6.2 遮照层
在Flash的作品中，我们常常看到很多眩目神奇的效果，而其中不少就是用最简单的“遮罩”完成的，如“探照灯”、“水波”、“万花筒”、“百页窗”、“放大镜”、“淡入淡出”等。
1．遮罩动画的概念
“遮罩”，顾名思义就是遮挡住下面的对象。当遮罩层作用于某个普通层时，普通层上内容会透过遮罩层上有内容的部分(即不是空白的部分)而显示出来。这里普通层也就是被遮罩层，被遮罩层中的项目可以是任意Flash允许的动画元素，如填充的形状、文字对象、图形元件等。遮罩层中的对象只有形状，许多属性，如颜色、透明度和渐变色等却是被忽略的。
遮罩动画是通过“遮罩层”有选择地显示“被遮罩层”中的内容，从而实现一些特殊的效果。在一个遮罩动画中，“遮罩层”只有一个，“被遮罩层”可以有任意多个。
2．遮罩层的创建
在Flash中没有一个专门的按钮来创建遮罩层，遮罩层是由普通图层转化的。在某个图层上单击鼠标右键，在弹出的图层快捷菜单中执行【遮罩层】命令，该图层就会成为遮罩层，层图标就会从普通层图标 变为遮罩层图标 ，系统会自动把遮罩层下面的一层关联为“被遮罩层”，在缩进的同时图标变为 。
如果想关联更多层被遮罩，只要把这些层拖到遮罩层下面就可以了。
2．遮罩层的创建
遮罩动画，通常是先创建了被遮罩的图层后，再创建遮罩层中的具体项目及其动态效果，最后右击遮罩层执行【遮罩层】命令，完成遮罩操作。
通常应用遮罩层时，都将遮罩项目运动起来，使其遮罩效果更加逼真。对于用作遮罩的填充形状，可以使用形状动画；对于文字对象、图形实例或影片剪辑，可以使用移动动画。
【例16.11】缤纷文字
【例16.12】百叶窗式图片切换效果
16.7 Flash中的交互功能
交互是动画和观众之间的纽带，更是flash动画的迷人之处。动画观看者可以通过鼠标或按键操作与交互式动画进行交流，参与到动画的控制中，或者以一种更高级的方式来创建游戏、表单、调查表和实时交互性的网站。
Flash中的交互功能通过ActionScript编程技术来实现。ActionScript，直译成中文是“动作脚本”的意思，是Flash专用的一种面向对象的编程语言，与JavaScript非常类似。通过ActionScript编写的脚本程序，可以对关键帧、影片剪辑和按钮等对象进行控制，实现非常精彩的交互式动画效果。
16.7.1 动作面板的使用
在Flash中，动作脚本的编写，都是在“动作”面板的编辑环境中进行。使用菜单【窗口】|【动作】命令，调出“动作”面板(如图16.34所示)，可以看到“动作”面板的编辑环境由命令列表区、位置列表区、程序编辑区等组成。
16.7.1 动作面板的使用
位置列表区
命令列表区
命令提示行
程序编辑区
辅助按钮栏
图 16.34 “动作-帧”面板
16.7.2 向Flash中添加代码
在Flash中添加动作脚本可以分为两种方式，一是为“帧”添加动作脚本，二是向“对象”添加动作脚本。
“帧”动作脚本，是指在时间轴的“关键帧”上添加的动作脚本。
“对象”动作脚本，是指在“按钮”元件和“影片剪辑”元件的实例上添加的动作脚本。
1．事件与动作
交互式动画的每个行为包含了两个部分：事件和事件产生时所执行的动作。事件是触发动作的信号，动作是事件的反应结果，用于控制在动画播放过程中相应的程序流程和播放状态。动作由用户自己设计，是由连续的语句、命令组成的程序。
在Flash中事件有两种触发方式，一种是基于用户操作的，如通过单击鼠标激发一个事件；一种是基于时间的，当到达一定的时间时自动激发事件。这两种方式分别称为“鼠标/键盘”事件和“帧”事件。事件的设置与动作的设计是通过“动作”或“行为”面板来完成的。
2．ActionScript
ActionScript是一种面向对象的编程语言。最早出现在Flash 5中，发展到Flash 7中的ActionScript 2.0，已经趋于成熟，是一种非常简单而有效的交互式动画创作工具。它的语法类似于Javascript设计语言。
(1) 基本语法
① “.”语法(点语法)
② _root、_parent和this关键字
③ “{ }”语法(大括号语法)
④ 注释语法
⑤ 分号语法
⑥ 关键字
(2) 基本动作语句
① gotoAndPlay语句
② gotoAndStop语句
③ Stop语句
④ play语句
⑤ stopAllSounds语句
(3) 高级动作语句
① duplicateMovieClip语句，通过复制，动态创建“影片剪辑”实例 。
② removeMovieClip语句，删除指定的影片剪辑。
③ setProperty语句，更改影片剪辑的属性值。
④ startDrag语句，使影片剪辑实例可拖动。
⑤ stopDrag语句，停止影片剪辑实例拖动操作。
⑥ fscommand语句，可以使SWF文件与Flash Player或承载Flash Player的程序(如IE浏览器)进行通讯。
⑦ getURL语句，将来自特定URL的文档加载到窗口中，或将变量传递到位于所定义URL的另一个应用程序。
⑧ loadMovie语句，在播放原始SWF文件的同时将SWF文件或JPEG文件加载到Flash Player中。
⑨ unloadMovie语句，删除通过loadMovie()加载的影片剪辑。
3．设置帧事件与动作
帧事件就是当影片或影片剪辑播放到某一帧时的事件，只有关键帧才能设置事件。
选中需要添加动作脚本的关键帧，这时“动作”面板的标题栏上显示的标题是“动作-帧”，然后单击动作面板程序编辑区左上角按钮 ，在弹出菜单上找到相关条目里面的语句，双击即添加到了“脚本编辑”窗口中。也可以直接在“脚本编辑”窗口中输入语句。
4．设置按钮元件事件与动作
为按钮添加动作的方法是，首先选中场景上要为其添加动作的按钮，这时“动作”面板标题栏上显示的标题是“动作-按钮”，这表明当前要为其添加脚本的对象是按钮。然后在脚本编辑窗口中添加编辑动作。
为按钮添加动作要使用on()事件处理函数，指定触发动作的鼠标事件。
on()函数语法格式为on(mouseEvent) {}，其中“()”中的mouseEvent参数是鼠标事件，常用的鼠标事件有“release”等；“{}”用来放置结合在一起依次执行的语句块。
4．设置按钮元件事件与动作
press：当鼠标指针移到按钮之上，并按下鼠标左键时触发事件。
release：当鼠标指针移到按钮之上，并按下鼠标左键，再松开鼠标左键时触发事件。
Release Outside：当用户在按钮上按住鼠标左键，而在按钮外面释放鼠标时触发事件。
Roll Over：当用户将鼠标指针放置在按钮上时触发事件。
Roll Out：当用户将鼠标指针从按钮上移出时触发事件。
Drag Over：当用户将鼠标指针从按钮上拖出(依然按住鼠标左键)，最后再将鼠标指针放回按钮上时触发事件。
Drag Out：当用户将鼠标指针放置在按钮后，按住鼠标左键，然后将鼠标指针从按钮上拖出(依然按住鼠标左键)时触发事件。
Keypress(“<按键名称>”)：当键盘的指定键被按下时，触发事件。
5．设置影片剪辑元件的事件与动作
为影片剪辑添加动作的方法是，选中场景上要为其添加动作的影片剪辑，这时“动作”面板标题栏上显示的标题是“动作-影片剪辑”，这表明当前要为其添加脚本的对象是影片剪辑，然后在脚本编辑窗口中添加动作。
为影片剪辑实例添加动作时要使用onClipEvent()事件处理函数，指定触发动作的影片剪辑事件。
OnClipEvent()函数语法格式为onClipEvent(){ }，其中“()”用来放置影片剪辑事件，常用的影片剪辑事件有“load”、“enterFrame”等。
5．设置影片剪辑元件的事件与动作
常用影片剪辑事件的含义如下:
load：影片剪辑一旦出现在时间轴中，即启动此动作。
unload：在从时间轴中删除影片剪辑之后，此动作即在第1帧中启动。
enterFrame：以影片剪辑的帧频连续触发该动作。
mouseMove：每次移动鼠标时启动此动作。
mouseDown：当按下鼠标左键时启动此动作。
mouseUp：当释放鼠标左键时启动此动作。
keyDown：当按下某个键时启动此动作。
keyUp：当释放某个键时启动此动作。
data：在loadVariables()或loadMovie()动作中接收到数据时启动该动作。
【例16.14】按键控制动画的播放。
本例通过为影片剪辑添加动作，制作“按键控制动画的播放”动画。动画播放时如果按下“→”键，则播放头会转到下一帧；如果按下“←”键，则播放头会转到上一帧。其具体操作步骤如下：
① 新建一影片剪辑元件，从“库”中拖曳到主场景，选中该影片剪辑。
② 单击【窗口】|【动作】命令，调出“动作-影片剪辑”面板。
③ 在右边的程序编辑区内，输入下面的代码：
onClipEvent (keyDown) {
if (Key.getCode() == Key.RIGHT) {
this._paballt.nextFrame();
} else if (Key.getCode() == Key.LEFT) {
this._paballt.prevFrame(); }
至此，影片剪辑事件与动作完成。
【例16.15】文本对象跟踪鼠标。
本例在运行时创建一个文本字段并将鼠标位置显示在文本字段中的动画效果，其具体操作步骤如下：
① 新建一影片剪辑元件，并把它从“库”面板拖曳到工作区内。
② 选中该影片剪辑。单击【窗口】|【动作】命令，调出“动作-影片剪辑”面板。
③ 在右边的程序编辑区内，输入下面的程序：
onClipEvent (load) {
this.createTextField("ntext",this.getNextHighestDepth(),0,0,100,22);
ntext.autoSize = true;
ntext.selectable = false; }
onClipEvent (mouseMove) {
ntext.text = "X:"+_root._xmouse+"Y:"+_root._ymouse; }
16.7.3 交互动画实例
Flash可以做出千变万化，多姿多彩的动画效果，其中很大一部分是编写ActionScript程序控制电影剪辑元件的属性和使用电影剪辑元件的方法来达到的。
【例16.16】按钮控制动画的制作。
【例16.17】运动轨迹动画的制作。
【例16.18】拖动菜单的制作。(共103张PPT)
第17章 动态网页设计
第17章 动态网页设计
17.1 动态网页概述
17.2 与数据库建立连接
17.3 创建与数据库有关的动态网页
17.4 为网页绑定动态数据
17.5 增加服务器行为
17.1 动态网页概述
17.1.1 动态网页与静态网页
17.1.2 动态网页的制作过程
17.1.3 与动态网页有关的服务器技术
17.1.4 ASP简介
17.1.5 建立动态网站
17.1.1 动态网页与静态网页
静态网页和动态网页的区别主要表现在以下方面：
① 组成内容和执行过程不同。
② 文件扩展名不同。
③ 源代码保密程度不同。
一般认为，静态网页所显示的内容固定，浏览时用户只能被动地看到页面内容，无法通过它与Web服务器交互，而动态网页能根据用户的选择，返回内容不同的网页。如，搜索引擎就是一个典型的动态网页应用，当用户输入不同的关键字时，将得到内容不同的搜索结果网页。
17.1.2 动态网页的制作过程
① 根据网页要实现的功能，按静态网页的制作方法，创建具有相应布局和元素的静态网页，根据需要，可以添加在客户端运行的脚本、行为等。
② 定义记录集
③ 添加动态内容
④ 设置动态内容的显示方式
17.1.3 与动态网页有关的服务器技术
1．CGI
CGI(Common Gateway Interface)，通用网关接口，是外部程序与Web服务器之间的标准编程接口。
2．ASP
ASP(Active Server Pages)，是一种开放式的非编译应用环境。
3．PHP
PHP(Hypertext Preprocessor，超文本预处理器)是一种类似ASP的HTML内嵌式语言，PHP的语法混合了C、Java、Perl及PHP式的新语法，执行速度比CGI快。
4．JSP
JSP(Java Server Pages)是SUN公司推出的网站开发技术，通过将编译后的JAVA程序代码嵌入到网页内实现动态网页功能。
17.1.4 ASP简介
ASP融合了服务器端脚本、对象和组件技术，具有以下特点：
① ASP可以通过包含服务器端脚本的方式，用动态内容创建Web页；
② ASP提供了内置对象，使用内置对象可以方便脚本的编写，使脚本所能实现的功能更强；
③ 可以借助于数据库，建立内容丰富、便于维护、方便查询的动态网页；
④ 可以通过附加组件扩展ASP的功能。
ASP运行环境配置方法（以XP为例）
1．安装Internet信息服务IIS(Internet Information Server)
2．创建站点
3．设置站点属性
(1)网站设置
(2)主目录设置
(3)文档设置
(4)目录安全性设置
(5)创建站点虚拟目录
17.1.5 建立动态网站
①新建一个文件夹
②设置本地信息
③设置远程信息
④设置测试服务器信息
17.2 与数据库建立连接
17.2.1数据库基本知识
17.2.2 ASP访问数据库的方法
17.2.1数据库基本知识
1．数据库的有关概念与术语
(1) 数据库
数据库是指具有一定结构的相关数据的集合。数据库不仅包括描述客观事物的数据，还包括相关数据之间的联系。
(2) 数据库管理系统
数据库管理系统是一个软件系统，用于对数据库进行统一的管理和控制。
(3) 表
表，又称数据表，是按照某种结构存储的一组数据
对象
数据库中的数据表
表设计器窗口
图17.8 Access数据库设计窗口
建立数据表的步骤
①单击【表】对象，然后双击“使用设计器创建表”，弹出“表设计器”窗口(图17.9)；
②在“表设计器”窗口中定义表中所用到的字段；
③定义一个主键字段；
④保存表。
图17.9 Access表设计器窗口
结构化查询语言(SQL)简介
SQL是一种标准数据库查询语言，它的优势在于其语句的书写格式与具体的数据库管理系统无关，具有通用性。
查询语句SELECT的主要功能是从指定数据表中检索出符合要求的数据，构成如下：
SELECT [ALL|DISTINCT] <字段列表|*> FROM <数据表名列表>
[WHERE <条件表达式>]
[GROUP BY <分组要求>]
[HAVING <分组搜索条件>]
[ORDER BY <排序要求>]
(1) 查询语句SELECT
例1：
SELECT Column1, Column2 FROM TableName
例2：
SELECT * FROM topic WHERE name="zwg" AND date>#2006-12-28#
INSERT语句用来添加一条或多条记录至一个表，常用的格式为：
INSERT INTO 数据表名 [(字段名列表)] VALUES (字段值列表)
例：Insert Into register (name，date) Values ("zwg"，#2006-12-28#)
(2) 插入语句INSERT
DELETE语句用来删除数据表中的记录，使用格式如下：
DELETE FROM 表名 [WHERE <条件表达式>]
例如，执行语句DELETE FROM register WHERE name LIKE ‘%周％’，可以将register表中，name字段值包含“周”字的记录全部删除。
(3) 删除语句DELETE
UPDATE命令用于修改表中选定行的若干字段的值，其使用格式如下：
UPDATE 表名 SET 字段名＝表达式，…，字段名＝表达式 [WHERE <条件表达式>]
例如：register表中有“name”和“password”两个字段，下面的语句可以实现将注册用户“zwg”的密码修改为“1234”：
UPDATE register SET password="1234" WHERE name="zwg"
(4)修改语句UPDATE
17.2.2 ASP访问数据库的方法
1．使用ADO访问数据库
2．使用ODBC连接数据库
1．使用ADO访问数据库
简单地说，ADO(ActiveX Data Objects)是一项将数据库访问添加到Web页的数据访问接口技术。把ADO与ASP结合起来，可以在网页中执行SQL命令，对数据库进行查询、插入、删除等操作，从而建立提供数据库信息的网页内容。
使用ADO的一般流程如下：
①首先用Server.CreatObject创建“ADODB.Connection”对象的一个实例，并用该实例的“Open”方法打开待访问的数据库，脚本代码为：
Set Conn=Server.CreatObject("ADODB.Connection")
Conn.Open strProvider
使用ADO的一般流程如下：
② 建立记录集对象：一般使用如下形式的语句来实现记录集的创建：
Set rs= Server.CreateObject("ADODB.RecordSet")
rs.open "select * from register",conn,1,1
使用ADO的一般流程如下：
③ 引用记录集中的数据
常用rs(“字段名”)的形式引用记录集中的字段
④ 关闭数据库连接
conn.close
set conn=Nothing
【例17.1】观察下面的程序代码。该程序的作用是与数据库“exam.mdb”建立连接，打开其中的数据表“singlechoice”，显示该表的字段及所有记录。
数据库记录的显示
contring="Provider=Microsoft.Jet.OLEDB.4.0;"&"Data Source="&Server.MapPath("exam.mdb")
<% Set DBConn=server.CreateObject("ADODB.Connection")
DBConn.Open contring
SET RS=server.CreateObject("ADODB.Recordset")
RS.Open "SELECT * FROM singlechoice ",DBConn,1,1
%>
完成联接
<% for i=0 to RS.Fields.Count-1
Response.Write""&RS(i).Name&" | "
Next
%>
<% RS.MoveFirst
While Not RS.EOF
Row="|
"
for i=0 to rs.fields.count-1
Row=Row&""&Rs(i)&" | "
next
response.Write Row&"
"
RS.MoveNext
Wend %>
2．使用ODBC连接数据库
在动态网页中使用数据库，需要创建一个指向该数据库的连接，这种连接可以通过ODBC数据源管理器来创建。
ODBC(Open Database Connectivity)，开放式数据库连接，它可以理解为一个数据库管理的驱动程序，利用它可以实现存取和访问任何符合ODBC标准的关系型数据库。
ODBC连接的名称又称数据源名称(DSN)，它表示将应用程序与某个数据库建立连接的信息集合，主要包含数据库名称、驱动信息和数据库文件的存放位置等信息。
“系统DSN”建立方法
① 双击“控制面板”中的【管理工具】图标，然后在打开的“管理工具”窗口中双击“ODBC”图标，打开“ODBC数据源管理器”对话框(图17.10)
图17.10 “ODBC数据源管理器”对话框
② 单击“系统DSN”标签，打开“系统DSN”属性页，单击【添加】按钮，弹出“创建新数据源”对话框(图17.11)，根据数据库的类型选择数据库驱动程序，这里以Access为例，选择“Microsoft Access Driver(*.mdb)”，然后单击【完成】按钮，弹出如图17.12所示的“ODBC Microsoft Access安装”对话框。
图17.11“创建新数据源”对话框
图17.12“ODBC”安装对话框
③ 在“数据源名”文本框中输入要定义的数据源名称，如forum。单击【选择】按钮，弹出“选择数据库”对话框(图17.13)，在此对话框中选择要为之建立数据源的数据库文件，单击【确定】按钮，完成数据库的选择，返回“ODBC Microsoft Access安装”对话框(图17.12)，单击其中的【确定】按钮，返回“ODBC数据源管理器”对话框(图17.10)，可以看到新建的数据源出现在数据源列表框中，表明数据源创建成功，此时单击【确定】按钮，完成数据源的创建。
图17.13“选择数据库”对话框
创建数据源后，在网页中就可以使用数据源的名称来打开数据库，相关的脚本代码如下：
<% Set cn=Server.CreateObject("ADODB.Connection")
cn.Open "DSN=数据源名称；UID＝用户名；PWD＝密码"
%>
17.3 创建与数据库有关的动态网页
Dreamweaver中，要设计与数据库操作有关的动态网页，一般要做的工作为：
① 创建与数据库的连接；
② 依据建立的数据库连接，为动态页绑定记录集，并将记录集中的字段拖放到网页中的合适位置，创建动态内容；
③ 根据需要，设置动态内容的服务器行为，如“重复区域”、“插入记录”等。
17.3 创建与数据库有关的动态网页
17.3.1 创建Web页与数据库的连接
17.3.2 绑定数据源
17.3.3 记录集的编辑操作
17.3.1 创建Web页与数据库的连接
1．使用DSN创建ADO数据库连接
预备工作：在建立连接之前，应在Dreamweaver中创建一个使用动态服务器技术的站点，设为“Site1”，对应的本地路径为“D:\site”，并在IIS中设置名为“Site1”的虚拟目录指向“D:\site”。
① 新建或打开一个动态页，然后单击“数据库”面板上的按钮，弹出下拉菜单(如图17.14)。
② 单击“数据源名称(DSN)”项，打开“数据源名称(DSN)”对话框，如图17.15所示。
图17.14 添加数据库连接菜单
图17.15“数据源名称”对话框
③在“连接名称”文本框中输入一个字符串作为连接名，如dsnForum。
④在“数据源名称(DSN)”下拉列表中选择所需的DSN(如17.2.2节创建的“forum”)
⑤单击【测试】按钮，如果弹出“成功创建连接脚本”提示信息框，说明已经建立连接。
⑥单击【确定】按钮，关闭“数据源名称(DSN)”对话框，新建的连接名出现在“数据库”面板中，并且实现连接的脚本代码也被插入到网页文件中。
2．创建非DSN连接
① 新建或打开一个动态页，单击“数据库”面板上的按钮，然后选择“自定义连接字符串”项，弹出“自定义连接字符串”对话框，如图17.16。
图17.16“自定义连接字符串”对话框
② 在“连接名称”文本框中输入新连接的名字，如“dsnStr”。
③ 在“连接字符串”文本框中输入如下形式之一的连接字符串，用来指定要连接的数据库文件的路径及所使用的驱动程序：
OLE DB连接字符串方式：
Provider=Microsoft.Jet.OLEDB.4.0;Data Source="D:\forum\data\forum.mdb"
ODBC驱动程序方式：
Driver={Microsoft Access Driver (*.mdb)}; UID=;PWD=;DQB="D:\forum\data\forum.mdb"
在上述的连接字符串中，指定数据库文件时使用了绝对路径，这在上传到远程服务器时通常会发生连接错误，因为在远程服务器上，数据库文件的存储位置不一定和本地机上存储位置相同。使用ASP的Server对象的mappath方法可以解决这一问题，如：
OLE DB连接字符串方式：
"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= "
&Server.mappath("\data\forum.mdb")
ODBC驱动程序方式：
"Driver={Microsoft Access Driver (*.mdb)}; DQB= "
&Server.mappath("\data\forum.mdb")
数据库连接建立以后，可以供本站点所有的动态网页使用。如果要删除某个数据库连接，在“数据库”面板中单击数据库连接名，再单击面板上的按钮，系统弹出确认删除提示对话框，单击【是】按钮，完成删除。
17.3.2 绑定数据源
1．绑定记录集
2．绑定请求变量
3．绑定阶段变量
4．绑定应用程序变量
1．绑定记录集
记录集是通过数据库查询得到的数据库子集，是动态网页与数据表建立连接的中介。记录集应该按需定义
定义记录集要做的工作如下：
① 设定记录集名称以便引用；
② 在“连接”下拉列表框选择数据库连接，在“表格”下拉列表框中选择生成记录集所依据的数据表；
③ 在“列”、“筛选”和“排序”选项中指定记录集的生成方式。
1．绑定记录集
(1)定义记录集的简单界面
(2)定义记录集的高级界面
(3)记录集的属性面板
选择菜单【窗口】|【绑定】，打开“绑定”面板，单击按钮，在弹出的菜单(图17.17)中选择【记录集(查询)】项，打开“记录集”对话框(参见图17.18)。
图17.17 绑定菜单
图17.18 定义记录集的简单界面
图17.19 定义记录集的高级界面
字段
运算符
变量名或值
变量类型
定义简单记录集的一般步骤为：
①为记录集命名：在图17.18“名称”文本框中输入要绑定(定义)的记录集名称。
②选择生成记录集所需的数据库连接
③选择生成记录集所需的数据表
④选择生成记录集所需的字段
⑤构造生成记录集的筛选条件表达式
⑥设置记录集的排序方式
⑦单击【测试】按钮，如果定义正确，就会显示出所定义的记录集的内容。
⑧单击【确定】按钮，记录集被添加到“绑定”面板中的可用数据源列表中
(2) 定义记录集的高级界面
在“定义记录集”的高级界面(图17.19)中，还可以定义一些复杂的查询条件，以产生出灵活的记录集。使用这种方法定义记录集，有时需要手工编写SQL语句。
“高级记录集”对话框(图17.19)中，“名称”与“连接”的含义与设置方法与定义简单记录集一样，其它各选项含义与操作方法如下所述：
SQL文本框：用来输入SQL语句
变量列表：如果用户定义的SQL语句中使用了自定义变量，则应该先将此变量添加到变量列表中。
(3) 记录集的属性面板
图17.20“记录集”属性面板
2．绑定请求变量
使用请求变量可以访问任何基于HTTP传递的信息，如从HTML表单中通过POST、GET方式传递来的数据、Cookie和用户认证信息等。请求变量常用来在一个网页中接受来自另一个网页传来的数据。
例如A网页(a.asp)向B网页(b.asp)用GET方式传递数据时，URL中“？”后会附带要传递的变量名及其值，如b.asp ID=23，则在网页b.asp中应定义名为ID的请求变量来接收并使用传过来的值23
请求变量各类型
的含义和用途
图17.21“请求变量”对话框
请求：用于取得链接地址后所附带的变量参数，如URL中“？”以后的变量。
Request.QueryString：用于取得客户端通过超文本链接所传递的数据，等同于“请求”选项。
Request.Cookie：用于取得保存在客户端的Cookie数据
Request.Form：用于取得页面中表单对象通过POST方式所传递的数据。
Request.ServerVariables：用于取得服务器上的环境变量信息。
ClientCertificate：用于取得客户端的身份权限数据。
3．绑定阶段变量
绑定阶段变量即建立ASP中Session对象的会话变量。当浏览某个ASP网页并执行网页应用程序时，Web站点上会产生代表该连接的会话对象，并且给每个会话对象分配一个唯一的、用于识别用户的SessionID，这个ID将会写入客户端计算机的Cookies中。
4．绑定应用程序变量
应用程序变量是利用应用程序对象Application创建的变量，此变量的作用域是整个应用程序，它对所有访问该站点的用户都是可用的。利用应用程序变量可以统计网站的在线人数，为所有用户提供特定信息等
17.3.3 记录集的编辑操作
1．修改记录集
2．复制记录集
① 打开定义了记录集的页面，然后在绑定”面板或“服务器行为”面板中右击欲复制的记录集；
② 在弹出的快捷菜单中单击“拷贝”命令；
③ 然后打开或新建欲添加此记录集的动态页，在“绑定”面板的空白处右击，再单击快捷菜单中的“粘贴”命令，即可实现记录集的复制。
3．删除记录集
17.4 为网页绑定动态数据
17.4.1 插入动态数据
17.4.2 设置动态数据的显示格式
17.4.3 动态图像的绑定方法
17.4.4 动态设置HTML对象的属性
17.4.1 插入动态数据
1、插入动态文本
2、插入动态表格
3、插入动态文本字段(文本域)
4、动态选择列表
5、动态复选框
6、动态单选按钮组
1、插入动态文本
插入动态文本是指将网页所绑定的数据源插入到网页中，能插入到网页中的数据源可以是记录集中的字段、请求变量、阶段变量或应用程序变量。
① 在网页中选择插入动态文本的位置。
② 为动态页绑定变量，然后在“绑定”面板(如图17.24)中，单击要插入的数据源变量选定它。
③ 选定变量后，直接将其拖放到网页中，或单击“绑定”面板中的【插入】按钮，都可以将其插入到网页中。
记录集的名称
记录集中的字段
请求变量
阶段变量
应用程序变量
图17.24 绑定了变量的绑定面板
2、插入动态表格
“动态表格”服务器行为用来创建包含动态内容的表格，该服务器行为在使用记录集中的动态内容填充表格的同时，还自动应用了“重复区域”服务器行为。
插入“动态表格”的操作步骤
① 选择菜单【插入】|【应用程序对象】|【动态数据】|【动态表格】，弹出“动态表格”对话框(图17.27)；
② 在“记录集”下拉列表框中选择要使用的记录集；
③ 输入每页要显示的记录个数；
④ 如果需要，输入表格边框、单元格边距和单元格间距的值；
⑤ 单击【确定】按钮，
图17.27“动态表格”对话框
3、插入动态文本字段(文本域)
“插入动态文本字段”主要用于把网页中的文本域与数据源变量建立联系，以便浏览网页时，能显示数据源变量的当前值。使用此功能需要事先在网页中插入文本域。
插入动态文本字段的操作步骤
① 在动态页中插入文本域
② 为文本域绑定数据源
为文本域绑定数据源的方法有多种，最简单的是将“绑定”面板中的数据源变量直接拖放到要绑定的文本域对象中，也可以通过插入“应用程序对象”的方式来实现绑定
4、动态选择列表
选择列表”即是下拉列表框，是一个表单对象，单击它会弹出下拉列表供选择。根据下拉列表的列表内容是否固定不变，将其分为静态和动态两种。
插入一个动态下拉列表的操作步骤
①在动态页中插入一个下拉列表框
②打开“动态列表/菜单”对话框(图17.29)
③设置动态下拉列表框的数据源
图17.29 “动态列表/菜单”对话框
5、动态复选框
复选框可以用来实现多项选择。
设置动态复选框，就是为复选框指定一个数据源，在浏览网页时，根据复选框所绑定变量的值是否等于给定值来决定复选框是否显示为被选中状态。
比如，在一个论坛系统中，用户在注册时通过复选框的形式输入了自己的爱好，如果要设计一个网页，用来显示一个注册用户的爱好，就可以用动态复选框功能来实现。
6、动态单选按钮组
单选按钮主要用于输入多选一数据的情况，如性别、单项选择题等。动态单选按钮是指将一组单选按钮与数据源建立关联，在浏览网页时，根据数据源变量的值决定某个单选按钮的初始状态是否处于被选中。
【例17.2】在数据库exam.mdb的数据表selective中有choicA、choicB、choicC、choicD字段用来存储单项选择题的四个选项，answer字段(字段宽度为1)用来存储答案，其值为“ABCD”之一。设计一个动态页，根据answer字段值显示答案，运行结果如图17.32。
图17.32“动态单选按钮”效果图
17.4.2 设置动态数据的显示格式
①在Dreamweaver的“设计”视图中打开包含动态数据的页面。
②在页面中，单击要定义其格式的动态数据项选择它。在“绑定”面板，被选定的数据项将高亮显示，并在“格式”列中出现向下箭头。
③单击“格式”列中的向下箭头，展开可用格式的弹出菜单，单击相应的菜单项即完成设置。如果在“格式”列中未看见向下箭头，可以把面板拉宽。
④从菜单中选择“编辑格式列表”，出现“编辑格式列表”对话框。
⑤ 根据数据类型，选择合适的数据源格式即可。
17.4.3 动态图像的绑定方法
Dreamweaver绑定动态图像的步骤如下：
①预备工作：在站点文件夹中定义一个文件夹，用来存储所有的图片文件，然后定义数据表picture，包含一个portrait字段，用来存储图片文件的路径名。依据表picture为网页绑定记录集rsRegister。
②打开要绑定动态图像的页面，恰当设置要插入图片的位置和大小。
③选择【插入】|【图像】菜单，打开“选择图像源文件”对话框，在对话框上部选择“数据源”单选按钮。
④选择数据源。
17.4.4 动态设置HTML对象的属性
1．在属性面板中设置
2．在“绑定”面板中设置
3．在“标签检查器”面板中设置
17.5 增加服务器行为
17.5.1 服务器行为面板
17.5.2 重复区域
17.5.3 记录集分页
17.5.4 显示区域
17.5.5 转到详细页
17.5.6 插入主详细页集
17.5.7 操作记录集中记录
17.5.8 用户验证
17.5.1服务器行为面板
(1)增加服务器行为
(2)删除服务器行为
(3)修改服务器行为参数
(4)编辑服务器行为
图17.40 “服务器行为”面板
图17.41添加“服务器行为”菜单
图17.42服务器行为子菜单
17.5.2重复区域
“重复区域”服务器行为用来定义在同一个页面中显示记录集中的多条记录。
如果页面绑定了记录集，且页面空间可以同时显示多条记录时，则可以为绑定的记录集添加“重复区域”服务器行为。
任何被选择的动态数据及各种对象都可以转化为重复区域，常见的是表格、表格行等。
添加“重复区域”服务器行为之前，需要先选中要显示记录值的动态数据区。
创建“重复区域”服务器行为的步骤
①在“设计”视图中，选择动态页中包含动态内容的区域
②单击“服务器行为”面板上的按钮，选择弹出菜单中的“重复区域”项，打开“重复区域”对话框
③在对话框中的“记录集”下拉列表框中选择要使用的记录集的名称；在“显示”右侧第一个单选按钮后输入每页要显示的记录个数。
④单击【确定】按钮，完成设置。
17.5.3记录集分页
1．插入记录集导航条
图17.45 文本方式的导航条
1．插入记录集导航条
① 新建一个动态页，在页中插入一个表格，为动态页绑定记录集，并将记录集的字段拖放到表格中，形成显示记录集内容的动态数据区。
② 选中插入记录集字段的那行表格，为其添加“重复区域”行为，并根据页面大小和每条记录显示所占空间，合适设定每页要显示的记录数。
③ 将插入点放到页面上要显示导航条的位置，选择菜单【插入】|【应用程序对象】|【记录集分页】|【记录集导航条】，打开“记录集导航条”对话框，如图17.44。
④ 单击图17.44中的“记录集”下拉列表，选择要建立导航链接的记录集，这里选择的记录集应是步骤①所使用的记录集。
⑤ 单击【确定】按钮，在插入点所在位置插入导航条(如图17.45)，实现导航功能的脚本代码同时插入到动态页的源文件中
2．定义普通导航
预备工作：在动态网页中需要插入导航条的地方插入一个1行4列的表格，适当调整表格的属性，在四个单元格中分别输入“首页”、“下一页”、“上一页”、“末页”等文本。
单击“服务器行为”面板上的按钮，选择下拉菜单中的“记录集分页”，弹出“记录集分页”子菜单(图17.46)，各命令项的含义如下：
“记录集分页”子菜单各命令项的含义
【移至第一条记录】：创建跳转到记录集第一条记录所在显示子页的链接。
【移至前一条记录】：创建跳转到当前记录的前一条记录所在显示子页的链接。
【移至下一条记录】：创建跳转到当前记录的下一条记录所在显示子页的链接。
【移至最后一条记录】：创建跳转到记录集最后一条记录所在显示子页的链接。
【移至特定记录】：设置在当前页直接显示指定记录，它不是一个显式的链接，其用法请参见17.5.5节。
3．使用“记录集导航状态”对象创建记录计数器
① 预备工作：在动态页中绑定记录集，为之添加“重复区域”服务器行为和“记录集分页”导航链接。
② 在动态页中欲插入记录计数器的位置单击，将插入点置入其中。
③ 选择菜单【插入】|【应用程序对象】|【显示记录计数】|【记录集导航状态】，出现“记录集导航状态”对话框(图17.49)。
④ 从“Recordset”下拉列表中选择要使用的记录集，然后单击【确定】按钮，在页面插入点位置插入一个记录集导航状态条，形如：“记录 {rsSelect_first} 到 {rsSelect_last} (总共 {rsSelect_total}”，用户可以根据需要对其中的文字进行更改，但不要改动“{rsSelect_first}”、“{rsSelect_last}”、“{rsSelect_total}”这三个占位符。
17.5.4 显示区域
设定显示区域的显示条件，可以根据情况隐藏无关信息、避免误操作、显示提示信息等。
图17.50“显示区域”子菜单
17.5.5 转到详细页
“转到详细页”服务器行为可以将参数从一个页面传递到另一个页面。
比如，要设计一个新闻显示系统，其中一个页面用来显示新闻的标题，当用户单击标题时转到该新闻的详细内容显示页面，这种显示模式既方便用户快速浏览新闻标题，又能让用户在需要时查看新闻的详细内容，这种页面间的跳转可以通过“转到详细页”服务器行为来实现。
例：设在17.2.1节创建的forum.mdb数据库中的数据表register存储了注册用户的信息(register表的字段请参见图17.8)，现在要设计一个页面用来分页显示所有注册用户的“呢称”(对应的字段名为Nickname)，当单击某个“呢称”时，转到该“昵称”对应用户的详细信息。
完成上述要求，需要建立两个动态页，一个用来分页显示所有注册用户的“昵称”，并且所有的“昵称”都应该建立链接。另一个动态页用来显示单击某“昵称”时要显示的详细信息。这两个动态页之间的链接关系可以通过“转到详细页”服务器行为来实现，步骤如下：
1．创建regnick.asp页
2．制作显示详细信息的页面detail.asp
1．创建regnick.asp页
① 根据17.2.2节的介绍，建立数据库连接“forum”。
② 创建记录集图17.52 regnick.asp页设计效果
③ 设定分页显示：
④ 为“昵称”建立链接
⑤ 在“转到详细页面”对话框中设置以下各项：
“链接”下拉列表
“详细信息页”文本框
“传递URL参数”文本域
“记录集”下拉列表框
“列”下拉列表框
⑥ 按照图17.53设置“转到详细页面”对话框中各参数，单击【确定】按钮，完成设置。
2．制作显示详细信息的页面detail.asp
(1) 使用筛选记录集创建详细信息页
①新建一个动态页，另存为detail.asp。
②为detail.asp页绑定记录集rsRegister2。
③在detail.asp页中插入一个2行3列的表格，适当调整表格大小。根据要显示的注册用户信息，在表格第一行各列输入“昵称”、“真实姓名”、“注册时间”，并将记录集rsRegister2的“Nickname”、“truename”、“Regtime”三个字段拖放到表格第2行，效果如图17.55所示。
④ 保存网页。
(2) 使用“移至特定记录”服务器行为创建Detail.asp页
①新建动态页detail.asp，为之绑定记录集rsRegister2，选自Register数据表的所用字段，不进行筛选。
②按图17.55所示设计页面。
③为detail.asp页添加“移至特定记录”服务器行为，设置如图17.56所示。注意，对话框中“匹配URL参数”右侧的参数名称与Regnick.asp页设定的“转到详细页面”(图17.56)中“传递URL参数”参数名称一致。
④单击【确定】按钮完成设置，当浏览网页regnick.asp时，单击“昵称”链接，可以得到与方法(1)相同的结果。
17.5.6 插入主详细页集
“主详细页集”的功能与“转到详细页”服务器行为的功能相似，也是创建一个用于显示列表信息的主页和一个用于显示详细信息的详细页。
与“转到详细页”不同的是，插入“主详细页集”时，主页和详细页可由Dreamweaver自动生成。
使用“主详细页集”的步骤为：
①新建一个动态页，将其存盘，设文件名为main.asp。注意，一般应在存盘之后再进行插入主详细页集操作。
② 为页面绑定需要的记录集，这项工作要在插入“主详细页集”操作之前完成。
③ 选择菜单【插入】|【应用程序对象】|【主详细页集】，弹出“插入主详细页集”对话框(图17.57)。在此对话框中设置主页和详细页的相关信息。
17.5.7操作记录集中记录
1．生成“插入记录”页
2．生成“更新记录”页
3．创建“删除记录”页
(1) 利用“插入记录表单向导”生成
①新建一个动态页，另存为add.asp，用来向记录集中添加数据。
②选择菜单【插入】|【应用程序对象】|【插入记录】|【插入记录向导】，弹出“插入记录表单”对话框，参见图17.58。
③单击【确定】按钮，Dreamweaver将自动生成“插入记录页”，参见图17.60。
(2) 利用“插入记录”服务器行为生成
①制作接收用户输入数据的表单。
②添加“插入记录”服务器行为。
③单击【确定】按钮，Dreamweaver自动生成“插入记录页”，但此“插入记录”页没有自动生成【提交】按钮，用户需要在表单中插入一个“提交表单”类型的命令按钮。
2．生成“更新记录”页
动态网页应用中有时需要让用户更新数据表中记录，如更改密码等。实现记录更新通常需要两个页面前后工作，一个页面让用户选择或检索记录集中指定的记录，称之为主页面，另一个页面接收主页面传递的记录信息，显示该记录并提供更新功能，称为更新记录页。
(1) 创建主页面
主页面的功能主要是向更新记录页提供要更新记录的信息，可以通过创建浏览记录页或检索记录页的方式来实现。
①新建一个页面，插入一个表单，表单中插入：“请输入用户名”文字，一个文本域，其名字设为nick，一个动作属性为“提交表单”的提交按钮。
②设置表单的“动作”属性为change.asp，方法设为“GET”，即将提交的数据传给更新记录页change.asp。
③将主页面以changemain.html为名存储。
(2) 创建更新记录页
①预备工作，根据接收的参数筛选记录集。
②添加“更新记录”服务器行为。
选择菜单【插入】|【应用程序对象】|【更新记录】|【更新记录表单向导】，弹出“更新记录”对话框
③设置更新记录对话框中的各项参数，单击【确定】按钮，Dreamweaver完成“更新记录”页
3．创建“删除记录”页
与“更新记录”页一样，使用“删除记录”服务器行为的页面也通常是与主页面前后工作的子页面。主页面显示有关记录，用户可以从中选择要删除的记录，然后跳转到实现删除操作的子页面。
使用“删除记录”服务器行为的步骤
①创建一个显示所有记录列表的主页面，为每个记录都创建一个“删除”连接。单击某个记录的“删除”链接，能传递该记录的唯一键值到“删除确认”页。
②创建“删除确认”页，绑定请求变量，用来接收来自主页面的URL参数值；依据接收到的URL参数值，筛选要删除其记录的数据表，生成记录集；在页面中插入一个表单，并依据所筛选到的记录集，在表单中添加“动态表格”服务器行为；为“动态表格”添加“删除记录”服务器行为。
17.5.8用户验证
1．登录用户
2．限制对页的访问
3．注销用户
4．检查新用户名
1．登录用户
①新建一个动态页，添加一个表单，根据需要在表单中添加有关的对象，至少包含用于接收用户名和密码的文本域对象。
②单击“服务器行为”面板上的按钮，在弹出的菜单中选择【用户身份验证】|【登录用户】，打开“登录用户”对话框，设置各项参数
③单击【确定】按钮，完成对话框的设置，登录用户验证页自动生成。
2．限制对页的访问
“限制对页的访问”服务器行为用来设置某页面需要通过登录验证才能被访问。
比如，要实现一个网站的有些网页只对注册用户开放，则为这些网页添加“限制对页的访问”服务器行为即可，对非注册用户，由于不能通过用户名和密码的登录验证，将不能正常浏览到这些页面。
2．限制对页的访问
①打开动态页，单击“服务器行为”面板上按钮，在弹出的菜单中选择【用户身份验证】|【限制对页的访问】选项，打开“限制对页的访问”对话框(图17.66)。
②在“基于以下内容进行限制”右侧，选择按“用户名和密码”还是“用户名、密码和访问级别”的方式进行访问限制。
③单击【确定】按钮，完成设置。
3．注销用户
“注销用户”服务器行为用来实现用户退出网站时应做的“结束会话”行为，即撤销登录网站时Web服务器为该用户所创建的Session变量。
4．检查新用户名
“检查新用户名”服务器行为是用来限制插入记录的，即用来检查欲插入记录的指定字段的值在记录集中是否已经存在。
比如一个申请邮件的注册页面，提交的邮件用户名用来唯一地标识用户，因此新提交的用户名不能与已有的用户名相同，实现这一要求，需要在新用户注册时，检查数据库中是否已有同名的用户存在，这一功能可以通过添加“检查新用户名”服务器行为来实现。(共21张PPT)
第7章 框架集
和表格一样，框架集也是一个网页布局工具。使用框架集，可以将浏览器窗口划分为多个区域，每个区域叫做一个框架，可以显示一个HTML文档，通过建立不同框架中HTML文档间的链接关系，可以创建具有导航结构的网页。使用框架集，可以使网页的版面更友好、结构更清晰。
7.1.1 认识框架集和框架
右侧框架
顶部框架
左侧框架
图7.1 框架结构网页示例
7.1.1 认识框架集和框架
使用Dreamweaver的框架集技术可以很方便地创建上述结构的页面。
框架的个数以及它们在浏览器窗口中的显示布局由框架集来定义(框架集也是一个HTML文档)。当创建框架集格式的页面时，实际上是创建了多个HTML文档。如一个将浏览器窗口划分为三个框架的页面，它实际上至少由四个HTML文档组成，即框架集文档和三个框架所显示的默认文档，框架集文档用来定义每个框架的大小、位置以及所关联的HTML文档等属性。
7.1.1 认识框架集和框架
框架集可以嵌套定义，以便将浏览器窗口划分出更多的区域。
一般说来，框架集技术(习惯上也称作框架技术)主要通过两种类型的元素来实现，一个是框架集(由
