HTML和中文DreamweaverMX2004实用教程第5章

1、 本章要点本章要点l5.1 重做重做“卡通青蛙卡通青蛙”网页网页 l5.2 再做再做“俏皮歇后语俏皮歇后语”网页网页 l5.3 “霸道的文字霸道的文字”网页网页 l5.4 再做再做“心情随笔心情随笔”网页网页 l5.5 “射门射门”网页网页 l5.6 再做再做“射门射门”网页网页 l5.7 “风景幻灯风景幻灯”网页网页l5.8 “浮动图像浮动图像”网页网页 l习题习题 5在在Dreamweaver中重做后的中重做后的“卡通青蛙卡通青蛙”网页如图网页如图5-1-1所示。可以看出，所示。可以看出，该网页和第该网页和第1章中的章中的“卡通青蛙卡通青蛙”网页基本相同，在网页中包含几个大小不网页基本相同

2、，在网页中包含几个大小不同的卡通青蛙图像，并且每个图像的周围都增加了边框。这两个网页的不同的卡通青蛙图像，并且每个图像的周围都增加了边框。这两个网页的不同之处在于第同之处在于第1章中的章中的“卡通青蛙卡通青蛙”网页是使用网页是使用HTML代码实现的，而本实代码实现的，而本实例是使用例是使用“样式样式”实现的。实现的。 图5-1-1 “卡通青蛙”网页的显示效果 5.1.1 创建创建CSS样式表样式表1“CSS样式”面板执行执行“窗口窗口”“CSS样式样式”菜单命令，或者按菜单命令，或者按Shift+F1键，即可调出键，即可调出“CSS样式样式”面板，如图面板，如图5-1-2所示。其中各选项的作用

3、如下。所示。其中各选项的作用如下。图5-1-2 “CSS样式”面板（1）显示窗口：显示所有样式表的名称，）显示窗口：显示所有样式表的名称，“（未定义样式）（未定义样式）”表示没有样表示没有样式。式。（2）“附加样式表附加样式表”按钮：单击该按钮，调出按钮：单击该按钮，调出“选择样式表文件选择样式表文件”对话框，对话框，用于导入外部的样式表（文件的扩展名为用于导入外部的样式表（文件的扩展名为.css）。）。 图5-1-2 “CSS样式”面板 （3）“新建新建CSS样式样式”按钮：单击该按钮，调出按钮：单击该按钮，调出“新建新建CSS样式样式”对话对话框，如图框，如图5-1-3所示。利用该对话框可

4、以建立新的样式。所示。利用该对话框可以建立新的样式。 图5-1-3 “新建CSS样式”对话框 （4）“编辑样式表编辑样式表”按钮：单击该按钮，调出能进行样式表编辑的对话按钮：单击该按钮，调出能进行样式表编辑的对话框，利用该对话框可以对框，利用该对话框可以对CSS样式表进行编辑。样式表进行编辑。（5）“删除删除CSS样式样式”按钮：单击该按钮，将删除选中的样式。按钮：单击该按钮，将删除选中的样式。2创建CSS样式表（1）在）在“CSS样式样式”面板中单击面板中单击“新建新建CSS样式样式”按钮，调出如图按钮，调出如图5-1-3所所示的示的“新建新建CSS样式样式”对话框。选中对话框。选中“选择器

5、类型选择器类型”栏内的第栏内的第1个单选钮，个单选钮，在在“名称名称”下拉列表框内输入一个样式表的名称，名称必须以下拉列表框内输入一个样式表的名称，名称必须以“.”开始。开始。（2）单击该对话框中的）单击该对话框中的“确定确定”按钮，即可退出该对话框，调出按钮，即可退出该对话框，调出“保存样保存样式表文件为式表文件为”对话框。利用该对话框，输入对话框。利用该对话框，输入CSS样式表名称，单击样式表名称，单击“保存保存”按钮，将新建的空的按钮，将新建的空的CSS样式表保存。同时，可弹出样式表保存。同时，可弹出“CSS样式定义样式定义”对话对话框，如图框，如图5-1-4所示（初始时所示（初始时“分

6、类分类”栏中选中的是栏中选中的是“类别类别”列表项）。利列表项）。利用该对话框可以定义样式表内各个对象属性。用该对话框可以定义样式表内各个对象属性。 图5-1-4 “CSS样式定义”对话框 （3）设置完毕后，单击）设置完毕后，单击“确定确定”按钮，即可完成样式表的定义。此时，按钮，即可完成样式表的定义。此时，在在“CSS样式表样式表”面板的显示窗口内，会显示出新创建的样式表的名称。面板的显示窗口内，会显示出新创建的样式表的名称。3“新建CSS样式”对话框中其他各选项的含义（1）“标签标签”单选钮：选中该单选钮后，单选钮：选中该单选钮后，“名称名称”下拉列表框显示为下拉列表框显示为“标标签签”下

7、拉列表框，它提供了各种下拉列表框，它提供了各种HTML语言的标记，可利用它对语言的标记，可利用它对HTML标标记重新定义，改变其属性。记重新定义，改变其属性。（2）“高级高级”单选钮：选中该单选钮后，单选钮：选中该单选钮后，“名称名称”下拉列表框显示为下拉列表框显示为“选选择器择器”下拉列表框。下拉列表框。“选择器选择器”下拉列表框有下拉列表框有4个选项，都是针对热字的：个选项，都是针对热字的：link（一般链接）、（一般链接）、visited（访问过的链接字）、（访问过的链接字）、hover（当前的链接字）和（当前的链接字）和active（被激活的链接字）。针对这（被激活的链接字）。针对这4

8、种状态，可设置它们的属性，使链接种状态，可设置它们的属性，使链接字在各种状态下有不同特性。字在各种状态下有不同特性。（3）“定义在定义在”栏：用于确定栏：用于确定CSS样式定义在文件（样式定义在文件（.css）还是定义在当前）还是定义在当前文档中。文档中。 5.1.2 “CSS样式定义样式定义”对话框中的边框属性对话框中的边框属性单击单击“CSS样式定义样式定义”对话框左边对话框左边“分类分类”列表框中的列表框中的“边框边框”列表项，调列表项，调出出“边框边框”的样式设置内容的样式设置内容，如图，如图5-1-4所示。利用该对话框可以对围绕所所示。利用该对话框可以对围绕所有对象的边框属性进行定义

9、。该对话框中各选项的作用如下。有对象的边框属性进行定义。该对话框中各选项的作用如下。“边框边框”栏内有栏内有“样式样式”、“宽度宽度”和和“颜色颜色”3个栏，每个栏中均有一个个栏，每个栏中均有一个“全部相同全部相同”复选框，以及复选框，以及4行选项。行选项。4行选项分别用来定义行选项分别用来定义“上上”、“右右”、“下下”和和“左左”边框。选择边框。选择“全部相同全部相同”复选框后，只有复选框后，只有“上上”栏为可用状态，定义了栏为可用状态，定义了“上上”边框后，其他边框也采用相同的定义。边框后，其他边框也采用相同的定义。 “样式样式”栏中各下拉列表框中有栏中各下拉列表框中有9个选项。其中，个

10、选项。其中，“无无”选项是取消边框，选项是取消边框，其他选项对应着一种不同的边框。边框的最终显示效果还与浏览器有关。其他选项对应着一种不同的边框。边框的最终显示效果还与浏览器有关。 “宽度宽度”栏的下拉列表框中有栏的下拉列表框中有4个选项。它的第一列的下拉列表框用于设个选项。它的第一列的下拉列表框用于设置边框的宽度，第二列下拉列表框用于选择数值的单位，只有在第一列下置边框的宽度，第二列下拉列表框用于选择数值的单位，只有在第一列下拉列表框中选择了拉列表框中选择了“（值）（值）”选项时，它才有效，否则均采用像素为单位。选项时，它才有效，否则均采用像素为单位。选择选择“细细”选项时，可设置细边框；选

11、择选项时，可设置细边框；选择“中中”选项时，可设置中等粗细选项时，可设置中等粗细的边框；选择的边框；选择“粗粗”选项时，可设置粗边框；选择选项时，可设置粗边框；选择“值值”选项时，可输入选项时，可输入边框粗细的数值，此时其右边的下拉列表框变为有效，可以选择数值的单边框粗细的数值，此时其右边的下拉列表框变为有效，可以选择数值的单位。位。 “颜色颜色”栏中有栏中有1个按钮和个按钮和1个文本框用于设置边框的颜色。个文本框用于设置边框的颜色。 在Dreamweaver中利用样式表再做的“俏皮歇后语”网页的显示效果如图5-2-1所示。使用CSS样式表中的“类型”和“背景”属性，即可在网页中设置文字的不同

12、样式。 图5-2-1 再做的“俏皮歇后语”网页的显示效果 5.2.1 定义样式表中的类型属性定义样式表中的类型属性在在“CSS样式定义样式定义”对话框左边的对话框左边的“分类分类”列表框中单击列表框中单击“类型类型”列表项，列表项，调出调出“类型类型”属性的设置内容，如图属性的设置内容，如图5-2-2所示。其中各选项的含义如下。所示。其中各选项的含义如下。 图5-2-2 “分类”属性的设置内容（1）“字体字体”下拉列表框：设置应用样式的对象所使用的字体。下拉列表框：设置应用样式的对象所使用的字体。（2）“大小大小”下拉列表框：设置应用样式的对象的字体大小，在后面的下下拉列表框：设置应用样式的对

13、象的字体大小，在后面的下拉列表框中可以设置使用的单位。拉列表框中可以设置使用的单位。（3）“样式样式”下拉列表框：设置应用样式的字体是否为斜体或偏斜体。下拉列表框：设置应用样式的字体是否为斜体或偏斜体。（4）“行高行高”下拉列表框：设置应用样式的对象所在行的高度。选择下拉列表框：设置应用样式的对象所在行的高度。选择“正正常常”列表项，则表示使用默认的行高；选择列表项，则表示使用默认的行高；选择“（值）（值）”列表项后，可以在列表项后，可以在此处输入一个数值，在后面的下拉列表框中选择单位。此处输入一个数值，在后面的下拉列表框中选择单位。（5）“粗细粗细”下拉列表框：设置网页中应用样式的对象字体的

14、粗细程度。下拉列表框：设置网页中应用样式的对象字体的粗细程度。其中各选项的含义如下。其中各选项的含义如下。 “正常正常”列表项：使用默认的文字设置。列表项：使用默认的文字设置。 “粗体粗体”列表项：将文字设置为列表项：将文字设置为“粗体粗体”样式。样式。 “特粗特粗”列表项：将文字设置为列表项：将文字设置为“特粗特粗”样式。样式。 “细体细体”列表项：将文字设置为列表项：将文字设置为“细体细体”样式。样式。100到到900列表项：使用数值的方法定义文字的粗细样式，数值越大文字也列表项：使用数值的方法定义文字的粗细样式，数值越大文字也就越粗。就越粗。 （6）“变量变量”下拉列表框：选中下拉列表框

15、：选中“小型大写字母小型大写字母”列表项后，应用样式列表项后，应用样式的文字中的英文字母将按照小写字母的大小显示成大写字母。的文字中的英文字母将按照小写字母的大小显示成大写字母。（7）“大小写大小写”下拉列表框：将网页中应用样式的文字设置为大写、小写下拉列表框：将网页中应用样式的文字设置为大写、小写或首字母大写样式。或首字母大写样式。（8）“修饰修饰”栏：设置文字的各种样式，在栏：设置文字的各种样式，在“修饰修饰”栏中进行设置可以制栏中进行设置可以制作出各种特殊效果的连接热字，如图作出各种特殊效果的连接热字，如图5-2-3所示。所示。 图图5-2-3 在在“修饰修饰”栏中进行设置后制作的栏中进

16、行设置后制作的“双划线链接双划线链接”和和“删除线链接删除线链接”热字热字 5.2.2 定义样式表中的背景属性定义样式表中的背景属性在在“CSS样式定义样式定义”对话框内左边的对话框内左边的“分类分类”列表框中单击列表框中单击“背景背景”列表项，列表项，调出调出“背景背景”属性的设置内容，如图属性的设置内容，如图5-2-4所示。其中各选项的含义如下。所示。其中各选项的含义如下。 图5-2-4 “背景”属性的设置内容 （1）“背景颜色背景颜色”按钮与文本框：用于给选中的对象加背景色。按钮与文本框：用于给选中的对象加背景色。（2）“背景图像背景图像”下拉列表框与下拉列表框与“浏览浏览”按钮：用于设

17、置选中对象的背景按钮：用于设置选中对象的背景图像。下拉列表框内有两个选项。图像。下拉列表框内有两个选项。 “无无”选项：此选项是默认选项，表示不使用背景图案。选项：此选项是默认选项，表示不使用背景图案。 “URL”选项：选择该选项或单击选项：选择该选项或单击“浏览浏览”按钮，可调出按钮，可调出“选择图像源选择图像源”对话框，利用该对话框，可以选择背景图像。对话框，利用该对话框，可以选择背景图像。（3）“重复重复”下拉列表框：用于设置背景图像的重复方式。包括下拉列表框：用于设置背景图像的重复方式。包括4个选项：个选项：“不重复不重复”（只在左上角显示一幅图像）、（只在左上角显示一幅图像）、“重复

18、重复”（沿水平与垂直方向（沿水平与垂直方向重复）、重复）、“横向重复横向重复”（沿水平方向重复）和（沿水平方向重复）和“纵向重复纵向重复”（沿垂直方向（沿垂直方向重复）。重复）。（4）“附件附件”下拉列表框：设置图像是否随内容的滚动而滚动。下拉列表框：设置图像是否随内容的滚动而滚动。（5）“水平位置水平位置”下拉列表框：用于设置图像与选定对象的水平相对位置。下拉列表框：用于设置图像与选定对象的水平相对位置。（6）“垂直位置垂直位置”下拉列表框：用于设置图像与选定对象的垂直相对位置。下拉列表框：用于设置图像与选定对象的垂直相对位置。对于对于“水平位置水平位置”和和“垂直位置垂直位置”下拉列表框，

19、如果选择了下拉列表框，如果选择了“值值”选项，选项，则其右边的下拉列表框变为有效，可用于选择单位。则其右边的下拉列表框变为有效，可用于选择单位。 网页中的文字应该占用多大的地方，取决于这些文字的格式和大小属性如网页中的文字应该占用多大的地方，取决于这些文字的格式和大小属性如何设置。另外，利用样式中的何设置。另外，利用样式中的“区块区块”和和“方框方框”属性，可以制作一些比属性，可以制作一些比较霸道的文字（本身没有那么大的字号，可是却偏要占用网页中的大量地较霸道的文字（本身没有那么大的字号，可是却偏要占用网页中的大量地方，突出自己与众不同）。方，突出自己与众不同）。“霸道的文字霸道的文字”网页的

20、显示效果如图网页的显示效果如图5-3-1所示。所示。除了文字外，样式中的除了文字外，样式中的“区块区块”和和“方框方框”属性对网页中的其他对象同样属性对网页中的其他对象同样有效。有效。 图5-3-1 “霸道的文字”网页的显示效果 5.3.1 定义样式表中的区块属性定义样式表中的区块属性在在“CSS样式定义样式定义”对话框左边的对话框左边的“分类分类”列表框中单击列表框中单击“区块区块”列表项，列表项，调出调出“区块区块”属性的设置内容，如图属性的设置内容，如图5-3-2所示。其中各选项的含义如下。所示。其中各选项的含义如下。 图5-3-2 “分类”属性的设置内容 （1）“单词间距单词间距”下拉

21、列表框：用于设定单词之间的间距，包括两个选下拉列表框：用于设定单词之间的间距，包括两个选项，一个是项，一个是“正常正常”，一个是，一个是“（值）（值）”。选择。选择“（值）（值）”选项后，可以选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位（此处可用负值）。输入数值，再在其右边的下拉列表框内选择数值的单位（此处可用负值）。选择选择“正常正常”选项后，单词间距是正常的默认值。选项后，单词间距是正常的默认值。（2）“字母间距字母间距”下拉列表框：用于设定字母间距，包括两个选项，一个下拉列表框：用于设定字母间距，包括两个选项，一个是是“正常正常”，一个是，一个是“（值）（值）”。选择。选

22、择“（值）（值）”选项后，可以输入数值，选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位（此处可用负值）。选择再在其右边的下拉列表框内选择数值的单位（此处可用负值）。选择“正正常常”选项后，字母间距是正常的默认值。选项后，字母间距是正常的默认值。（3）“垂直对齐垂直对齐”下拉列表框：用于设置选中的对象相对于上级对象或相下拉列表框：用于设置选中的对象相对于上级对象或相对所在行，在垂直方向的对齐方式。包括对所在行，在垂直方向的对齐方式。包括9个选项，各选项的作用如下。个选项，各选项的作用如下。 “基线基线”：将对象与上一级对象的基线对齐。：将对象与上一级对象的基线对齐。 “上标上标”：

23、使上标对齐。：使上标对齐。 “下标下标”：使下标对齐。：使下标对齐。 “顶部顶部”：使对象与所在行中最高对象对齐。：使对象与所在行中最高对象对齐。 “文本顶对齐文本顶对齐”：使对象与上级对象的文字顶部对齐。：使对象与上级对象的文字顶部对齐。 “中线对齐中线对齐”：使对象与所在行中对象的中线对齐。：使对象与所在行中对象的中线对齐。 “底部底部”：使对象与当前行中最低的对象的底部对齐。：使对象与当前行中最低的对象的底部对齐。 “文本底对齐文本底对齐”：使对象与上级对象的文字底部对齐。：使对象与上级对象的文字底部对齐。 “（值）（值）”：使用数值方式对齐。：使用数值方式对齐。（4）“文本对齐文本对齐

24、”下拉列表框：用于设置首行文字在对象中的对齐方式。下拉列表框：用于设置首行文字在对象中的对齐方式。包括包括“左对齐左对齐”、“右对齐右对齐”、“居中居中”和和“两端对齐两端对齐”4个选项。个选项。（5）“文字缩进文字缩进”文本框：用于输入文字的缩进量。文本框：用于输入文字的缩进量。（6）“空格空格”下拉列表框：用于设置文本空白的使用包括下拉列表框：用于设置文本空白的使用包括3个选项。个选项。“正常正常”：表示将所有的空白均填满。：表示将所有的空白均填满。“保留保留”：表示由用户输入时控制。：表示由用户输入时控制。“不换行不换行”：表示文本只有加入标记：表示文本只有加入标记时才换行。时才换行。（

25、7）“显示显示”下拉列表框：用于设置是否显示指定的对象，以及如何显示下拉列表框：用于设置是否显示指定的对象，以及如何显示指定的对象。选择指定的对象。选择“无无”选项时，不显示它被指定的对象。选项时，不显示它被指定的对象。5.3.2 定义样式表中的方框属性定义样式表中的方框属性在在“CSS样式定义样式定义”对话框左边的对话框左边的“分类分类”列表框中单击列表框中单击“方框方框”列表项，列表项，调出调出“方框方框”属性的设置内容，如图属性的设置内容，如图5-3-3所示。其中各选项的含义如下。所示。其中各选项的含义如下。 图5-3-3 “分类”属性的设置内容 （1）“宽宽”下拉列表框：用于设置对象的

26、宽度。包括两个选项：下拉列表框：用于设置对象的宽度。包括两个选项：“自动自动”和和“值值”。在其右边的下拉列表框内选择数字的单位。在其右边的下拉列表框内选择数字的单位。（2）“高高”下拉列表框：用于设置对象的高度。也包括下拉列表框：用于设置对象的高度。也包括“自动自动”和和“值值”两个选项。两个选项。（3）“浮动浮动”下拉列表框：用于设置是否允许文字环绕在选中对象的周围。下拉列表框：用于设置是否允许文字环绕在选中对象的周围。包括包括3个选项，个选项，“左对齐左对齐”、“右对齐右对齐”和和“无无”（即对象不移动）。（即对象不移动）。（4）“清除清除”下拉列表框：用于设定其他对象是否可以在选定对象

27、的左右。下拉列表框：用于设定其他对象是否可以在选定对象的左右。包括包括3个选项，个选项，“左对齐左对齐”、“右对齐右对齐”和和“无无”（不允许其他对象在其左（不允许其他对象在其左右）。右）。（5）“填充填充”栏：用于设置边框与其中的内容之间填充的空白间距，栏：用于设置边框与其中的内容之间填充的空白间距，4个个下拉列表框分别用来决定上、右、下和左边框与内容之间的间距。下拉列下拉列表框分别用来决定上、右、下和左边框与内容之间的间距。下拉列表框内应输入数值，在其右边的下拉列表框内选择数值的单位。表框内应输入数值，在其右边的下拉列表框内选择数值的单位。（6）“边界边界”栏：用于设置边缘的空白宽度，在其

28、下拉列表框内可输入数栏：用于设置边缘的空白宽度，在其下拉列表框内可输入数值或选择值或选择“自动自动”。 再做的再做的“心情随笔心情随笔”网页的显示效果如图网页的显示效果如图5-4-1所示。可以看出，网页的结所示。可以看出，网页的结构及网页中的对象没有什么变化，但是网页中的图像与原来网页中的图像构及网页中的对象没有什么变化，但是网页中的图像与原来网页中的图像相比，产生了一种虚化的效果。使用样式中的相比，产生了一种虚化的效果。使用样式中的“扩展扩展”属性即可产生这样属性即可产生这样的效果。的效果。 图5-4-1 “心情随笔”网页的显示效果 5.4.1 定义样式表中的扩展属性定义样式表中的扩展属性在

29、在“CSS样式定义样式定义”对话框左边的对话框左边的“分类分类”列表框中单击列表框中单击“扩展扩展”列表项，列表项，调出调出“扩展扩展”属性的设置内容，如图属性的设置内容，如图5-4-2所示。其中各选项的含义如下。所示。其中各选项的含义如下。 图 5-4-2 “扩展”属性的设置内容 （1）“分页分页”栏：用于在选中的对象的前面或后面强制加入分页符。一栏：用于在选中的对象的前面或后面强制加入分页符。一般浏览器均不支持此项功能。该栏有般浏览器均不支持此项功能。该栏有“之前之前”和和“之后之后”两个下拉列表框，两个下拉列表框，其内的选项是：其内的选项是：“自动自动”、“始终始终”、“左对齐左对齐”和

30、和“右对齐右对齐”，用于确，用于确定分页符的位置。定分页符的位置。（2）视觉效果栏：利用该栏的两个下拉列表框中的选项，可以设置特殊的）视觉效果栏：利用该栏的两个下拉列表框中的选项，可以设置特殊的显示效果，使页面的显示效果更动人。显示效果，使页面的显示效果更动人。 “光标光标”下拉列表框：可以利用该下拉列表框中的选项，设置各种鼠标的下拉列表框：可以利用该下拉列表框中的选项，设置各种鼠标的形状。低版本的浏览器不支持此项功能。形状。低版本的浏览器不支持此项功能。 “过滤器过滤器”下拉列表框：用于对图像进行滤镜处理，获得各种特殊的效果。下拉列表框：用于对图像进行滤镜处理，获得各种特殊的效果。 5.4.

31、2 定义样式表中的列表属性和定位属性定义样式表中的列表属性和定位属性1定义样式表中的列表属性在“CSS样式定义”对话框内左边的“分类”列表框中单击“列表”列表项，调出“列表”属性的设置内容，如图5-4-3所示。其中各选项的含义如下。 图5-4-3 “扩展”属性的设置内容 （1）“类型类型”下拉列表框：用于设置列表的标记。选择标记是序号（有下拉列表框：用于设置列表的标记。选择标记是序号（有序列表）或符号（无序列表）。该下拉列表框内有序列表）或符号（无序列表）。该下拉列表框内有9个选项：个选项：“圆点圆点”、“圆圈圆圈”等。等。（2）“项目符号图像项目符号图像”下拉列表框和按钮：该下拉列表框内有两

32、个选项，下拉列表框和按钮：该下拉列表框内有两个选项，“无无”和和“（URL）”。选择。选择“无无”选项，不加图像标记；选择选项，不加图像标记；选择“（URL）”选项，单击选项，单击“浏览浏览”按钮，打开按钮，打开“选择图像源选择图像源”对话框，利对话框，利用该对话框可选择图像，在列表行加入小的图标图案作为列表标记。用该对话框可选择图像，在列表行加入小的图标图案作为列表标记。（3）“位置位置”下拉列表框：使用该下拉列表框来设置列表标记的缩进方式。下拉列表框：使用该下拉列表框来设置列表标记的缩进方式。2定义样式表中的定位属性在在“CSS样式定义样式定义”对话框内左边的对话框内左边的“分类分类”列表

33、框中单击列表框中单击“定位定位”列表项，列表项，调出调出“定位定位”属性的设置内容，如图属性的设置内容，如图5-4-4所示。其中各选项的含义如下。所示。其中各选项的含义如下。（1）“类型类型”下拉列表框：用于设置对象的位置。其中各选项的作用如下。下拉列表框：用于设置对象的位置。其中各选项的作用如下。 “绝对绝对”：以页面左上角的坐标为基点。：以页面左上角的坐标为基点。 “相对相对”：以母体左上角的坐标为基点。：以母体左上角的坐标为基点。 “静态静态”：按文本正常顺序定位，一般与：按文本正常顺序定位，一般与“相对相对”定位相同。定位相同。 图5-4-4 “定位”属性的设置内容（2）“显示显示”下

34、拉列表框：用于设置对象的可视性。其中各选项的作用如下拉列表框：用于设置对象的可视性。其中各选项的作用如下下 “可见可见”：选中的对象是可视的。：选中的对象是可视的。 “隐藏隐藏”：选中的对象是隐藏的。：选中的对象是隐藏的。 “继承继承”：选中的对象继承其母体的可视性。：选中的对象继承其母体的可视性。（3）“Z轴轴”下拉列表框：用于设置不同层的对象的显示次序。包括两个下拉列表框：用于设置不同层的对象的显示次序。包括两个选项：选项：“自动自动”（按原显示次序）和（按原显示次序）和“值值”。选择。选择“值值”选项，可输入数选项，可输入数值，数值越大，显示越靠上。值，数值越大，显示越靠上。（4）“溢出

35、溢出”下拉列表框：用于设置当文字超出其容器（如层）时的处理下拉列表框：用于设置当文字超出其容器（如层）时的处理方式。方式。 “可见可见”：当文字超出其容器时仍然可以显示。：当文字超出其容器时仍然可以显示。 “隐藏隐藏”：当文字超出其容器时，超出的内容不能显示。：当文字超出其容器时，超出的内容不能显示。 “滚动滚动”：在母体加一个滚动条，可利用滚动条滚动显示母体中的文字。：在母体加一个滚动条，可利用滚动条滚动显示母体中的文字。 “自动自动”：一般默认状态为：一般默认状态为“隐藏隐藏”状态。状态。（5）“定位定位”栏：用于设置放置对象的容器的大小和位置。栏：用于设置放置对象的容器的大小和位置。（6

36、）“剪辑剪辑”栏：用于设定对象溢出母体容器部分的剪切方式。栏：用于设定对象溢出母体容器部分的剪切方式。对网页中的对象应用对网页中的对象应用“定位定位”样式后，样式后，Dreamweaver会自动将该对象插入会自动将该对象插入到一个层中，并将该层按照到一个层中，并将该层按照“定位定位”属性中的内容进行定义。属性中的内容进行定义。 “射门射门”网页中有一个足球和一个球门，网页在初始状态下的显示效果如网页中有一个足球和一个球门，网页在初始状态下的显示效果如图图5-5-1所示，浏览器加载网页后，足球会向球门移动，直到射到球门内，所示，浏览器加载网页后，足球会向球门移动，直到射到球门内，效果如图效果如图

37、5-5-2所示。所示。 图5-5-2 当足球射入到球门内时网页的显示效果图5-5-1 初始时“射门”网页的显示效果 5.5.1 “时间轴时间轴”面板面板“时间轴时间轴”面板是用于控制网页中层的属性随时间变化而改变的工具。利面板是用于控制网页中层的属性随时间变化而改变的工具。利用它可以产生动画效果。执行用它可以产生动画效果。执行“窗口窗口”“时间轴时间轴”菜单命令，或按菜单命令，或按Alt+F9键，即可调出键，即可调出“时间轴时间轴”面板，如图面板，如图5-5-3所示。该面板中的各个工具及其所示。该面板中的各个工具及其他项目的作用如下。他项目的作用如下。 图5-5-3 “时间轴”面板 1“时间轴

38、”面板的工具栏（1）“时间轴时间轴”下拉列表框：列出了当前页面内所有时间轴动画的名称，下拉列表框：列出了当前页面内所有时间轴动画的名称，选中其中一个选项后，相应的动画就会在选中其中一个选项后，相应的动画就会在“时间轴时间轴”面板中显示出来。面板中显示出来。（2）“归位归位”按钮：将动画图像移到起始位置，同时回放头也移动到该位按钮：将动画图像移到起始位置，同时回放头也移动到该位置处。置处。（3）“回放回放”按钮：单击该按钮，可以使动画退回一个帧。按住该按钮不按钮：单击该按钮，可以使动画退回一个帧。按住该按钮不放，可以向相反方向播放动画。放，可以向相反方向播放动画。（4）“回放头位置回放头位置”文

39、本框：用于输入显示和设置文本框：用于输入显示和设置“回放头回放头”所处的时间所处的时间轴位置号。轴位置号。（5）“播放播放”按钮：单击该按钮，可使动画前进一个帧。按住该按钮不放，按钮：单击该按钮，可使动画前进一个帧。按住该按钮不放，可以向正常方向播放动画。可以向正常方向播放动画。（6）“速度速度”文本框：用于输入每秒钟播放的帧数。文本框：用于输入每秒钟播放的帧数。（7）“自动播放自动播放”复选框：选中该复选框后，则在网上下载后会自动播放。复选框：选中该复选框后，则在网上下载后会自动播放。不选中该复选框时，需要在使用行为事件时才可以播放。不选中该复选框时，需要在使用行为事件时才可以播放。（8）“

40、循环循环”复选框：选中该复选框后，则循环播放动画，否则只播放一复选框：选中该复选框后，则循环播放动画，否则只播放一次动画。次动画。 2通道（1）行为通道：其左边标有字母）行为通道：其左边标有字母“B”，可以在该通道的特定帧使用行为事，可以在该通道的特定帧使用行为事件。件。（2）行为帧：加入了行为事件的帧，它在）行为帧：加入了行为事件的帧，它在“行为通道行为通道”内。内。（3）时间标尺：给出了与时间对应的帧数。）时间标尺：给出了与时间对应的帧数。（4）回放头：播放动画时，回放头在时间标尺上移动，好像放像机的磁头）回放头：播放动画时，回放头在时间标尺上移动，好像放像机的磁头一样。用鼠标拖曳回放头在

41、时间标尺上移动，当它移到某一时间单位处时，一样。用鼠标拖曳回放头在时间标尺上移动，当它移到某一时间单位处时，相应的动画画面会出现在文档窗口内。相应的动画画面会出现在文档窗口内。（5）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名称。）动画条：表示一个动画所占的帧数，上面标有该动画所在层的名称。它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键它的起始处和终止处各有一个小圆，表示首帧和终止帧。如果设置了关键帧，则关键帧也会有一个小圆。帧，则关键帧也会有一个小圆。（6）动画通道：由许多图层组成，表示可以在一个页面内加入多个时间轴）动画通道：由许多图层组成，表示可以在一个页面

42、内加入多个时间轴动画，但最多可以加动画，但最多可以加32个，它的左边标有图层的编号。图层编号大的动画个，它的左边标有图层的编号。图层编号大的动画在图层编号小的动画之上。在图层编号小的动画之上。 5.5.2 制作直线移动动画制作直线移动动画（1）在页面内插入一个层，给该层起一个名字，例如，）在页面内插入一个层，给该层起一个名字，例如，Layer1。然后在层。然后在层内插入一个图像或输入一些文字等。此处层中插入的是图像，如图内插入一个图像或输入一些文字等。此处层中插入的是图像，如图5-5-4所所示。示。图5-5-4 在层中插入图像并移到动画的起始位置（2）将插有图像或文字的层移到动画的起始位置。）

43、将插有图像或文字的层移到动画的起始位置。（3）调出）调出“时间轴时间轴”面板。面板。（4）用鼠标将层拖曳到）用鼠标将层拖曳到“时间轴时间轴”面板的动画通道内，或执行面板的动画通道内，或执行“修修改改”“时间轴时间轴”“增加对象到时间轴增加对象到时间轴”菜单命令。这时，菜单命令。这时，“时间轴时间轴”面面板的动画通道内会出现一个动画条，如图板的动画通道内会出现一个动画条，如图5-5-5所示。如果选中了所示。如果选中了“循环循环”复选框，则在动画通道中，会同时出现一个复选框，则在动画通道中，会同时出现一个“动作帧动作帧”。图图5-5-5 动画通道内出现一个动画条动画通道内出现一个动画条（5）选中动

44、画条的终止帧。默认的动画帧数是）选中动画条的终止帧。默认的动画帧数是15帧，如果要调整动画的帧帧，如果要调整动画的帧数，可用鼠标将动画条终止帧拖曳到希望结束的帧上面。在改变了终止帧数，可用鼠标将动画条终止帧拖曳到希望结束的帧上面。在改变了终止帧的位置之后，如果要编辑行为，则应该双击动画通道中最后一帧的下一帧。的位置之后，如果要编辑行为，则应该双击动画通道中最后一帧的下一帧。 图5-5-4 在层中插入图像并移到动画的起始位置 图5-5-5 动画通道内出现一个动画条 （6）用鼠标拖曳动画层到目标处，当松开鼠标左键时，会看到一条直线，）用鼠标拖曳动画层到目标处，当松开鼠标左键时，会看到一条直线，表示

45、图像移动的路径，如图表示图像移动的路径，如图5-5-6所示。所示。 图5-5-6 表示图像移动路径的一条直线（7）按住“播放”按钮不放，即可在网页编辑窗口内看到动画了。在上一节的在上一节的“射门射门”网页中，足球是以直线运动射入球门。其实，更精彩网页中，足球是以直线运动射入球门。其实，更精彩的射门应该是沿曲线射出的的射门应该是沿曲线射出的“香蕉球香蕉球”，在修改后的，在修改后的“射门射门”网页中，足网页中，足球变为曲线向球门移动，直到移到球门内，效果如图球变为曲线向球门移动，直到移到球门内，效果如图5-6-1所示。所示。 图5-6-1 再做的“射门”网页的显示效果 5.6.1 加入关键帧加入关

46、键帧“时间轴时间轴”面板可以在用户给出起始帧和终止帧后，自动产生中间过程的面板可以在用户给出起始帧和终止帧后，自动产生中间过程的各帧。如果动画的移动路径不是直线的，中间有转折点，则转折点处的画各帧。如果动画的移动路径不是直线的，中间有转折点，则转折点处的画面就是关键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或面就是关键帧。加入关键帧，可以使沿直线路径移动的动画变为沿曲线或折线路径移动的动画，加入关键帧的方法如下。折线路径移动的动画，加入关键帧的方法如下。（1）选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置，）选中动画条内要加入关键帧的位置，回放头会随之移到此时间位置，同时

47、产生一条垂直的红线，用于指示选中的位置。同时产生一条垂直的红线，用于指示选中的位置。（2）在动画条内，单击鼠标右键，弹出时间轴快捷菜单。再单击该菜单内）在动画条内，单击鼠标右键，弹出时间轴快捷菜单。再单击该菜单内的的“增加关键帧增加关键帧”菜单命令，即可在选中的位置处插入一个关键帧，如图菜单命令，即可在选中的位置处插入一个关键帧，如图5-6-2所示。所示。 （3）还可以通过按住）还可以通过按住Ctrl键的同时单击要加入关键帧的位置来插入关键帧。键的同时单击要加入关键帧的位置来插入关键帧。如果对关键帧的位置不满意，可以用鼠标拖曳关键帧上的小圆来调整其位如果对关键帧的位置不满意，可以用鼠标拖曳关键

48、帧上的小圆来调整其位置。置。如果要删除关键帧，可以选中要删除的关键帧，然后单击鼠标右键，弹出如果要删除关键帧，可以选中要删除的关键帧，然后单击鼠标右键，弹出时间轴快捷菜单，再单击该菜单中的时间轴快捷菜单，再单击该菜单中的“移除关键帧移除关键帧”菜单命令即可。菜单命令即可。 图5-6-2 加入关键帧后的“时间轴”面板 5.6.2 制作沿曲线路径移动的动画制作沿曲线路径移动的动画（1）选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图像的）选中关键帧，用鼠标拖曳动画层到新的位置，即可确定关键帧图像的位置。此时动画移动的路径线会变为一条曲线，如图位置。此时动画移动的路径线会变为一条曲线，如图5

49、-6-3所示。可以看出，所示。可以看出，路径线的起始位置与终止位置不变。如果要改变关键帧的位置，可以再用路径线的起始位置与终止位置不变。如果要改变关键帧的位置，可以再用鼠标拖曳动画层到新的位置。鼠标拖曳动画层到新的位置。（2）按住）按住“播放播放”按钮不放，即可在网页编辑窗口内看到沿曲线路径移动按钮不放，即可在网页编辑窗口内看到沿曲线路径移动的动画。的动画。 图5-6-3 调整关键帧动画层的位置后产生的曲线路径线 “风景幻灯风景幻灯”网页初始时显示为一幅风景图像，如图网页初始时显示为一幅风景图像，如图5-7-1所示。网页加载所示。网页加载后，其中的图像会向右移动，当移动到一定的位置后，该图像消

50、失，在网后，其中的图像会向右移动，当移动到一定的位置后，该图像消失，在网页的左边显示出另外一幅图像，并且和第一幅一样向右移动，如图页的左边显示出另外一幅图像，并且和第一幅一样向右移动，如图5-7-2所所示。交替显示示。交替显示4幅图像后从第一幅图像开始重新进行循环显示。幅图像后从第一幅图像开始重新进行循环显示。 图图5-7-1 “风景幻灯风景幻灯”网页初始时的显示效果网页初始时的显示效果 图图5-7-2 “风景幻灯风景幻灯”网页中动画的显示效果网页中动画的显示效果 5.7.1 动画的删除、复制、移动和更名动画的删除、复制、移动和更名1动画的删除（1）删除动画条：选中要删除的动画条后，再按）删除

51、动画条：选中要删除的动画条后，再按Delet键即可。键即可。（2）删除动画的移动路径：选中要删除的动画条，再按）删除动画的移动路径：选中要删除的动画条，再按Delet按键即可。按键即可。（3）删除所有动画条：单击时间轴菜单中的）删除所有动画条：单击时间轴菜单中的“删除时间轴删除时间轴”菜单命令即可。菜单命令即可。2动画的复制（1）选中要复制的动画条，再单击时间轴菜单中的）选中要复制的动画条，再单击时间轴菜单中的“复制复制”菜单命令即可。菜单命令即可。（2）调整回放头的位置，再单击时间轴菜单中的）调整回放头的位置，再单击时间轴菜单中的“粘贴粘贴”菜单命令，即可菜单命令，即可在选中的动画条的右边复

52、制一个动画条，而且可以将其复制到其他页面的在选中的动画条的右边复制一个动画条，而且可以将其复制到其他页面的“时间轴时间轴”面板中。面板中。3动画的移动（1）选中要移动的动画条，再单击时间轴菜单中的）选中要移动的动画条，再单击时间轴菜单中的“剪切剪切”菜单命令。菜单命令。（2）调整回放头的位置，再单击时间轴菜单中的）调整回放头的位置，再单击时间轴菜单中的“粘贴粘贴”菜单命令，即可菜单命令，即可将动画条移到回放头所处的位置处，而且可以将其移动到其他页面的将动画条移到回放头所处的位置处，而且可以将其移动到其他页面的“时时间轴间轴”面板中。面板中。 （3）可以用鼠标拖曳一个动画条在整个动画通道内移动。

53、按住）可以用鼠标拖曳一个动画条在整个动画通道内移动。按住Shift键的键的同时单击要移动的动画条，选中多个动画条，鼠标拖曳一个动画条即可同同时单击要移动的动画条，选中多个动画条，鼠标拖曳一个动画条即可同时移动多个动画条。时移动多个动画条。4动画的更名（1）可以直接在）可以直接在“时间轴时间轴”面板的列表框内更改动画的名称。面板的列表框内更改动画的名称。（2）单击时间轴菜单中的）单击时间轴菜单中的“重命名时间轴重命名时间轴”菜单命令，调出菜单命令，调出“重命名时间重命名时间轴轴”对话框。在该对话框内的对话框。在该对话框内的“时间轴名称时间轴名称”文本框内输入新的名称，再文本框内输入新的名称，再单

54、击单击“确定确定”按钮即可。按钮即可。5.7.2 使用多个时间轴使用多个时间轴与用时间轴控制页面上的所有操作相比，使用单独的时间轴来控制页的各与用时间轴控制页面上的所有操作相比，使用单独的时间轴来控制页的各个离散部分会更容易。例如，一个页可能包含多个互动对象，每个对象都个离散部分会更容易。例如，一个页可能包含多个互动对象，每个对象都可以触发不同的时间轴。可以触发不同的时间轴。 若要管理多个时间轴，可执行以下任意一种操作。若要管理多个时间轴，可执行以下任意一种操作。 新建时间轴：执行新建时间轴：执行“修改修改”“时间轴时间轴”“添加时间轴添加时间轴”菜单命令即可。菜单命令即可。 删除时间轴：选中

55、要删除的时间轴，执行删除时间轴：选中要删除的时间轴，执行“修改修改”“时间轴时间轴”“删除删除时间轴时间轴”菜单命令，将永久删除选中的时间轴中的所有动画。菜单命令，将永久删除选中的时间轴中的所有动画。 重命名时间轴：选中要重命名的时间轴，执行重命名时间轴：选中要重命名的时间轴，执行“修改修改”“时间时间轴轴”“重命名时间轴重命名时间轴”菜单命令；单击菜单命令；单击“时间轴时间轴”面板右上角的按钮，调面板右上角的按钮，调出时间轴菜单，单击该菜单中的出时间轴菜单，单击该菜单中的“重命名时间轴重命名时间轴”菜单命令即可。菜单命令即可。 查看另一个时间轴：要在查看另一个时间轴：要在“时间轴时间轴”面板中查看另一个时间轴，可在面板中查看另一个时间轴，可在“时间轴时间轴”面板左上角的下拉列表框中直接选择一个新的时间轴即可。面板左上角的下拉列表框中直接选择一个新的时间轴即可。 在时间轴中插入对象：选中网页文档中的对象，再单击在时间轴中插入对象：选中网页文档中的对象，再单击“时间轴时间