Dreamweaver-Flash-Fireworks网页制作培训教程第14课

1、第14课 动态网页技术 本课要点具体要求本课导读上机练习本课要点点应用表单单使用行为为插入媒体体对象滚动特效效具体要求求掌握表单单的创建建及表单单元素的的使用熟悉行为为的设置置方法掌握动画画、声音音和视频频的添加加了解marquee标签及其其参数本课导读读动态网页页技术主主要包含含表单的的提交、行为控控制、Flash动画的插插入、影影片的插插入、声声音的添添加和滚滚动效果果的制作作等，这这些动态态元素增增加了网网页的动动感效果果。14.1应应用表单单表单的作作用是从从访问者者那里获获取信息息来进行行验证。访问者者可以通通过文本本域、列列表框、复选框框以及单单选按钮钮等表单单元素输输入并确确定信

2、息息，然后后将这些些信息提提交给服服务器。14.1应用表单单14.1.1知识讲解解14.1.2典型案例例制制作调查查表14.1.1知知识识讲解本节中将将学习表表单的创创建及表表单元素素的使用用方法。14.1.1知知识识讲解1.表单域2.添加文本本域3.添加复选选框4.单选按钮钮及单选选按钮组组5.添加列表表/菜单6.添加跳转转菜单7.添加文件件域8.添加按钮钮1.表单域表单域是是放置表表单元素素的区域域，表单单域内的的元素通通过单击击【提交】按钮将所所有填写写的信息息提交给给服务器器进行处处理。创建表单单的具体体操作如如下：（1）在打开开的文档档中，将将光标定定位在要要插入表表单的位位置。（2

3、）选择【插入】【表单】【表单】命令或在在插入栏栏的【表单】选项卡中中单击按按钮钮，在指指定位置置添加一一个红色色的虚框框，即表表单域。2.添加文本本域文本域分分为3种：单行行文本域域、多行行文本域域和密码码文本域域。添加文本本域的具具体操作作如下：（1）将光标标定位在在表单中中要添加加文本域域的位置置。（2）在插入入栏的【表单】选项卡中中单击或或按按钮钮，即可可在指定定位置添添加文本本域。3.添加复选选框允许用户户从一组组选项中中选择多多个选项项，该选选项即是是复选框框，选中中时表现现为。添加复选选框的具具体操作作如下：（1）将光标标定位在在要添加加复选框框的位置置。（2）在插入入栏的【表单】

4、选项卡中中单击按按钮，即即可在指指定位置置添加复复选框。4.单单选按按钮及单单选按钮钮组单选按钮钮要求用用户只能能从一组组选项中中选择一一个选项项。单选选按钮通通常成组组地使用用，同一一组中的的所有单单选按钮钮必须具具有相同同的名称称。添加单选选按钮的的具体操操作如下下：（1）将光标标定位在在要添加加单选按按钮的位位置。（2）在插入入栏的【表单】选项卡中中单击按按钮钮，即可可在指定定位置添添加单选选按钮。若单击击按按钮钮，则打打开【单选按钮钮组】对话框，在其中中可添加加单选按按钮组。5.添添加列列表/菜菜单列表/菜单即在在一个列列表中显显示选项项值，用用户可以以从该列列表中选选择多个个选项。当

5、页面面空间有有限，而而又需要要显示许许多选项项时，可可使用菜菜单。菜菜单中只只显示一一个选项项，其他他的选项项被隐藏藏。列表/菜单的添添加方法法如下：（1）将光标标定位在在表单中中要添加加列表/菜单的位位置。（2）在插入入栏的【表单】选项卡中中单击按按钮，在在指定位位置添加加列表/菜单。6.添添加跳跳转菜单单跳转菜单单类似于于弹出菜菜单，可可给菜单单列表中中的选项项添加URL链接；如如果不指指定链接接，则与与列表/菜单的属属性相同同。添加跳转转菜单的的具体操操作如下下：（1）将光标标定位在在要添加加跳转菜菜单的位位置。（2）在【插入】栏的【表单】选项卡中中单击按按钮钮，打开开【插入跳转转菜单】

6、对话框，进行相相应的设设置。（3）设置完完成后，单击按按钮。7.添加文件件域使用文件件域可以以选择本本地计算算机上的的文件，并将该该文件上上传到服服务器。文件域域的外观观与文本本域类似似，只是是多一个个按按钮钮。在文文件域的的文本框框中，可可以手动动输入要要上传的的文件的的路径，也可以以单击按按钮钮指定上上传文件件。添加文件件域的具具体操作作如下：（1）将光标标定位在在要添加加文件域域的位置置。（2）在插入入栏的【表单】选项卡中中单击按按钮钮，插入入文件域域。8.添加按钮钮按钮有两两种：一一种是图图像域，另一种种是普通通按钮。图像域使使用图像像作为按按钮图标标，用于于提交和和重置表表单信息息等

7、，与与普通按按钮的功功能相同同。在插入栏栏的【表单】选项卡中中单击按按钮钮，打开开【选择图像像源文件件】对话框，从计算算机中找找出要作作为按钮钮图标的的图像，然后单单击按按钮，即可插插入图像像域。在插入栏栏的【表单】选项卡中中单击按按钮钮，在光光标处可可插入普普通按钮钮。14.1.2典型案例例制作调查查表案例目标标本案例将将制作一一份调查查表，主主要练习习表单的的创建及及表单元元素的添添加与设设置等，完成后后的效果果如下图图所示。14.1.2典型案例例制作调查查表14.1.2典型案例例制作调查查表操作思路路：（1）在jiankang站点中建建立diaocha.html文档。（2）插入2行1列的

8、表格格，添加加表格标标题。（3）在第2行中添加加表单，并在表表单中添添加一个个14行1列的表格格。（4）依次在在单元格格中添加加调查表表的内容容及对应应的表单单元素。操作步骤骤请老师师参照软软件讲解解14.1.2典型案例例制作调查查表案例小结结本案例通通过制作作调查表表练习了了表单的的创建，文本域域、单选选按钮、复选框框、列表表/菜单及按按钮的添添加与属属性设置置等。在在制作表表单时，可以通通过CSS样式中的的方框类类别来指指定表单单中的文文本域和和按钮等等元素的的宽度和和高度。14.2使用行为为使用行为为是指将将JavaScript代码嵌入入到文档档中，使使访问者者可以与与Web页面进行行交

9、互，从而以以多种方方式更改改页面或或执行任任务。行行为由事事件和该该事件触触发的动动作组成成。14.2使用行为为14.2.1知识讲解解14.2.2典型案例例检检测调查查表14.2.1知知识识讲解本节中将将介绍【行为】面板和附附加行为为的方法法。14.2.1知知识识讲解1.认识【行为】面板2.附加行为为 1.认识【行为】面板按【Shift+F4】组合键打打开【行为】面板，如如下图所所示。通通过【行为】面板，可可将行为为附加到到页面元元素中。已附加加到当前前所选页页面的行行为显示示在行为为列表中中，并按按字母顺顺序排列列事件。2.附加行为为可以将行行为附加加到整个个文档，也可以以附加到到链接、图像

10、、表单或或其他HTML元素中，但不能能将其附附加到纯纯文本中中，因为为和等标签不不在浏览览器中生生成事件件。如果果要给文文本指定定行为，则需先先给该文文本指定定一个链链接（可可为空链链接）。14.2.2典型案例例检测调查查表案例目标标本案例将将对调查查表进行行检测，主要练练习添加加、使用用行为，以及检检测表单单行为，完成后后的效果果如下图图所示。14.2.2典型案例例检测调查查表14.2.2典型案例例检测调查查表操作思路路：（1）将diaocha.html文档另存存为diaocha2.html。（2）选取整整个表单单，在【行为】面板中为为各个文文本域设设置是否否为必填填项、文文本内容容是否为为

11、数字和和电子邮邮件等。（3）保存文文档，在在浏览器器中填写写表单并并提交。操作步骤骤请老师师参照软软件讲解解 14.2.2典型案例例检测调查查表案例小结结本案例对对调查表表进行检检测，主主要练习习了检测测表单行行为。行行为的添添加比较较简单，重要的的是对各各个行为为动作的的设置。本案例例主要检检测文本本的输入入是否正正确；如如果出错错，则弹弹出提示示信息，以便帮帮助访问问者正确确填写。14.3插入媒体体对象媒体对象象即含有有图像和和声音的的对象。在Dreamweavr中中，可以以将Flash动画与与Shockwave影片、QuickTime、AVI、Java applet、ActiveX控件件

12、以及各各种格式式的音频频文件嵌嵌入到网网页中。14.3插入媒体体对象14.3.1知识讲解解14.3.2典型案例例制制作风景景网页14.3.1知识讲解解本节中将将学习如如何插入入Flash动画与元元素，以以及如何何嵌入视视频与声声音文件件。14.3.1知识讲解解1.插入Flash动画2.插入Flash元素3.嵌入视频频4.嵌入声音音1.插入Flash动画Dreamweaver中自带了了Flash文本、Flash按钮，可可以将其其插入到到网页中中。除此此之外，还可插插入Flash动画，下下面分别别进行讲讲解。单击插入入栏的【常用】选项卡中中的按按钮钮中的下下拉箭头头，在弹弹出的下下拉菜单单中选择择

13、【Flash文本】选项，打打开【插入Flash文本】对话框，如下图图所示。1.插入Flash动画1.插入Flash动画单击插入入栏的【常用】选项卡卡中的按按钮钮中的下下拉箭头头，在弹弹出的下下拉菜单单中选择择【Flash按钮】选项，打开【插入Flash按钮钮】对话话框，如如下图所所示。1.插入Flash动画Flash文本本与Flash按钮在在设计网网页时使使用得比比较少，一般采采用在Flash中制制作的动动画。单单击插入入栏的【常用】选项卡卡中的按按钮钮可插入入站点中中的Flash动画，也可以以从【文文件】面面板中将将Flash动动画直接接拖入到到页面中中要插入入的位置置。2.插入Flash元

14、素通过Flash元素可以以快速、方便地地使用预预置元素素制作滚滚动图像像浏览器器。插入Flash元素的具具体操作作如下：（1）单击插插入栏的的【Flash元素】选项卡中中的按按钮，在打开开的【保存Flash元素】对话框中中保存要要插入的的Flash浏览器。2.插入Flash元素（2）单击按按钮钮后，在在窗口中中出现一一个Flash区域，并并打开【Flash元素】面板。（3）设置完完需要的的影片属属性后进进行保存存，并按按【F12】键浏览效效果。3.嵌入视频频各种视频频文件都都可以添添加到网网页中，但有些些视频文文件需要要对应的的插件支支持才能能正确显显示。常常见的视视频文件件有Flash视频、

15、Shockwave影片、AVI文件和MPEG文件等。视频文件件可以通通过链接接方式嵌嵌入，也也可以通通过插件件嵌入；Flash视频和Shockwave影片可以以分别通通过插入入栏的【常用】选项卡中中的和和按按钮钮直接插插入。4.嵌入声音音嵌入声音音的方法法有代码码法、链链接法、插件法法和直接接插入法法4种。14.3.2典型案例例制作风景景网页案例目标标本案例将将制作风风景网页页，主要要练习背背景音乐乐的添加加和Flash图像查查看器的的制作，完成后后的效果果如下图图所示。14.3.2典型案例例制作风景景网页14.3.2典型案例例制作风景景网页操作思路路：（1）将index.html文档另存存为

16、fengjing.html。（2）在代码码视图中中用bgsound参数添加加背景音音乐，并并将其设设置为循循环播放放。（3）在Today栏目下添添加图像像查看器器并设置置其属性性。操作步骤骤请老师师参照软软件讲解解 14.3.2典型案例例制作风景景网页案例小结结本案例通通过制作作风景页页主要练练习了在在代码视视图中应应用标签添加加背景音音乐，在在Flash图像查看看器中添添加图像像、修改改图像路路径、设设置边框框与标题题。14.4滚动特效效滚动特效效在网页页中使用用得比较较普遍，如滚动动新闻或或广告语语等。滚滚动特效效是通过过设置marquee标签及其其相应的的参数来来实现的的。14.4滚动特

17、效效14.4.1知识讲解解14.4.2典型案例例制制作滚动动新闻栏栏14.4.1知识讲解解本节中将将介绍marquee标签及相相应参数数的作用用。14.4.1知识讲解解1.认识marquee标签2.marquee的参数1.认识marquee标签marquee标签用于于制作可可移动的的文本效效果，可可以在标签间的的任何位位置添加加，其基基本语法法结构为为：。两标签签间可添添加文本本、表格格、图像像、动画画、视频频和表单单等元素素。2.marquee的参数marquee的参数添添加在中，各参参数间用用空格分分隔。14.4.2典型案例例制作滚动动新闻栏栏案例目标标本案例将将把fengjing.htm

18、l文档中的的最新书书籍做成成滚动新新闻栏，主要练练习marquee标签的使使用及参参数的设设置，完完成后的的效果如如下图所所示。14.4.2典型案例例制作滚动动新闻栏栏14.4.2典型案例例制作滚动动新闻栏栏操作思路路：（1）打开fengjing.html文档，将将其另存存为fengjing2.html。（2）合并“最新书书籍”栏栏目中的的所有单单元格。（3）在单元元格中输输入最新新书籍内内容。（4）在代码码视图中中添加marquee标签并设设置其参参数。操作步骤骤请老师师参照软软件讲解解 14.4.2典型案例例制作滚动动新闻栏栏案例小结结本案例通通过制作作滚动新新闻栏主主要练习习了marquee标签的使使用，滚滚动区的的大小设设置，循循环播放放、滚动动方式、播放速速度、对对齐方式式的设置置及鼠标标对滚动动对象的的控制设设置。在制作滚滚动效果果时，如如果要水水平移动动，则可可以将direction参数的值值指定为为“left”或“right”；如果需需要走走走停停，则可以以指定scrolldelay参数的值值。14.5上上机练习习14.5.1控制