电子商务网站建设第6章.ppt

1、第6章 动态网页技术,本课要点 具体要求 本课导读,本课要点,应用表单 使用行为 插入媒体对象 滚动特效,具体要求,掌握表单的创建及表单元素的使用 熟悉行为的设置方法 掌握动画、声音和视频的添加 了解标签及属性参数,本课导读,动态网页技术主要包含表单的提交、行为控制、Flash动画的插入、影片的插入、声音的添加、滚动效果的制作等，合理地使用这些动态元素，可以为网页添加丰富的动态效果。,6.1 应用表单,表单的作用是从访问者那里获取信息验证。访问者可以在文本域、列表框、复选框以及单选按钮等表单元素中输入信息，然后提交这些信息到服务器进行处理。,6.1 应用表单,6.1.1 知识讲解 6.1.2

2、典型案例制作“在线报名”页面,6.1.1 知识讲解,本节将学习表单的创建及表单元素的属性设置等知识。,6.1.1 知识讲解,1. 表单 2. 添加文本域 3. 添加复选框 4. 单选按钮及单选按钮组 5. 添加列表/菜单 6. 添加跳转菜单 7. 添加文件域 8. 添加按钮,1. 表单,表单是放置表单元素的区域，表单内的元素通过用户单击【提交】按钮，将所有填写的信息提交给服务器进行处理。 创建表单的具体操作如下： （1）在打开的文档中，将鼠标光标定位在要插入表单的位置。 （2）选择【插入记录】【表单】【表单】命令，或在插入栏的【表单】选项卡中单击 按钮，在指定位置添加一个红色的虚线框，即表单。

3、,2. 添加文本域,文本域用于创建一个包含单行或多行文本的区域。用户可以创建一个隐藏用户输入文本的密码文本域。 添加文本域的具体操作如下： （1）将鼠标光标定位在表单中要添加文本域的位置。 （2）在插入栏的【表单】选项卡中单击 或 按钮，即可在指定位置添加文本域。,3. 添加复选框,允许用户从一组选项中同时选择多个选项，这些选项就是复选框，选中时显示为 。 添加复选框的具体操作如下： （1）将鼠标光标定位在要添加复选框的位置。 （2）在插入栏的【表单】选项卡中单击 按钮，即可在指定位置添加复选框。,4. 单选按钮及单选按钮组,单选按钮是要求用户只能从一组选项中选择一个选项的表单元素。单选按钮通

4、常成组地使用，在同一个组中的所有单选按钮必须具有相同的名称。,4. 单选按钮及单选按钮组,添加单选按钮的具体操作如下： （1）将鼠标光标定位在要添加单选按钮的位置。 （2）在插入栏的【表单】选项卡中单击 按钮，在指定位置添加单选按钮。若单击 按钮，可打开【单选按钮组】对话框，添加单选按钮组。 （3）设置完成后，单击【确定】按钮。,5. 添加列表/菜单,列表/菜单表单元素即是在一个列表中显示选项值，用户可以从该列表中选择多个选项。当页面空间有限，又需要显示许多选项时，就使用菜单，菜单中只显示一个选项，其他的选项被隐藏。 列表/菜单的添加方法如下： （1）将鼠标光标定位在表单中要添加列表/菜单的位

5、置。 （2）在插入栏的【表单】选项卡中单击 按钮，即可在指定位置添加列表/菜单。,6. 添加跳转菜单,跳转菜单类似于弹出菜单，可给菜单中的选项添加URL链接，如果不指定链接，则与列表/菜单的属性相同。 添加跳转菜单的具体操作如下： （1）将鼠标光标定位在要添加跳转菜单的位置。 （2）在插入栏的【表单】选项卡中单击 按钮，打开【插入跳转菜单】对话框。 （3）设置完成后单击【确定】按钮。,7. 添加文件域,使用文件域表单元素，用户可以选择本地计算机上的文件，并将该文件上传到服务器。文件域的外观与文本域类似，只是文件域多一个【浏览】按钮。在文件域的文本框中可以手动输入要上传的文件路径，也可以单击【浏

6、览】按钮指定上传文件。 添加文件域的具体操作如下： （1）将鼠标光标定位在要添加文件域的位置。 （2）在插入栏的【表单】选项卡中单击 按钮，插入文件域。,8. 添加按钮,按钮有两种：一种是图像域，另一种是普通按钮。 图像域是用图像作为按钮图标，用于提交或重置表单信息等，与普通按钮的功能相同。 在插入栏的【表单】选项卡中单击 按钮，打开【选择图像源文件】对话框，从计算机中找出要作为按钮图标的图像，单击【确定】按钮，插入的图像即为图像域。 在插入栏的【表单】选项卡中单击 按钮，在鼠标光标处可插入普通按钮。,6.1.2 典型案例制作“在线报名”页面,案例目标 本案例将制作一份“在线报名”页面，主要介

7、绍表单的创建以及表单元素的添加与设置等，完成的效果如下图所示。,6.1.2 典型案例制作“在线报名”页面,6.1.2 典型案例制作“在线报名”页面,操作思路： （1）在ls6站点中建立“baoming.html”文档。 （2）插入2行1列的表格，添加表格标题。 （3）在第2行添加表单，并在表单中添加一个20行3列的表格。 （4）依次在单元格中添加报名表内容及对应的表单元素。,6.1.2 典型案例制作“在线报名”页面,案例小结 本案例制作了一份在线报名的网页，主要介绍了表单的创建、文本域、单选按钮、复选框、列表/菜单及按钮的添加与属性设置等内容。在制作表单时，可以通过CSS规则定义中的【方框】类

8、别来指定表单中的文本域和按钮等元素的宽度和高度。,6.2 使用行为,使用行为可将JavaScript代码嵌入到文档中，使访问者可以与Web页进行交互，从而以多种方式更改页面或执行任务。行为由事件和该事件触发的动作两部分组成。,6.2 使用行为,6.2.1 知识讲解 6.2.2 典型案例检测报名表,6.2.1 知识讲解,本节将介绍【行为】面板和添加行为的方法。,6.2.1 知识讲解,1. 认识【行为】面板 2. 添加行为,1. 认识【行为】面板,按【Shift+F4】组合键打开【行为】面板，如下图所示。通过【行为】面板，将行为添加到页面元素中，即可实现相应的操作，已添加到当前文档的行为显示在行为

9、列表中，并按字母顺序排列。,2. 添加行为,行为可以添加到整个文档，也可以添加到链接、图像、表单或其他HTML元素中，但不能将行为添加到纯文本上，因为和等标签不能在浏览器中生成事件。如果要给文本指定行为，则需要先给该文本指定一个链接，即创建空链接。,6.2.2 典型案例检测报名表,案例目标 本案例将对报名表进行检测设置，主要介绍行为中的表单检测动作及行为的添加和使用方法，完成后的效果如下图所示。,6.2.2 典型案例检测报名表,6.2.2 典型案例检测报名表,操作思路： （1）将“baoming.html”文档另存为“baoming1.html”文档。 （2）选取整个表单，在【行为】面板中设置

10、各个文本域是否为必填项、文本内容是否必须为数字等。 （3）保存文档，在浏览器中填写表单并提交。,6.2.2 典型案例检测报名表,案例小结 本例对报名表进行了检测设置，主要介绍了检测表单行为的添加方法。行为的添加比较简单，重要的是对各个行为动作的设置。本例中的“检测表单”行为用于检测文本的输入是否正确，如果出错将弹出提示信息，以便访问者正确填写。,6.3 插入媒体对象,媒体对象即含有图像和声音的对象。在Dreamweaver中可以将Flash动画与Shockwave影片、QUICKTIME、AVI、Java Applet、Active X控件，以及各种格式的音频文件嵌入到网页中。,6.3 插入媒

11、体对象,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

12、. 插入Flash动画,单击插入栏【常用】选项卡中 按钮旁的下拉按钮，在弹出的【媒体】下拉菜单中选择 按钮对应的命令，打开【插入Flash按钮】对话框，如下图所示。,1. 插入Flash动画,1. 插入Flash动画,Flash文本与Flash按钮在设计网页时使用比较少，使用较多的是在Flash中制作的按钮和动画。单击插入栏【常用】选项卡中的 按钮，可插入站点中的Flash动画，也可以从【文件】面板中直接拖动动画文件到页面中要插入Flash动画的位置。,2. 嵌入视频,各种视频文件都可以添加到网页，但有些视频文件需要相应的插件的支持才能正确显示。常见的视频文件有Flash视频、Shockwav

13、e影片、AVI和MPEG文件等。 视频文件可以通过链接方式嵌入，也可以作为插件嵌入。Flash视频和Shockwave影片可以分别通过插入栏【常用】选项卡中的【Flash视频】和 【Shockwave】按钮直接插入。,3. 嵌入声音,嵌入声音的方法有代码法、链接法、插件法和直接插入法4种。,6.3.2 典型案例在网页中插入Flash动画和背景音乐,案例目标 本案例将在网页中插入Flash动画和背景音乐，完成后的效果如右图所示。,6.3.2 典型案例在网页中插入Flash动画和背景音乐,操作思路： （1）将“index.html”文档另存为“flash.html”文档。 （2）在代码视图中使用标

14、签添加背景音乐，并设置为循环播放。,6.3.2 典型案例在网页中插入Flash动画和背景音乐,案例小结 本例主要介绍了在代码视图中应用标签添加背景音乐，及插入Flash文件的操作，这里添加背景音乐使用的是代码法。,6.4 滚动特效,滚动特效在网页中使用得比较普遍，如新闻滚动或广告语滚动等。滚动特效是通过设置标签及添加相应的属性参数来完成的。,6.4 滚动特效,6.4.1 知识讲解 6.4.2 典型案例制作滚动栏,6.4.1 知识讲解,本节将介绍标签及对应的属性参数的应用。,6.4.1 知识讲解,1. 认识标签 2. 标签的属性参数,1. 认识标签,标签用于制作可移动的文本效果，可以在标签间的任

15、意位置添加，其基本语法结构为：，在标签间可添加文本、表格、图像、动画、视频和表单等元素。,2. 标签的属性参数,标签的属性参数添加在“”中，各属性参数间用空格分隔，其属性参数有大小、对齐方式、移动方式、移动方向、循环次数、速度和延迟方式等。,6.4.2 典型案例制作滚动栏,案例目标 本案例会将上一案例中的“最新礼品”栏制作成滚动栏，主要介绍标签的使用及属性参数的设置，完成后的效果如下图所示。,6.4.2 典型案例制作滚动栏,6.4.2 典型案例制作滚动栏,操作思路： （1）打开文件“flash.html”文档，然后另存为“marq.html”文档。 （2）在代码视图中添加标签。 （3）设置标签

16、属性参数。,6.4.2 典型案例制作滚动栏,案例小结 本例制作了滚动栏，主要介绍了标签的使用，滚动区的大小设置，循环播放、滚动方式、播放速度、对齐方式设置，以及鼠标对滚动对象的控制等内容。 在制作滚动效果时，如果要水平移动，可以指定“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菜单栏,在

17、插入Spry构件时应先保存文件，在插入构件后，将在站点中生成名为“SpryAssets”的文件夹，用于存放Spry构件所需的样式表文件和脚本程序。 单击插入栏【Spry】选项卡中的 按钮，打开对话框，设置菜单栏的布局方向，单击【确定】按钮，在页面中插入菜单栏，如下图所示。,2. 插入选项卡式面板,单击插入栏【Spry】选项卡中的 按钮，在文档中插入选项卡式面板，如下图所示。,2. 插入选项卡式面板,更改选项卡中的文字内容与格式，与修改单元格中的内容及格式的方法相同，要修改被隐藏的选项卡内容时，将鼠标移至选项卡名称的位置，单击 图标，即可将该选项卡设置为当前选项卡，从而可对其进行编辑。,3. S

18、pry折叠式,单击插入栏【Spry】选项卡中的 按钮，在文档中插入Spry折叠式，如下图所示。,4. 插入Spry可折叠面板,单击插入栏【Spry】选项卡中的 按钮，在文档中插入可折叠面板，如下图所示。,6.5.2 典型案例制作选项卡式个人简历,案例目标 本例通过制作选项卡式个人简历，主要介绍Spry选项卡式面板的插入、属性设置及内容的添加，同时了解Spry构件的基本使用方法，完成后的效果如右图所示。,6.5.2 典型案例制作选项卡式个人简历,操作思路： （1）在站点中新建文档“jl.html”，打开并编辑该文档。 （2）在页面中插入Spry选项卡式面板并设置其属性。 （3）在选项卡相应位置添加内容。,6.5.2 典型案例制作选项卡式个人简历,案例小结 本例制作了选项卡式简历，主要介绍了Spry构件的插入、属性设置、内容修改以及设置构件对应的CSS样式等。在修改Spry构件内容的时候，可以将它当成是普通的对象直接更改，修改其外观样式时可以修改外观样式所对应的CSS样式。,6.6 上机练习,6.6.1 利用Spry折叠式制作简历 6.6.2 制作“信息反馈”栏目,6.6.1 利用Spry折叠式制作简历,下面练习Spry折叠式的使用，如下图所示，主要