【EAM资产管理】使用Dreamweaver制作网之表单的使用
Dreamweaver中如何创建表单和处理数据
Dreamweaver中如何创建表单和处理数据Dreamweaver是一种功能强大的网页开发工具，它提供了简便的界面和丰富的功能来创建网页。
在网页设计中，表单是一项重要的功能，可以让用户与网页进行交互，并收集用户提交的数据。
本文将介绍如何在Dreamweaver中创建表单，以及如何处理表单提交的数据。
第一章：创建表单Dreamweaver提供了简单的方式来创建表单。
首先，在Dreamweaver的工具栏上找到“表单”工具，点击它，然后在页面上拖动鼠标来创建一个表单区域。
接下来，通过在表单区域上点击右键，选择“插入表单元素”来添加各种表单元素，如文本框、下拉列表、复选框等。
在添加元素时，可以设置它们的属性，如名称、类型、默认值等。
第二章：表单验证表单验证是确保用户输入的数据符合预期格式和要求的重要步骤。
Dreamweaver提供了多种验证方法。
例如，可以使用Dreamweaver提供的预设验证规则，如必填字段、电子邮件格式验证等。
也可以自定义验证规则，通过正则表达式来验证输入的数据。
通过选择表单元素，然后在属性面板中选择“验证”选项，可以简单地配置表单验证。
第三章：表单布局好的表单布局可以提升用户体验，并使表单更易于阅读和填写。
Dreamweaver提供了多种布局选项。
可以使用表格布局，将表单元素放入表格单元格中。
也可以使用CSS布局，通过设置样式来控制表单元素的排列方式。
此外，Dreamweaver还提供了对响应式设计的支持，可以根据设备的屏幕尺寸来调整表单的布局。
第四章：处理表单提交数据当用户填写完表单并点击提交按钮时，需要将表单提交的数据发送到服务器进行处理。
在Dreamweaver中，可以使用服务器端脚本语言（如PHP、等）来处理表单数据。
首先，在服务器上创建一个接收数据的脚本文件，例如“process.php”。
然后，在表单的“动作”属性中设置为指向该脚本文件的URL。
这样，当用户提交表单时，表单数据将被发送到服务器上的脚本文件进行处理。
用Dreamweaver制作网页中的表格
格是现代网页制作的一个重要组成部分。
表格之所以重要是因为表格可以实现网页的精确排版和定位。
虽然现在都提倡WEB标准建立网站，但是有时在网页中还是会应用到表格的。
这个教程我们给大家讲解表格操作的基本方法。
在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。
（看下图）
一张表格横向叫行，纵向叫列。
行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。
单元格和单元格之间的距离叫间距。
整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。
因此我们需要用到表格来做。
实际上是用两行两列的表格来制作。
1、在插入栏中选择按钮或“插入”菜单>选“表格”。
系统弹出表格对话框如下图。
这些参数我们都已经认识了。
行：2。
列：2。
其余的参数都保留其默认值。
2、在编辑视图界面中生成了一个表格。
表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。
当光标移到点上就可以分别调整表格的高和宽。
移到表格的边框线上也可以调整。
（如下图）
3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。
（如下图）。
Dreamweaver 表单操作
字段集
使用字段集可以在页面中显示一个圆角矩形框，将一些表单 对象放在一起，起到分组的作用。实际操作中，先插入字段 集，然后再在其中插入表单对象。也可以先插入表单对象， 然后将它们选择再插入字段集。 选择【插入】/【表单】/【字段集】命令，或在【插入】/ 【表单】面板中单击 按钮，将打开【字段集】对 话框，在【标签】文本框中输入标签名称，然后单击 按钮插入一个字段集，如图所示。
选择【插入】/【表单】/【文本区域】命令，或在【插入】/【表单】面 板中单击 按钮，将在文档中插入文本区域。
单击并选中插入的表单对象，将显示其【属性】面板，如图所示。在 【属性】面板中，通过设置【类型】为“单行”或“多行”可以实现文 本域和文本区域之间的相互转换。【行数】选项用于设置文本区域的高 度。
“选定值”：设置在该复选框被选中时发送给服务器的值。 “初始状态”：确定在浏览器中载入表单时，该复选框是否被选中。
单选按钮和单选按钮组
单选按钮主要用于标记一个选项是否被选中，单选按钮只允许用户从选 项中选择唯一答案。单选按钮通常成组使用，同组中的单选按钮必须具 有相同的名称，但它们的域值是不同的。 选择【插入】/【表单】/【单选按钮】命令，或在【插入】/【表单】面 板中单击 按钮，将在文档中插入单选按钮。 单击并选中其中一个单选按钮，将显示其【属性】面板，如图所示。在 设置单选按钮属性时，需要依次选中各个单选按钮，分别进行设置。
隐藏域
隐藏域主要用来储存并提交非用户输入信息，如注册时间、 认证号等，这些都需要使用JavaScript、ASP等源代码来编 写，隐藏域在网页中一般不显现。 选择【插入】/【表单】/【隐藏域】命令，或在【插入】/ 【表单】面板中单击 按钮，将插入一个隐藏域。 单击选中隐藏域，将显示其【属性】面板，如图所示。
(EAM资产管理)Dreamweaver简单描述制作网页的基本步骤
本教程主要是针对初学者，如何使用Dreamweaver制作一个网页？这个教程具体详细讲解了制作网页的步骤，及注意的问题，并且拿一个实例来给大家做了一下详细讲解！创建网页页面1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。
中文版的的默认的文件名为“无标题文档”。
htm就表示这个网页文件是一个静态的HTML文件。
给它改名为index.htm。
注：网站第一页的名字通常是index.htm或index.html。
其它页面的名字可以自己取。
这也就是主页，上传后打开网页默认连接到此页。
2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。
在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。
选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。
4．如要选取字体，则选择字体中的最后一项：编辑字体列表。
然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
注：在网页上最常用的是宋体字。
不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。
如果需要用的话，要做成图片后再使用。
注：在网页上打入空格的办法是：把输入法调为全角。
注：在网页上换行的办法是：shift+Enter。
只按Enter则为换段。
下面拿一个现成的例子来给大家讲解一下：现在，以下边的简单网页为例，叙述一下制作过程。
简单网页如下图：在开始制作之前，我们先对这个页面进行一下分析。
看看这个页面用到了哪些东西。
□网页顶端的标题“我的主页”是一段文字。
□网页中间是一幅图片。
□最下端的欢迎词是一段文字。
□网页背景是一深紫红颜色。
构思好这个网页的结构，我们就可以开始制作了。
Dreamweaver表单创建与设置
Dreamweaver表单创建与设置
一、表单的创建方法：
点击“插入”-“表单”，如下图所示。
这样表单就插入了，也可以点击“插入栏”-“表单”，如下图所示。
点击“表单”按钮，这样表单也能被创建，效果如下图所示。
二、设置表单的属性
在“属性”面板上，表单的属性如下图所示。
各参数含义如下：
1.表单名称：设置表单的名称，可用于处理程序的调用。
2.动作：指定处理表单的程序。
3.目标：与超链接的目标一样。
4.方法：表单的发送方式有POST和GET两种。
.POST用于发送长字符的表单内容，因此在发送时比GET安全，但是用POST方法发送的信息是未经加密的。
.GET用于发送较短字符的表单内容，若发送的数据量太大，数据将被截断，从而导致意外的或失败的处理结果。
5.MIME类型：是指定对提交给服务器进行处理的数据使用的编码类型。
有pplication/x-www-form-urlencoded和multipart/form-data两种。
网页设计 第10章 Dreamweaver的表单和行为
10.2 Dreamweaver的行为
10.2.5 应用行为 选择网页中要附加行为的对象（如图像或链接），然后在 “行为”面板中单击“添加行为”按钮，从弹出菜单中选择 要附加的行为。当选择某个动作时，将会弹出一个相应的对 话框，显示该动作的参数和说明。在对话框中进行参数设置 后，单击“确定”按钮，即可完成附加行为的操作。 10.2.6 修改事件 添加了行为后，用于触发该动作的默认事件会显示在“行为” 面板“事件”栏中。在“事件”栏中单击要应用的事件，然 后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中 选择另一个事件,即可修改触发事件。
10.1 Dreamweaver的表单页面制作
10.1.2.2 创建文本区域 选择“插入”→“表单”→“文本区域”命令。此 时的属性检查器显示该文本区域的属性。其中的 “字符宽度”和“行数”用于设置该文本域的宽度 和高度。如图。
10.1 Dreamweaver的表单页面制作
10.1.2.3 创建复选框 选择“插入”→“表单”→“复选框”命令。此时 的属性检查器显示该复选框的属性。其中的“初始 状态”可以设置为默认的“已勾选”或“未选中”。 如图示。
10.3 Dreamweaver行为的应用实例
（5）选择“命名的层”中的层“hua”，点击“显示”按钮， 点击“确定”后，在行为面板上出现了一行已设置的行为， 如图。表示为当鼠标滑过“花”字单元格时，显示层“hua”。
10.3 Dreamweaver行为的应用实例
（6）重复步骤（4），在“显示—隐藏层”对话框中选择“命 名的层”中的层“hua”，点击“隐藏”按钮，点击“确定” 后，在行为面板上出现了第二个设置的行为。表示为当鼠标 滑过“花”字单元格时，隐藏层“hua”。 （7）点击新的行为中的事件列表，选择“onMouseOut”，将 其修改为“当鼠标离开”时隐藏层“hua”。如图（a），设 置完成之后的行为面板如图（b）。
dream表格的用途
dream表格的用途在网页设计和制作中，表格是一种非常常用的布局工具。
Dreamweaver中的表格主要用于对网页元素进行排版和定位，让页面布局更加规整和易于管理。
以下是Dreamweaver表格的主要用途：1. 创建页面布局：通过创建表格，可以将页面分成不同的区域，每个区域可以放置不同的内容，如导航菜单、页眉、页脚等。
这样可以让页面结构更加清晰，也有利于后期维护和修改。
2. 对齐和定位元素：在Dreamweaver中，可以使用表格的单元格对页面中的元素进行定位和调整。
通过调整单元格的大小和位置，可以精确控制元素在页面上的位置，使其对齐到相应的位置。
3. 制作复杂布局：有些网页布局比较复杂，使用简单的HTML 标记很难实现。
这时可以使用Dreamweaver的表格来创建复杂的布局，例如多列的固定宽度、弹性宽度等。
通过灵活地调整表格的大小、合并或拆分单元格，可以实现各种复杂的布局效果。
4. 管理对齐和间距：在使用表格布局时，可以很容易地调整元素的对齐方式和间距。
通过设置表格的对齐方式、单元格间距和边距等属性，可以控制元素之间的空间关系，使其看起来更加整洁美观。
5. 控制样式和外观：除了基本的布局和对齐功能外，还可以使用CSS样式来美化表格。
通过为表格或单元格添加样式，可以改变它们的背景颜色、边框样式、字体等外观属性，使页面更加美观。
总之，Dreamweaver中的表格是一种强大的布局工具，可以帮助网页设计师创建精确、整洁的页面布局。
但需要注意的是，过度使用表格可能会使代码变得复杂和难以维护。
因此，在实际开发中，应该根据具体情况选择合适的布局方法，并尽量使用CSS进行布局和样式设置。
Dreamweaver网页设计案例教程 第9章 表单与行为
9.1.4 【相关工具】
4．单选按钮 为了单选按钮的布局更加合理，通常采用逐个插入单选按钮的方式。若要在 表单域中插入单选按钮，先将光标放在表单轮廓内需要插入单选按钮的位置，然 后插入单选按钮。
9.1.4 【相关工具】
5．单选按钮组 先将光标放在表单轮廓内需要插入单选按钮组的位置，然后弹出“单选按钮 组”对话框。
9.1.2 【设计理念】
在网页设计和制作过程中，以实景照片为主背景，突出主题；网页的图案清 新自然，在细节处理上颇为仔细，加强了视觉上的美感；中心的注册表结构简单、 清晰明确，体现出简洁美观的风格；网页的整体设计简单大方，配色清朗明快， 充满活力的感觉。
效果图
9.1.3 【操作步骤】
1
2
3
4
9.1.4 【相关工具】
9.1.5 【实战演练】健康测试网页
使用“选择”按钮，插入下拉菜单；使用“属性”面板，设置下拉菜单的 属性。
效果图
9.2 动物乐园网页
【案例分析】 【设计理念】 【操作步骤】 【相关工具】 【实战演练】
9.2.1 【案例分析】
动物乐园是一个野生动物园，园内饲养了多种野生动物，数量庞大，是适合 游客参观和学习知识的乐园；园内分为多个区块，模拟动物实际的生活环境，最 大程度的保护动物天性。网页设计要求体现出动物乐园的特点和开放政策。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标 。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标 ，然后在属性检查器中设置文本域的”类型”为”密码”。
2、如何在表单中插入各种表单元素。
3、表单元素的属性设置。
教学准备：1、多媒体课件。
2、软件：Dreamweaver cs3/cs4/cs5
3、网页素材
教学方法：任务驱动、小组讨论、展示评价。
四、教学过程
（一）展示案例，导入新课
1、复习——”温故”。
师：前一阶段，我们已经学习了如何运用表格对网页进行布局，通过该实例的展示，分析一下如何对其进行布局。
【EAM资产管理】使用Dreamweaver制作网之表单的使用
教案设计
《使用Dreamweaver制作网页》之
表单的使用
学校：鞍山市现代服务学校
姓名：刘靓丽
一、教案背景
1、教学对象：中职
2、专业：平面设计
3、课时：第4课时
4、课前准备：
（1）了解表单的功能。
（2）通过网络简单了解表单的应用。
二、教学课题
明确目标
1、熟练掌握插入表单的方法。
2、能够在表单中根据不同需要插入适当的表单元素。
3、根据所学知识制作完成常用的注册页面。
情感与价值目标
通过小组分工合作，不断讨论，在一个个由浅入深的任务驱动之下，激发学生的自主学习意识，进而提高学生的协作能力。
三、教材分析
教学内容：学会使用各种表单元素，并且能够制作完成常用的注册页面。
内容分析：表单是实现动态网页的基础，可以使用表单与用户进行信息交流。使用Dreamweaver可以方便快速的插入表单和表单元素，在配合表格的使用，进而制作出布局合理、结构协调的表单页面。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
师：同学们能否总结一下，文本字段与密码框的区别？
生：在文本域中，密码框与文本框唯一不同的属性是类型，密码框的类型属性是”密码”，而文本框的类型属性是”单行”。
师：如何设置单选按钮和复选框？
生：单击”插入”栏的”表单”类别中的”单选按钮”和“复选框”图标，分别设置其属性。
【要点】初始值：已勾选或未勾选。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
教学重点与难点：1、如何插入表单。
六、教学反思
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
选择学生作答：
【教学目的】通过对该实例的分析研究，巩固表格布局的操作方法，为下一步的操作奠定基础。
2、给出任务，激发学生自主学习的热情
师：观察该实例中哪些部分体现了交互功能？
生：账户信息部分。
师：具体分析，都运用了哪些表单元素？
【要点】对照注册表单页面，依次讲解什么是表单、为什么要用表格，哪个是文本框、哪个是按钮、哪个是密码框、哪个是单选按钮和哪个是下拉列表，并分别说明其作用和使用场合。
生：姓名、密码框、电子邮箱运用了文本字段，爱好运用了复选框，性别运用了单选按钮。
师：通过以上同学们的分析，我们今天就学习如何运用表单及表单元素制作具有交互功能的网页。
导出本节课题。
（二）任务驱动，不断探究
师：如何布局该网页？
生：该网页分为上下两部分，可以通过插入表格进行布局。
师：注册表单部分如何设置？
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。