第4章表单、样式表与网页中的其他对象.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,点击此处结束放映,第,4,章 表单、样式表与网页中的其他对象,【,案例,11】“,电脑配置调查表”网页,4.1,【,案例,12】“,硬盘的性能指标”网页,4.2,【,案例,13】“Word,操作演示”网页,4.3,【,案例,14】“,电子市场图片秀”网页,4.4,4.1 【,案例,11】“,电脑配置调查表”网页,4.1.1,学习目标,“电脑配置调查表”网页的显示效果如图,4-1-1,所示。在该网页中，以表单的方式列出了电脑主要配件的调查信息，只需在页面中按照提示进行选择或输入后，单击“提交”按钮，即可将网页中的信息提交到服务器的数据库中。,图,4-1-1 “,电脑配置调查表”网页的显示效果,表单是用户利用浏览器对,Web,站点数据库进行查询和添加的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理，这种查询方式叫做交互的或者双向的。这些表单对象包括文本域、下拉列表框、复选框和单选按钮等。,表单对象是让用户输入信息的地方，表单域是放置表单对象的区域，只有表单域内的表单对象，才可以将它的信息传送出去。,4.1.2,操作过程,1,创建表单域和插入表单对象,（,1,）创建与删除表单域,创建表单域：将光标移到要插入表单域的位置，单击“插入”（表单）栏内的“表单”按钮 ，即可在网页编辑窗口内创建一个表单域，如图,4-1-2,所示。,4.1.3,相关知识,图,4-1-2,创建的表单域,单击表单域内部，将光标移到表单域内，按回车键，即可将表单域调大。按,BackSpace,键，可使表单域缩小。表单域在浏览器内是看不到的。,显示表单域：在表单域创建后，若看不到表单域的矩形红线，可以单击选中“查看”“可视化助理”“不可见元素”菜单命令，即可将表单域的矩形红线显示出来。,删除表单域：单击表单域的边线处，选中表单域，按,Delete,键，即可删除表单域。,（,2,）设置表单域的属性,选中表单域，此时表单域“属性”栏如图,4-1-3,所示。,图,4-1-3,表单域“属性”栏,“表单名称”文本框：在该文本框内，输入表单域的名字。表单域的名字可用于,JavaScript,和,VBScript,等脚本语言中，这些脚本语言可以控制表单域的属性。,“动作”文本框和按钮：利用它们可以输入脚本程序或含有脚本程序的,HTML,文件。,“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的方式。,3,个选项是“默认”、“,GET”,（获得，即追加表单值到,URL,，并发送服务器,GET,请求）和“,POST”,（传递，在消息正文中发送表单的值，并发送服务器,POST,请求）。,“类”下拉列表框：其中有“重命名”、“管理样式”和创建的,CSS,样式名称等多个选项，可以用来选择,CSS,样式、给,CSS,样式更名和创建新的,CSS,样式等。,（,3,）插入表单对象的方法,将光标移到要插入表单对象的表单中，再插入表单对象。插入表单对象的方法与插入表单的方法一样。,将光标移到要插入表单对象的位置，然后单击“插入”（表单）栏中的相应按钮，即可在光标处插入一个相应的表单对象。另外，单击“插入”“表单”菜单命令，弹出它的下一级菜单。,根据要插入的表单对象类别，单击菜单内的菜单命令也可插入表单对象。,表单对象的“属性”栏中都有一个名称文本框，用来输入表单对象的名称，该名称可在程序中使用，以指定表单对象。,（,1,）文本域属性的设置：文本域也叫做文本字段，表单中经常使用文本域。它可以是单行，也可以是多行，用于接收文本、数字和字符。文本域的“属性”栏如图,4-1-4,所示，各选项的作用如下。,2,表单对象,图,4-1-4,文本域,的“属性”栏,“字符宽度”文本框：文本域的宽度，即可显示字符的最多个数。,“类型”栏：该栏有,3,个单选项，用来选择“单行”、“多行”或“密码”文本域。密码文本域的特点是：当用户输入文字时，密码文本域内显示的不是这些文字，而是一行“*”。选择“多行”单选项时，其“属性”栏会发生变化：“初始值”文本框变为带滚动条的多行文本框，同时“换行”下拉列表框变为有效，“字符宽度”文本框变为“行数”文本框，用来输入文本框的行数。,“初始值”文本框：用来输入文本框的初始内容。,“换行”下拉列表框：只有在选择了“多行”类型后它才有效。“换行”下拉列表框内有,4,个选项，它们的含义如下。,“默认”：采用浏览器的默认值。,“关”：当输入的文字超过文本框的宽度时不换行，但是会出现滚动条。,“虚拟”：当输入文字超过文本框宽度时会自动换行，向服务器传输数据时无回车符。,“实体”：当输入的文字超过文本框的宽度时，会自动加入回车符并换行。,（,2,）复选框属性的设置：复选框 有选中和未选中两种状态，多个复选框允许多选。它的“属性”栏如图,4-1-5,所示，各选项的作用如下。,图,4-1-5,复选框的“属性”栏,“选定值”文本框：用来输入复选框选中时的数值，通常为,1,或,0,。,“初始状态”栏：它有两个单选项，用来设置复选框的初始状态。,（,3,）单选按钮属性的设置：单选按钮 也叫做单选项，一组单选按钮中同一时间只允许选中一个，它的“属性”栏如图,4-1-6,所示。该“属性”栏中的选项与复选框“属性”栏中相应选项的作用一样。,图,4-1-6,单选按钮的“属性”栏,（,4,）单选按钮组属性的设置：单选按钮组 也叫做单选项组。单击“插入”（表单）栏中的“单选按钮组”按钮 ，可弹出“单选按钮组”对话框，如图,4-1-7,所示。,图,4-1-7 “,单选按钮组”对话框,利用该对话框可以设置单选按钮组中单选按钮的个数、名称和初始值。如果要增加选项，可单击 按钮；如果要删除选项，可选中要删除的选项，再单击 按钮。如果要调整选项的显示次序，可选中要移动的选项，再单击 或 按钮。单选按钮组的“属性”栏如图,4-1-6,所示。,（,5,）按钮属性的设置：按钮 用来制作“提交”和“重置”按钮，还可以调用函数，它的“属性”栏如图,4-1-8,所示，各选项的作用如下。,“标签”文本框：用来输入按钮上的文字。,“动作”栏：它有,3,个单选项，用来选择单击该选项后引起的动作类型。,“提交表单”：选中它后，可以向服务器提交整个表单。,“重设表单”：选中它后，可以取消前面的输入，复位表单。,“无”：选中它后，表示是一般按钮，可用来调用脚本程序。,图,4-1-8,按钮的“属性”栏,（,6,）列表,/,菜单属性的设置：列表,/,菜单 的作用是将一些选项放在一个带滚动条的列表框内，它的“属性”栏如图,4-1-9,所示，各选项的作用如下。,图,4-1-9,列表,/,菜单的“属性”栏,“类型”栏：它有“菜单”和“列表”两个单选项。“菜单”就是下拉列表框；选择“列表”选项后，其右边的各选项会变为可选项，此时的列表框右边会产生滚动条。,“高度”文本框：用来输入列表的高度值，即可以显示的行数。,“选定范围”复选框：选中它后，表示列表中的各选项可以同时选择多项。,“初始化时选定”列表框：用来设置第一次弹出该菜单时，菜单中默认的选中项。,“列表值”按钮：单击该按钮，可弹出一个“列表值”对话框，与图,4-1-7,相似，使用方法基本相同。利用该对话框可以输入菜单或列表内显示的选项内容（在“标签”栏内），以及输入此选项提交后的返回值（在“值”栏内）。,（,7,）跳转菜单属性的设置：跳转菜单 采用下拉列表框的方式来实现链接跳转，其外观与列表,/,菜单 一样，是菜单的另外一种形式。用户单击该菜单的某一个选项时，当前页面或框架会跳转到其他的页面。创建跳转菜单的操作方法如下。,单击“跳转菜单”按钮 ，屏幕会弹出一个“插入跳转菜单”对话框，如图,4-1-10,所示。在“文本”文本框内输入菜单命令的说明文字，在“菜单项”列表框内会随之显示出来。其中各选项的作用如下。,、和 按钮的作用与图,4-1-7,所示按钮的作用一样。,在“选择时，转到,URL”,文本框内输入要跳转的文件路径与文件名字。也可以单击“浏览”按钮，弹出“选择文件”对话框，选择链接的文件。,在“打开,URL,于”下拉列表框内选择在何处打开文件。,在“菜单名称”文本框内输入跳转菜单的名称。,“选项”栏有两个复选框。选中“菜单之后插入前往按钮”复选框后，在菜单的右边会增加一个“前往”按钮。选中“更改,URL,后选择第一个项目”复选框后，可设置跳转后重新定义菜单第一个选项为默认选项。,单击“确定”按钮，可退出该对话框，页面会显示一个跳转菜单。按照图,4-1-10,所示进行设置后，浏览器中显示的跳转菜单如图,4-1-11,所示。,图,4-1-10 “,插入跳转菜单”对话框,图,4-1-11,在页面内的跳转菜单,选中创建的跳转菜单后，其“属性”栏与图,4-1-9,基本一样。,4.2.1,学习目标,“硬盘的性能指标”网页的显示效果如图,4-2-1,所示。在该网页中，使用样式表对其中的文字进行样式设置。,4.2 【,案例,12】“,硬盘的性能指标”网页,图,4-2-1 “,硬盘的性能指标”网页的显示效果,在以前各章节中，对页面对象的各种属性都是一个一个独立设置的，例如，选中本章案例中的标题文字，将它选中并复制到剪贴板中，再粘贴到记事本中，可得到它的,HTML,标识语句：,电脑配置调查表,可以看出，对于文字“电脑配置调查表”的字体、大小、颜色等属性在该,HTML,语句中进行了定义。如果网页中有许多处的文字都采用同样的属性设置，那么每处文字也都需要进行相同的属性设置，这无疑会给网页制作带来许多重复性的工作，同时也使网页的,HTML,文件庞大，造成网页传输和下载速度变慢。,为了解决该问题，可以对页面中经常出现的相同或相近属性的对象进行整体属性的设置，即建立样式表。,1996,年发明的层叠式样式表（,Cascading Style Sheet,，,CSS,）可以对页面布局、背景、字体大小、颜色、表格等属性进行统一的设置，然后再用于页面各个相应的对象。,4.2.2,操作过程,1,创建,CSS,样式表,（,1,）,CSS,样式表编辑器,CSS,样式表可以对页面布局、背景、字体大小、颜色和表格等属性进行统一的设置，然后再应用于页面各个相应的对象。单击“窗口”“,CSS,样式”菜单命令，弹出“,CSS,样式”面板（也叫做,CSS,样式表编辑器），如图,4-2-2,所示。其中各选项的作用如下。,4.2.3,相关知识,显示窗口：显示所有样式表的名称，“（未定义样式）”表示没有样式。,“附加样式表”按钮 ：单击它，可以弹出一个“链接外部样式表”对话框，如图,4-2-5,所示。再单击“浏览”按钮，可弹出“选择样式表文件”对话框，用来导入外部的样式表（文件的扩展名为,.CSS,）。,图,4-2-5 “,链接外部样式表”对话框,“新建,CSS,规则”按钮（也叫做“新建,CSS,样式”按钮）：单击它，可以弹出一个“新建,CSS,规则”对话框，如图,4-2-3,所示。利用该对话框可以建立新的样式。,“编辑样式”按钮 ：在“,CSS,样式”面板中选中一种样式后，它才有效。单击它，可弹出一个能进行样式表编辑的对话框（例如“,.style1,的,CSS,规则定义”对话框，如图,4-2-4,所示），利用该对话框可以对,.style1,样式进行编辑。,“删除,CSS,规则”按钮（也叫做“删除,CSS,样式”按钮）：单击它，可以删除选中的样式。,（,2,）创建,CSS,样式表,打开如图,4-2-3,所示的“新建,CSS,规则”对话框，选中“选择器类型”栏内的第,1,个单选项，在“名称”下拉列表框内输入一个样式表的名字，名字必须以“,.”,开始，例如，“,.style1”,。单击该对话框中的“确定”按钮，即可退出该对话框，弹出“,CSS,规则定义”对话框，如图,4-2-4,所示。,利用“,CSS,规则定义”对话框进行样式表内各个对象属性的定义。,定义完成后，单击“确定”按钮，即可完成样式表的定义。此时，在“,CSS,样式”面板内会显示出新创建的样式表的名称。,（,1,）定义文字属性,单击图,4-2-4,所示的“,CSS,规则定义”对话框左边“分类”栏内的“类型”选项，此时的对话框如图,4-2-4,所示。利用该对话框可以设置,CSS,样式的字体、大小、样式和颜色等。单击“应用”按钮，可将设置的样式应用到页面中。,2,定义,CSS,样式表,（,2,）定义背景属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“背景”选项，此时的“,CSS,规则定义”对话框内的“背景”栏如图,4-2-6,所示。利用“背景”栏的“背景颜色”和“背景图像”按钮与文本框可以定义背景颜色和背景图像。其他选项的作用如下。,图,4-2-6 “,背景”栏,“重复”下拉列表框：用来设置背景图像的重复方式。它有,4,个选项：“不重复”（只在左上角显示一幅图像）、“重复”（沿水平与垂直方向重复）、“横向重复”（沿水平方向重复）和“纵向重复”（沿垂直方向重复）。,“附件”下拉列表框：设置图像是否随内容的滚动而滚动。,“水平位置”和“垂直位置”下拉列表框：用来设置图像与选定对象的水平和垂直相对位置。如果选择了“值”选项，则其右边的下拉列表框变为有效，可用来选择单位。,（,3,）定义区块属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“区块”选项，此时对话框内的“区块”栏如图,4-2-7,所示。其中各选项的作用如下。,图,4-2-7 “,区块”栏,“单词间距”下拉列表框：用来设定单词间距。选择“值”选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位。此处可以用负值。,“字母间距”下拉列表框：用来设定字母间距。选择“（值）”选项后，可以输入数值，再在其右边的下拉列表框内选择数值的单位。此处可以用负值。,“垂直对齐”下拉列表框：用它可以设置选中的对象相对于上级对象或相对所在行在垂直方向的对齐方式。,“文本对齐”下拉列表框：用来设置首行文字在对象中的对齐方式。,“文字缩进”文本框：用来输入文字的缩进量。,“空格”下拉列表框：用来设置文本空白的使用方式。它有“正常”（将所有的空白均填满）、“保留”（由用户输入时控制）和“不换行”（在加入,标记时才换行）选项。,（,4,）定义方框属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“方框”选项，此时的对话框内右边的“方框”栏如图,4-2-8,所示。其中各选项的作用如下。,图,4-2-8 “,方框”栏,“宽”和“高”下拉列表框：用来设置对象的宽度和高度。它们都有“自动”（由对象自身大小决定）和“值”（由输入的数值决定）,2,个选项。在其右边的下拉列表框内选择数字的单位。,“浮动”下拉列表框：用来设置是否允许文字环绕在选中对象的周围。,“清除”下拉列表框：用来设定其他对象是否可以在选定对象的左右。,“填充”栏：用来设置边框与其中的内容之间填充的空白间距，下拉列表框内应输入数值，在其右边的下拉列表框内选择数值的单位。,“边界”栏：用来设置边缘的空白宽度，下拉列表框内可输入数值或选择“自动”。,（,5,）定义边框属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“边框”选项，此时对话框内右边的“边框”栏如图,4-2-9,所示。它用来对围绕所有对象的边框属性进行设置。,图,4-2-9 “,边框”栏,设置边框的宽度与颜色：该对话框内有,4,行选项，分别为上、右、下和左边框。每行有,3,个下拉列表框和,1,个按钮与文本框。第,1,列的下拉列表框用来设置边框的样式，第,2,列的下拉列表框用来设置边框的宽度，第,3,列的下拉列表框用来选择数值的单位，按钮和后面的文本框用来设置边框的颜色。,边框的宽度下拉列表框内的选项有,4,个，选择“值”时，可以输入边框粗细的数值，此时其右边的下拉列表框变为有效，可以选择单位。,“样式”下拉列表框：在此下拉列表框中有,9,个选项。其中，“无”选项是取消边框，其他选项各对应着一种不同的边框。边框的最终显示效果还与浏览器有关。,（,6,）定义列表属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“列表”选项，此时该对话框右边的“列表”栏如图,4-2-10,所示。其中各选项的作用如下。,图,4-2-10 “,列表”栏,“类型”下拉列表框：用来设置列表的标记。选择标记是序号（有序列表）或符号（无序列表）。该下拉列表框内有,9,个选项，包括“圆点”、“圆圈”等。,“项目符号图像”下拉列表框和按钮：该下拉列表框内有“无”和“（,URL,）”两个选项。选择“无”选项后，不加图像标记；选择“（,URL,）”选项后，单击“浏览”按钮，打开“选择图像源文件”对话框，利用它可以选择图像，在列表行加入小的图标图案作为列表标记。,“位置”下拉列表框：用来设置列表标记的缩进方式。,（,7,）定义定位属性,单击图,4-2-4,所示对话框内左边“分类”栏中的“定位”选项，此时该对话框内右边的“定位”栏如图,4-2-11,所示。其中各选项的作用如下。,图,4-2-11 “,定位”栏,“类型”下拉列表框：用来设置对象的位置。各选项的作用如下。,“绝对”：以页面左上角的坐标为基点。,“相对”：以母体左上角的坐标为基点。,“静态”：按文本正常顺序定位，一般与“相对”定位一样。,“显示”下拉列表框：用来设置对象的可视性。各选项的作用如下。,“继承”：选中的对象继承其母体的可视性。,“可见”：选中的对象是可视的。,“隐藏”：选中的对象是隐藏的。,“,Z,轴”下拉列表框：用来设置不同层的对象的显示次序。它有“自动”（按原显示次序）和“值”,2,个选项。选择“值”选项后，可输入数值，其数值越大，越在上边显示。,“溢出”下拉列表框：用来设置当文字超出其容器时的处理方式。各选项的作用如下。,“可见”：当文字超出其容器时仍然可以显示。,“隐藏”：当文字超出其容器时，超出的内容不能显示。,“滚动”：在母体加一个滚动条，可利用滚动条滚动显示母体中的文字。,“自动”：当文本超出容器时，自动加入一个滚动条。,“定位”栏：用来设置放置对象的容器的大小和位置。,“剪辑”栏：用来设定对象溢出母体容器部分的剪切方式。,（,8,）定义扩展属性,单击图,4-2-4,所示对话框内左边“分类”栏内的“扩展”选项，此时该对话框内右边的“扩展”栏如图,4-2-12,所示。该对话框中各选项的作用如下。,图,4-2-12 “,扩展”栏,“分页”栏：用来在选定的对象的前面或后面强制加入分页符。一般浏览器均不支持此项功能。该栏有“之前”和“之后”两个下拉列表框，其内的选项有“自动”、“总是”、“左对齐”和“右对齐”，它们用来确定分页符的位置。,“视觉效果”栏：利用该栏内的下拉列表框的选项，可使页面的显示效果更好。,“光标”（即鼠标指针）下拉列表框：可以利用该下拉列表框中的选项设置各种鼠标的形状。对于低版本的浏览器，不支持此项功能。,“过滤器”下拉列表框：用来对图像进行滤镜处理，获得各种特殊的效果。,定义了,CSS,样式后，可以将这些,CSS,样式应用于网页中的文本、图像、,Flash,等对象。具体的方法如下。,（,1,）利用“,CSS,样式”面板,利用“,CSS,样式”面板将,CSS,样式应用于网页中对象的方法如下。,3,应用,CSS,样式,选中要应用,CSS,样式的对象，可以是文本、图像和,Flash,等对象。,鼠标右键单击“,CSS,样式”面板中相应的样式名称，弹出它的快捷菜单，再单击该菜单中的“套用”菜单命令。,（,2,）利用“属性”栏,利用“属性”栏将,CSS,样式应用于网页中对象的方法如下。,选中要应用,CSS,样式的文本对象，在其“属性”栏的“样式”下拉列表框中选择需要的,CSS,样式名称，即可将选中的,CSS,样式应用于选中的文本对象。,选中要应用,CSS,样式的图像或,Flash,等对象，在其“属性”栏的“类”下拉列表框中选择需要的,CSS,样式名称，即可将选中的,CSS,样式应用于选中的图像或,Flash,等对象。,4.3.1,学习目标,“,Word,操作演示”网页的显示效果如图,4-3-1,所示。,Flash,是原,Macromedia,公司开发的另一个著名产品，它是一个优秀的矢量绘图和动画制作软件。,4.3 【,案例,13】“Word,操作演示”网页,图,4-3-1 “Word,操作演示”网页的显示效果,Flash,可以制作出一种扩展名为,.,swf,的动画文件，这种文件可以插入到,HTML,中，也可以单独成为网页。它不但可以制作出一般的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。,Flash,制作的这种动画可以在所有安装了,Shockwave Flash,插件的浏览器中播放，这也是它之所以快速广泛流行的一个重要原因。,另外，,1998,年,Macromedia,公司公布了,Flash,动画格式文件的全部代码，方便了众多软件开发公司和其设计人员用它开发相关产品，从而加快了它的推广与应用。各个公司和个人推出的可以制作,.,swf,文件的软件越来越多。,4.3.2,操作过程,1,Flash,动画的“属性”栏,Flash,动画的“属性”栏如图,4-3-4,所示，前面没有介绍的各选项的作用如下。,4.3.3,相关知识,图,4-3-4 Flash,动画的“属性”栏,“源文件”文本框与文件夹按钮 ：用来选择,FLA,格式的,Flash,影片源文件。,“编辑”按钮：单击它，可以弹出,Flash 8,，并对,Flash,文件进行编辑。,“重设大小”按钮：单击它，可使,Flash,影片恢复原大小。,“循环”复选框：选中它后，可循环播放。,“自动播放”复选框：选中它后，可自动播放。,“品质”下拉列表框：用来设置图像的质量。,“比例”下拉列表框：用来选择缩放参数。,“插入,Flash,按钮”对话框如图,4-3-3,所示，其中各选项的含义如下。,“范例”显示框：用来显示所选的“,Flash,按钮”的效果，这里的显示效果和在浏览器中的显示效果相同，并且可以用鼠标测试“单击”时的显示效果。,2,“插入,Flash,按钮”对话框,“样式”列表框：该列表框中列出所有可以使用的,Flash,按钮的样式，可以从里面选择相应的样式进行编辑。,“字体”下拉列表框：用来选择文本的字体。,“大小”文本框：设置显示文本的大小。,“链接”文本框：在文本框中输入需要链接的文件目录和文件名，也可以单击“浏览”按钮，弹出“选择文件”对话框，在该对话框中选择需要链接的文件，设置链接。,“目标”下拉列表框：用来设置链接的网页的打开方式，其中各选项作用如下：,_blank,：在一个新的浏览器窗口中打开链接的文档。,_parent,：在框架的父框架或父窗口中打开链接的文档。,_self,：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。,_top,：将链接的文档载入整个浏览器窗口，从而删除所有框架。,“背景色”按钮：用来设置,Flash,按钮的背景颜色。,“另存为”文本框：用来输入要保存到的目录及文件名，或单击“浏览”按钮，弹出“选择文件”对话框，利用它选择要保存的路径和文件名，默认目录为网页文档所在的目录。,（,1,）单击“插入”（常用）栏中的“媒体”快捷菜单中的“,Flash,文本”按钮 ，弹出“插入,Flash,文本”对话框，如图,4-3-2,所示。,3,插入,Flash,文本,（,2,）在“插入,Flash,文本”对话框中进行文字各种属性的设置后，在“文本”文本框中输入文字；在“目标”文本框中输入要链接的文件；在“另存为”文本框中输入存储的文件名称。然后单击“确定”按钮，即可在网页中插入,Flash,文本。,（,1,）单击“插入”（常用）栏中的“媒体”快捷菜单中的“,Flash Video”,按钮 ，弹出“插入,Flash,视频”对话框，如图,4-3-5,左图所示（还没有设置）。,4,插入,Flash,视频,图,4-3-5 “,插入,Flash,视频”对话框设置,（,2,）在“视频类型”下拉列表框内选择一种下载视频的类型，选择“流视频”选项后的“插入,Flash,视频”对话框如图,4-3-5,右图所示。此处选择“累进式下载”选项。,（,3,）单击“,URL”,栏的“浏览”按钮，弹出“选择文件”对话框，如图,4-3-6,所示。利用该对话框选择一个,Flash,视频文件（扩展名为,.FLV,）。,图,4-3-6 “,选择文件”对话框,（,4,）在“外观”下拉列表框内选择一种播放器的样式。在它下边的显示框内可以看到选中的播放器的外观图像。,（,5,）在“宽度”和“高度”文本框内分别输入视频的宽度和高度，单位像素。,（,6,）选中“限制宽高比”、“自动播放”和“自动重新播放”复选框。,设置完后，单击“确定”按钮，即可在网页光标处插入一个,Flash,视频，如图,4-3-7,所示。,图,4-3-7,网页编辑状态下的,Flash,视频,在本节“操作过程”中已经介绍了一种插入,Flash,动画的方法。另外，采用下述方法也可以插入,Flash,动画。,5,插入,Flash,动画,（,1,）单击“插入”（常用）栏中的“媒体”快捷菜单中的“,FlashPaper,”,按钮 ，弹出“插入,FlashPaper,”,对话框，如图,4-3-8,所示。,图,4-3-8 “,插入,FlashPaper,”,对话框,（,2,）单击“浏览”按钮，可弹出“选择文件”对话框，如图,4-3-6,所示。在“选择文件”对话框中选择要导入的,SWF,文件，单击“确定”按钮，回到“插入,FlashPaper,”,对话框。,（,3,）在“插入,FlashPaper,”,对话框内的,2,个文本框中输入高度与宽度数值，再单击“确定”按钮，也可以导入,Flash,动画文件。,4.4.1,学习目标,“电子市场图片秀”网页的显示效果如图,4-4-1,所示。在该网页中，使用了,Java Applet,特效实现网页中不同图像的动态切换效果。,4.4 【,案例,14】“,电子市场图片秀”网页,图,4-4-1 “,电子市场图片秀”网页的显示效果,Java,是个面向网络的程序设计语言，用来让程序员创建应用程序，用它可以编写许多动人的动画，在,Internet,上应用。这些应用程序可以通过网络下载，而且可在任何计算平台上安全地运行。如果再加上万维网和公司内部网体系，将会拥有一个标准的网络计算环境。,Java,作为一个分布式的、面向对象的程序设计语言，可以让位于任何地方的任何计算机应用网络上的应用程序。,4.4.2,操作过程,1,插入,Java Applet,Applet,是,Java,的小型应用程序。,Java Applet,可以嵌入到,HTML,程序中，通过主页发布到,Internet,上。可以从网上下载,Java Applet,程序文件及有关文件，存放在本地站点的一个子目录下。,4.4.3,相关知识,（,1,）插入,Applet,的方法,单击“插入”（常用）面板中的“媒体”快捷菜单中的“,Applet”,按钮 ，即可弹出“选择文件”对话框。利用该对话框可以调入扩展名为“,.class”,的,Java Applet,程序文件。,使用,Java Applet,程序时应阅读,Java Applet,程序作者给出的说明，再按照说明进行操作。,插入文件后，网页文档窗口内会显示一个,Java Applet,图标。单击选中它后，可以用鼠标拖曳插件图标的黑色控制柄，来调整它的大小。,（,2,）,Applet,对象的“属性”栏,Java Applet,对象的“属性”栏如图,4-4-2,所示，其主要选项的作用如下。,图,4-4-2 Java Applet,对象的“属性”栏,“代码”文本框与文件夹按钮：文本框用来输入,Java Applet,程序文件的地址和名字。单击文件夹按钮，可以选择,Java Applet,文件。,“基址”文本框：用来输入,Java Applet,程序文件的名字。,“替换”文本框与文件夹按钮：用来输入,Java Applet,替换图像的路径与名字。单击文件夹按钮可选择,Java Applet,说明文件。,ActiveX,控件是,Microsoft,对浏览器的功能扩展，其作用与插件基本一样。所不同的是：如果浏览器不支持网页中的,ActiveX,控件，浏览器会自动安装所需的软件。如果是插件，则需要用户自己安装所需的软件。,2,插入,ActiveX,对象,（,1,）插入,ActiveX,的方法,单击“插入”（常用）面板中的“媒体”快捷菜单中的,ActiveX,按钮 ，即可在网页文档窗口内显示一个,ActiveX,图标。选中它后，可以用鼠标拖曳插件图标的黑色控制柄来调整它的大小。调整大小后的,ActiveX,图标如图,4-4-3,左图所示，,ActiveX,对象的“属性”栏如图,4-4-3,右图所示。,图,4-4-3 ActiveX,图标和,ActiveX,对象的“属性”栏,单击,ActiveX,对象“属性”栏中的“源文件”文件夹按钮 ，即可弹出“选择,Netscape,的插入文件”对话框。利用该对话框可以选择要加载的文件。,（,2,）,ActiveX,对象的“属性”栏中其他选项的作用,“,ClassID,”,列表框：它给出了,3,个类型代码，标明了,ActiveX,类型，其中一个用于,Shockwave,影片、一个用于,Flash,电影和一个用于,Real Audio,。如果要使用其他控件，需要自己输入相应的代码。选择不同类型的代码后，“属性”栏会产生相应的变化。,“源文件”文件夹按钮：单击该文件夹按钮，即可弹出“选择,Netscape,的插入文件”对话框。利用该对话框可以选择要加载的文件。,“编号”文本框：输入,ActiveX,的,ID,参数。,“数据”文本框：输入加载的数据文件名字。,“基址”文本框：输入加载的,ActiveX,控件的,URL,。,“嵌入”复选框：给出文件的嵌入状态。,单击“插入”（文本）面板内的字符按钮，可插入一些特殊字符。依次单击“插入”（文本）面板的字符按钮中的各按钮（不含最下边的“其他字符”按钮 ），会在页面编辑窗口内显示“,&,copy;&reg,;”,等代码，在浏览器内会显示“,”,等字符。,3,插入特殊字符,单击“字符”快捷菜单中的“其他字符”按钮 ，可弹出“插入其他字符”对话框，如图,4-4-4,所示。单击该对话框中的一个按钮，即可在“插入”文本框内显示相应的代码，再单击“确定”按钮，即可在页面内插入一个特殊字符的代码。,图,4-4-4 “,插入其他字符”对话框,