dreamweaver-cs6网页设计资料-项目八-使用表单-PPT精选文档-PPT精选文档

DreamweaverCS6网页设计实用案例教程DreamweaverCS61项目八使用表单本项目中，通过2个工作任务向大家介绍如何制作表单。很多人都有过填写表单的经历，利用表单可以帮助Internet服务器从用户处收集信息，例如收集用户资料、获取用户订单，也可以实现搜索接口。在Internet上也同样存在大量的表单，让你输入文字，让你进行选择。希望通过这些任务的实际操作，能够使读者掌握这些知识。项目八使用表单本项目中，通过2个工作任务向大家介绍如何制2目录任务一制作综合表单制作“我的搜索引擎”网页任务二目录任务一制作综合表单制作“我的搜索引擎”网页任务二3任务一：制作综合表单本任务所制作的是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。任务分析：理解牢记！任务一：制作综合表单本任务所制作的是一个当前网站中较为普遍的4制作综合表单任务实施制作表单属性制作综合表单任务制作表单属性5这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。操作步骤如下：（1）新建页面，单击插入面板表单分类下的

按钮，在页面中插入表单。这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码6

（2）根据页面排版的需要，在表单中插入12行2列的表格，如图所示。（2）根据页面排版的需要，在表单中插入12行27

（3）分别在表格中输入文字，并且设置文字的字体、颜色等属性，并设置单元格背景色，如图所示。（3）分别在表格中输入文字，并且设置文字的字体8

（4）在表格的第1行“用户名”和第4行“姓名”右侧插入单行文本域，在属性面板设置该域的“字符宽度”为25，“最多字符数”为20，如图所示。（4）在表格的第1行“用户名”和第4行“姓名”9

（5）在第2行“密码”和第3行“验证密码”右侧的单元格中插入密码域，设置密码域的“字符宽度”为25，“最多字符数”为14，如图所示。（5）在第2行“密码”和第3行“验证密码”右侧10

（6）在第5行“性别”右侧的单元格中插入两个单选按钮组，在属性面板上设置单选按钮的名称均为“sex”，并分别设置两个单选按钮的“选定值”为“0”和“1”，如图所示。（6）在第5行“性别”右侧的单元格中插入两个单11

（7）在第6行“出生日期”右侧的单元格中插入如图所示的域。其中“年”是一个单行文本域，设置其“字符宽度”为5，“最多字符数”为4，初始值为“20”，如图所示。（7）在第6行“出生日期”右侧的单元格中插入如12

（8）单击“插入”面板上“表单”分类中的

按钮，在“月”前面插入菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入01~12月份，在“值”栏中输入相应的值，如图所示。（8）单击“插入”面板上“表单”分类中的按钮13

（9）最后插入“日”文本域，设置其“字符宽度”为2，“最大字符数”为2，如图所示。

（10）分别在表格中第7、8、9行的“证件号码”、“电子邮件”、“联系电话”后面的单元格中插入单行文本域，根据实际需要，设置其“字符宽度”和“最大字符数”，如图所示。（9）最后插入“日”文本域，设置其“字符宽度”14

（11）单击“插入”面板上“表单”分类中的

按钮，在第10行的“所在省份”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“北京”等各省市名称，在“值”栏中输入对应的值，如图所示。（11）单击“插入”面板上“表单”分类中的按15

（12）菜单项设置完成后，回到属性面板中，在“初始化时选定”列表中选择“请选择”字样，这样，在浏览器中默认显示“请选择”，如图所示。

单击“插入”面板上“表单”分类中的

按钮，在第11行的“教育水平”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“小学”、“大学”、“博士”等项目，在“值”栏中输入对应的值。单击“确定”按钮，回到属性面板，在“初始化时选定”列表中选择“请选择”菜单项，在浏览器中默认显示“请选择”。（12）菜单项设置完成后，回到属性面板中，在“16

（13）在表格的最后一行插入如图所示的“兴趣爱好”域。

单击“插入”面板上“表单”分类中的

按钮，在“兴趣爱好”后面的单元格中插入6个复选框，并且在每个复选框后面输入其标签。选择插入的复选框，在属性面板设置“复选框名称”和“选定值”，如图所示，注意，不同的复选框有不同的名称和选定值。（13）在表格的最后一行插入如图所示的“兴趣爱17

（14）最后，创建如图所示的两个图像按钮。

可以单击“插入”面板上“表单”分类中的

按钮直接插入两个普通按钮，如图所示。（14）最后，创建如图所示的两个图像按钮。18

（15）至此，表单大体上完成了，最后别忘了给表单添加处理脚本或程序。方法是：点击文档窗口下面标签栏中的<form>标签，选择表单，打开表单属性面板，在“动作”域中指定处理程序“form.asp”（假设该文件已创建）；在“方法”下拉菜单中选择“GET”；在“编辑类型”下拉菜单中选择“multipart/form-data”。如图所示。（15）至此，表单大体上完成了，最后别忘了给表19任务二：制作“我的搜索引擎”网页在本任务的制作过程中，首先添加了表单对象，之后插入文本字段，最后插入列表菜单完成制作。为使表单更加完善，小王学习了创建文本域、创建隐藏域、创建复选框、创建单选按钮、创建列表和菜单、创建跳转菜单、创建图像域、创建文件域、创建按钮等内容的操作方法。任务分析：理解牢记！任务二：制作“我的搜索引擎”网页在本任务的制作过程中，首先添20制作“我的搜索引擎”网页任务实施输入关键字和选择搜索类别制作“我的搜索引擎”网页任务输入关键字和选择搜索类别21

（1）在Dreamweaver中新建一个空白文档，将页面标题设为“我的搜索引擎”。在文档中输入“搜索引擎”4字，字体设为“隶书”，字号设为36像素，居中，然后将其保存为search.htm。

（2）添加一个表单。连续回车两次，在光标所在处，选择“插入”|“表单”|“表单”命令，或选择插入栏上的“表单”类别，然后单击“表单”按钮，在页面中插入表单，光标位置会出现一个红色虚线框。将光标定位在红色虚线框内，输入文本“关键字：”，字号大小设置为18像素，如图所示。（1）在Dreamweaver中新建一个空22

（3）插入文本字段。单击“文本字段”按钮

，在表单范围内的“关键字：”后插入一个“文本字段”。选中“文本字段”，在其属性面板上将“字符宽度”设为20，即文本字段的宽度为20；“最多字符数”设为60，即最多可写60个字符；“类型”设为“单行”。这里要强调的是一定要为文本字段命名为“_searchkey”，而且文本字段的名字必须为“_searchkey”。文本字段属性面板如所示。（3）插入文本字段。单击“文本字段”按钮，在23

（4

)插入列表菜单。单击插入“列表/菜单”按钮

，在文本字段后插入列表菜单。选中插入的列表菜单，在下拉菜单属性面板上，将下拉菜单取名为“_ss”。单击“列表值”按钮，打开“列表值”对话框，在“项目标签”下输入内容。属性面板和列表值对话框的设置如图所示。（4)插入列表菜单。单击插入“列表/菜单”按24

（5

)关闭“列表值”对话框，在属性面板上将“网站”设为默认选项，如图所示。

（6)插入搜索按钮。单击插入栏中“表单”分类工具栏上的“按钮”图标

，在下拉菜单后插入一个按钮。按钮的属性设置如图所示。（5)关闭“列表值”对话框，在属性面板上将“25

（7

)单击选中表单红色虚线框，设置表单属性，在“表单名称”文本框中输入“新浪网”，在“动作”文本框中填写新浪搜索引擎的URL“search.sina/cgi-bin/search/search.cgi”，提交表单的“方法”为GET。属性设置如图所示。（7)单击选中表单红色虚线框，设置表单属性，26

（8

)保存网页，按F12键进入浏览器。输入“热点新闻”，从列表框中选择“新闻标题”，单击“搜索”按钮，如图所示。网页就调用新浪网的搜索引擎进行搜索了。结果如图所示。（8)保存网页，按F12键进入浏览器。输27重点难点重点：创建表和域难点：创建各种域重点重点：创建表和域难点：创建各种域28

29

DreamweaverCS6网页设计实用案例教程DreamweaverCS630项目八使用表单本项目中，通过2个工作任务向大家介绍如何制作表单。很多人都有过填写表单的经历，利用表单可以帮助Internet服务器从用户处收集信息，例如收集用户资料、获取用户订单，也可以实现搜索接口。在Internet上也同样存在大量的表单，让你输入文字，让你进行选择。希望通过这些任务的实际操作，能够使读者掌握这些知识。项目八使用表单本项目中，通过2个工作任务向大家介绍如何制31目录任务一制作综合表单制作“我的搜索引擎”网页任务二目录任务一制作综合表单制作“我的搜索引擎”网页任务二32任务一：制作综合表单本任务所制作的是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。任务分析：理解牢记！任务一：制作综合表单本任务所制作的是一个当前网站中较为普遍的33制作综合表单任务实施制作表单属性制作综合表单任务制作表单属性34这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。操作步骤如下：（1）新建页面，单击插入面板表单分类下的

按钮，在页面中插入表单。这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码35

（2）根据页面排版的需要，在表单中插入12行2列的表格，如图所示。（2）根据页面排版的需要，在表单中插入12行236

（3）分别在表格中输入文字，并且设置文字的字体、颜色等属性，并设置单元格背景色，如图所示。（3）分别在表格中输入文字，并且设置文字的字体37

（4）在表格的第1行“用户名”和第4行“姓名”右侧插入单行文本域，在属性面板设置该域的“字符宽度”为25，“最多字符数”为20，如图所示。（4）在表格的第1行“用户名”和第4行“姓名”38

（5）在第2行“密码”和第3行“验证密码”右侧的单元格中插入密码域，设置密码域的“字符宽度”为25，“最多字符数”为14，如图所示。（5）在第2行“密码”和第3行“验证密码”右侧39

（6）在第5行“性别”右侧的单元格中插入两个单选按钮组，在属性面板上设置单选按钮的名称均为“sex”，并分别设置两个单选按钮的“选定值”为“0”和“1”，如图所示。（6）在第5行“性别”右侧的单元格中插入两个单40

（7）在第6行“出生日期”右侧的单元格中插入如图所示的域。其中“年”是一个单行文本域，设置其“字符宽度”为5，“最多字符数”为4，初始值为“20”，如图所示。（7）在第6行“出生日期”右侧的单元格中插入如41

（8）单击“插入”面板上“表单”分类中的

按钮，在“月”前面插入菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入01~12月份，在“值”栏中输入相应的值，如图所示。（8）单击“插入”面板上“表单”分类中的按钮42

（9）最后插入“日”文本域，设置其“字符宽度”为2，“最大字符数”为2，如图所示。

（10）分别在表格中第7、8、9行的“证件号码”、“电子邮件”、“联系电话”后面的单元格中插入单行文本域，根据实际需要，设置其“字符宽度”和“最大字符数”，如图所示。（9）最后插入“日”文本域，设置其“字符宽度”43

（11）单击“插入”面板上“表单”分类中的

按钮，在第10行的“所在省份”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“北京”等各省市名称，在“值”栏中输入对应的值，如图所示。（11）单击“插入”面板上“表单”分类中的按44

（12）菜单项设置完成后，回到属性面板中，在“初始化时选定”列表中选择“请选择”字样，这样，在浏览器中默认显示“请选择”，如图所示。

单击“插入”面板上“表单”分类中的

按钮，在第11行的“教育水平”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“小学”、“大学”、“博士”等项目，在“值”栏中输入对应的值。单击“确定”按钮，回到属性面板，在“初始化时选定”列表中选择“请选择”菜单项，在浏览器中默认显示“请选择”。（12）菜单项设置完成后，回到属性面板中，在“45

（13）在表格的最后一行插入如图所示的“兴趣爱好”域。

单击“插入”面板上“表单”分类中的

按钮，在“兴趣爱好”后面的单元格中插入6个复选框，并且在每个复选框后面输入其标签。选择插入的复选框，在属性面板设置“复选框名称”和“选定值”，如图所示，注意，不同的复选框有不同的名称和选定值。（13）在表格的最后一行插入如图所示的“兴趣爱46

（14）最后，创建如图所示的两个图像按钮。

可以单击“插入”面板上“表单”分类中的

按钮直接插入两个普通按钮，如图所示。（14）最后，创建如图所示的两个图像按钮。47

（15）至此，表单大体上完成了，最后别忘了给表单添加处理脚本或程序。方法是：点击文档窗口下面标签栏中的<form>标签，选择表单，打开表单属性面板，在“动作”域中指定处理程序“form.asp”（假设该文件已创建）；在“方法”下拉菜单中选择“GET”；在“编辑类型”下拉菜单中选择“multipart/form-data”。如图所示。（15）至此，表单大体上完成了，最后别忘了给表48任务二：制作“我的搜索引擎”网页在本任务的制作过程中，首先添加了表单对象，之后插入文本字段，最后插入列表菜单完成制作。为使表单更加完善，小王学习了创建文本域、创建隐藏域、创建复选框、创建单选按钮、创建列表和菜单、创建跳转菜单、创建图像域、创建文件域、创建按钮等内容的操作方法。任务分析：理解牢记！任务二：制作“我的搜索引擎”网页在本任务的制作过程中，首先添49制作“我的搜索引擎”网页任务实施输入关键字和选择搜索类别制作“我的搜索引擎”网页任务输入关键字和选择搜索类别50

（1）在Dreamweaver中新建一个空白文档，将页面标题设为“我的搜索引擎”。在文档中输入“搜索引擎”4字，字体设为“隶书”，字号设为36像素，居中，然后将其保存为search.htm。

（2）添加一个表单。连续回车两次，在光标所在处，选择“插入”|“表单”|“表单”命令，或选择插入栏上的“表单”类别，然后单击“表单”按钮，在页面中插入表单，光标位置会出现一个红色虚线框。将光标定位在红色虚线框内，输入文本“关键字：”，字号大小设置为18像素，如图所示。（1）在Dreamweaver中新建一个空51

（3）插入文本字段。单击“文本字段”按钮

，在表单范围内的“关键字：”后插入一个“文本字段”。选中“文本字段”，在其属性面板上将“字符宽度”设为20，即文本字段的宽度为20；“最多字符数”设为60，