网页设计与制作实训十二_网页设计与制作实训

2020-02-28 其他范文下载本文

网页设计与制作实训十二由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“网页设计与制作实训”。

《网页设计与制作》实训

表单设计

实训内容：用户注册界面设计

操作提示：

第一步：制作“用户注册”界面

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个类型中任选一个。“单行”类型将产生一个标签，它的type属性为text，这表示此文本域为单行文本域。“多行”类型将产生一个标签，这表示此文本域为多行文本域。“密码”类型将产生一个标签，它的type属性为paword，这表示此文本域为密码文本域，即在此文本域中接收的数据均以“*”显示，以保护数据不被其它人看到。

初始值：设置文本域的初始值，即在首次载入表单时文本域中显示的值。类：将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

单选按钮“属性”面板

单选按钮“属性”面板中各选项含义如下：单选按钮：用于输入该单选按钮的名称。

选定值：设置此单选按钮代表的值，一般为字符型数据，即当选定该单选按钮时，表单指定的处理程序获得的值。

初始状态：设置该单选按钮的初始状态。即当浏览器中载入表单时，该单选按钮是否处于被选中状态。一组单选按钮中只能有一个按钮的初始状态被选中。

类：将CSS规则应用于单选按钮。

5）分别设置两个单选按钮的“单选按钮”为“radio”，“初始状态”为“未选中”。到此为止，单选按钮创建完毕。

提示：在同一组中的两个或多个单选按钮的名称必须相同。

6）按下〈Ctrl+S〉组合键保存网页文件。按下〈F12〉键，在打开的网页中测试单选按钮效果。提示：可以在表单中插入单选按钮组。具体方法：选择“插入→表单→单选按钮组”命令，打开“单选按钮组”对话框，如图图12-11所示。点击“单选按钮”右侧的按钮或按钮，来添加一个或删除一个单选按钮。点击“标签”下侧的“单选”，可以修改单选按钮的标识内容。插入的带有标识内容的单选按钮组如图12-12所示。

图12-11 “单选按钮组”对话框

图12-12 单选按钮组

第四步：插入复选框

1）将光标置于“兴趣爱好：”后面的单元格中，单击“表单”标签中的“复选框”按钮，或者选择“插入→表单→复选框”命令，打开“输入标签辅助功能属性”对话框，在“标签”后面的文本框中输入“美术”，单击【确定】按钮，将在光标处创建一个带有“美术”标识文字的复选框。

2）用同样的方法，再创建3个复选框，并分别为它们添加标识文字，如图12-13所示。

图12-13

插入的复选框

3）选中创建的复选按钮，其对应的“属性”面板如图12-14所示。复选框“属性”面板与前面介绍的单选按钮“属性”面板基本相同，这里不再一一介绍。需要注意的是，与单选框名称不同的是，各个复选框名称不应该相同。

图12-14

复选框“属性”面板

保存网页文件。按下〈F12〉键在打开的网页中测试复选框效果。

第五步：插入列表/菜单

1）将光标置于“出生年月：”后面的单元格中，单击“表单”标签中的“列表/菜单”按钮，或者选择“插入→表单→列表/菜单”命令，打开“输入标签辅助功能属性”对话框，在“标签”后面的文本框中输入“年”，“位置”选择“在表单项后”，单击【确定】按钮，将在光标处创建一个带有“年”标识文字的“列表/菜单”对象。

2）用同样的方法，在创建的“列表/菜单”对象后面，再创建一个带有“月”标识文字的“列表/菜单”对象，如图12-15所示。

图12-15 插入的“列表/菜单”对象

3）选中图12-14左侧的“列表/菜单”对象，列表/菜单“属性”面板如图12-16所示。

图12-16 列表/菜单“属性”面板列表/菜单“属性”面板中各选项含义如下：列表/菜单：用于输入滚动列表的名称。

类型：设置菜单的类型。选择“菜单”选项，将添加下拉菜单；选择“列表”选项，将添加滚动列表。

高度：设置滚动列表的高度，即列表中一次最多可以显示的项目数。选定范围：设置用户是否可以从列表中选择多个项目。初始化时选定：设置可滚动列表中默认选择的菜单项。

【列表值】按钮：单击该按钮，将弹出一个“列表值”对话框，如图12-17所示。在该对话框中，单击加号按钮

或减号按钮，可在下拉列表中添加或删除列表项。

在本例中，为左侧的“列表/菜单”对象设置列表值如图11-18所示。

图12-17 “列表值”对话框

图12-18 设置列表值

选中插入的“列表/菜单”对象，在其“属性”面板中设置“列表”的“高度”为1。用同样的方法，为右侧的“列表/菜单”对象设置列表值为1。效果如图12-19所示。