搜索
第6章动态网页技术本课要点具体要求本课导读上机练习本课要点应用表单使用行为插入媒体对象滚动特效具体要求掌握表单的创建及表单元素的使用熟悉行为的设置方法掌握动画、声音和视频的添加了解marquee标签及属性参数本课导读动态网页技术主要包含表单的提交、行为控制、Flash动画的插入、影片的插入、声音的添加、滚动效果的制作等，合理地使用这些动态元素，可以为网页添加丰富的动态效果。6.1应用表单表单的作用是从访问者那里获取信息验证。访问者可以在文本域、列表框、复选框以及单选按钮等表单元素中输入信息，然后提交这些信息到服务器进行处理。6.1应用表单6.1.1知识讲解6.1.2典型案例——制作“在线报名”页面6.1.1知识讲解本节将学习表单的创建及表单元素的属性设置等知识。6.1.1知识讲解1.表单2.添加文本域3.添加复选框4.单选按钮及单选按钮组5.添加列表/菜单6.添加跳转菜单7.添加文件域8.添加按钮1.表单表单是放置表单元素的区域，表单内的元素通过用户单击【提交】按钮，将所有填写的信息提交给服务器进行处理。创建表单的具体操作如下：（1）在打开的文档中，将鼠标光标定位在要插入表单的位置。（2）选择【插入记录】→【表单】→【表单】命令，或在插入栏的【表单】选项卡中单击按钮，在指定位置添加一个红色的虚线框，即表单。2.添加文本域文本域用于创建一个包含单行或多行文本的区域。用户可以创建一个隐藏用户输入文本的密码文本域。添加文本域的具体操作如下：（1）将鼠标光标定位在表单中要添加文本域的位置。（2）在插入栏的【表单】选项卡中单击或按钮，即可在指定位置添加文本域。3.添加复选框允许用户从一组选项中同时选择多个选项，这些选项就是复选框，选中时显示为。添加复选框的具体操作如下：（1）将鼠标光标定位在要添加复选框的位置。（2）在插入栏的【表单】选项卡中单击按钮，即可在指定位置添加复选框。4.单选按钮及单选按钮组单选按钮是要求用户只能从一组选项中选择一个选项的表单元素。单选按钮通常成组地使用，在同一个组中的所有单选按钮必须具有相同的名称。4.单选按钮及单选按钮组添加单选按钮的具体操作如下：（1）将鼠标光标定位在要添加单选按钮的位置。（2）在插入栏的【表单】选项卡中单击按钮，在指定位置添加单选按钮。若单击按钮，可打开【单选按钮组】对话框，添加单选按钮组。（3）设置完成后，单击【确定】按钮。5.添加列表/菜单列表/菜单表单元素即是在一个列表中显示选项值，用户可以从该列表中选择多个选项。当页面空间有限，又需要显示许多选项时，就使用菜单，菜单中只显示一个选项，其他的选项被隐藏。列表/菜单的添加方法如下：（1）将鼠标光标定位在表单中要添加列表/菜单的位置。（2）在插入栏的【表单】选项卡中单击按钮，即可在指定位置添加列表/菜单。6.添加跳转菜单跳转菜单类似于弹出菜单，可给菜单中的选项添加URL链接，如果不指定链接，则与列表/菜单的属性相同。添加跳转菜单的具体操作如下：（1）将鼠标光标定位在要添加跳转菜单的位置。（2）在插入栏的【表单】选项卡中单击按钮，打开【插入跳转菜单】对话框。（3）设置完成后单击【确定】按钮。7.添加文件域使用文件域表单元素，用户可以选择本地计算机上的文件，并将该文件上传到服务器。文件域的外观与文本域类似，只是文件域多一个【浏览】按钮。在文件域的文本框中可以手动输入要上传的文件路径，也可以单击【浏览】按钮指定上传文件。添加文件域的具体操作如下：（1）将鼠标光标定位在要添加文件域的位置。（2）在插入栏的【表单】选项卡中单击按钮，插入文件域。8.添加按钮按钮有两种：一种是图像域，另一种是普通按钮。图像域是用图像作为按钮图标，用于提交或重置表单信息等，与普通按钮的功能相同。在插入栏的【表单】选项卡中单击按钮，打开【选择图像源文件】对话框，从计算机中找出要作为按钮图标的图像，单击【确定】按钮，插入的图像即为图像域。在插入栏的【表单】选项卡中单击按钮，在鼠标光标处可插入普通按钮。6.1.2典型案例——制作“在线报名”页面案例目标本案例将制作一份“在线报名”页面，主要介绍表单的创建以及表单元素的添加与设置等，完成的效果如下图所示。6.1.2典型案例——制作“在线报名”页面6.1.2典型案例——制作“在线报名”页面操作思路：（1）在ls6站点中建立“baoming.html”文档。（2）插入2行1列的表格，添加表格标题。（3）在第2行添加表单，并在表单中添加一个20行3列的表格。（4）依次在单元格中添加报名表内容及对应的表单元素。6.1.2典型案例——制作“在线报名”页面案例小结本案例制作了一份在线报名的网页，主要介绍了表单的创建、文本域、单选按钮、复选框、列表/菜单及按钮的添加与属性设置等内容。在制作表单时，可以通过CSS规则定义中的【方框】类别来指定表单中的文本域和按钮等元素的宽度和高度。6.2使用行为使用行为可将JavaScript代码嵌入到文档中，使访问者可以与Web页进行交互，从而以多种方式更改页面或执行任务。行为由事件和该事件触发的动作两部分组成。6.2使用行为6.2.1知识讲解6.2.2典型案例——检测报名表6.2.1知识讲解本节将介绍【行为】面板和添加行为的方法。6.2.1知识讲解1.认识【行为】面板2.添加行为1.认识【行为】面板按【Shift+F4】组合键打开【行为】面板，如下图所示。通过【行为】面板，将行为添加到页面元素中，即可实现相应的操作，已添加到当前文档的行为显示在行为列表中，并按字母顺序排列。2.添加行为行为可以添加到整个文档，也可以添加到链接、图像、表单或其他HTML元素中，但不能将行为添加到纯文本上，因为p和span等标签不能在浏览器中生成事件。如果要给文本指定行为，则需要先给该文本指定一个链接，即创建空链接。6.2.2典型案例——检测报名表案例目标本案例将对报名表进行检测设置，主要介绍行为中的表单检测动作及行为的添加和使用方法，完成后的效果如下图所示。6.2.2典型案例——检测报名表6.2.2典型案例——检测报名表操作思路：（1）将“baoming.html”文档另存为“baoming1.html”文档。（2）选取整个表单，在【行为】面板中设置各个文本域是否为必填项、文本内容是否必须为数字等。（3）保存文档，在浏览器中填写表单并提交。6.2.2典型案例——检测报名表案例小结本例对报名表进行了检测设置，主要介绍了检测表单行为的添加方法。行为的添加比较简单，重要的是对各个行为动作的设置。本例中的“检测表单”行为用于检测文本的输入是否正确，如果出错将弹出提示信息，以便访问者正确填写。6.3插入媒体对象媒体对象即含有图像和声音的对象。在Dreamweaver中可以将Flash动画与Shockwave影片、QUICKTIME、AVI、JavaApplet、ActiveX控件，以及各种格式的音频文件嵌入到网页中。6.3插入媒体对象6.3.1知识讲解6.3.2典型案例——在网页中插入Flash动画和背景音乐6.3.1知识讲解本节将学习Flash动画与元素的插入，以及视频与声音文件的嵌入方法。6.3.1知识讲解1.插入Flash动画2.嵌入视频3.嵌入声音1.插入Flash动画Dreamweaver自带有Flash文本和Flash按钮，可以将其插入到网页中。除此之外，用户还可以插入Flash动画，下面分别进行讲解。单击插入栏【常用】选项卡中按钮旁的下拉按钮，在弹出的【媒体】下拉菜单中选择按钮对应的命令，打开【插入Flash文本】对话框，如下图所示。1.插入Flash动画1.插入Flash动画单击插入栏【常用】选项卡中按钮旁的下拉按钮，在弹出的【媒体】下拉菜单中选择按钮对应的命令，打开【插入Flash按钮】对话框，如下图所示。1.插入Flash动画1.插入Flash动画Flash文本与Flash按钮在设计网页时使用比较少，使用较多的是在Flash中制作的按钮和动画。单击插入栏【常用】选项卡中的按钮，可插入站点中的Flash动画，也可以从【文件】面板中直接拖动动画文件到页面中要插入Flash动画的位置。2.嵌入视频各种视频文件都可以添加到网页，但有些视频文件需要相应的插件的支持才能正确显示。常见的视频文件有Flash视频、Shockwave影片、AVI和MPEG文件等。视频文件可以通过链接方式嵌入，也可以作为插件嵌入。Flash视频和Shockwave影片可以分别通过插入栏【常用】选项卡中的【Flash视频】和【Shockwave】按钮直接插入。3.嵌入声音嵌入声音的方法有代码法、链接法、插件法和直接插入法4种。6.3.2典型案例——在网页中插入Flash动画和背景音乐案例目标本案例将在网页中插入Flash动画和背景音乐，完成后的效果如右图所示。6.3.2典型案例——在网页中插入Flash动画和背景音乐操作思路：（1）将“index.html”文档另存为“flash.html”文档。（2）在代码视图中使用bgsound标签添加背景音乐，并设置为循环播放。6.3.2典型案例——在网页中插入Flash动画和背景音乐案例小结本例主要介绍了在代码视图中应用bgsound标签添加背景音乐，及插入Flash文件的操作，这里添加背景音乐使用的是代码法。6.4滚动特效滚动特效在网页中使用得比较普遍，如新闻滚动或广告语滚动等。滚动特效是通过设置marquee标签及添加相应的属性参数来完成的。6.4滚动特效6.4.1知识讲解6.4.2典型案例——制作滚动栏6.4.1知识讲解本节将介绍marquee标签及对应的属性参数的应用。6.4.1知识讲解1.认识marquee标签2.marquee标签的属性参数1.认识marquee标签marquee标签用于制作可移动的文本效果，可以在body/body标签间的任意位置添加，其基本语法结构为：marquee/marquee，在标签间可添加文本、表格、图像、动画、视频和表单等元素。2.marquee标签的属性参数marquee标签的属性参数添加在“marquee”中，各属性参数间用空格分隔，其属性参数有大小、对齐方式、移动方式、移动方向、循环次数、速度和延迟方式等。6.4.2典型案例——制作滚动栏案例目标本案例会将上一案例中的“最新礼品”栏制作成滚动栏，主要介绍marquee标签的使用及属性参数的设置，完成后的效果如下图所示。6.4.2典型案例——制作滚动栏6.4.2典型案例——制作滚动栏操作思路：（1）打开文件“flash.html”文档，然后另存为“marq.html”文档。（2）在代码视图中添加marquee标签。（3）设置marquee标签属性参数。6.4.2典型案例——制作滚动栏案例小结本例制作了滚动栏，主要介绍了marquee标签的使用，滚动区的大小设置，循环播放、滚动方式、播放速度、对齐方式设置，以及鼠标对滚动对象的控制等内容。在制作滚动效果时，如果要水平移动，可以指定“direction”参数的值为“left”或“right”，如果需要走走停停，可以指定“scrolldelay”参数的值。6.5添加Spry构件6.5.1知识讲解6.5.2典型案例——制作选项卡式个人简历6.5.1知识讲解1.插入Spry菜单栏2.插入选项卡式面板3.Spry折叠式4.插入Spry可折叠面板1.插入Spry菜单栏在插入Spry构件时应先保存文件，在插入构件后，将在站点中生成名为“SpryAssets”的文件夹，用于存放Spry构件所需的样式表文件和脚本程序。单击插入栏【Spry】选项卡中的按钮，打开对话框，设置菜单栏的布局方向，单击【确定】按钮，在页面中插入菜单栏，如下图所示。2.插入选项卡式面板单击插入栏【Spry】选项卡中的按钮，在文档中插入选项卡式面板，如下图所示。2.插入选项卡式面板更改选项卡中的文字内容与格式，与修改单元格中的内