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

1、dreamweaver-cs6网页设计资料-项目八-使用表单-PPT精选文档-PPT精选文档本项目中，通过2个工作任务向大家介绍如何制作表单。很多人都有过填写表单的经历，利用表单可以帮助Internet服务器从用户处收集信息，例如收集用户资料、获取用户订单，也可以实现搜索接口。在Internet上也同样存在大量的表单，让你输入文字，让你进行选择。希望通过这些任务的实际操作，能够使读者掌握这些知识。任务一任务一制作综合表单制作综合表单制作制作“我的搜索引擎我的搜索引擎”网页网页任务二任务二本任务所制作的是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮

2、、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。制作综合表单制作综合表单任务任务实施实施制作表单属性制作表单属性这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。操作步骤如下：（1）新建页面，单击插入面板表单分类下的 按钮，在页面中插入表单。（2）根据页面排版的需要，在表单中插入12行2列的表格，如图所示。（3）分别在表格中输入文字，并且设置文字的字体、颜色等属性，并设置单元格背景色，如图所示。（4）在表格的第1行“用

3、户名”和第4行“姓名”右侧插入单行文本域，在属性面板设置该域的“字符宽度”为25，“最多字符数”为20，如图所示。（5）在第2行“密码”和第3行“验证密码”右侧的单元格中插入密码域，设置密码域的“字符宽度”为25，“最多字符数”为14，如图所示。（6）在第5行“性别”右侧的单元格中插入两个单选按钮组，在属性面板上设置单选按钮的名称均为“sex”，并分别设置两个单选按钮的“选定值”为“0”和“1”，如图所示。（7）在第6行“出生日期”右侧的单元格中插入如图所示的域。其中“年”是一个单行文本域，设置其“字符宽度”为5，“最多字符数”为4，初始值为“20”，如图所示。（8）单击“插入”面板上“表单”

4、分类中的 按钮，在“月”前面插入菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入0112月份，在“值”栏中输入相应的值，如图所示。（9）最后插入“日”文本域，设置其“字符宽度”为2，“最大字符数”为2，如图所示。（10）分别在表格中第7、8、9行的“证件号码”、“电子邮件”、“联系电话”后面的单元格中插入单行文本域，根据实际需要，设置其“字符宽度”和“最大字符数”，如图所示。（11）单击“插入”面板上“表单”分类中的 按钮，在第10行的“所在省份”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“北京”等

5、各省市名称，在“值”栏中输入对应的值，如图所示。（12）菜单项设置完成后，回到属性面板中，在“初始化时选定”列表中选择“请选择”字样，这样，在浏览器中默认显示“请选择”，如图所示。单击“插入”面板上“表单”分类中的 按钮，在第11行的“教育水平”后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框，在“项目标签”栏中输入“小学”、“大学”、“博士”等项目，在“值”栏中输入对应的值。单击“确定”按钮，回到属性面板，在“初始化时选定”列表中选择“请选择”菜单项，在浏览器中默认显示“请选择”。（13）在表格的最后一行插入如图所示的“兴趣爱好”域。单击“插入”面板上“表单”

6、分类中的 按钮，在“兴趣爱好”后面的单元格中插入6个复选框，并且在每个复选框后面输入其标签。选择插入的复选框，在属性面板设置“复选框名称”和“选定值”，如图所示，注意，不同的复选框有不同的名称和选定值。（14）最后，创建如图所示的两个图像按钮。可以单击“插入”面板上“表单”分类中的 按钮直接插入两个普通按钮，如图所示。（15）至此，表单大体上完成了，最后别忘了给表单添加处理脚本或程序。方法是：点击文档窗口下面标签栏中的标签，选择表单，打开表单属性面板，在“动作”域中指定处理程序“form.asp”（假设该文件已创建）；在“方法”下拉菜单中选择“GET”；在“编辑类型”下拉菜单中选择“multi

7、part/form-data”。如图所示。在本任务的制作过程中，首先添加了表单对象，之后插入文本字段，最后插入列表菜单完成制作。为使表单更加完善，小王学习了创建文本域、创建隐藏域、创建复选框、创建单选按钮、创建列表和菜单、创建跳转菜单、创建图像域、创建文件域、创建按钮等内容的操作方法。制作制作“我的搜索引擎我的搜索引擎”网页网页任务任务实施实施输入关键字和选择搜索类别输入关键字和选择搜索类别 （1）在 Dreamweaver 中新建一个空白文档，将页面标题设为“我的搜索引擎”。在文档中输入“搜索引擎”4字，字体设为“隶书”，字号设为 36像素，居中，然后将其保存为 search.htm。（2）

8、添加一个表单。连续回车两次，在光标所在处，选择“插入”|“表单”|“表单”命令，或选择插入栏上的“表单”类别，然后单击“表单”按钮，在页面中插入表单，光标位置会出现一个红色虚线框。将光标定位在红色虚线框内，输入文本“关键字：”，字号大小设置为 18像素，如图所示。（3）插入文本字段。单击“文本字段”按钮，在表单范围内的“关键字：”后插入一个“文本字段”。选中“文本字段”，在其属性面板上将“字符宽度”设为 20，即文本字段的宽度为 20；“最多字符数”设为 60，即最多可写 60个字符；“类型”设为“单行”。这里要强调的是一定要为文本字段命名为“_searchkey”，而且文本字段的名字必须为“

9、_searchkey”。文本字段属性面板如所示。（4)插入列表菜单。单击插入“列表/菜单”按钮，在文本字段后插入列表菜单。选中插入的列表菜单，在下拉菜单属性面板上，将下拉菜单取名为“_ss”。单击“列表值”按钮，打开“列表值”对话框，在“项目标签”下输入内容。属性面板和列表值对话框的设置如图所示。（5)关闭“列表值”对话框，在属性面板上将“网站”设为默认选项，如图所示。（6)插入搜索按钮。单击插入栏中“表单”分类工具栏上的“按钮”图标，在下拉菜单后插入一个按钮。按钮的属性设置如图所示。（7)单击选中表单红色虚线框，设置表单属性，在“表单名称”文本框中输入“新浪网”，在“动作”文本框中填写新浪搜索引擎的 URL“search.sina/cgi-bin/search/search.cgi”，提交表单的“方法”为 GET。属性设置如图所示。（8)保存网页，按 F12 键进入浏览器。输入“热点新闻”，从列表框中选择“新闻标题”，单击“搜索”按钮，如图所示。网页就调用新浪网的搜索引擎进行搜索了。结果如图所示。重点：创建表和域重点：创建表和域难点：创建各种域难点：创建各种域