《电子商务网站建设第6章》由会员分享，可在线阅读，更多相关《电子商务网站建设第6章（71页珍藏版）》请在金锄头文库上搜索。
1、第第6章章 动态网页技术动态网页技术w本课要点本课要点w具体要求具体要求w本课导读本课导读w上机练习上机练习本课要点本课要点w应用表单应用表单w使用行为使用行为w插入媒体对象插入媒体对象w滚动特效滚动特效具体要求具体要求n掌握表单的创建及表单元素的使用掌握表单的创建及表单元素的使用n熟悉行为的设置方法熟悉行为的设置方法n掌握动画、声音和视频的添加掌握动画、声音和视频的添加n了解了解标签及属性参数标签及属性参数本课导读本课导读 动态网页技术主要包含表单的提交、行为动态网页技术主要包含表单的提交、行为控制、控制、Flash动画的插入、影片的插入、动画的插入、影片的插入、声音的添加、滚动效果的制作等
2、，合理地声音的添加、滚动效果的制作等，合理地使用这些动态元素，可以为网页添加丰富使用这些动态元素，可以为网页添加丰富的动态效果。的动态效果。6.1 应用表单应用表单 表表单单的的作作用用是是从从访访问问者者那那里里获获取取信信息息验验证证。访访问问者者可可以以在在文文本本域域、列列表表框框、复复选选框框以以及及单单选选按按钮钮等等表表单单元元素素中中输输入入信信息息，然然后后提交这些信息到服务器进行处理。提交这些信息到服务器进行处理。6.1 应用表单应用表单w6.1.1 知识讲解知识讲解w6.1.2 典型案例典型案例制作制作“在线报名在线报名”页面页面6.1.1 知识讲解知识讲解本节将学习表单
3、的创建及表单元素的属性本节将学习表单的创建及表单元素的属性设置等知识。设置等知识。6.1.1 知识讲解知识讲解 1. 表单表单 2. 添加文本域添加文本域 3. 添加复选框添加复选框 4. 单选按钮及单选按钮组单选按钮及单选按钮组 5. 添加列表添加列表/菜单菜单 6. 添加跳转菜单添加跳转菜单 7. 添加文件域添加文件域 8. 添加按钮添加按钮1. 表单表单 表单是放置表单元素的区域，表单内的元素通过表单是放置表单元素的区域，表单内的元素通过用户单击用户单击【提交提交】按钮，将所有填写的信息提按钮，将所有填写的信息提交给服务器进行处理。交给服务器进行处理。 创建表单的具体操作如下：创建表单的
4、具体操作如下： （1）在打开的文档中，将鼠标光标定位在要插）在打开的文档中，将鼠标光标定位在要插入表单的位置。入表单的位置。 （2）选择）选择【插入记录插入记录】【表单表单】【表单表单】命令，或在插入栏的命令，或在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，在指定位置添加一个红色的虚线框，即按钮，在指定位置添加一个红色的虚线框，即表单。表单。 2. 添加文本域添加文本域 文本域用于创建一个包含单行或多行文本文本域用于创建一个包含单行或多行文本的区域。用户可以创建一个隐藏用户输入的区域。用户可以创建一个隐藏用户输入文本的密码文本域。文本的密码文本域。 添加文本域的具体操作如下：添加文本域
5、的具体操作如下：（1）将鼠标光标定位在表单中要添加文本）将鼠标光标定位在表单中要添加文本域的位置。域的位置。（2）在插入栏的）在插入栏的【表单表单】选项卡中单击选项卡中单击 或或 按钮，即可在指定位置添加文本域。按钮，即可在指定位置添加文本域。3. 添加复选框添加复选框 允许用户从一组选项中同时选择多个选项，允许用户从一组选项中同时选择多个选项，这些选项就是复选框，选中时显示为这些选项就是复选框，选中时显示为 。 添加复选框的具体操作如下：添加复选框的具体操作如下：（1）将鼠标光标定位在要添加复选框的位）将鼠标光标定位在要添加复选框的位置。置。（2）在插入栏的）在插入栏的【表单表单】选项卡中单
6、击选项卡中单击 按钮，即可在指定位置添加复选框。按钮，即可在指定位置添加复选框。4. 单选按钮及单选按钮组单选按钮及单选按钮组 单选按钮是要求用户只能从一组选项中选择单选按钮是要求用户只能从一组选项中选择一个选项的表单元素。单选按钮通常成组地一个选项的表单元素。单选按钮通常成组地使用，在同一个组中的所有单选按钮必须具使用，在同一个组中的所有单选按钮必须具有相同的名称。有相同的名称。 4. 单选按钮及单选按钮组单选按钮及单选按钮组 添加单选按钮的具体操作如下：添加单选按钮的具体操作如下： （1）将鼠标光标定位在要添加单选按钮的位置。）将鼠标光标定位在要添加单选按钮的位置。 （2）在插入栏的）在插
7、入栏的【表单表单】选项卡中单击选项卡中单击 按钮，按钮，在指定位置添加单选按钮。若单击在指定位置添加单选按钮。若单击 按钮，可按钮，可打开打开【单选按钮组单选按钮组】对话框，添加单选按钮组。对话框，添加单选按钮组。 （3）设置完成后，单击）设置完成后，单击【确定确定】按钮。按钮。5. 添加列表添加列表/菜单菜单 列表列表/菜单表单元素即是在一个列表中显示选项菜单表单元素即是在一个列表中显示选项值，用户可以从该列表中选择多个选项。当页值，用户可以从该列表中选择多个选项。当页面空间有限，又需要显示许多选项时，就使用面空间有限，又需要显示许多选项时，就使用菜单，菜单中只显示一个选项，其他的选项被菜单
8、，菜单中只显示一个选项，其他的选项被隐藏。隐藏。 列表列表/菜单的添加方法如下：菜单的添加方法如下：（1）将鼠标光标定位在表单中要添加列表）将鼠标光标定位在表单中要添加列表/菜单的菜单的位置。位置。（2）在插入栏的）在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，按钮，即可在指定位置添加列表即可在指定位置添加列表/菜单。菜单。 6. 添加跳转菜单添加跳转菜单 跳转菜单类似于弹出菜单，可给菜单中的选跳转菜单类似于弹出菜单，可给菜单中的选项添加项添加URL链接，如果不指定链接，则与列链接，如果不指定链接，则与列表表/菜单的属性相同。菜单的属性相同。 添加跳转菜单的具体操作如下：添加跳转菜单的
9、具体操作如下：（1）将鼠标光标定位在要添加跳转菜单的位置。）将鼠标光标定位在要添加跳转菜单的位置。（2）在插入栏的）在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，按钮，打开打开【插入跳转菜单插入跳转菜单】对话框。对话框。（3）设置完成后单击）设置完成后单击【确定确定】按钮。按钮。7. 添加文件域添加文件域 使用文件域表单元素，用户可以选择本地计算机使用文件域表单元素，用户可以选择本地计算机上的文件，并将该文件上传到服务器。文件域上的文件，并将该文件上传到服务器。文件域的外观与文本域类似，只是文件域多一个的外观与文本域类似，只是文件域多一个【浏浏览览】按钮。在文件域的文本框中可以手动输入
10、按钮。在文件域的文本框中可以手动输入要上传的文件路径，也可以单击要上传的文件路径，也可以单击【浏览浏览】按钮按钮指定上传文件。指定上传文件。 添加文件域的具体操作如下：添加文件域的具体操作如下：（1）将鼠标光标定位在要添加文件域的位置。）将鼠标光标定位在要添加文件域的位置。（2）在插入栏的）在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，按钮，插入文件域。插入文件域。8. 添加按钮添加按钮w按钮有两种：一种是图像域，另一种是普通按钮。按钮有两种：一种是图像域，另一种是普通按钮。w图像域是用图像作为按钮图标，用于提交或重置图像域是用图像作为按钮图标，用于提交或重置表单信息等，与普通按钮的功
11、能相同。表单信息等，与普通按钮的功能相同。w在插入栏的在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，打开按钮，打开【选择图像源文件选择图像源文件】对话框，从计算机中找出要对话框，从计算机中找出要作为按钮图标的图像，单击作为按钮图标的图像，单击【确定确定】按钮，插入按钮，插入的图像即为图像域。的图像即为图像域。w在插入栏的在插入栏的【表单表单】选项卡中单击选项卡中单击 按钮，在鼠按钮，在鼠标光标处可插入普通按钮。标光标处可插入普通按钮。6.1.2 典型案例典型案例制作制作“在线报名在线报名”页面页面w案例目标案例目标 本案例将制作一份本案例将制作一份“在线报名在线报名”页面，主要介页面，
12、主要介绍表单的创建以及表单元素的添加与设置等，绍表单的创建以及表单元素的添加与设置等，完成的效果如下图所示。完成的效果如下图所示。6.1.2 典型案例典型案例制作制作“在线报名在线报名”页面页面6.1.2 典型案例典型案例制作制作“在线报名在线报名”页面页面w操作思路：操作思路： （1）在）在ls6站点中建立站点中建立“baoming.html”文文档。档。 （2）插入）插入2行行1列的表格，添加表格标题。列的表格，添加表格标题。 （3）在第）在第2行添加表单，并在表单中添加行添加表单，并在表单中添加一个一个20行行3列的表格。列的表格。 （4）依次在单元格中添加报名表内容及对）依次在单元格中
13、添加报名表内容及对应的表单元素。应的表单元素。6.1.2 典型案例典型案例制作制作“在线报名在线报名”页面页面w案例小结案例小结 本案例制作了一份在线报名的网页，主要介绍本案例制作了一份在线报名的网页，主要介绍了表单的创建、文本域、单选按钮、复选框、了表单的创建、文本域、单选按钮、复选框、列表列表/菜单及按钮的添加与属性设置等内容。在菜单及按钮的添加与属性设置等内容。在制作表单时，可以通过制作表单时，可以通过CSS规则定义中的规则定义中的【方方框框】类别来指定表单中的文本域和按钮等元素类别来指定表单中的文本域和按钮等元素的宽度和高度。的宽度和高度。6.2 使用行为使用行为 使使用用行行为为可可
14、将将JavaScript代代码码嵌嵌入入到到文文档档中中，使使访访问问者者可可以以与与Web页页进进行行交交互互，从从而而以以多多种种方方式式更更改改页页面面或或执执行行任任务务。行行为为由事件和该事件触发的动作两部分组成。由事件和该事件触发的动作两部分组成。6.2 使用行为使用行为w6.2.1 知识讲解知识讲解w6.2.2 典型案例典型案例检测报名表检测报名表6.2.1 知识讲解知识讲解 本节将介绍本节将介绍【行为行为】面板和添加行为的方法。面板和添加行为的方法。6.2.1 知识讲解知识讲解 1. 认识认识【行为行为】面板面板 2. 添加行为添加行为 1. 认识认识【行为行为】面板面板 按按
15、【Shift+F4】组组合合键键打打开开【行行为为】面面板板，如如下下图图所所示示。通通过过【行行为为】面面板板，将将行行为为添添加加到到页页面面元元素素中中，即即可可实实现现相相应应的的操操作作，已已添添加加到到当当前前文文档档的的行行为为显显示示在在行行为为列列表表中中，并并按按字字母母顺序排列。顺序排列。2. 添加行为添加行为 行行为为可可以以添添加加到到整整个个文文档档，也也可可以以添添加加到到链链接接、图图像像、表表单单或或其其他他HTML元元素素中中，但但不不能能将将行行为为添添加加到到纯纯文文本本上上，因因为为和和等等标标签签不不能能在在浏浏览览器器中中生生成成事事件件。如如果果
16、要要给给文文本本指指定定行行为为，则则需需要要先先给给该该文文本本指指定定一一个个链链接接，即即创创建建空链接。空链接。6.2.2 典型案例典型案例检测报名表检测报名表w案例目标案例目标 本本案案例例将将对对报报名名表表进进行行检检测测设设置置，主主要要介介绍绍行行为为中中的的表表单单检检测测动动作作及及行行为为的的添添加加和和使使用用方法，完成后的效果如下图所示。方法，完成后的效果如下图所示。6.2.2 典型案例典型案例检测报名表检测报名表6.2.2 典型案例典型案例检测报名表检测报名表w操作思路：操作思路：（1）将）将“baoming.html”文档另存为文档另存为“baoming1.html”文档。文档。（2）选取整个表单，在）选取整个表单，在【行为行为】面板中设置各个面板中设置各个文本域是否为必填项、文本内容是否必须为数文本域是否为必填项、文本内容是否必须为数字等。字等。（3）保存文档，在浏览器中填写表单并提交。）保存文档，在浏览器中填写表单并提交。6.2.2 典型案例典型案例检测报名表检测报名表w案例小结案例小结 本例对报名表进行了检测设置，主要介绍了检测本例对报名表进行了检
