实例dreamweaver-制作表单页.pdf

制作表单页 步骤 1. 启动 Dreamweaver MX 2004 程序，选择菜单 “文件”— “新建”命令，打开 “新 建文档”对话框.在对话框“常规”标签下选择“类型”列表中的“基本页”选项，创建 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 键或选择文件—保存命令,保存页面. 提示 Dreamweaver MX 2004 没有像 Microsoft Office 那样的 自动保存功能,所以 用户应该养成经常保存文件的习惯. 10. 在第 1 行单元格内输入文字用户信息,然后选中文字打开属性面板,单击面板的绝 对居中按钮,使文字移动到表格的中间位置.设置文本颜色为 白色(色标值#FFFFFF).如图 12-3 所示. 图 12-3 在页面中插入表格和文本 11. 在第 2 行第 1 个单元格中输入文字用户名:,然后单击表单面板中文本字段按钮, 插入文本框. 12. 选中插入的文本框,打开属性面板,在文本域下面的文本框中输入name,这是文本 框的名称;在字符宽度文本框中输入25;类型选择单行单选按钮;最多字符数和初始 值为默认.参数设置如图 12-4 所示. 图 12-4 文本字段属性设置 说明 文本字段是用户在网页中输入信息和数据的窗口,是用户和网站之间进行交 互信息和数据的重要条件.但它不适合长篇文字和图片的输入.在文本字段的属性面板上有 最多字符数设置,如果对文本字段没有字符限制,可以不输入任何数值;如果要限制字符,则可 以输入限制的数值,注意,一个中文字符是占两个字节. 13. 在第 2 行第 2 个表格中输入文字密码:,按同样的方法插入文本框.然后选中文本框 打开属性面板,在文本域中输入名称为Passowrd,字符宽度为 25,类型选择密码单选按 钮,最多字符数和初始值不用填.如图 12-5 所示. 图 12-5 密码文本字段的的属性设置 14. 在第 3 行第 1 个表格中分别输入“性别：”“男”“女”，然后单击表单面板中的“单 选按钮”按钮*，在“男”“女”的前面分别插入单选按钮。 15. 选中第一个单选取按钮，打开属性面板，在“单选按钮”文本框中输入单选按钮名 称 man ，“选定值”文本框中输入“男”，“初始状态”选择“未选中”单选按钮，如图 12-6 所示。接着选中第 2 个单选