《网页设计与制作实训十二资料》由会员分享，可在线阅读，更多相关《网页设计与制作实训十二资料（9页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作实训 表单设计实训内容：用户注册界面设计操作提示：第一步：制作“用户注册”界面1）在Dreamweaver CS4中新建一个网页文件，将网页标题设置为“用户注册”。2）选择“插入表单表单”命令在文档中插入一个表单，如图12-1所示。图12-1 插入表单3）将光标置于创建的表单内，插入一个12行2列的表格，并设置表格的宽度为530像素、间距为0像素、边框为0像素。4）选中第一行的两个单元格，单击“修改表格合并单元格”命令，将它们合并为一个单元格。用同样的方法将最后一行的单元格合并为一个单元格，如图12-2所示。图12-2 插入的表格5）将光标置于第一行的单元格中，输入“用户注册”，
2、在单元格“属性”面板中设置文本居中对齐。6）根据图12-3提供的界面内容，分别在表格第1列的其它单元格中输入昵称、真实姓名、密码等文本。选中输入的文本，并将它们设置为粗体、右对齐方式。图12-3 输入文本7）选中表格中所有的单元格，在单元格“属性”面板中设置单元格的高为30。第二步：插入文本域1）在图12-2所显示的表格中，将光标置于“昵称：”后面的单元格中，单击“表单”标签中的“文本字段”按钮，或者选择“插入表单文本域”命令，均将打开“输入标签辅助功能属性”对话框，如图12-4所示。图12-4 “输入标签辅助功能属性”对话框2）单击【确定】按钮，在光标处插入了一个单行的文本域。3）选中插入的
3、文本域，其对应的“属性”面板如图12-5所示。图12-5 文本域“属性”面板文本域“属性”面板中各选项含义如下：文本域：用于标志该文本域的名称。每个文本域的名称都不能相同，它相当于表单中的一个变量名，服务器通过这个变量名来处理用户在该文本域中输入的值。字符宽度：设置文本域中最多可显示的字符数。当设置该选项后，若是多行文本域，标签中增加cols属性，否则标签增加size属性。如果用户的输入超过字符宽度，则超出的字条将不被表单指定的处理程序接收。最多字符数：设置单行、密码文本域中最多可输入的字符数。当设置该项后，标签增加maxlength属性，如果用户的输入超过最大字符数，则表单产生警告声。类型：
4、设置文本域的类型，可在单行、多行或密码3个类型中任选一个。 “单行”类型将产生一个标签，它的type属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个标签，这表示此文本域为多行文本域。“密码”类型将产生一个标签，它的type属性为password，这表示此文本域为密码文本域，即在此文本域中接收的数据均以“*”显示，以保护数据不被其它人看到。初始值：设置文本域的初始值，即在首次载入表单时文本域中显示的值。类：将CSS规则应用于文本域对象。4）本例设置文本域的“字符宽度”为14，“类型”为单行。5）用同样的方法，分别在“真实姓名：”、“输入密码：”、“再次输入密码：”、“联系电话：
5、”、“E-mail：”后面的单元格中插入单行文本域。6）分别选中“输入密码：”、“再次输入密码：”后面的文本域，在其“属性”面板中设置“字符宽度”为8，“最多字符数”为8，“类型”为密码。7）将光标置于“说明：”后面的单元格中，单击“表单”标签中的“文本区域”按钮，在光标处插入一个文本区域。选中插入的文本区域，其对应的“属性”面板和图12-4不同的是“行数”。“行数”用于设置文本域的高度，设置后标签会增加rows属性。本例设置“行数”为4，“类型”为多行，如图12-6所示。选项的值可由用户根据需要自行确定，这里不做统一要求。图12-6 文本区域“属性”面板创建文本域后的“用户注册”页面效果如图
6、12-7所示。图12-7 插入的文本域 第三步：插入单选按钮1）将光标置于“性别：”后面的单元格中，单击“表单”标签中的“单选按钮”按钮，或者选择“插入表单单选按钮”命令，将打开“输入标签辅助功能属性”对话框，如图12-8所示。12-8 “输入标签辅助功能属性”对话框 2）在“标签”后面的文本框中输入“男”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“男”标识文字的单选按钮，如图12-9所示。图12-9 插入的单选按钮图 3）用同样的方法，在插入的单选按钮后面，再插入一个标识“女”的单选按钮。4）选中插入的单选按钮，其对应的“属性”面板如图12-10所示。图12-10
7、 单选按钮“属性”面板单选按钮“属性”面板中各选项含义如下：单选按钮：用于输入该单选按钮的名称。选定值：设置此单选按钮代表的值，一般为字符型数据，即当选定该单选按钮时，表单指定的处理程序获得的值。初始状态：设置该单选按钮的初始状态。即当浏览器中载入表单时，该单选按钮是否处于被选中状态。一组单选按钮中只能有一个按钮的初始状态被选中。类：将CSS规则应用于单选按钮。5）分别设置两个单选按钮的“单选按钮”为“radio”，“初始状态”为“未选中”。到此为止，单选按钮创建完毕。(提示：在同一组中的两个或多个单选按钮的名称必须相同。6）按下Ctrl+S组合键保存网页文件。按下F12键，在打开的网页中测试
8、单选按钮效果。(提示：可以在表单中插入单选按钮组。具体方法：选择“插入表单单选按钮组”命令，打开“单选按钮组”对话框，如图图12-11所示。点击“单选按钮”右侧的按钮或按钮，来添加一个或删除一个单选按钮。点击“标签”下侧的“单选”，可以修改单选按钮的标识内容。插入的带有标识内容的单选按钮组如图12-12所示。 图12-11 “单选按钮组”对话框 图12-12 单选按钮组第四步：插入复选框1）将光标置于“兴趣爱好：”后面的单元格中，单击“表单”标签中的“复选框”按钮，或者选择“插入表单复选框”命令，打开“输入标签辅助功能属性”对话框，在“标签”后面的文本框中输入“美术”，单击【确定】按钮，将在光
9、标处创建一个带有“美术”标识文字的复选框。2）用同样的方法，再创建3个复选框，并分别为它们添加标识文字，如图12-13所示。图12-13 插入的复选框3）选中创建的复选按钮，其对应的“属性”面板如图12-14所示。复选框“属性”面板与前面介绍的单选按钮“属性”面板基本相同，这里不再一一介绍。需要注意的是，与单选框名称不同的是，各个复选框名称不应该相同。图12-14 复选框“属性”面板保存网页文件。按下F12键在打开的网页中测试复选框效果。第五步：插入列表/菜单1）将光标置于“出生年月：”后面的单元格中，单击“表单”标签中的“列表/菜单”按钮，或者选择“插入表单列表/菜单”命令，打开“输入标签辅
10、助功能属性”对话框，在“标签”后面的文本框中输入“年”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“年”标识文字的“列表/菜单”对象。2）用同样的方法，在创建的“列表/菜单”对象后面，再创建一个带有“月”标识文字的“列表/菜单”对象，如图12-15所示。图12-15 插入的“列表/菜单”对象3）选中图12-14左侧的“列表/菜单”对象，列表/菜单“属性”面板如图12-16所示。图12-16 列表/菜单“属性”面板列表/菜单“属性”面板中各选项含义如下：列表/菜单：用于输入滚动列表的名称。类型：设置菜单的类型。选择“菜单”选项，将添加下拉菜单；选择“列表”选项，将添加滚
11、动列表。高度：设置滚动列表的高度，即列表中一次最多可以显示的项目数。选定范围：设置用户是否可以从列表中选择多个项目。初始化时选定：设置可滚动列表中默认选择的菜单项。【列表值】按钮：单击该按钮，将弹出一个“列表值”对话框，如图12-17所示。在该对话框中，单击加号按钮 或减号按钮 ，可在下拉列表中添加或删除列表项。在本例中，为左侧的“列表/菜单”对象设置列表值如图11-18所示。图12-17 “列表值”对话框 图12-18 设置列表值选中插入的“列表/菜单”对象，在其“属性”面板中设置“列表”的“高度”为1。用同样的方法，为右侧的“列表/菜单”对象设置列表值为1。效果如图12-19所示。图12-
12、19 设置“列表/菜单”对象的属性值第六步：插入按钮1）将光标置于表格的最后一行内，单击“插入表单按钮”命令，或者单击“表单”标签中的“按钮”按钮，均可打开“输入标签辅助功能属性”对话框，直接单击对话框中的【确定】按钮，即可在光标处插入一个“提交”按钮。2）用同样的方法，在“提交”按钮的后面再插入一个新的按钮。3）选中插入的第2个按钮，其对应的“属性”面板如图12-20所示。从中设置“动作”为“重设表单”，此时“值”后面显示“重置”。图12-20 按钮“属性”面板按钮“属性”面板中各选项含义如下：按钮名称：用于输入该按钮的名称，每个按钮的名称不能相同。值：设置按钮上显示的文本。动作：设置用户单击按钮时将发生的操作。包括3个选项：“提交表单”单击按钮时，将表单数据提交到表单指定的处理程序处理；“重设表单”单击按钮时，将表单域内的各对象值还原为初始值；“无”单击按钮时，选择为该按钮附加的行为或脚本。4）选中插入的按钮，在“属性”面板中设置对齐方式为“居中对齐”，如图12-21所示。图12-21 插入并设置属性后的按钮5）到此为止，“用户注册”页面制作完成。用户可根据自己的喜好进一步美化表单。6）按下Ctrl+S组合键保存文件。按下F12键预览“用户注册”页面效果。
