实例Dreamweaver-制作表单页

制作表单页步骤1.启动DreamweaverMX2004程序，选择菜单“文件”—>“新建”命令，打开“新建文档”对话框.在对话框“常规”标签下选择“类型”列表中的“基本页”选项，创建HTML网页.2.创建页面后，按Ctrl+s键，保存网页到本地站点内，文件命名为form.htm.如图12-1所示.说明将页面保存到站点是为了在更新网站内容时,同时更新form网页,也便于站点的管理和维护.3.保存页面后,选择插入面板上的"表单"选项,在表单面板中单击"表单"按钮000,在页面中插入表单域.如图12-2所示.图12-1保存文件名为from保存图12-2在页面中插入表单域说明表单域就是表单的范围,在网页中以红色虚线表示,也是插入表单元素的前提条件.代码中以<form></form>格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中.4.将光标停放到表单域中,选择常用面板上的"表格"按钮,在表单域中插入8行2列的表格.5.用鼠标选中表格,打开属性面板.6.在表格属性中,设置其宽度为500像素,"填充"值为1,"间距值为0,在"对齐"下拉列表中选择"绝对居中"选项,"边框"值为1,最后在"边框颜色"文本框中输入色标值#FFFFFF(白色).说明在表单域中插入表格,是为了方便表单元素的排列布局.表格属性中的设置是为了表格有比较好显示效果,其中:"填充"值表示表格内的数字与表格的距离,"间距"表示表格与表格之间的距离,"边框"值表示表格外框的宽度."对齐"方式是显示表格在页面的位置,"边框颜色"则是一个十六进制值,表示颜色的色标值.7.拖动鼠标,选中表格第一行的两个单元格,在属性面板的"背景颜色"文本框中输入色标值#6699CC,或单击旁边的"背景颜色"按钮,选取蓝色.8.拖动鼠标,选中其他单元格,设置背景颜色为"灰色"(色标值为#CCCCCC).9.完成表格的属性设置后,按下键盘Ctrl+s键或选择"文件"—>"保存"命令,保存页面.提示DreamweaverMX2004没有像MicrosoftOffice那样的"自动保存"功能,所以用户应该养成经常保存文件的习惯.10.在第1行单元格内输入文字"用户信息",然后选中文字打开属性面板,单击面板的"绝对居中"按钮,使文字移动到表格的中间位置.设置文本颜色为"白色"(色标值#FFFFFF).如图12-3所示.图12-3在页面中插入表格和文本11.在第2行第1个单元格中输入文字"用户名:",然后单击表单面板中"文本字段"按钮,插入文本框.12.选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name",这是文本框的名称;在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数"和"初始值"为默认.参数设置如图12-4所示.着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。23.打开属性面板，分别选取中页面中的复选取框，在“复选取框名称”文本框中分别输入Study.web.Travel.Game。在“选取定值”文本框中也依次输入“读书”“上网”“旅游”“游戏”。“初始状态”都选择“未选中”。说明在复选取框中可以提供多种选项，并且用户可以同时选取多项的按钮。24.拖动鼠标选中第2行到第5行的单元格，然后打开属性面板，单击“左对齐”按钮，使表格中的内容都靠左对齐。如图12-11所示。25.合并第7行两个单元格，输入“个人介绍”文字，按住键盘Shift键回车，另起一行，然后单击表单面板上的“文本区域”按钮，插入文本域。图12-11选中表格单击“左对齐”按钮26.选中文本域，打开属性面板，在“文本域”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。参数设置如图12-12所示。图12-12“文本域”属性设置说明文本域实际上是可以输入大量文字内容的文本框。如果输入的文本超出文本框的范围，在浏览时文本框就仁自动出现下拉滚动条，以便用户浏览。“文本域”.“文本字段”和“密码字段”的区别就是在选择的“类型”不同，其中“密码”文本域在用户输入时以“*”号显示。27.在最后一行中，连续两次单击插入面板上的“表单”—>“按钮”按钮。在表格中插入两个按钮，其中一个是“发送”按钮，一个是“重填”按钮。28.选中第一个按钮，打开属性面板，在“标签”文本框中输入“发送”，在“动作”选项中选择“提交表单”单选按钮，参数设置如图12-13所示。接着选择第二个按钮，在属性面板中的“标签”文本框中输入“重填写”，“动作”选择“重设表单”选项。29.插入表单中各个需要的元素之后，整个表单页面的结构就制作完成了，按下F12键即可浏览网页。如图12-14所示。说明在本实例中主要是先介绍表单页面的布局制作和在表单中如何插入表单元素。读者在制作时要注意文字和表单元素的一一对应。图12-13发送按钮属性设置图12-14完成后的表单页面实验■模仿在DreamweaverMX2004编辑窗口下，创建HTML网页。保存页面，命名为form.htm。在页面中插入表单域，然后插入表格。在表格中插入各项表单元素及文字。表单制作页面完成后，保存页面。■创作1.根据本书配套光盘exp12-13\Site12文件夹中提供的表单网页（如图12-15~图12-18所示），构思自己的调查表。图12-15表单页图12-16表单