《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件 第五章表单的应用》由会员分享，可在线阅读，更多相关《Dreamweaver CS4网页设计与制作 教学课件 ppt 作者 何富贵 课件 第五章表单的应用（22页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver CS4 网页设计与制作,第五章表单的应用,表单和表单对象 创建表单 插入表单对象 Spry类表单对象 表单和表单对象的应用,主要内容,掌握使用表单对象设计网页界面 掌握使用Spry类表单对象设计网页界面,本章目标,一个网站不仅需要各种供用户浏览的网页，而且还需要与用户进行交互的表单。表单是实现用户调查、产品订单和对象搜索设置等功能的重要手段。利用表单处理程序，可以收集、分析用户的反馈意见，做出科学的、合理的决策。 通常，一个表单中包含多个对象，这些对象有时也称为控件或表单元素，如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框以及用于显示列表项的
2、列表框等。 表单实现了浏览器和服务器之间的信息传递，它使网页由单向浏览变成了双向交互。,5.1 表单概述,表单（Form）是一种结构化的文件，用于收集用户信息，并将其提交到服务器，从而实现与用户的交互。 一个完整的表单应该包含两个部分：一是在网页中进行描述的表单对象；二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。浏览器处理表单的过程一般是这样的：用户在表单输入数据，然后提交表单，浏览器根据表单体中的设置处理用户输入的数据。若表单指定通过服务器端的脚步程序进行处理，则该程序处理完毕后将结果反馈给浏览器；若表单指定通过客户端的脚本程序处理，则处理完后也会将结果反馈
3、给用户。,5.2表单和表单对象,表单对象,表单对象,页面处于“设计”视图，将插入点放在希望表单出现的位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“表单”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“表单”按钮 。 一个表单插入到网页中后，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须放入这个框内才能起作用。如果看不见到页面中的此轮廓线。请检查是否选中了“查看”“可视化助理”“不可见元素”。,5.3创建表单,设置表单属性 将鼠标指针置于表单的轮廓线上单击选中表单，即可看到表单的“属性”面板,5.3创建表单,表单“属性”面
4、板,5.4.1插入文本字段 操作步骤如下： 页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“文本域”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“文本字段”按钮 。 将弹出“输入标签辅助功能属性”对话框 单击“确定”按钮，在表单的光标位置插入一个 文本域。,5.4 插入表单对象,页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“文本区域”。 在“插入”工具栏中选择“表单”类别，然后单击工具
5、栏中的“文本区域”按钮 。 弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表单的光标位置插入一个 文本区域。,5.4.2插入文本区域,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“复选框组”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“复选框组”按钮 。 （2）弹出“复选框组”对话框，如图5-11所示，在对话框，可以按 增加复选框或按 减少复选框，按 移动复选框的位置。复选框的“值”（即“属性”面板中的“选定值”）用来设置在该复选框被选中时发送给服务
6、器的。 （3）单击“确定”按钮，在表单的光标位置插入一个复选框组，包括两个复选框， “复选框组”对话框,5.4.3插入复选框组,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“单选按钮组”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“单选按钮组”按钮 。 （2）弹出“单选按钮组”对话框，对话框，可以按 增加单选按钮或按 减少单选按钮，按 按钮可以调整单选按钮的排列顺序。单选按钮的“值”（即“属性”面板中的“选定值”）用来设置在该单选按钮被选中时发送给服务器的值。
7、 （3）单击“确定”按钮，在表单的光标位置插入一个单选按钮组，包括两个单选按钮.,5.4.4插入单选按钮组,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“列表/菜单”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“列表/菜单”按钮 。 （2）将弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表单的光标位置插入一个列表/菜单。,5.4.5插入列表/菜单,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在D
8、reamweaver CS4主窗口中，单击菜单“插入”“表单”“跳转菜单”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“跳转菜单”按钮 。这时弹出“插入跳转菜单”对话框， （2）单击“确定”按钮，插入跳转菜单,5.4.6插入跳转菜单,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“图像域”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“图像域”按钮 。 （2）在弹出的“选择图像源文件”对话框中选择要作为按钮的图像. （3）单击“确定”按钮，插入图像域
9、，,5.4.7插入图像域,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“文件域”。 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的“文件域”按钮 。 （2）将弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表单的光标位置插入一个文件域。,5.4.8插入文件域,操作步骤如下： （1）页面处于“设计”视图，将插入点放在表单中插入位置，插入表单执行下列操作之一： 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”“按钮”。 在“插入”工具栏中选择“
10、表单”类别，然后单击工具栏中的“按钮”按钮 。 （2）将弹出“输入标签辅助功能属性”对话框，单击“确定”按钮，在表单的光标位置插入一个按钮。,5.4.9插入按钮,Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。 Sp
11、ry 构件 是一个页面元素，通过启用用户交互来提供更丰富的用户体验。Spry 构件由以下几个部分组成： 构件结构用来定义构件结构组成的 HTML 代码块。 构件行为用来控制构件如何响应用户启动事件的 JavaScript。 构件样式用来指定构件外观的 CSS。,5.5 Spry类表单对象,Spry类表单对象共有七种，它们分别是： Spry验证文本域。 Spry验证文本区域。 Spry验证复选框。 Spry验证选择。 Spry验证密码。 Spry验证确认 Spry验证单选按钮组。,5.5 Spry类表单对象,插入Spry类表单对象的步骤和其他表单对象相似，具体如下： （1）页面处于“设计”视图，
12、将插入点放在表单中插入位置，插入表单执行下列操作之一： 在“插入”工具栏中选择“表单”类别，然后单击工具栏中的Spry类表单对象，在蓝色矩形框内的按钮对象 在Dreamweaver CS4主窗口中，单击菜单“插入”“表单”， 在“表单”的下级菜单中选择Spry类菜单项。 （2）将弹出“输入标签辅助功能属性”对话框，进行相应的设置，其中“Spry验证单选按钮组”将弹出“Spry验证单选按钮组”对话框，设置后，单击“确定”按钮，在光标位置插入一个Spry类表单对象。,5.5 Spry类表单对象,5.5 Spry类表单对象,“插入”工具栏“Spry类表单对象”,Spry类菜单项 “Spry验证单选按钮组”对话框,本部分结束,
