网页设计与制作实训十二.doc

《网页设计与制作》实训 表单设计 实训内容：用户注册界面设计 操作提示： 第一步：制作“用户注册”界面 1）在Dreamweaver CS4中新建一个网页文件，将网页标题设置为“用户注册”。 2）选择“插入→表单→表单”命令在文档中插入一个表单，如图12-1所示。 图12-1 插入表单 3）将光标置于创建的表单内，插入一个12行2列的表格，并设置表格的宽度为530像素、间距为0像素、边框为0像素。 4）选中第一行的两个单元格，单击“修改→表格→合并单元格”命令，将它们合并为一个单元格。用同样的方法将最后一行的单元格合并为一个单元格，如图12-2所示。 图12-2 插入的表格 5）将光标置于第一行的单元格中，输入“用户注册”，在单元格“属性”面板中设置文本居中对齐。 6）根据图12-3提供的界面内容，分别在表格第1列的其它单元格中输入昵称、真实姓名、密码等文本。选中输入的文本，并将它们设置为粗体、右对齐方式。 图12-3 输入文本 7）选中表格中所有的单元格，在单元格“属性”面板中设置单元格的高为30。 第二步：插入文本域 1）在图12-2所显示的表格中，将光标置于“昵称：”后面的单元格中，单击“表单”标签中的“文本字段”按钮，或者选择“插入→表单→文本域”命令，均将打开“输入标签辅助功能属性”对话框，如图12-4所示。 图12-4 “输入标签辅助功能属性”对话框 2）单击【确定】按钮，在光标处插入了一个单行的文本域。 3）选中插入的文本域，其对应的“属性”面板如图12-5所示。 图12-5 文本域“属性”面板 文本域“属性”面板中各选项含义如下： 文本域：用于标志该文本域的名称。每个文本域的名称都不能相同，它相当于表单中的一个变量名，服务器通过这个变量名来处理用户在该文本域中输入的值。 字符宽度：设置文本域中最多可显示的字符数。当设置该选项后，若是多行文本域，标签中增加cols属性，否则标签增加size属性。如果用户的输入超过字符宽度，则超出的字条将不被表单指定的处理程序接收。 最多字符数：设置单行、密码文本域中最多可输入的字符数。当设置该项后，标签增加maxlength属性，如果用户的输入超过最大字符数，则表单产生警告声。 类型：设置文本域的类型，可在单行、多行或密码3个类型中任选一个。 “单行”类型将产生一个input标签，它的type属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个textarea标签，这表示此文本域为多行文本域。“密码”类型将产生一个input标签，它的type属性为password，这表示此文本域为密码文本域，即在此文本域中接收的数据均以“*”显示，以保护数据不被其它人看到。 初始值：设置文本域的初始值，即在首次载入表单时文本域中显示的值。 类：将CSS规则应用于文本域对象。 4）本例设置文本域的“字符宽度”为14，“类型”为单行。 5）用同样的方法，分别在“真实姓名：”、“输入密码：”、“再次输入密码：”、“联系电话：”、“E-mail：”后面的单元格中插入单行文本域。 6）分别选中“输入密码：”、“再次输入密码：”后面的文本域，在其“属性”面板中设置“字符宽度”为8，“最多字符数”为8，“类型”为密码。 7）将光标置于“说明：”后面的单元格中，单击“表单”标签中的“文本区域”按钮，在光标处插入一个文本区域。 选中插入的文本区域，其对应的“属性”面板和图12-4不同的是“行数”。“行数”用于设置文本域的高度，设置后标签会增加rows属性。本例设置“行数”为4，“类型”为多行，如图12-6所示。选项的值可由用户根据需要自行确定，这里不做统一要求。 图12-6 文本区域“属性”面板 创建文本域后的“用户注册”页面效果如图12-7所示。 图12-7 插入的文本域 第三步：插入单选按钮 1）将光标置于“性别：”后面的单元格中，单击“表单”标签中的“单选按钮”按钮，或者选择“插入→表单→单选按钮”命令，将打开“输入标签辅助功能属性”对话框，如图12-8所示。 12-8 “输入标签辅助功能属性”对话框 2）在“标签”后面的文本框中输入“男”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“男”标识文字的单选按钮，如图12-9所示。 图12-9 插入的单选按钮图 3）用同样的方法，在插入的单选按钮后面，再插入一个标识“女”的单选按钮。 4）选中插入的单选按钮，其对应的“属性”面板如图12-10所示。 图12-10 单选按钮“属性”面板 单选按钮“属性”面板中各选项含义如下： 单选按钮：用于输入该单选按钮的名称。 选定值：设置此单选按钮代表的值，一般为字符型数据，即当选定该单选按钮时，表单指定的处理程序获得的值。 初始状态：设置该单