Dreamweaver 8和Flash 8案例教程表单、样式表与网页中的其他对象

1、 【案例案例11 11】“电脑配置调查表电脑配置调查表”网网页页4.1 【案例案例1212】“硬盘的性能指标硬盘的性能指标”网网页页4.2【案例案例1313】“WordWord操作演示操作演示”网页网页4.3【案例案例1414】“电子市场图片秀电子市场图片秀”网网页页4.44.1.1 学习目标学习目标 “电脑配置调查表电脑配置调查表”网页的显示效果网页的显示效果如图如图4-1-1所示。在该网页中，以表单的方所示。在该网页中，以表单的方式列出了电脑主要配件的调查信息，只需式列出了电脑主要配件的调查信息，只需在页面中按照提示进行选择或输入后，单在页面中按照提示进行选择或输入后，单击击“提交提交”按

2、钮，即可将网页中的信息提按钮，即可将网页中的信息提交到服务器的数据库中。交到服务器的数据库中。图图4-1-1 “电脑配置调查表电脑配置调查表”网页的显示效果网页的显示效果 表单是用户利用浏览器对表单是用户利用浏览器对Web站点数站点数据库进行查询和添加的一种界面，用户利据库进行查询和添加的一种界面，用户利用表单可以输入信息或选择选项等，然后用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理，这种将这些信息提交给服务器进行处理，这种查询方式叫做交互的或者双向的。这些表查询方式叫做交互的或者双向的。这些表单对象包括文本域、下拉列表框、复选框单对象包括文本域、下拉列表框、复选框和单选

3、按钮等。和单选按钮等。 表单对象是让用户输入信息的地方，表单对象是让用户输入信息的地方，表单域是放置表单对象的区域，只有表单表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送域内的表单对象，才可以将它的信息传送出去。出去。4.1.2 操作过程操作过程1创建表单域和插入表单对象创建表单域和插入表单对象（1）创建与删除表单域）创建与删除表单域创建表单域：将光标移到要插入表单域创建表单域：将光标移到要插入表单域的位置，单击的位置，单击“插入插入”（表单）栏内的（表单）栏内的“表单表单”按钮按钮 ，即可在网页编辑窗口，即可在网页编辑窗口内创建一个表单域，如图内创建一个表单域，如图

4、4-1-2所示。所示。图图4-1-2 创建的表单域创建的表单域 单击表单域内部，将光标移到表单域单击表单域内部，将光标移到表单域内，按回车键，即可将表单域调大。按内，按回车键，即可将表单域调大。按BackSpace键，可使表单域缩小。表单域键，可使表单域缩小。表单域在浏览器内是看不到的。在浏览器内是看不到的。显示表单域：在表单域创建后，若看不显示表单域：在表单域创建后，若看不到表单域的矩形红线，可以单击选中到表单域的矩形红线，可以单击选中“查查看看”“可视化助理可视化助理”“不可见元素不可见元素”菜单命令，即可将表单域的矩形红线显示菜单命令，即可将表单域的矩形红线显示出来。出来。删除表单域：单

5、击表单域的边线处，选删除表单域：单击表单域的边线处，选中表单域，按中表单域，按Delete键，即可删除表单域。键，即可删除表单域。 （2）设置表单域的属性）设置表单域的属性 选中表单域，此时表单域选中表单域，此时表单域“属性属性”栏栏如图如图4-1-3所示。所示。图图4-1-3 表单域表单域“属性属性”栏栏 “表单名称表单名称”文本框：在该文本框内，输文本框：在该文本框内，输入表单域的名字。表单域的名字可用于入表单域的名字。表单域的名字可用于JavaScript和和VBScript等脚本语言中，这些等脚本语言中，这些脚本语言可以控制表单域的属性。脚本语言可以控制表单域的属性。 “动作动作”文本

6、框和按钮：利用它们可以文本框和按钮：利用它们可以输入脚本程序或含有脚本程序的输入脚本程序或含有脚本程序的HTML文文件。件。 “方法方法”下拉列表框：用来选择客户端下拉列表框：用来选择客户端与服务器之间传送数据采用的方式。与服务器之间传送数据采用的方式。3个选个选项是项是“默认默认”、“GET”（获得，即追加（获得，即追加表单值到表单值到URL，并发送服务器，并发送服务器GET请求）请求）和和“POST”（传递，在消息正文中发送表（传递，在消息正文中发送表单的值，并发送服务器单的值，并发送服务器POST请求）。请求）。 “类类”下拉列表框：其中有下拉列表框：其中有“重命名重命名”、“管理样式管

7、理样式”和创建的和创建的CSS样式名称等多样式名称等多个选项，可以用来选择个选项，可以用来选择CSS样式、给样式、给CSS样式更名和创建新的样式更名和创建新的CSS样式等。样式等。（3）插入表单对象的方法）插入表单对象的方法 将光标移到要插入表单对象的表单中，将光标移到要插入表单对象的表单中，再插入表单对象。插入表单对象的方法与再插入表单对象。插入表单对象的方法与插入表单的方法一样。插入表单的方法一样。 将光标移到要插入表单对象的位置，将光标移到要插入表单对象的位置，然后单击然后单击“插入插入”（表单）栏中的相应按（表单）栏中的相应按钮，即可在光标处插入一个相应的表单对钮，即可在光标处插入一个

8、相应的表单对象。另外，单击象。另外，单击“插入插入”“表单表单”菜单菜单命令，弹出它的下一级菜单。命令，弹出它的下一级菜单。 根据要插入的表单对象类别，单击菜根据要插入的表单对象类别，单击菜单内的菜单命令也可插入表单对象。单内的菜单命令也可插入表单对象。表单对象的表单对象的“属性属性”栏中都有一个名称文栏中都有一个名称文本框，用来输入表单对象的名称，该名称本框，用来输入表单对象的名称，该名称可在程序中使用，以指定表单对象。可在程序中使用，以指定表单对象。（1）文本域属性的设置：文本域也）文本域属性的设置：文本域也叫做文本字段，表单中经常使用文本叫做文本字段，表单中经常使用文本域。它可以是单行，

9、也可以是多行，域。它可以是单行，也可以是多行，用于接收文本、数字和字符。文本域用于接收文本、数字和字符。文本域的的“属性属性”栏如图栏如图4-1-4所示，各选项所示，各选项的作用如下。的作用如下。图图4-1-4 文本域文本域的的“属性属性”栏栏“字符宽度字符宽度”文本框：文本域的宽度，即文本框：文本域的宽度，即可显示字符的最多个数。可显示字符的最多个数。 “类型类型”栏：该栏有栏：该栏有3个单选项，用来选个单选项，用来选择择“单行单行”、“多行多行”或或“密码密码”文本域。文本域。密码文本域的特点是：当用户输入文字时，密码文本域的特点是：当用户输入文字时，密码文本域内显示的不是这些文字，而是密

10、码文本域内显示的不是这些文字，而是一行一行“*”。选择。选择“多行多行”单选项时，其单选项时，其“属性属性”栏会发生变化：栏会发生变化：“初始值初始值”文本文本框变为带滚动条的多行文本框，同时框变为带滚动条的多行文本框，同时“换换行行”下拉列表框变为有效，下拉列表框变为有效，“字符宽度字符宽度”文本框变为文本框变为“行数行数”文本框，用来输入文文本框，用来输入文本框的行数。本框的行数。“初始值初始值”文本框：用来输入文本框的初文本框：用来输入文本框的初始内容。始内容。 “换行换行”下拉列表框：只有在选择了下拉列表框：只有在选择了“多行多行”类型后它才有效。类型后它才有效。“换行换行”下拉下拉列

11、表框内有列表框内有4个选项，它们的含义如下。个选项，它们的含义如下。“默认默认”：采用浏览器的默认值。：采用浏览器的默认值。 “关关”：当输入的文字超过文本框的宽：当输入的文字超过文本框的宽度时不换行，但是会出现滚动条。度时不换行，但是会出现滚动条。 “虚拟虚拟”：当输入文字超过文本框宽度：当输入文字超过文本框宽度时会自动换行，向服务器传输数据时无回时会自动换行，向服务器传输数据时无回车符。车符。 “实体实体”：当输入的文字超过文本框的：当输入的文字超过文本框的宽度时，会自动加入回车符并换行。宽度时，会自动加入回车符并换行。（2）复选框属性的设置：复选框）复选框属性的设置：复选框 有选中和未选

12、中两种状态，多个复选有选中和未选中两种状态，多个复选框允许多选。它的框允许多选。它的“属性属性”栏如图栏如图4-1-5所示，各选项的作用如下。所示，各选项的作用如下。图图4-1-5 复选框的复选框的“属性属性”栏栏 “选定值选定值”文本框：用来输入复选框选中文本框：用来输入复选框选中时的数值，通常为时的数值，通常为1或或0。 “初始状态初始状态”栏：它有两个单选项，用栏：它有两个单选项，用来设置复选框的初始状态。来设置复选框的初始状态。（3）单选按钮属性的设置：单选按）单选按钮属性的设置：单选按钮钮 也叫做单选项，一组单选按钮也叫做单选项，一组单选按钮中同一时间只允许选中一个，它的中同一时间只

13、允许选中一个，它的“属性属性”栏如图栏如图4-1-6所示。该所示。该“属性属性”栏中的选项与复选框栏中的选项与复选框“属性属性”栏中相栏中相应选项的作用一样。应选项的作用一样。图图4-1-6 单选按钮的单选按钮的“属性属性”栏栏（4）单选按钮组属性的设置：单选）单选按钮组属性的设置：单选按钮组按钮组 也叫做单选项组。单击也叫做单选项组。单击“插入插入”（表单）栏中的（表单）栏中的“单选按钮单选按钮组组”按钮按钮 ，可弹出，可弹出“单选按钮组单选按钮组”对话框，如图对话框，如图4-1-7所示。所示。图图4-1-7 “单选按钮组单选按钮组”对话框对话框 利用该对话框可以设置单选按钮利用该对话框可以

14、设置单选按钮组中单选按钮的个数、名称和初始值。组中单选按钮的个数、名称和初始值。如果要增加选项，可单击如果要增加选项，可单击 按钮；按钮；如果要删除选项，可选中要删除的选如果要删除选项，可选中要删除的选项，再单击项，再单击 按钮。如果要调整选按钮。如果要调整选项的显示次序，可选中要移动的选项，项的显示次序，可选中要移动的选项，再单击再单击 或或 按钮。单选按钮组按钮。单选按钮组的的“属性属性”栏如图栏如图4-1-6所示。所示。（5）按钮属性的设置：按钮）按钮属性的设置：按钮 用来用来制作制作“提交提交”和和“重置重置”按钮，还可按钮，还可以调用函数，它的以调用函数，它的“属性属性”栏如图栏如图

15、4-1-8所示，各选项的作用如下。所示，各选项的作用如下。 “标签标签”文本框：用来输入按钮上的文字。文本框：用来输入按钮上的文字。 “动作动作”栏：它有栏：它有3个单选项，用来选个单选项，用来选择单击该选项后引起的动作类型。择单击该选项后引起的动作类型。 “提交表单提交表单”：选中它后，可以向服务：选中它后，可以向服务器提交整个表单。器提交整个表单。 “重设表单重设表单”：选中它后，可以取消前面：选中它后，可以取消前面的输入，复位表单。的输入，复位表单。 “无无”：选中它后，表示是一般按钮，：选中它后，表示是一般按钮，可用来调用脚本程序。可用来调用脚本程序。图图4-1-8 按钮的按钮的“属性

16、属性”栏栏 （6）列表）列表/菜单属性的设置：列表菜单属性的设置：列表/菜菜单单 的作用是将一些选项放在一个的作用是将一些选项放在一个带滚动条的列表框内，它的带滚动条的列表框内，它的“属性属性”栏如图栏如图4-1-9所示，各选项的作用如下。所示，各选项的作用如下。图图4-1-9 列表列表/菜单的菜单的“属性属性”栏栏 “类型类型”栏：它有栏：它有“菜单菜单”和和“列表列表”两两个单选项。个单选项。“菜单菜单”就是下拉列表框；选就是下拉列表框；选择择“列表列表”选项后，其右边的各选项会变选项后，其右边的各选项会变为可选项，此时的列表框右边会产生滚动为可选项，此时的列表框右边会产生滚动条。条。 “

17、高度高度”文本框：用来输入列表的高度文本框：用来输入列表的高度值，即可以显示的行数。值，即可以显示的行数。 “选定范围选定范围”复选框：选中它后，表示复选框：选中它后，表示列表中的各选项可以同时选择多项。列表中的各选项可以同时选择多项。 “初始化时选定初始化时选定”列表框：用来设置第列表框：用来设置第一次弹出该菜单时，菜单中默认的选中项。一次弹出该菜单时，菜单中默认的选中项。 “列表值列表值”按钮：单击该按钮，可弹出一按钮：单击该按钮，可弹出一个个“列表值列表值”对话框，与图对话框，与图4-1-7相似，使相似，使用方法基本相同。利用该对话框可以输入用方法基本相同。利用该对话框可以输入菜单或列表

18、内显示的选项内容（在菜单或列表内显示的选项内容（在“标签标签”栏内），以及输入此选项提交后的返回值栏内），以及输入此选项提交后的返回值（在（在“值值”栏内）。栏内）。（7）跳转菜单属性的设置：跳转菜）跳转菜单属性的设置：跳转菜单单 采用下拉列表框的方式来实现采用下拉列表框的方式来实现链接跳转，其外观与列表链接跳转，其外观与列表/菜单菜单 一一样，是菜单的另外一种形式。用户单样，是菜单的另外一种形式。用户单击该菜单的某一个选项时，当前页面击该菜单的某一个选项时，当前页面或框架会跳转到其他的页面。创建跳或框架会跳转到其他的页面。创建跳转菜单的操作方法如下。转菜单的操作方法如下。 单击单击“跳转菜单

19、跳转菜单”按钮按钮 ，屏幕会弹，屏幕会弹出一个出一个“插入跳转菜单插入跳转菜单”对话框，如图对话框，如图4-1-10所示。在所示。在“文本文本”文本框内输入菜单文本框内输入菜单命令的说明文字，在命令的说明文字，在“菜单项菜单项”列表框内列表框内会随之显示出来。其中各选项的作用如下。会随之显示出来。其中各选项的作用如下。、 、 和和 按钮的作用与图按钮的作用与图4-1-7所示按钮的作用一样。所示按钮的作用一样。在在“选择时，转到选择时，转到URL”文本框内输入要文本框内输入要跳转的文件路径与文件名字。也可以单击跳转的文件路径与文件名字。也可以单击“浏览浏览”按钮，弹出按钮，弹出“选择文件选择文件

20、”对话框，对话框，选择链接的文件。选择链接的文件。在在“打开打开URL于于”下拉列表框内选择在下拉列表框内选择在何处打开文件。何处打开文件。在在“菜单名称菜单名称”文本框内输入跳转菜单文本框内输入跳转菜单的名称。的名称。“选项选项”栏有两个复选框。选中栏有两个复选框。选中“菜单之菜单之后插入前往按钮后插入前往按钮”复选框后，在菜单的右复选框后，在菜单的右边会增加一个边会增加一个“前往前往”按钮。选中按钮。选中“更改更改URL后选择第一个项目后选择第一个项目”复选框后，可设复选框后，可设置跳转后重新定义菜单第一个选项为默认置跳转后重新定义菜单第一个选项为默认选项。选项。 单击单击“确定确定”按钮

21、，可退出该对话框，按钮，可退出该对话框，页面会显示一个跳转菜单。按照图页面会显示一个跳转菜单。按照图4-1-10所示进行设置后，浏览器中显示的跳转菜所示进行设置后，浏览器中显示的跳转菜单如图单如图4-1-11所示。所示。 图图4-1-10 “插入跳转菜单插入跳转菜单”对话框对话框 图图4-1-11 在页面内的跳转菜单在页面内的跳转菜单 选中创建的跳转菜单后，其选中创建的跳转菜单后，其“属性属性”栏与图栏与图4-1-9基本一样。基本一样。4.2.1 学习目标学习目标 “硬盘的性能指标硬盘的性能指标”网页的显示效果网页的显示效果如图如图4-2-1所示。在该网页中，使用样式表所示。在该网页中，使用样

22、式表对其中的文字进行样式设置。对其中的文字进行样式设置。图图4-2-1 “硬盘的性能指标硬盘的性能指标”网页的显示效果网页的显示效果 在以前各章节中，对页面对象的各种在以前各章节中，对页面对象的各种属性都是一个一个独立设置的，例如，选属性都是一个一个独立设置的，例如，选中本章案例中的标题文字，将它选中并复中本章案例中的标题文字，将它选中并复制到剪贴板中，再粘贴到记事本中，可得制到剪贴板中，再粘贴到记事本中，可得到它的到它的HTML标识语句：标识语句：电脑配置调查表电脑配置调查表 可以看出，对于文字可以看出，对于文字“电脑配置调查电脑配置调查表表”的字体、大小、颜色等属性在该的字体、大小、颜色等

23、属性在该HTML语句中进行了定义。如果网页中有语句中进行了定义。如果网页中有许多处的文字都采用同样的属性设置，那许多处的文字都采用同样的属性设置，那么每处文字也都需要进行相同的属性设置，么每处文字也都需要进行相同的属性设置，这无疑会给网页制作带来许多重复性的工这无疑会给网页制作带来许多重复性的工作，同时也使网页的作，同时也使网页的HTML文件庞大，造文件庞大，造成网页传输和下载速度变慢。成网页传输和下载速度变慢。 为了解决该问题，可以对页面中经常为了解决该问题，可以对页面中经常出现的相同或相近属性的对象进行整体属出现的相同或相近属性的对象进行整体属性的设置，即建立样式表。性的设置，即建立样式表

24、。1996年发明的年发明的层叠式样式表（层叠式样式表（Cascading Style Sheet，CSS）可以对页面布局、背景、字体大小、）可以对页面布局、背景、字体大小、颜色、表格等属性进行统一的设置，然后颜色、表格等属性进行统一的设置，然后再用于页面各个相应的对象。再用于页面各个相应的对象。4.2.2 操作过程操作过程1创建创建CSS样式表样式表（1）CSS样式表编辑器样式表编辑器 CSS样式表可以对页面布局、背景、样式表可以对页面布局、背景、字体大小、颜色和表格等属性进行统一的字体大小、颜色和表格等属性进行统一的设置，然后再应用于页面各个相应的对象。设置，然后再应用于页面各个相应的对象。

25、单击单击“窗口窗口”“CSS样式样式”菜单命令，菜单命令，弹出弹出“CSS样式样式”面板（也叫做面板（也叫做CSS样式样式表编辑器），如图表编辑器），如图4-2-2所示。其中各选项所示。其中各选项的作用如下。的作用如下。显示窗口：显示所有样式表的名称，显示窗口：显示所有样式表的名称，“（未定义样式）（未定义样式）”表示没有样式。表示没有样式。 “附加样式表附加样式表”按钮按钮 ：单击它，可：单击它，可以弹出一个以弹出一个“链接外部样式表链接外部样式表”对话框，对话框，如图如图4-2-5所示。再单击所示。再单击“浏览浏览”按钮，可按钮，可弹出弹出“选择样式表文件选择样式表文件”对话框，用来导对话

26、框，用来导入外部的样式表（文件的扩展名为入外部的样式表（文件的扩展名为.CSS）。）。图图4-2-5 “链接外部样式表链接外部样式表”对话框对话框 “新建新建CSS规则规则”按钮（也叫做按钮（也叫做“新建新建CSS样式样式”按钮）按钮） ：单击它，可以弹出：单击它，可以弹出一个一个“新建新建CSS规则规则”对话框，如图对话框，如图4-2-3所示。利用该对话框可以建立新的样式。所示。利用该对话框可以建立新的样式。 “编辑样式编辑样式”按钮按钮 ：在：在“CSS样式样式”面面板中选中一种样式后，它才有效。单击它，板中选中一种样式后，它才有效。单击它，可弹出一个能进行样式表编辑的对话框可弹出一个能进

27、行样式表编辑的对话框（例如（例如“.style1的的CSS规则定义规则定义”对话框，对话框，如图如图4-2-4所示），利用该对话框可以所示），利用该对话框可以对对.style1样式进行编辑。样式进行编辑。“删除删除CSS规则规则”按钮（也叫做按钮（也叫做“删除删除CSS样式样式”按钮）按钮） ：单击它，可以删除：单击它，可以删除选中的样式。选中的样式。（2）创建）创建CSS样式表样式表打开如图打开如图4-2-3所示的所示的“新建新建CSS规则规则”对对话框，选中话框，选中“选择器类型选择器类型”栏内的第栏内的第1个单个单选项，在选项，在“名称名称”下拉列表框内输入一个下拉列表框内输入一个样式表

28、的名字，名字必须以样式表的名字，名字必须以“.”开始，例开始，例如，如，“.style1”。单击该对话框中的。单击该对话框中的“确定确定”按钮，即可退出该对话框，弹出按钮，即可退出该对话框，弹出“CSS规规则定义则定义”对话框，如图对话框，如图4-2-4所示。所示。利用利用“CSS规则定义规则定义”对话框进行样式表对话框进行样式表内各个对象属性的定义。内各个对象属性的定义。定义完成后，单击定义完成后，单击“确定确定”按钮，即可按钮，即可完成样式表的定义。此时，在完成样式表的定义。此时，在“CSS样式样式”面板内会显示出新创建的样式表的名称。面板内会显示出新创建的样式表的名称。（1）定义文字属性

29、）定义文字属性 单击图单击图4-2-4所示的所示的“CSS规则定义规则定义”对话框左边对话框左边“分类分类”栏内的栏内的“类型类型”选项，选项，此时的对话框如图此时的对话框如图4-2-4所示。利用该对话所示。利用该对话框可以设置框可以设置CSS样式的字体、大小、样式样式的字体、大小、样式和颜色等。单击和颜色等。单击“应用应用”按钮，可将设置按钮，可将设置的样式应用到页面中。的样式应用到页面中。（2）定义背景属性）定义背景属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“背景背景”选项，此时的选项，此时的“CSS规则规则定义定义”对话框内的对话框内的“背景背景

30、”栏如图栏如图4-2-6所所示。利用示。利用“背景背景”栏的栏的“背景颜色背景颜色”和和“背景图像背景图像”按钮与文本框可以定义背景按钮与文本框可以定义背景颜色和背景图像。其他选项的作用如下。颜色和背景图像。其他选项的作用如下。图图4-2-6 “背景背景”栏栏 “重复重复”下拉列表框：用来设置背景图像下拉列表框：用来设置背景图像的重复方式。它有的重复方式。它有4个选项：个选项：“不重复不重复”（只在左上角显示一幅图像）、（只在左上角显示一幅图像）、“重复重复”（沿水平与垂直方向重复）、（沿水平与垂直方向重复）、“横向重复横向重复”（沿水平方向重复）和（沿水平方向重复）和“纵向重复纵向重复”（沿

31、（沿垂直方向重复）。垂直方向重复）。 “附件附件”下拉列表框：设置图像是否随下拉列表框：设置图像是否随内容的滚动而滚动。内容的滚动而滚动。 “水平位置水平位置”和和“垂直位置垂直位置”下拉列表下拉列表框：用来设置图像与选定对象的水平和垂框：用来设置图像与选定对象的水平和垂直相对位置。如果选择了直相对位置。如果选择了“值值”选项，则选项，则其右边的下拉列表框变为有效，可用来选其右边的下拉列表框变为有效，可用来选择单位。择单位。（3）定义区块属性）定义区块属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“区块区块”选项，此时对话框内的选项，此时对话框内的“区块区

32、块”栏如图栏如图4-2-7所示。其中各选项的所示。其中各选项的作用如下。作用如下。 图图4-2-7 “区块区块”栏栏“单词间距单词间距”下拉列表框：用来设定单词下拉列表框：用来设定单词间距。选择间距。选择“值值”选项后，可以输入数值，选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单再在其右边的下拉列表框内选择数值的单位。此处可以用负值。位。此处可以用负值。 “字母间距字母间距”下拉列表框：用来设定字下拉列表框：用来设定字母间距。选择母间距。选择“（值）（值）”选项后，可以输选项后，可以输入数值，再在其右边的下拉列表框内选择入数值，再在其右边的下拉列表框内选择数值的单位。此处可以用负值

33、。数值的单位。此处可以用负值。 “垂直对齐垂直对齐”下拉列表框：用它可以设下拉列表框：用它可以设置选中的对象相对于上级对象或相对所在置选中的对象相对于上级对象或相对所在行在垂直方向的对齐方式。行在垂直方向的对齐方式。“文本对齐文本对齐”下拉列表框：用来设置首行下拉列表框：用来设置首行文字在对象中的对齐方式。文字在对象中的对齐方式。 “文字缩进文字缩进”文本框：用来输入文字的文本框：用来输入文字的缩进量。缩进量。 “空格空格”下拉列表框：用来设置文本空下拉列表框：用来设置文本空白的使用方式。它有白的使用方式。它有“正常正常”（将所有的（将所有的空白均填满）、空白均填满）、“保留保留”（由用户输入

34、时（由用户输入时控制）和控制）和“不换行不换行”（在加入（在加入标记时标记时才换行）选项。才换行）选项。（4）定义方框属性）定义方框属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“方框方框”选项，此时的对话框内右选项，此时的对话框内右边的边的“方框方框”栏如图栏如图4-2-8所示。其中各选所示。其中各选项的作用如下。项的作用如下。图图4-2-8 “方框方框”栏栏“宽宽”和和“高高”下拉列表框：用来设置对下拉列表框：用来设置对象的宽度和高度。它们都有象的宽度和高度。它们都有“自动自动”（由（由对象自身大小决定）和对象自身大小决定）和“值值”（由输入的（由输入

35、的数值决定）数值决定）2个选项。在其右边的下拉列表个选项。在其右边的下拉列表框内选择数字的单位。框内选择数字的单位。 “浮动浮动”下拉列表框：用来设置是否允下拉列表框：用来设置是否允许文字环绕在选中对象的周围。许文字环绕在选中对象的周围。 “清除清除”下拉列表框：用来设定其他对象下拉列表框：用来设定其他对象是否可以在选定对象的左右。是否可以在选定对象的左右。 “填充填充”栏：用来设置边框与其中的内栏：用来设置边框与其中的内容之间填充的空白间距，下拉列表框内应容之间填充的空白间距，下拉列表框内应输入数值，在其右边的下拉列表框内选择输入数值，在其右边的下拉列表框内选择数值的单位。数值的单位。 “边

36、界边界”栏：用来设置边缘的空白宽度，栏：用来设置边缘的空白宽度，下拉列表框内可输入数值或选择下拉列表框内可输入数值或选择“自动自动”。（5）定义边框属性）定义边框属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“边框边框”选项，此时对话框内右边选项，此时对话框内右边的的“边框边框”栏如图栏如图4-2-9所示。它用来对围所示。它用来对围绕所有对象的边框属性进行设置。绕所有对象的边框属性进行设置。图图4-2-9 “边框边框”栏栏设置边框的宽度与颜色：该对话框内有设置边框的宽度与颜色：该对话框内有4行选项，分别为上、右、下和左边框。每行选项，分别为上、右、下和左边

37、框。每行有行有3个下拉列表框和个下拉列表框和1个按钮与文本框。个按钮与文本框。第第1列的下拉列表框用来设置边框的样式，列的下拉列表框用来设置边框的样式，第第2列的下拉列表框用来设置边框的宽度，列的下拉列表框用来设置边框的宽度，第第3列的下拉列表框用来选择数值的单位，列的下拉列表框用来选择数值的单位，按钮和后面的文本框用来设置边框的颜色。按钮和后面的文本框用来设置边框的颜色。 边框的宽度下拉列表框内的选项有边框的宽度下拉列表框内的选项有4个，个，选择选择“值值”时，可以输入边框粗细的数值，时，可以输入边框粗细的数值，此时其右边的下拉列表框变为有效，可以此时其右边的下拉列表框变为有效，可以选择单位

38、。选择单位。 “样式样式”下拉列表框：在此下拉列表框下拉列表框：在此下拉列表框中有中有9个选项。其中，个选项。其中，“无无”选项是取消边选项是取消边框，其他选项各对应着一种不同的边框。框，其他选项各对应着一种不同的边框。边框的最终显示效果还与浏览器有关。边框的最终显示效果还与浏览器有关。（6）定义列表属性）定义列表属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“列表列表”选项，此时该对话框右边选项，此时该对话框右边的的“列表列表”栏如图栏如图4-2-10所示。其中各选所示。其中各选项的作用如下。项的作用如下。图图4-2-10 “列表列表”栏栏“类型类型”下

39、拉列表框：用来设置列表的标下拉列表框：用来设置列表的标记。选择标记是序号（有序列表）或符号记。选择标记是序号（有序列表）或符号（无序列表）。该下拉列表框内有（无序列表）。该下拉列表框内有9个选项，个选项，包括包括“圆点圆点”、“圆圈圆圈”等。等。 “项目符号图像项目符号图像”下拉列表框和按钮：下拉列表框和按钮：该下拉列表框内有该下拉列表框内有“无无”和和“（URL）”两个选项。选择两个选项。选择“无无”选项后，不加图像选项后，不加图像标记；选择标记；选择“（URL）”选项后，单击选项后，单击“浏览浏览”按钮，打开按钮，打开“选择图像源文件选择图像源文件”对话框，利用它可以选择图像，在列表行对话

40、框，利用它可以选择图像，在列表行加入小的图标图案作为列表标记。加入小的图标图案作为列表标记。 “位置位置”下拉列表框：用来设置列表标下拉列表框：用来设置列表标记的缩进方式。记的缩进方式。（7）定义定位属性）定义定位属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏中的栏中的“定位定位”选项，此时该对话框内右选项，此时该对话框内右边的边的“定位定位”栏如图栏如图4-2-11所示。其中各所示。其中各选项的作用如下。选项的作用如下。图图4-2-11 “定位定位”栏栏“类型类型”下拉列表框：用来设置对象的位下拉列表框：用来设置对象的位置。各选项的作用如下。置。各选项的作用如下。

41、 “溢出溢出”下拉列表框：用来设置当文字下拉列表框：用来设置当文字超出其容器时的处理方式。各选项的作用超出其容器时的处理方式。各选项的作用如下。如下。（8）定义扩展属性）定义扩展属性 单击图单击图4-2-4所示对话框内左边所示对话框内左边“分类分类”栏内的栏内的“扩展扩展”选项，此时该对话框内右选项，此时该对话框内右边的边的“扩展扩展”栏如图栏如图4-2-12所示。该对话所示。该对话框中各选项的作用如下。框中各选项的作用如下。图图4-2-12 “扩展扩展”栏栏“分页分页”栏：用来在选定的对象的前面或栏：用来在选定的对象的前面或后面强制加入分页符。一般浏览器均不支后面强制加入分页符。一般浏览器均

42、不支持此项功能。该栏有持此项功能。该栏有“之前之前”和和“之后之后”两个下拉列表框，其内的选项有两个下拉列表框，其内的选项有“自动自动”、“总是总是”、“左对齐左对齐”和和“右对齐右对齐”，它，它们用来确定分页符的位置。们用来确定分页符的位置。 “视觉效果视觉效果”栏：利用该栏内的下拉列表栏：利用该栏内的下拉列表框的选项，可使页面的显示效果更好。框的选项，可使页面的显示效果更好。 “光标光标”（即鼠标指针）下拉列表框：（即鼠标指针）下拉列表框：可以利用该下拉列表框中的选项设置各种可以利用该下拉列表框中的选项设置各种鼠标的形状。对于低版本的浏览器，不支鼠标的形状。对于低版本的浏览器，不支持此项功

43、能。持此项功能。 “过滤器过滤器”下拉列表框：用来对图像进下拉列表框：用来对图像进行滤镜处理，获得各种特殊的效果。行滤镜处理，获得各种特殊的效果。 定义了定义了CSS样式后，可以将这些样式后，可以将这些CSS样式应用于网页中的文本、图像、样式应用于网页中的文本、图像、Flash等等对象。具体的方法如下。对象。具体的方法如下。（1）利用）利用“CSS样式样式”面板面板 利用利用“CSS样式样式”面板将面板将CSS样式应样式应用于网页中对象的方法如下。用于网页中对象的方法如下。选中要应用选中要应用CSS样式的对象，可以是文本、样式的对象，可以是文本、图像和图像和Flash等对象。等对象。鼠标右键单

44、击鼠标右键单击“CSS样式样式”面板中相应的面板中相应的样式名称，弹出它的快捷菜单，再单击该样式名称，弹出它的快捷菜单，再单击该菜单中的菜单中的“套用套用”菜单命令。菜单命令。（2）利用）利用“属性属性”栏栏 利用利用“属性属性”栏将栏将CSS样式应用于网样式应用于网页中对象的方法如下。页中对象的方法如下。 选中要应用选中要应用CSS样式的文本对象，在样式的文本对象，在其其“属性属性”栏的栏的“样式样式”下拉列表框中选下拉列表框中选择需要的择需要的CSS样式名称，即可将选中的样式名称，即可将选中的CSS样式应用于选中的文本对象。样式应用于选中的文本对象。 选中要应用选中要应用CSS样式的图像或

45、样式的图像或Flash等等对象，在其对象，在其“属性属性”栏的栏的“类类”下拉列表下拉列表框中选择需要的框中选择需要的CSS样式名称，即可将选样式名称，即可将选中的中的CSS样式应用于选中的图像或样式应用于选中的图像或Flash等等对象。对象。4.3.1 学习目标学习目标 “Word操作演示操作演示”网页的显示效果如网页的显示效果如图图4-3-1所示。所示。Flash是原是原Macromedia公司公司开发的另一个著名产品，它是一个优秀的开发的另一个著名产品，它是一个优秀的矢量绘图和动画制作软件。矢量绘图和动画制作软件。图图4-3-1 “Word操作演示操作演示”网页的显示效果网页的显示效果

46、Flash可以制作出一种扩展名为可以制作出一种扩展名为.swf的的动画文件，这种文件可以插入到动画文件，这种文件可以插入到HTML中，中，也可以单独成为网页。它不但可以制作出也可以单独成为网页。它不但可以制作出一般的动画，还可以制作出带有背景声音，一般的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。具有较强的交互性能的动画。 Flash制作的这种动画可以在所有安装制作的这种动画可以在所有安装了了Shockwave Flash插件的浏览器中播放，插件的浏览器中播放，这也是它之所以快速广泛流行的一个重要这也是它之所以快速广泛流行的一个重要原因。原因。 另外，另外，1998年年Macro

47、media公司公布了公司公布了Flash动画格式文件的全部代码，方便了众动画格式文件的全部代码，方便了众多软件开发公司和其设计人员用它开发相多软件开发公司和其设计人员用它开发相关产品，从而加快了它的推广与应用。各关产品，从而加快了它的推广与应用。各个公司和个人推出的可以制作个公司和个人推出的可以制作.swf文件的文件的软件越来越多。软件越来越多。4.3.2 操作过程操作过程1Flash动画的动画的“属性属性”栏栏 Flash动画的动画的“属性属性”栏如图栏如图4-3-4所示，所示，前面没有介绍的各选项的作用如下。前面没有介绍的各选项的作用如下。图图4-3-4 Flash动画的动画的“属性属性”

48、栏栏“源文件源文件”文本框与文件夹按钮文本框与文件夹按钮 ：用：用来选择来选择FLA格式的格式的Flash影片源文件。影片源文件。 “编辑编辑”按钮：单击它，可以弹出按钮：单击它，可以弹出Flash 8，并对，并对Flash文件进行编辑。文件进行编辑。 “重设大小重设大小”按钮：单击它，可使按钮：单击它，可使Flash影片恢复原大小。影片恢复原大小。“循环循环”复选框：选中它后，可循环播放。复选框：选中它后，可循环播放。 “自动播放自动播放”复选框：选中它后，可自复选框：选中它后，可自动播放。动播放。 “品质品质”下拉列表框：用来设置图像的下拉列表框：用来设置图像的质量。质量。 “比例比例”下

49、拉列表框：用来选择缩放参下拉列表框：用来选择缩放参数。数。“插入插入Flash按钮按钮”对话框如图对话框如图4-3-3所示，所示，其中各选项的含义如下。其中各选项的含义如下。 “范例范例”显示框：用来显示所选的显示框：用来显示所选的“Flash按钮按钮”的效果，这里的显示效果和的效果，这里的显示效果和在浏览器中的显示效果相同，并且可以用在浏览器中的显示效果相同，并且可以用鼠标测试鼠标测试“单击单击”时的显示效果。时的显示效果。 “样式样式”列表框：该列表框中列出所有可列表框：该列表框中列出所有可以使用的以使用的Flash按钮的样式，可以从里面选按钮的样式，可以从里面选择相应的样式进行编辑。择相

50、应的样式进行编辑。 “字体字体”下拉列表框：用来选择文本的下拉列表框：用来选择文本的字体。字体。 “大小大小”文本框：设置显示文本的大小。文本框：设置显示文本的大小。“链接链接”文本框：在文本框中输入需要链文本框：在文本框中输入需要链接的文件目录和文件名，也可以单击接的文件目录和文件名，也可以单击“浏浏览览”按钮，弹出按钮，弹出“选择文件选择文件”对话框，在对话框，在该对话框中选择需要链接的文件，设置链该对话框中选择需要链接的文件，设置链接。接。 “目标目标”下拉列表框：用来设置链接的下拉列表框：用来设置链接的网页的打开方式，其中各选项作用如下：网页的打开方式，其中各选项作用如下： “背景色背

51、景色”按钮：用来设置按钮：用来设置Flash按钮的背按钮的背景颜色。景颜色。 “另存为另存为”文本框：用来输入要保存到文本框：用来输入要保存到的目录及文件名，或单击的目录及文件名，或单击“浏览浏览”按钮，按钮，弹出弹出“选择文件选择文件”对话框，利用它选择要对话框，利用它选择要保存的路径和文件名，默认目录为网页文保存的路径和文件名，默认目录为网页文档所在的目录。档所在的目录。（1）单击）单击“插入插入”（常用）栏中的（常用）栏中的“媒体媒体”快捷菜单中的快捷菜单中的“Flash文本文本”按钮按钮 ，弹出，弹出“插入插入Flash文本文本”对对话框，如图话框，如图4-3-2所示。所示。（2）在）

52、在“插入插入Flash文本文本”对话框中对话框中进行文字各种属性的设置后，在进行文字各种属性的设置后，在“文文本本”文本框中输入文字；在文本框中输入文字；在“目标目标”文本框中输入要链接的文件；在文本框中输入要链接的文件；在“另另存为存为”文本框中输入存储的文件名称。文本框中输入存储的文件名称。然后单击然后单击“确定确定”按钮，即可在网页按钮，即可在网页中插入中插入Flash文本。文本。（1）单击）单击“插入插入”（常用）栏中的（常用）栏中的“媒体媒体”快捷菜单中的快捷菜单中的“Flash Video”按钮按钮 ，弹出，弹出“插入插入Flash视频视频”对话框，如图对话框，如图4-3-5左图所

53、示（还没有左图所示（还没有设置）。设置）。图图4-3-5 “插入插入Flash视频视频”对话框设置对话框设置（2）在）在“视频类型视频类型”下拉列表框内选下拉列表框内选择一种下载视频的类型，选择择一种下载视频的类型，选择“流视流视频频”选项后的选项后的“插入插入Flash视频视频”对话对话框如图框如图4-3-5右图所示。此处选择右图所示。此处选择“累累进式下载进式下载”选项。选项。（3）单击）单击“URL”栏的栏的“浏览浏览”按钮，按钮，弹出弹出“选择文件选择文件”对话框，如图对话框，如图4-3-6所示。利用该对话框选择一个所示。利用该对话框选择一个Flash视视频文件（扩展名为频文件（扩展名

54、为.FLV）。）。图图4-3-6 “选择文件选择文件”对话框对话框（4）在）在“外观外观”下拉列表框内选择下拉列表框内选择一种播放器的样式。在它下边的显示一种播放器的样式。在它下边的显示框内可以看到选中的播放器的外观图框内可以看到选中的播放器的外观图像。像。（5）在）在“宽度宽度”和和“高度高度”文本框文本框内分别输入视频的宽度和高度，单位内分别输入视频的宽度和高度，单位像素。像素。（6）选中）选中“限制宽高比限制宽高比”、“自动自动播放播放”和和“自动重新播放自动重新播放”复选框。复选框。 设置完后，单击设置完后，单击“确定确定”按钮，即可按钮，即可在网页光标处插入一个在网页光标处插入一个F

55、lash视频，如图视频，如图4-3-7所示。所示。图图4-3-7 网页编辑状态下的网页编辑状态下的Flash视频视频 在本节在本节“操作过程操作过程”中已经介绍了一中已经介绍了一种插入种插入Flash动画的方法。另外，采用下述动画的方法。另外，采用下述方法也可以插入方法也可以插入Flash动画。动画。（1）单击）单击“插入插入”（常用）栏中的（常用）栏中的“媒体媒体”快捷菜单中的快捷菜单中的“FlashPaper”按钮按钮 ，弹出，弹出“插入插入FlashPaper”对对话框，如图话框，如图4-3-8所示。所示。图图4-3-8 “插入插入FlashPaper”对话框对话框（2）单击）单击“浏览

56、浏览”按钮，可弹出按钮，可弹出“选择文件选择文件”对话框，如图对话框，如图4-3-6所示。所示。在在“选择文件选择文件”对话框中选择要导入对话框中选择要导入的的SWF文件，单击文件，单击“确定确定”按钮，回按钮，回到到“插入插入FlashPaper”对话框。对话框。（3）在）在“插入插入FlashPaper”对话框内对话框内的的2个文本框中输入高度与宽度数值，个文本框中输入高度与宽度数值，再单击再单击“确定确定”按钮，也可以导入按钮，也可以导入Flash动画文件。动画文件。4.4.1 学习目标学习目标 “电子市场图片秀电子市场图片秀”网页的显示效果网页的显示效果如图如图4-4-1所示。在该网页

57、中，使用了所示。在该网页中，使用了Java Applet特效实现网页中不同图像的动态切特效实现网页中不同图像的动态切换效果。换效果。图图4-4-1 “电子市场图片秀电子市场图片秀”网页的显示效果网页的显示效果 Java是个面向网络的程序设计语言，是个面向网络的程序设计语言，用来让程序员创建应用程序，用它可以编用来让程序员创建应用程序，用它可以编写许多动人的动画，在写许多动人的动画，在Internet上应用。这上应用。这些应用程序可以通过网络下载，而且可在些应用程序可以通过网络下载，而且可在任何计算平台上安全地运行。如果再加上任何计算平台上安全地运行。如果再加上万维网和公司内部网体系，将会拥有一

58、个万维网和公司内部网体系，将会拥有一个标准的网络计算环境。标准的网络计算环境。 Java作为一个分布式的、面向对象的作为一个分布式的、面向对象的程序设计语言，可以让位于任何地方的任程序设计语言，可以让位于任何地方的任何计算机应用网络上的应用程序。何计算机应用网络上的应用程序。4.4.2 操作过程操作过程1插入插入Java Applet Applet是是Java的小型应用程序。的小型应用程序。Java Applet可以嵌入到可以嵌入到HTML程序中，通过主程序中，通过主页发布到页发布到Internet上。可以从网上下载上。可以从网上下载Java Applet程序文件及有关文件，存放在本地程序文件

59、及有关文件，存放在本地站点的一个子目录下。站点的一个子目录下。（1）插入）插入Applet的方法的方法 单击单击“插入插入”（常用）面板中的（常用）面板中的“媒体媒体”快捷菜单中的快捷菜单中的“Applet”按按钮钮 ，即可弹出，即可弹出“选择文件选择文件”对话框。对话框。利用该对话框可以调入扩展名为利用该对话框可以调入扩展名为“.class”的的Java Applet程序文件。程序文件。 使用使用Java Applet程序时应阅读程序时应阅读Java Applet程序作者给出的说明，再按照说明程序作者给出的说明，再按照说明进行操作。进行操作。 插入文件后，网页文档窗口内会显示插入文件后，网页文档窗口内会显示一个一个Java Applet图标。单击选中它后，可图标。单击选中它后，可以用鼠标拖曳插件图标的黑色控制柄，来以用鼠标拖曳插件图标的黑色控制柄，来调整它