实例Dreamweaver-制作表单页

1、 制作表单页步骤1. 启动Dreamweaver MX 2004 程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框.在对话框“常规”标签下选择“类型”列表中的“基本页”选项，创建HTML网页.2. 创建页面后，按Ctrl+s键，保存网页到本地站点内，文件命名为form.htm.如图12-1所示.说明 将页面保存到站点是为了在更新网站内容时,同时更新form网页,也便于站点的管理和维护.3. 保存页面后,选择插入面板上的表单选项,在表单面板中单击表单按钮000,在页面中插入表单域.如图12-2所示. 图12-1 保存文件名为 from 保存图12-2 在页面中插入表单域说明 表单域就是

2、表单的范围,在网页中以红色虚线表示,也是插入表单元素的前提条件.代码中以 格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中.4. 将光标停放到表单域中,选择常用面板上的表格按钮,在表单域中插入8行2列的表格.5. 用鼠标选中表格,打开属性面板.6. 在表格属性中,设置其宽度为500像素,填充值为1,间距值为0,在对齐下拉列表中选择绝对居中选项,边框值为1,最后在边框颜色文本框中输入色标值#FFFFFF(白色).说明 在表单域中插入表格,是为了方便表单元素的排列布局.表格属性中的设置是为了表格有比较好显示效果,其中:填充值表示表格内的数字与表格的距离,间距表示

3、表格与表格之间的距离,边框值表示表格外框的宽度.对齐方式是显示表格在页面的位置,边框颜色则是一个十六进制值,表示颜色的色标值.7. 拖动鼠标,选中表格第一行的两个单元格,在属性面板的背景颜色文本框中输入色标值#6699CC,或单击旁边的背景颜色按钮,选取蓝色.8. 拖动鼠标,选中其他单元格,设置背景颜色为灰色(色标值为#CCCCCC).9. 完成表格的属性设置后,按下键盘Ctrl+s键或选择文件保存命令,保存页面.提示 Dreamweaver MX 2004 没有像Microsoft Office 那样的自动保存功能,所以用户应该养成经常保存文件的习惯.10. 在第1行单元格内输入文字用户信息

4、,然后选中文字打开属性面板,单击面板的绝对居中按钮,使文字移动到表格的中间位置.设置文本颜色为白色(色标值#FFFFFF).如图12-3所示.图12-3 在页面中插入表格和文本11. 在第2行第1 个单元格中输入文字用户名:,然后单击表单面板中文本字段按钮,插入文本框.12. 选中插入的文本框,打开属性面板,在文本域下面的文本框中输入name,这是文本框的名称;在字符宽度文本框中输入25;类型选择单行单选按钮;最多字符数和初始值为默认.参数设置如图12-4所示.图 12-4 文本字段属性设置说明 文本字段是用户在网页中输入信息和数据的窗口,是用户和网站之间进行交互信息和数据的重要条件.但它不适

5、合长篇文字和图片的输入.在文本字段的属性面板上有最多字符数设置,如果对文本字段没有字符限制,可以不输入任何数值;如果要限制字符,则可以输入限制的数值,注意,一个中文字符是占两个字节.13. 在第2行第2个表格中输入文字密码:,按同样的方法插入文本框.然后选中文本框打开属性面板,在文本域中输入名称为Passowrd,字符宽度为25,类型选择密码单选按钮,最多字符数和初始值不用填.如图12-5所示.图12-5 密码文本字段的的属性设置14. 在第3行第1个表格中分别输入“性别：”“男”“女”，然后单击表单面板中的“单选按钮”按钮*，在“男”“女”的前面分别插入单选按钮。15. 选中第一个单选取按钮

6、，打开属性面板，在“单选按钮”文本框中输入单选按钮名称man，“选定值”文本框中输入“男”，“初始状态”选择“未选中”单选按钮，如图12-6所示。接着选中第2个单选按钮，其设置名称和选定值分别是woman.女，其他设置一样。 图12-6 单选按钮属性设置 说明 初始状态有两个选择，“已勾选”和“未选取中”。单选按钮是在众多选项中选择其中一项，不能多项。如果要在网页中一次插入多个单选按钮，则可以单击表单面板上“单选按钮组”按钮*，然后在打开的“单选取按钮组”对话框中，输入Label（标签）下的项目，在“名称”文本框中输入项目名称，单击加号按钮啬项目，完成后单击“确定”按钮，如图12-7所示。16

7、. 在第3 行第2个表格中输入“省份：”，然后单击表单面板中的“列表/菜单”按钮，在“省份：”旁边插入“列表/菜单”框。17. 选中“列表/菜单”框，单击属性能面板上的按钮，打开“列表值”对话框，在“项目标签”下面输入各个省份的名称，如北京.黑龙江等，单击按钮可增加项目，单击按钮可删除项目，右边的两个按钮，可用来调整项目的上下位置。如图12-8所示。 图12-7 “单选按钮组”对话框 图12-8 “列表/菜单”列表值设置18. 单击“确定”按钮，返回属性面板，在“初始化时选取定”文本框中出现了刚才设置的项目标签。然后在“列表/菜单”下面的文本框中输入“select”，在“类型”选项区选择“菜单

8、”单选按钮。如图12-9所示。图12-9 “列表/菜单”属性设置19. 在第4行的两个表格中分别插入“电话“和“地址”的“文本字段”。其属性的名称分别是Phone和Address，“字符宽度”都是25，“类型”都选择“单行”。20. 在第5行的第1个表格中输入“E-mail：”文字，插入“文本字段”，属性面板中的“文本域”名称为Email，“字符宽度”为25，“类型”选择“单行”，其他设置为默认就可以。21. 在第5行的第2个表格中输入“上传：”文字，然后单击表单面板中的“文件域”按钮，在“上传：”文字旁边插入文字域字段，接着在属性面板中的“文件域名称”中输入file，“字符宽度”文本框中输入

9、16，“最多字符”的文本框保留为空。参数设置如图12-10所示。图12-10 文件域属性设置说明 文件域是用来选择本地硬盘上文件夹目录地址，其后面跟着按钮，作用于就是单击它选择文件目录，允许用户上传。22. 拖动鼠标选中第6行两个表格，单 属性面板上的“合并” 按钮，合并两个表格，然后在表格中输入文字“爱好：”，空两格后分别输入读书.上网.旅游.游戏等文字，接着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。23. 打开属性面板，分别选取中页面中的复选取框，在“复选取框名称”文本框中分别输入Study.web.Travel.Game。在“选取定值”文本框中也依次输入“读书”“上

10、网”“旅游”“游戏”。“初始状态”都选择“未选中”。说明 在复选取框中可以提供多种选项，并且用户可以同时选取多项的按钮。24. 拖动鼠标选中第2行到第5行的单元格，然后打开属性面板，单击“左对齐”按钮，使表格中的内容都靠左对齐。如图12-11所示。25. 合并第7行两个单元格，输入“个人介绍”文字，按住键盘Shift键回车，另起一行，然后单击表单面板上的“文本区域”按钮，插入文本域。图12-11 选中表格单击“左对齐”按钮26. 选中文本域，打开属性面板，在“文本域 ”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。参数设置

11、如图12-12所示。图12-12 “文本域”属性设置 说明 文本域实际上是可以输入大量文字内容的文本框。如果输入的文本超出文本框的范围，在浏览时文本框就仁自动出现下拉滚动条，以便用户浏览。“文本域”.“文本字段”和“密码字段”的区别就是在选择的“类型”不同，其中“密码”文本域在用户输入时以“*”号显示。27. 在最后一行中，连续两次单击插入面板上的“表单”“按钮”按钮。在表格中插入两个按钮，其中一个是“发送”按钮，一个是“重填”按钮。28. 选中第一个按钮，打开属性面板，在“标签”文本框中输入“发送”，在“动作”选项中选择“提交表单”单选按钮，参数设置如图12-13所示。接着选择第二个按钮，在属性面板中的“标签”文本框中输入“重填写”，“动作”选择“重设表单”选项。29. 插入表单中各个需要的元素之后，整个表单页面的结构就制作完成了，按下F12键即可浏览网页。如图12-14所示。 说明 在本实例中主要是先介绍表单页面的布局制作和在表单中如何插入表单元素。读者在制作时要注意文字和表单元素的一一对应。图12-13 发送按钮属性设置图12-14 完成后的表单页面实验 模仿1. 在Dreamweaver MX 2004编辑窗口下，创建HTML网页。2. 保存页面，命名为form.htm。3. 在页面中插入表单域，然后插入表格。4. 在表格中插入各项表单元素及文字。5. 表单制作页面