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

《电子商务网站建设第6章19210.pptx》由会员分享，可在线阅读，更多相关《电子商务网站建设第6章19210.pptx（70页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、单 元 素 中 输 入 信 息，然 后提交这些信息到服务器进行处理。6.1 应用表单w 6.1.1 知识讲解w 6.1.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.添加列表/菜单 列表/菜单表单元素即是在一个列表中显示选项值，用户可以从该列表中选择多个选项。当页面空间有限，又需要显示许多选项时，就使用菜单，菜单中只显示一个选项，其他的选项被隐藏。列表/菜单的添加方法如下：

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

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

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

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

9、 板，如下 图 所 示。通 过【行 为】面 板，将 行 为 添 加 到页 面 元 素 中，即 可 实 现 相 应 的 操 作，已 添 加 到当 前 文 档 的 行 为 显 示 在 行 为 列 表 中，并 按 字 母顺序排列。2.添加行为 行 为 可 以 添 加 到 整 个 文 档，也 可 以 添 加 到 链 接、图 像、表 单 或 其 他HTML 元 素 中，但 不 能 将 行 为添 加 到 纯 文 本 上，因 为 和 等 标 签 不能 在 浏 览 器 中 生 成 事 件。如 果 要 给 文 本 指 定 行为，则 需 要 先 给 该 文 本 指 定 一 个 链 接，即 创 建空链接。6.2.2

10、 典型案例检测报名表w 案例目标 本 案 例 将 对 报 名 表 进 行 检 测 设 置，主 要 介 绍行 为 中 的 表 单 检 测 动 作 及 行 为 的 添 加 和 使 用方法，完成后的效果如下图所示。6.2.2 典型案例检测报名表6.2.2 典型案例检测报名表w 操作思路：（1）将“baoming.html”文档另存为“baoming1.html”文档。（2）选取整个表单，在【行为】面板中设置各个文本域是否为必填项、文本内容是否必须为数字等。（3）保存文档，在浏览器中填写表单并提交。6.2.2 典型案例检测报名表w 案例小结 本例对报名表进行了检测设置，主要介绍了检测表单行为的添加方法

11、。行为的添加比较简单，重要的是对各个行为动作的设置。本例中的“检测表单”行为用于检测文本的输入是否正确，如果出错将弹出提示信息，以便访问者正确填写。6.3 插入媒体对象 媒体对象即含有图像和声音的对象。在Dreamweaver 中可以将Flash 动画与Shockwave 影片、QUICKTIME、AVI、Java Applet、Active X 控件，以及各种格式的音频文件嵌入到网页中。6.3 插入媒体对象w 6.3.1 知识讲解w 6.3.2 典型案例在网页中插入Flash动画和背景音乐6.3.1 知识讲解 本节将学习Flash 动画与元素的插入，以及视频与声音文件的嵌入方法。6.3.1

12、知识讲解1.插入Flash 动画 2.嵌入视频3.嵌入声音1.插入Flash 动画 Dreamweaver 自带有Flash 文本和Flash按钮，可以将其插入到网页中。除此之外，用户还可以插入Flash 动画，下面分别进行讲解。w 单击插入栏【常用】选项卡中 按钮旁 的下拉按钮，在弹出的【媒体】下拉菜单中选择 按钮对应的命令，打开【插入Flash 文本】对话框，如下图所示。1.插入Flash 动画 1.插入Flash 动画w 单击插入栏【常用】选项卡中 按钮旁的下拉按钮，在弹出的【媒体】下拉菜单中选择 按钮对应的命令，打开【插入Flash 按钮】对话框，如下图所示。1.插入Flash 动画1

13、.插入Flash 动画w Flash 文本与Flash 按钮在设计网页时使用比较少，使用较多的是在Flash 中制作的按钮和动画。单击插入栏【常用】选项卡中的 按钮，可插入站点中的Flash 动画，也可以从【文件】面板中直接拖动动画文件到页面中要插入Flash 动画的位置。2.嵌入视频w 各种视频文件都可以添加到网页，但有些视频文件需要相应的插件的支持才能正确显示。常见的视频文件有Flash 视频、Shockwave影片、AVI 和MPEG 文件等。w 视频文件可以通过链接方式嵌入，也可以作为插件嵌入。Flash 视频和Shockwave 影片可以分别通过插入栏【常用】选项卡中的【Flash

14、视频】和【Shockwave】按钮直接插入。3.嵌入声音 嵌入声音的方法有代码法、链接法、插件法和直接插入法4 种。6.3.2 典型案例在网页中插入Flash动画和背景音乐w 案例目标 本案例将在网页中插入Flash 动画和背景音乐，完成后的效果如右图所示。6.3.2 典型案例在网页中插入Flash动画和背景音乐w 操作思路：（1）将“index.html”文档另存为“flash.html”文档。（2）在代码视图中使用 标签添加背景音乐，并设置为循环播放。6.3.2 典型案例在网页中插入Flash动画和背景音乐w 案例小结 本例主要介绍了在代码视图中应用 标签添加背景音乐，及插入Flash 文

15、件的操作，这里添加背景音乐使用的是代码法。6.4 滚动特效 滚动特效在网页中使用得比较普遍，如新闻滚动或广告语滚动等。滚动特效是通过设置 标签及添加相应的属性参数来完成的。6.4 滚动特效w 6.4.1 知识讲解w 6.4.2 典型案例制作滚动栏6.4.1 知识讲解 本节将介绍 标签及对应的属性参数的应用。6.4.1 知识讲解1.认识 标签2.标签的属性参数1.认识 标签 标签用于制作可移动的文本效果，可以在 标签间的任意位置添加，其基本语法结构为：，在标签间可添加文本、表格、图像、动画、视频和表单等元素。2.标签的属性参数 标签的属性参数添加在“”中，各属性参数间用空格分隔，其属性参数有大小

16、、对齐方式、移动方式、移动方向、循环次数、速度和延迟方式等。6.4.2 典型案例制作滚动栏w 案例目标 本案例会将上一案例中的“最新礼品”栏制作成滚动栏，主要介绍 标签的使用及属性参数的设置，完成后的效果如下图所示。6.4.2 典型案例制作滚动栏6.4.2 典型案例制作滚动栏w 操作思路：（1）打开文件“flash.html”文档，然后另存为“marq.html”文档。（2）在代码视图中添加 标签。（3）设置 标签属性参数。6.4.2 典型案例制作滚动栏w 案例小结 本例制作了滚动栏，主要介绍了 标签的使用，滚动区的大小设置，循环播放、滚动方式、播放速度、对齐方式设置，以及鼠标对滚动对象的控制

17、等内容。在制作滚动效果时，如果要水平移动，可以指定“direction”参数的值为“left”或“right”，如果需要走走停停，可以指定“scrolldelay”参数的值。6.5 添加Spry 构件w 6.5.1 知识讲解w 6.5.2 典型案例制作选项卡式个人简历6.5.1 知识讲解 1.插入Spry 菜单栏 2.插入选项卡式面板 3.Spry 折叠式 4.插入Spry 可折叠面板1.插入Spry 菜单栏 在插入Spry 构件时应先保存文件，在插入构件后，将在站点中生成名为“SpryAssets”的文件夹，用于存放Spry 构件所需的样式表文件和脚本程序。单击插入栏【Spry】选项卡中的

18、按钮，打开对话框，设置菜单栏的布局方向，单击【确定】按钮，在页面中插入菜单栏，如下图所示。2.插入选项卡式面板 单击插入栏【Spry】选项卡中的 按钮，在文档中插入选项卡式面板，如下图所示。2.插入选项卡式面板 更改选项卡中的文字内容与格式，与修改单元格中的内容及格式的方法相同，要修改被隐藏的选项卡内容时，将鼠标移至选项卡名称的位置，单击 图标，即可将该选项卡设置为当前选项卡，从而可对其进行编辑。3.Spry 折叠式 单击插入栏【Spry】选项卡中的 按钮，在文档中插入Spry 折叠式，如下图所示。4.插入Spry 可折叠面板 单击插入栏【Spry】选项卡中的 按钮，在文档中插入可折叠面板，如

19、下图所示。6.5.2 典型案例制作选项卡式个人简历w 案例目标 本例通过制作选项卡式个人简历，主要介绍Spry 选项卡式面板的插入、属性设置及内容的添加，同时了解Spry 构件的基本使用方法，完成后的效果如右图所示。6.5.2 典型案例制作选项卡式个人简历w 操作思路：（1）在站点中新建文档“jl.html”，打开并编辑该文档。（2）在页面中插入Spry 选项卡式面板并设置其属性。（3）在选项卡相应位置添加内容。6.5.2 典型案例制作选项卡式个人简历w 案例小结 本例制作了选项卡式简历，主要介绍了Spry构件的插入、属性设置、内容修改以及设置构件对应的CSS 样式等。在修改Spry 构件内容

20、的时候，可以将它当成是普通的对象直接更改，修改其外观样式时可以修改外观样式所对应的CSS 样式。6.6 上机练习w 6.6.1 利用Spry 折叠式制作简历w 6.6.2 制作“信息反馈”栏目6.6.1 利用Spry 折叠式制作简历 下面练习Spry 折叠式的使用，如下图所示，主要练习Spry 折叠式的属性设置，内容添加及CSS 样式的修改。6.6.1 利用Spry 折叠式制作简历 操作思路：w 新建文档并插入Spry 折叠式。w 添加项目。w 设置项目标题名称，在对应的内容区域插入内容。w 设置对应区域的CSS 样式。6.6.2 制作“信息反馈”栏目 下面，在“联系我们”页面中增加“信息反馈”栏目，主要练习表单及表单元素的使用，效果如右图所示。6.6.2 制作“信息反馈”栏目 操作思路：w 打开“lianxi2.html”文档。w 在“联系信息”栏的下方插入表单，并插入9 行2列，宽为“100”的表格，设置表格属性。w 添加表单元素，在【属性】面板中为每个文本域设置不同的名称。