《使用Dreamweaver制作网页》之表单的使用
合集下载
Dreamweaver中如何创建表单和处理数据
Dreamweaver中如何创建表单和处理数据Dreamweaver是一种功能强大的网页开发工具，它提供了简便的界面和丰富的功能来创建网页。
在网页设计中，表单是一项重要的功能，可以让用户与网页进行交互，并收集用户提交的数据。
本文将介绍如何在Dreamweaver中创建表单，以及如何处理表单提交的数据。
第一章：创建表单Dreamweaver提供了简单的方式来创建表单。
首先，在Dreamweaver的工具栏上找到“表单”工具，点击它，然后在页面上拖动鼠标来创建一个表单区域。
接下来，通过在表单区域上点击右键，选择“插入表单元素”来添加各种表单元素，如文本框、下拉列表、复选框等。
在添加元素时，可以设置它们的属性，如名称、类型、默认值等。
第二章：表单验证表单验证是确保用户输入的数据符合预期格式和要求的重要步骤。
Dreamweaver提供了多种验证方法。
例如，可以使用Dreamweaver提供的预设验证规则，如必填字段、电子邮件格式验证等。
也可以自定义验证规则，通过正则表达式来验证输入的数据。
通过选择表单元素，然后在属性面板中选择“验证”选项，可以简单地配置表单验证。
第三章：表单布局好的表单布局可以提升用户体验，并使表单更易于阅读和填写。
Dreamweaver提供了多种布局选项。
可以使用表格布局，将表单元素放入表格单元格中。
也可以使用CSS布局，通过设置样式来控制表单元素的排列方式。
此外，Dreamweaver还提供了对响应式设计的支持，可以根据设备的屏幕尺寸来调整表单的布局。
第四章：处理表单提交数据当用户填写完表单并点击提交按钮时，需要将表单提交的数据发送到服务器进行处理。
在Dreamweaver中，可以使用服务器端脚本语言（如PHP、等）来处理表单数据。
首先，在服务器上创建一个接收数据的脚本文件，例如“process.php”。
然后，在表单的“动作”属性中设置为指向该脚本文件的URL。
这样，当用户提交表单时，表单数据将被发送到服务器上的脚本文件进行处理。
DreamweaverCS5网页制作第4章 表单PPT课件
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 6）在表格的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单” 按钮 ，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分 别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加 “项目标签”和“值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后 单击“确定”按钮，如图所示。
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 5）光标移到第3行文字右侧插入单选按钮组按钮 。在弹出的对话框中进行设定，如图46所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选 按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。
4.2 新知解析
9. 文件域属性面板设置项目：
❖ “文件域名称”：指定该文件域对象的名称。 ❖ “字符宽度”：指定希望该域最多可显示的字符数。 ❖ “最多字符数”：指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则 文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路 径，则文件域仅允许键入“最多字符数”值所指定的字符数。
4.2 新知解析
8. 图像域属性面板设置项目：
❖ “图像区域”：为该按钮指定一个名称。 ❖ “源文件”：指定要为该按钮使用的图像。 ❖ “替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。 ❖ “对齐”：设置对象的对齐属性。 ❖ “编辑图像”：启动默认的图像编辑器并打开该图像文件进行编辑。
4.3 实战演练：网络写作注册信息表
4.2 新知解析
网页设计 第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）。
Dreamweaver网页设计案例教程 第9章 表单与行为
10．插入按钮 按钮的作用是控制表单的操作。一般情况下，表单中设有“提交”按钮、 “重置”按钮和普通按钮等，浏览者在网上申请QQ、邮箱或会员注册时会见到。 Dreamweaver CC 2019将按钮分为3种类型，即按钮、“提交”按钮和“重置” 按钮。其中，按钮元素需要制作者指定单击该按钮时要执行的操作，例如添加一 个JavaScript脚本，使得浏览者单击该按钮时打开另一个页面。 若要在表单域中插入按钮表单，则先将光标放在表单轮廓内需要插入按钮表 单的位置，然后插入按钮表单。
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 【案例分析】
动物乐园是一个野生动物园，园内饲养了多种野生动物，数量庞大，是适合 游客参观和学习知识的乐园；园内分为多个区块，模拟动物实际的生活环境，最 大程度的保护动物天性。网页设计要求体现出动物乐园的特点和开放政策。
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 【案例分析】
动物乐园是一个野生动物园，园内饲养了多种野生动物，数量庞大，是适合 游客参观和学习知识的乐园；园内分为多个区块，模拟动物实际的生活环境，最 大程度的保护动物天性。网页设计要求体现出动物乐园的特点和开放政策。
Dreamweaver制作表单
实验8 Dreamweaver网页制作
一实验目的
掌握网页制作软件Dreamweaver的基本使用方法。
二、实验内容
设计效果不要求与图示完全一致，可根据自己的喜好调整。
素材利用现的电脑资源。
1. 做一个表单，要求密码在输入时为符号，性别只能选中一个。
其中“重置”、“提交”为二个按钮，功能不需具体实现。
如下图所示。
保存成form1.html.(注：所有的元素都必须在表单内（红色虚线内）)
操作提示：插入表单：插入｜表单
2. 做一个表单设计一个会员注册页面，所有内容放在一个3行1列的表格中，如下图所示。
要求密码在输入时为符号，性别只能选中一个。
其中“重写”、“放弃”、“提交”为三个按钮，功能不需具体实现。
保存成form2.html.(注：所有的元素都必须在表单内（红色虚线内）)，
3.设计如下图所示的网页，插入框架。
“猫咪相册”、“狗狗影集”和“白兔写真”超链接
到具体的内容。
操作提示：（1）插入框架：插入｜html|框架。
（找到合适的框架插入）
（2）框架保存：文件｜保存全部（注：三个区域，四个html文件）
（3）框架里的超链接：选中要超链接的文字，链接到具体的页面（具体的网页页面要自己再创建），链接目标选择mainframe.
交作业时，将本次课程中完成的姓名文件夹压缩（压缩文件名为学号后3位+姓名，如：101张三）后上传到FTP的相应班级文件夹中。
传错位置或文件命名不正确将视为未交作业！！。
《使用Dreamweaver制作网页》之表单的使用
六、教学反思
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
教案设计
《使用Dreamweaver制作网页》之
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
教案设计
《使用Dreamweaver制作网页》之
网页制作Dreamweaver CS4 - 10、使用表单
10.2 Spry验证表单对象
10.3 综合案例──创建表单网页
教学目标
了解表单的基本概念。 掌握插入和设置表单对象的方法。 掌握使用行为验证表单的方法。 掌握插入和设置Spry验证表单对象的方法。
返回目录
10.1 普通表单对象
功能讲解 10.1.2 范例解析──制作“用户注册”网页 10.1.3 课堂实训——制作“注册邮箱申请单”网页
返回目录
返回目录
10.1.3 课堂实训——制作“注册邮箱申请单”网页
首先将“课堂实训\素材\第10讲\10-1-3”文件 夹下的内容复制到站点根文件夹下，然后制 作表单网页并进行表单验证，最终效果如图 所示。 这是创建表单网页的一个例子，可以先插入 表单对象，然后再使用行为进行验证，密码 可以编写代码进行验证。
10.1.1
返回目录
10.1.1 功能讲解
表单在网页中最多的用途就是填写用信息， 填写信息的页面上包括许多表单对象，所有 这些表单对象的组合，称之为表单。
认识表单。 表单对象。 验证表单。
返回目录
一、认识表单
表单通常由两部分组成，一 部分是描述表单元素的HTML 源代码，另一部分是客户端 处理用户所填信息的程序。 使用表单时，可以对其进行 定义使其与服务器端的表单 处理程序相配合。在制作表 单页面时，需要插入表单对 象。插入表单对象通常有两 种方法，一种是使用菜单栏 中的【插入】/【表单】中的 相应命令，另一种是使用 【插入】/【表单】面板中的 相应工具按钮，如图所示。
返回目录
二、表单对象
常用表单对象包括表单、文本域、文本区域、 单选按钮、复选框、列表/菜单、跳转菜单、 图像域、文件域、隐藏域、字段集、标签、 按钮等。
DREAMWEAVER表单应用详解
3
览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件。 注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置 ENCTYPE="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成 POST。 代码格式：＜input type="file" name="..." size="15" maxlength="100"＞ 属性解释： type="file"定义文件上传框； name 属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； size 属性定义文件上传框的宽度，单位是单个字符宽度； maxlength 属性定义最多输入的字符数。 样例 6： 样例 6 代码：＜input type="file" name="myfile" size="15" maxlength="100"＞ 1.2.8 下拉选择框 下拉选择框允许你在一个有限的空间设置多种选项。 代码格式： ＜select name="..." size="..." multiple＞ ＜option value="..." selected＞...＜/option＞ ... ＜/select＞ 属性解释： size 属性定义下拉选择框的行数； name 属性定义下拉选择框的名称； multiple 属性表示可以多选，如果不设置本属性，那么只能单选； value 属性定义选择项的值； selected 属性表示默认已经选择本选项。 样例 7：
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
3、根据所学知识制作完成常用的注册页面。
情感与价值目标
通过小组分工合作，不断讨论，在一个个由浅入深的任务驱动之下，激发学生的自主学习意识，进而提高学生的协作能力。
三、教材分析
教学内容：学会使用各种表单元素，并且能够制作完成常用的注册页面。
内容分析：表单是实现动态网页的基础，可以使用表单与用户进行信息交流。使用Dreamweaver可以方便快速的插入表单和表单元素，在配合表格的使用，进而制作出布局合理、结构协调的表单页面。
生：姓名、密码框、电子邮箱运用了文本字段，爱好运用了复选框，性别运用了单选按钮。
师：通过以上同学们的分析，我们今天就学习如何运用表单及表单元素制作具有交互功能的网页。
导出本节课题。
（二）任务驱动，不断探究
师：如何布局该网页？
生：该网页分为上下两部分，可以通过插入表格进行布局。
师：注册表单部分如何设置？
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
选择学生作答：
【教学目的】通过对该实例的分析研究，巩固表格布局的操作方法，为下一步的操作奠定基础。
2、给出任务，激发学生自主学习的热情
师：观察该实例中哪些部分体现了交互功能？
生：账户信息部分。
师：具体分析，都运用了哪些表单元素？
【要点】对照注册表单页面，依次讲解什么是表单、为什么要用表格，哪个是文本框、哪个是按钮、哪个是密码框、哪个是单选按钮和哪个是下拉列表，并分别说明其作用和使用场合。
六、教学反思
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
教案设计
《使用Dreamweaver制作网页》之
表单的使用
学校：鞍山市现代服务学校
姓名：刘靓丽
一、教案背景
1、教学对象：中职
2、专业：平面设计
3、课时：第4课时
4、课前准备：
（1）了解表单的功能。
（2）通过网络简单了解表单的应用。
二、教学课题
明确目标
1、熟练掌握插入表单的方法。
2、能够在表单中根据不同需要插入适当的表单元素。
教学重点与难点：1、如何插入表单。
2、如何在表单中插入各种表单元素。
3、表单元素的属性设置。
教学准备：1、多媒体课件。
2、软件：Dreamweaver cs3/cs4/cs5
3、网页素材
教学方法：任务驱动、小组讨论、展示评价。
四、教学过程
（一）展示案例，导入新课
1、复习——”温故”。
师：前一阶段，我们已经学习了如何运用表格对网页进行布局，通过该实例的展示，分析一下如何对其进行布局。
师：同学们能否总结一下，文本字段与密码框的区别？
生：在文本域中，密码框与文本框唯一不同的属性是类型，密码框的类型属性是”密码”，而文本框的类型属性是”单行”。
师：如何设置单选按钮和复选框？
生：单击”插入”栏的”表单”类别中的”单选按钮”和“复选框”图标，分别设置其属性。
【要点】初始值：已勾选或未勾选。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
3、根据所学知识制作完成常用的注册页面。
情感与价值目标
通过小组分工合作，不断讨论，在一个个由浅入深的任务驱动之下，激发学生的自主学习意识，进而提高学生的协作能力。
三、教材分析
教学内容：学会使用各种表单元素，并且能够制作完成常用的注册页面。
内容分析：表单是实现动态网页的基础，可以使用表单与用户进行信息交流。使用Dreamweaver可以方便快速的插入表单和表单元素，在配合表格的使用，进而制作出布局合理、结构协调的表单页面。
生：姓名、密码框、电子邮箱运用了文本字段，爱好运用了复选框，性别运用了单选按钮。
师：通过以上同学们的分析，我们今天就学习如何运用表单及表单元素制作具有交互功能的网页。
导出本节课题。
（二）任务驱动，不断探究
师：如何布局该网页？
生：该网页分为上下两部分，可以通过插入表格进行布局。
师：注册表单部分如何设置？
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
选择学生作答：
【教学目的】通过对该实例的分析研究，巩固表格布局的操作方法，为下一步的操作奠定基础。
2、给出任务，激发学生自主学习的热情
师：观察该实例中哪些部分体现了交互功能？
生：账户信息部分。
师：具体分析，都运用了哪些表单元素？
【要点】对照注册表单页面，依次讲解什么是表单、为什么要用表格，哪个是文本框、哪个是按钮、哪个是密码框、哪个是单选按钮和哪个是下拉列表，并分别说明其作用和使用场合。
六、教学反思
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
教案设计
《使用Dreamweaver制作网页》之
表单的使用
学校：鞍山市现代服务学校
姓名：刘靓丽
一、教案背景
1、教学对象：中职
2、专业：平面设计
3、课时：第4课时
4、课前准备：
（1）了解表单的功能。
（2）通过网络简单了解表单的应用。
二、教学课题
明确目标
1、熟练掌握插入表单的方法。
2、能够在表单中根据不同需要插入适当的表单元素。
教学重点与难点：1、如何插入表单。
2、如何在表单中插入各种表单元素。
3、表单元素的属性设置。
教学准备：1、多媒体课件。
2、软件：Dreamweaver cs3/cs4/cs5
3、网页素材
教学方法：任务驱动、小组讨论、展示评价。
四、教学过程
（一）展示案例，导入新课
1、复习——”温故”。
师：前一阶段，我们已经学习了如何运用表格对网页进行布局，通过该实例的展示，分析一下如何对其进行布局。
师：同学们能否总结一下，文本字段与密码框的区别？
生：在文本域中，密码框与文本框唯一不同的属性是类型，密码框的类型属性是”密码”，而文本框的类型属性是”单行”。
师：如何设置单选按钮和复选框？
生：单击”插入”栏的”表单”类别中的”单选按钮”和“复选框”图标，分别设置其属性。
【要点】初始值：已勾选或未勾选。