Dreamweaver表单制作教学资料

Dreamweaver中如何创建表单和处理数据Dreamweaver是一种功能强大的网页开发工具，它提供了简便的界面和丰富的功能来创建网页。

在网页设计中，表单是一项重要的功能，可以让用户与网页进行交互，并收集用户提交的数据。

本文将介绍如何在Dreamweaver中创建表单，以及如何处理表单提交的数据。

第一章：创建表单Dreamweaver提供了简单的方式来创建表单。

首先，在Dreamweaver的工具栏上找到“表单”工具，点击它，然后在页面上拖动鼠标来创建一个表单区域。

接下来，通过在表单区域上点击右键，选择“插入表单元素”来添加各种表单元素，如文本框、下拉列表、复选框等。

在添加元素时，可以设置它们的属性，如名称、类型、默认值等。

第二章：表单验证表单验证是确保用户输入的数据符合预期格式和要求的重要步骤。

Dreamweaver提供了多种验证方法。

例如，可以使用Dreamweaver提供的预设验证规则，如必填字段、电子邮件格式验证等。

也可以自定义验证规则，通过正则表达式来验证输入的数据。

通过选择表单元素，然后在属性面板中选择“验证”选项，可以简单地配置表单验证。

第三章：表单布局好的表单布局可以提升用户体验，并使表单更易于阅读和填写。

Dreamweaver提供了多种布局选项。

可以使用表格布局，将表单元素放入表格单元格中。

也可以使用CSS布局，通过设置样式来控制表单元素的排列方式。

此外，Dreamweaver还提供了对响应式设计的支持，可以根据设备的屏幕尺寸来调整表单的布局。

第四章：处理表单提交数据当用户填写完表单并点击提交按钮时，需要将表单提交的数据发送到服务器进行处理。

在Dreamweaver中，可以使用服务器端脚本语言（如PHP、等）来处理表单数据。

首先，在服务器上创建一个接收数据的脚本文件，例如“process.php”。

然后，在表单的“动作”属性中设置为指向该脚本文件的URL。

这样，当用户提交表单时，表单数据将被发送到服务器上的脚本文件进行处理。

第7章表单在制作动态网页时，要实现信息交互，常常用到表单。

常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。

本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。

【学习目标】●了解Web服务器的作用。

●掌握IIS的安装和设置方法。

●掌握更改站点设置的方法。

●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。

●能够综合使用各种表单栏目制作留言簿。

●知道发送表单结果的多种方法。

●掌握验证表单的方法。

7.1 关于表单表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。

表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。

表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。

在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。

下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。

7.2 表单元素表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。

表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。

在建立表单网页之前，首先就要建立一个表单域。

在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。

在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示7.2.1 插入表单（1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示（2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。

第7章 应用表单如果想通过网页收集用户的信息或通过网页对用户开展调查，就需要设计表单网页来进行信息的交互。

表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。

常见的表单有搜索表单、用户登录注册表单、调查表单等。

【学习目标】∙熟悉表单的基本概念和应用方法。

∙掌握创建表单元素的操作方法。

∙掌握设置表单元素的操作方法。

∙掌握验证表单的操作方法。

7.1 创建表单使用Dreamweaver CS5可以创建各种表单元素，如文本域、复选框、单选框、按钮和文件域等。

在【插入】面板的“表单”类别中列出了所有表单元素，如图7-1所示。

图7-1 “表单”类别7.1.1 创建表单的操作方法下面将以设计“海底世界”网的注册页面为例来讲解表单的创建和设置方法，设计效果如图7-2所示。

一、插入表单表单是表单元素的容器，为了能让浏览器正确处理表单元素的相关数据信息，表单元素必须插在表单之中。

表单以红色虚线框显示，但在浏览器中是不可见的。

Dreamweaver CS5中文版基础教程168图7-2 设计“海底世界”网1.打开附盘文件“素材\第7章\海底世界\index.html ”，如图7-3所示。

2. 将光标置于主体文本“加入我们”下方的空白单元格中，选择菜单命令【插入】/【表单】/【表单】，即可在光标处插入1个空白表单，如图7-4所示。

图7-3 打开素材文件 图7-4 插入表单 表单以红色虚线框显示。

3. 单击红色虚线选中表单，然后在属性检查器面板中设置【表单ID 】为“form1”，【方法】为“POST ”，【编码类型】为“application/x-www-form-urlencoded ”，【目标】为“_blank ”，如图7-5所示。

图7-5 设置表单属性长表单不能使用GET 方法。

实验8 Dreamweaver网页制作
一实验目的
掌握网页制作软件Dreamweaver的基本使用方法。

二、实验内容
设计效果不要求与图示完全一致，可根据自己的喜好调整。

素材利用现的电脑资源。

1. 做一个表单，要求密码在输入时为符号，性别只能选中一个。

其中“重置”、“提交”为二个按钮，功能不需具体实现。

如下图所示。

保存成form1.html.(注：所有的元素都必须在表单内（红色虚线内）)
操作提示：插入表单：插入｜表单
2. 做一个表单设计一个会员注册页面，所有内容放在一个3行1列的表格中，如下图所示。

要求密码在输入时为符号，性别只能选中一个。

其中“重写”、“放弃”、“提交”为三个按钮，功能不需具体实现。

保存成form2.html.(注：所有的元素都必须在表单内（红色虚线内）)，
3.设计如下图所示的网页，插入框架。

“猫咪相册”、“狗狗影集”和“白兔写真”超链接
到具体的内容。

操作提示：（1）插入框架：插入｜html|框架。

（找到合适的框架插入）
（2）框架保存：文件｜保存全部（注：三个区域，四个html文件）
（3）框架里的超链接：选中要超链接的文字，链接到具体的页面（具体的网页页面要自己再创建），链接目标选择mainframe.
交作业时，将本次课程中完成的姓名文件夹压缩（压缩文件名为学号后3位+姓名，如：101张三）后上传到FTP的相应班级文件夹中。

传错位置或文件命名不正确将视为未交作业！！。

Dreamweaver网站导航和表单设计指南第一章：导言Web设计中的导航和表单设计是构建用户友好性和易用性的关键因素之一。

Dreamweaver是一款功能强大的网页设计软件，用户可以通过该软件实现灵活、美观和交互性强的导航和表单设计。

本文将分享一些Dreamweaver中设计网站导航和表单的最佳实践，帮助设计师提升用户体验和网站功能性。

第二章：网站导航设计指南1. 导航类型选择- 在设计网站导航前，需要根据网站的需求和内容类型选择适合的导航类型。

常见的导航类型包括水平导航栏、垂直导航栏、标签导航和下拉菜单等。

根据网站结构和页面布局，选择相应的导航类型可以提高用户的导航体验。

2. 导航布局设计- 在Dreamweaver中设计导航布局时，应考虑整体页面的美观和易用性。

将导航放置在页面的顶部或侧边栏较为常见，同时确保导航的可见性和易于辨识。

使用清晰的字体和图标设计，以便用户快速理解和识别导航选项。

3. 导航交互设计- Dreamweaver提供了丰富的交互设计功能，如鼠标hover效果、点击效果和过渡效果等。

在设计导航时，可以通过这些交互设计功能来增加导航的可视性和可操作性。

例如，当用户将鼠标悬停在导航选项上时，可以显示下拉菜单或提示用户当前所在页面的状态。

4. 响应式导航设计- 移动设备的普及使得响应式导航设计成为必不可少的一环。

通过使用Dreamweaver提供的媒体查询功能，可以为不同屏幕尺寸的设备设计不同的导航布局和交互效果，以提供更好的用户体验。

确保导航在不同设备上均可显示和操作。

第三章：表单设计指南1. 表单元素选择- 表单是网站中重要的交互元素之一，需要设计师根据不同的信息收集需求选择合适的表单元素。

Dreamweaver提供了丰富的表单元素，如文本输入框、单选按钮、多选框和下拉菜单等。

根据信息类型和用户需求，选择合适的表单元素可以提高用户填写表单的效率和准确性。

2. 表单布局设计- 表单布局应当简洁明了，使用户能够快速理解和填写表单。

如何使用Dreamweaver创建网页表单第一章：介绍网页表单是网站开发中常见的元素之一，它允许用户输入数据并将其提交到服务器进行处理。

在创建网页表单时，Dreamweaver 是一个非常强大和易于使用的工具。

本章将介绍Dreamweaver和网页表单的概念。

第二章：安装和配置Dreamweaver在开始创建网页表单之前，首先需要安装和配置Dreamweaver 软件。

首先，从Adobe官网上下载最新版本的Dreamweaver。

安装完成后，打开软件并按照向导进行配置。

第三章：创建网页表单在Dreamweaver中，创建网页表单非常简单。

首先，打开一个新的HTML文件。

然后，从工具栏中选择“插入”选项，并从下拉菜单中选择“表单”。

在弹出的对话框中，可以选择表单的布局和样式。

点击“确定”按钮后，将创建一个基本的表单模板。

第四章：添加表单元素在网页表单中，不同类型的信息需要使用不同的表单元素来收集。

Dreamweaver提供了一系列常用的表单元素，包括文本框、复选框、单选按钮、下拉菜单等。

在表单模板中，通过单击鼠标并将其拖动到适当的位置来添加这些元素。

第五章：设置表单属性每个表单元素都有自己的属性，这些属性决定了元素的行为和外观。

使用Dreamweaver，可以轻松地设置这些属性。

选中一个表单元素，并在属性面板中更改其属性。

例如，可以设置文本框的大小、限制输入的字符、验证用户输入等。

第六章：添加表单验证为了确保用户输入的有效性，可以在表单元素上添加验证规则。

Dreamweaver提供了常用的验证规则，如必填字段、电子邮件格式验证、数字格式验证等。

通过选择表单元素并在属性面板中设置验证规则，可以实现简单但有效的数据验证。

第七章：处理表单数据当用户提交表单时，表单数据需要被传送到服务器进行处理。

Dreamweaver提供了处理表单数据的功能。

将鼠标指针放在表单元素的提交按钮上，然后在属性面板中设置提交按钮的属性。