《网页设计实用教程》第08章.ppt

《《网页设计实用教程》第08章.ppt》由会员分享，可在线阅读，更多相关《《网页设计实用教程》第08章.ppt（40页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第8 章 表单操作第八章网校在线报名表单.html 学习目的：v 插入表单v 插入文本或文本域v 插入单选按钮和复选框v 插入图像域与隐藏域v 插入“列表/菜单域”与跳转菜单本章概述：v 本章将介绍一个网上在线报名表单制作的实例，v 通 过 该 实 例 的 学 习，读 者 可 以 学 会DreamweaverMX 关于表单的基本操作，v 以 此 为 驱 动，进 一 步 全 面 地 介 绍 表 单 对 象 面 板上的10个表单域对象的使用及其属性，v 通 过 这 些 知 识 的 学 习，可 帮 助 读 者 在 网 页 上 轻松地设计出各种类型的表单。8.1 制作一个网上报名表单 表单，是一个专业

2、网站必不可少的内容，它是一个网站是否具有交互功能的重要体现。通过表单，可以得到用户的反馈信息，如进行各种网上调查、进行注册登记、收到用户订货单等。本小节介绍一个网上报名表单的实例。如图8-1 所示，是读者经常在网上看到的一种表单形式，通过客户端的信息输入并通过“提交”按钮来完成，可以把用户输入的信息发送到服务器端或网页设计者指定的信箱中。本小节要完成的任务，既包括该表单的制作，也包括该表单在网上提交直到完成接收的全过程。图8-1 网上报名表单的效果图8.1.1 制作网上在线报名表单 制作上述网上报名表单的操作步骤。动作：mailto:?subject=网上报名 enctype=text/pla

3、in“编码类型enc=ENCode,编码图8-2图8-3图8-4图8-6图8-5 1、文本字段（文本域）图8-8图8-72、单选按钮3、列表/菜单域图8-10图8-11图8-94、复选框图8-13图8-12 5、文本区域 6、按钮图8-148.1.2 预览网上在线报名表单 制作好网上报名表单后，现在可通过浏览器来预览效果了，具体操作步骤请参见书的介绍。图8-15图8-18图8-17 图8-16密码：jszx03 上一节介绍了一个网上在线报名表单制作的例子，本 小 节 将 在 此 基 础 上，对 表 单 在 网 页 设 计 中 的 应 用 进 一步介绍，这样可以较系统了解表单应用的知识。在表单对

4、象面板上，共包括10 个表单域对象，如图8-19所示，接下来对此逐一进行讲解。插入表单插入按钮单选按钮隐藏域文本字段 复选框列 表/菜 单域图像域文本域单 选 按 钮组跳 转 菜 单域标签文件字段字段集图8-19 表单对象面板8.2 知识要点8.2.1 插入表单 插 入 表 单 是 创 建 表 单 的 第 一 步，表 单 对 象 面 板 中的 其 他 对 象 都 只 有 依 赖 它 才 能 存 在。插 入 表 单 有三种方法：通过主菜单“插入/表单”来实现。单击“表单”面板中的“插入表单”按钮来实现。拖 动“表 单”面 板 中 的“插 入 表 单”按 钮 到 文 档 中 的插入点来实现。表单名

5、称动作mailto:电子邮件?subject=主题表 单 属 性 面 板 上 的“方 法”共 有（默 认）、（POST）、（GET）三个选项。图8-208.2.2 插入文本对象表单 与Dreamweaver 以 前 的 版 本 不 同 的 是DreamweaverMX所提供的表单工具既可以直接插入“文本字段”，也可以插入“文本区域”。其插入的方法同样有三种：通 过 主 菜 单“插 入”/“表 单 对 象”/“文 本 字 段（文 本 区 域）”命 令 来实现。单击“表单”面板中的“插入文本字段”、“文本域”按钮等来实现。拖动“表单”面板中的相应按钮到表单中的插入点来实现。图8-21图8-22插入

6、按钮与插入文本域一样，有三种方法，这里不再介绍，当按钮被插入后，按钮的属性面板会出现，可 以 通 过 该 属 性 面 板 方 便 地 对 按 钮 属 性 进 行 修 改，如 图8-23 所示。图8-23 按钮属性面板8.2.3 插入按钮 8.2.4 插入复选框 插 入 复 选 框 也 有 三 种 方 法，这 里 不 再 介 绍，当 复 选 框 被 插 入 后，复 选 框 的 属 性 面 板 会 出现，可以通过该属性面板方便地对复选框属性进行修改，如图8-24 所示。8.2.5 插入单选按钮 插 入 单 选 按 钮 也 有 三 种 方 法，这 里 不 再 介 绍，当 单 选 按 钮 被 插 入

7、后，单 选 按 钮 的 属 性 面板会出现，可以通过该属性面板方便地对单选按钮属性进行修改，如图8-25 所示。8.2.6 插入列表/菜单域 插 入 列 表/菜 单 域 也 有 三 种 方 法，这 里 不 再 介 绍，当 列 表/菜 单 域 被 插 入 后，列 表/菜 单 域的属性面板会出现，可以通过该属性面板方便地对列表/菜单域属性进行修改，如图8-26 所示。图8-24 复选框的属性面板图8-25 单选按钮的属性面板图8-26 列表/菜单域的属性面板表单其他元素练习 第八章文件域图像域隐藏域跳转菜单.htm隐藏域值为2005-05-248.2.7 插入文件域 有时，需要获取一些来自访问者的

8、信息，这些信息也许太复杂，无法在文本区域中处理。这时，借助于文件域，可以让用户将整个文件传送到服务器上，例如，一份个人简历文件、一个图片文件等。插入文件域也有三种方法，这里不再介绍，当 文 件 域 被 插 入 后，文 件 域 的 属 性 面 板 会 出 现，可 能 通 过 该 属 性面板方便地对文件域属性进行修改，如图8-27 所示。图8-27 文件域的属性面板 图8-28 如 果 对 文 字 形 式 的 提 交 按 钮 不 太 满 意，可 以 通 过 使 用“插 入图 像 域”命 令 在 表 单 中 插 入 图 像，从 而 制 作 一 个 更 加 吸 引 人的“提交”按钮。当 然 也 可 以

9、 使 用 图 形 按 钮 来 执 行 其 他 的 表 单 操 作 如“重 置”或“播放声音”等。但要达到这些效果，需要为表单对象附加行为。可 以 使 用Dreamweaver 行 为 面 板 来 附 加 行 为，也 可 以 使 用JavaScript 代码实现。插入图像域也有三种方法，这里不再介绍，当 图 像 域 被 插 入 后，图 像 域 的 属 性 面 板 会 出 现，可 能 通 过 该属性面板方便地对图像域属性进行修改，如图8-29 所示。图8-29 图像域的属性面板8.2.8 插入图像域8.2.9 插入隐藏域(隐 藏 域)对 于 站 点 访 问 者 来 说 是 不 可 见 的，在 电

10、子 商 务性质的网站中，经常用它来实现表单提交的参数传递。当 隐 藏 域 被 插 入 后，隐 藏 域 的 属 性 面 板 会 出 现，可 能通 过 该 属 性 面 板 方 便 地 对 隐 藏 域 属 性 进 行 修 改，如 图8-30 所示。图8-30 隐藏域的属性面板 跳 转 菜 单 提 供 了 一 个 和“列 表/菜单域”一样的外观，不 同 之 处 在 于，当 用 鼠 标 单 击列 表 内 的 任 一 选 项 时，可 以 访问该选项所链接的页面。要 在 表 单 中 插 入 跳 转 菜 单，单 击表 单 对 象 面 板 上 的“”按 钮，此时 出 现“插 入 跳 转 菜 单”对 话 框。通

11、过“+”与“-”来 增 删 条 目，通过URL 来实现链接。当 跳 转 菜 单 被 插 入 后，跳 转 菜 单的 属 性 面 板 会 出 现，可 能 通 过 该属 性 面 板 方 便 地 对 跳 转 菜 单 属 性进行修改，如图8-32 所示。图8-32 跳转菜单的属性面板8.2.10 插入跳转菜单图8-31 跳转菜单的对话框图8-348.3 本章小结 本章介绍了一个网上在线报名表单提交制作的实例，通 过 这 个 实 例，读 者 基 本 学 习 了Dreamweaver 网 页 设 计中表单的应用，为使读者全面了解表单制作功能，进一步对表单对象面板“插 入 表 单”、“插 入 文 本 域”、“插 入 按 钮”、“插 入复 选 框”、“插 入 单 选 按 钮”、“插 入 列 表/菜 单 域”、“插 入 文 件 域”、“插 入 图 像 域”、“插 入 隐 藏 域”、“插入跳转菜单”等10 个表单域对象进行了全面的介绍。