案例表单各控件应用分析

1、表单设计项目5 表单设计教学重点：熟练掌握表单设计应用，包括表单个控件的应用与设计。教学难点：理解表单的功能与设计过程，并能对各控件设置其属性，理解各控件的意义，掌握表单标签代码及各控件代码的应用。教学目标：专业能力：熟练掌握表单及其各控件的应用及其设置方法。社会能力：独立思考、紧跟课堂教学培养服从意识。方法能力：通过解析代码培养自学分析能力教学内容：任务1 表单应用案例分析：案例分析：1、在dw8中打开页面2、表单各控件应用分析3、表单的功能，注意表单设计制作方法放在控件外主要步骤：主要步骤：1、插入，红色虚线标志2、光标定位在表单内，即红色虚线内3、插入8行2列表格4、设置表格各单元格属性

2、：背景颜色、边框颜色等5、插入控件并设置各控件属性相关知识点：相关知识点：表单概述 表单是用来收集来自用户的信息，是网站站的管理者与浏览者之间沟通的桥梁。收集用户的反馈意见，做出科学的、合理的决策，是一个网站成功的重要因素。表单有两个重要的组成部分：一是描述表单的html源代码；还有就是用于处理用户在表单域中输入的信息的服务器端应用程序或客户端脚本，如cgi、asp等。通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。 创建表单 创建表单通常用两种方法：使用“插入”中的“表单”的菜单

3、命令创建表单；使用“插入面板”中的“表单”按钮创建表单。 使用菜单命令插入表单 使用菜单命令插入表单的步骤如下：（1）在文档窗口中选定插入点，将光标置于该位置。（2）使用“插入”中的“表单”菜单命令插入表单，如右图所示。（3）此时在文档窗口中将有红色边框线所定义的插入表单区域，如下图所示。 注意：如果没有看到所创建的表单边框，单击“查看”中“可视化助理”“不可见元素”命令将边框线显示出来。（4）选中所创建的表单，打开“属性检查器”如图所示，在里面设置表单的属性：“表单名称”文本框：给表命名，这样方便用脚本语言对其进行控制。“动作”文本框：指定处理表单信息的服务器端应用程序。单击文件夹目标，找到

4、应用程序，或直接输入应用程序路径。“方法”文本框：定义处理表单数据的方法，具体内容见步骤（5）。（5）在“属性检查器”中，选择以下表单数据处理方法之一。“默认”下拉表：使用浏览器默认的方法（一般为get）“get”下拉表：把表单值添加给url，并向服务器发送get请求。因为url被限定在8192个字符之内，所以不要对长表单使用get方法。“post”下拉表：在消息正文中发送表单值，并向服务器发送post请求。 使用对象面板创建表单 使用对象面板创建表单的步骤是：（1）在文档窗口中选定插入点，将光标置于此位置。（2）单击“插入面板”中的“表单”标签，单击表单按钮，如图所示。 (3)其他设置同使用

5、菜单命令插入表单。 向表单中插入对象 dreamweaver 8表单包含标准对象，如文本域、按钮、图像域、复选框、单选钮、列表/菜单、文件域及隐藏域等。1 插入表单对象的通用方法插入表单对象的通用方法 （1）光标置于表单边界内部插入点，选择“插入”中的“表单对象”中选择一个对象，例如“文件域”，如右图所示。 （2）光标置于表单边界内部插入点，单击“插入栏”中的“表单”标签上的表单对象按钮，例如“文件字段”按钮如图所示。 （3）按住“插入栏”中的“表单”标签上的表单对象按钮拖入插入点，释放按钮。例如“文件字段”按钮到位置后释放按钮。如图所示。 以上几种方法得到的效果如图所示。 除了表单按钮外，在

6、标签“表单”中其他从左到右依次为文本字段、隐藏域、文本区域、复选框、单选按钮、单选组、列表/菜单、跳转、图像域、文件字段和按钮，其中一些常用功能分别是： 隐藏域：允许设计者存储应用程序在处理表单时所需要的信息。 文本字段和文本区域：接受任何类型的文本、字母和数字。文本字段为单行、密码保护，文本区域为多行。 复选框：在一组选项中选择多项。 单选按钮：在一组选项中一次只能选择一项。 列表/菜单：从提供一组选项中选择一项或多项。 跳转菜单：菜单上的每一项链接到一个文件，从中选择一项将跳转到被链接的网页。 图像域：可以用来替换提交按钮。 文件字段：允许读者在自己的硬盘上浏览文件，并作为表单数据上传。

7、按钮：单击时执行提交或重置表单之类的任务。各种表单对象的具体结构如右图所示： 设置表单属性1表单对象的属性设置 通过“属性面板”可以设置各表单的属性，其内容为：1. 文本域的属性设置(1)在“文挡窗口”的表单区域创建一个文本字段，例如在文字“姓名：”插入文本字段，如图所示。（2）在“属性面板”中进行设置，例如将“文本域”命名为“name”，将“字符宽度”、“最大字符数”、“类型”和“初始值”依次设置为12、20、单行和“输入姓名”，如图所示。 其中“文本域”即文本字段的名称；“字符宽度”为文本字段显示的宽度；“最大字符数”为允许使用者输入的最大的字符个数；“初始值”为表单首次被载入时显示在文本

8、字段中的值。(3)用鼠标左键单击表单域内任意处或按回车键，设置完成。 2单选按钮的属性设置(1)在“文档窗口”的表单区域插入单选钮表单对象，例如在文字“性别：”后，“男”、“女”前分别插入两个单选按钮，如左图所示。 (2)在“属性面板”中对单选按钮进行设置，例如将“男”前的单选按钮的“单选按钮”、“选定值”和“初始状态”依次设置为“sex”、“male”和“未选中(u)”，如右图所示，回车后完成设置。 其中“单选按钮”为单选按钮的名称，在同一组的单选按钮名称必须相同；“选定值”为该按钮被选时的取值；“初始状态”有“已勾选(c)”和“未选中(u)”两种，“已勾选(c)”表示在浏览时单选按钮的显示

9、为勾选状态，“未选中(u)”表示的是状态。3复选框的属性设置（1）在“文档窗口”的表单区域插入复选框表单。例如在文字“爱好：”后，“上网”等文字前分别插入如图所示的复选框。(2) “属性面板”中对单选按钮进行设置，例如将“上网”前的复选框的“复选框名称”、“选定值”和“初始状态”依次设定为“favor”、“net”和“未选中(u)”，如图所示。 “复选框名称”是给复选框命名；“选定值”设置复选框被选择时的取值；“初始状态”为设置首次载入表单时复选框是已选还是未选，具体同“单选按钮”。 4列表/菜单的属性设置(1)在“文档窗口”的表单区域插入列表/菜单表单对象，例如在文字“年龄：”后插入列表/菜

10、单，如左图所示。 （2）用“属性面板”对列表/菜单属性进行设置，例如将“列表/菜单”设置为“age”，“类型”为“菜单”，如右图所示。 在“列表/菜单”为列表/菜单的名称，“类型”为“菜单”和“列表”可选，“列表值”为可选的列表值。（3）设定“列表值”。单击“属性面板”中“列表值”按钮，出现“列表值”对话框，单击“+”按钮依次添加“项目标签”和“值”，如图所示，单击确定完成设置。注意：值是各不相同的。 (4)设置“初始化时选定值”。如图所示设置为“21-25”。完成设置。 5文件域的属性设置(1)在“文档窗口”中的表单区域插入文件域表单，例如在文字“上传玉照：”后添加文件域，如图所示。 （2）

11、在“属性面板”中设置文件域属性，例如设置“文件域名称”为“picture”，“字符宽度”为“20”，“最多字符数”为“100”，如图所示，回车完成设置. 其中“文件域名称”为该文件域的名称；“字符宽度”为文件域所显示的最大字符数；“最多字符数”为允许使用者输入的最多的字符数。6图像域的属性设置(1)在“文档窗口”中的表单区域插入图像域。例如在文件域表单后插入图像域，如图所示。 （2）在“属性面板”中设置图像域属性，例如，将“图像区域”命名为“basketball”，“替代”为“上传图像”，“宽”和“高”设置为80效果如图所示，回车完成设置。 其中“图像区域”为图像域的名称；“宽”和“高”是图像

12、的宽度值和高度值；“源文件”为图片的地址；“替代”为浏览时鼠标放置在图片上出现的替代文字7文本区域的属性设置(1)在“文档窗口”中的表单区域插入文本区域。文本区域和文本字段都属于文本域，文本区域为多行的文本域，文本字段为单行的文本域。例如在文字“备注”后插入文本区域，如图所示。 (2)在“属性面板”设置文本区域的属性，例如，将“文本域”设置为“note”、“字符宽度”、“行数”、“类型”和“初始值”分别设置为25、5、多行和“请在此备注”，如图所示。 注意：其中“文本域”为文本域的名称；“行数”为使用者录入文字可显示的行数；“换行”用户一般使用“默认”；“类型”是显示时的形式；“初始值”在文本

13、域显示时初始的内容。8按钮的属性设置(1)在文档窗口的表单区域插入按钮对象。例如在文本区域后插入“修改”和“提交”两个按钮，如图所示。(2)在“属性面板”设置按钮属性，例如将“修改”和“提交”两个按钮分别设置为如上图和下图所示。 其中“按钮名称”是给按钮命名。dreamweaver mx有两个保留名称：提交和重置。提交指示表单提交单数据给处理程序或脚本；重置恢复所有表单域为它们各自的初值。“标签”为确定显示在按钮上的文本；“动作”为确定按钮被单击时发生什么动作。“提交表单”是自动设置按钮名为提交；“重置表单”是自动设置按钮为重置，“无”是不发生任何动作。 任务2说明：该实例是163网站申请免费

14、邮箱的页面，学生完成实例1之后，可以结合前面所学内容及本章内容来制作完成 应用实例 使用本章所学内容，设计一个读书调查问卷。（1）打开dreamweaver mx，单击“插入”面板中的“表单”标签。选择“表单”按钮，如左图所示 （2） 将表单中需要的表单元素依次插入，并设置属性，如右图所示。 （3）将该页保存为“biaodan.htm”，浏览该页，效果如图所示。 幂文本的输入在代码视图中，在作为上标的文本前后分别加入代码和，这样在设计视图中就会看到幂文本跟踪图像跟踪图像允许用户在网页中将原来的平面设计稿作为辅助的背景。1. 使用绘图软件作出一个网页排版格局图，存为图像文件,例如.jpg2. 在dreamweaver中点击【查看】/【跟踪图像】/【载入】3. 选择图像文件，点击确定。播放背景音乐1. 选择【窗口】/【行为】2. 从下拉菜单中选择”播放声音”3. 选择声音文件，如.