DreamweaverCS5网页制作第4章　表单.pptVIP

4.* 第4章 表 单 学习目标 理解表单的含义，能够插入表单域制作表单 能够插入和设置各种表单对象 能够在表格布局中添加表单对象 4.1　案例制作：个人信息调查表 4.2 新知解析 4.3 实战演练：网络写作注册信息表 本章内容 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 通过本案例的操作，你将学会：如何建立表单域和插入表单对象、如何设置表单对象属性、如何利用表格定位表单对象。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 1）新建文件夹biaodan, 利用站点对象设置向导新建站点，将站点文件夹定义为biaodan。新建网页，保存为diaochabiao.html。 2）在“插入”面板组“表单”选项下单击“表单”按钮 ，在文档窗口中将出现一个红色虚线框，光标处于表单域中。单击菜单“插入”→“表格”命令，设表格为9行1列、宽400像素，边框为1，其余参数为0。在属性面板中设“对齐”为居中对齐。选中所有单元格，在属性面板中设“高”为30，“垂直”为居中，颜色为#eeeeee，如图所示。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 3）在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为黑体，字号大小为16，粗体，文字颜色为黑色。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字体为黑体，字号大小为12，文字颜色为黑色。 在单元格中输入相应的文字信息，选中第1行文字，在属性面板的“目标规则”中选择“t1”，设单元格“水平”为居中对齐。选中其他几个单元格，在属性面板的“目标规则”中选择“t2”。如图所示。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 4）光标移到表格第2行的文字右侧，单击“插入”面板组“表单”选项下的“文本字段”按钮 插入文本字段。选中该文本字段，在属性面板中设文本域名称为name，如图所示。 同理，在第5行插入文本字段，选中该文本字段，在属性面板中设名称为pw，类型为“密码”。 在第7行插入文本字段，名称为Email。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 在第8行插入文本字段。选中该文本，在属性面板中设字段名称为note，字符宽度为50，行数为3，类型为“多行”。光标移到文字“备注：”后面，按Shift+回车键进行换行，效果如图所示。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 5）光标移到第3行文字右侧插入单选按钮组按钮 。在弹出的对话框中进行设定，如图4-6所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 6）在表格的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单”按钮 ，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加“项目标签”和“值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后单击“确定”按钮，如图所示。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 7）在第6 行的付费渠道项目内容中分别单击“插入”面板组“表单”选项下的“复选框”按钮 。选中复选框，在属性面板的“选定值” 文本框中键入支付项目名称。 在文档窗口调整各复选按钮的布局位置，如图所示。 4.1　案例制作：个人信息调查表 4.1. 案例制作：个人信息调查表 操作步骤： 8）光标移到第9 行，在“插入”面板组“表单”选项下单击“按钮”图标插入一个按钮。选中该按钮 ，在属性面板中，“值”设为“提交”，“动作”设为“提交表单”。重复上述操作插入第2个按钮，将按钮的“值”改为“重置”，“动作”改为“重置表单”。 9）调整单元格中文字及表单对象的位置，按F12进行预览。 4.2新知解析 1.插入表单 创建表单可以通过“插入”面板或菜单两种方法实现。步骤如下： 将插入点放在希望表单出现