Dreamweaver ,CS3网页设计案例教程 王春红 王瑾瑜主编 模块八 使用表单新.pptVIP

步骤： 步骤1 执行【文件】→【新建】命令，新建一个名为“biaodan.htm”网页文件。点击“属性面板”中的 命令设置页面背景为“images/bookbg.gif”。 步骤2 在页面中输入标题“班级留言板”，并对字体、字号及样式作出相应设置。 步骤3 单击 栏 选项 按钮，插入一个表单，在“文档”窗口中出现一个红色的虚线框。 步骤3 单击虚线框内，插入一个11行3列的表格，采用表格进行排版。选中表格，在 面板中设置表格宽度为“565”像素，边框宽度为“1”像素，表格背景色为“白色”，表格对齐方式为“居中对齐”。如图8-19所示。 实训任务 步骤４ 选择表格的第一行单元格，合并单元格，并输入“留言板”作为标题，并设置其格式。 步骤5 选择表格第二行第一列单元格，设置其宽度为“83”像素，水平对齐方式为“右对齐”，垂直对齐方式为“居中”，在单元格内输入“用户名：”，设置字体为“默认字体”，大小为“14”。 步骤6 选择表格第二行第二列单元格，设置其宽度为“230”像素，水平对齐方式为“左对齐”，垂直对齐方式为“居中”，在此单元格中插入一个“文本字段”对象，在 面板中设置文本字段的属性，文本域为“name”，类型为“单行”，字符宽度为“20”，最多字符数为“25”，初始值为“请输入用户名”。 步骤7 在表格第三行前两列中分别插入“密码”和“文本字段”对象。其中“文本字段”对象属性设为：文本域为“password”，类型为“密码”，字符宽度为“20”，最多字符数为“10”。单元格属性同上两步。 步骤8 在表格第四行前两列中分别插入“性别”和“单选按钮”对象。在文字 “男”、“女”后分别插入两个单选按钮，如图8-20所示。在“属性面板”中对单选按钮进行设置，例如将“男”后的单选按钮的“单选按钮”、“选定值”和“初始状态”依次设置为“sex”、“male”和“已勾选”， 将“女”后的单选按钮的“单选按钮”、“选定值”和“初始状态”依次设置为“sex”、“female”和“未选中”。单元格属性同上。 实训任务 步骤9 在表格第五行前两列中分别插入“年龄”和“文本字段”对象。单元格属性同上，“文本字段”对象属性参照以上步骤自行设置。 步骤10 在表格第六行前两列中分别插入“所学专业”和“菜单/列表”对象。在“属性面板”中对其进行设置，“菜单/列表”、“类型”依次设置为“select”、“菜单”。在“列表值”中把“项目标签”、“值”分别设为：“计算机”、“0”，“数学”、“1”等。如图8-21所示。单元格属性同上。 步骤11 合并表格第七行后两列单元格，在前两列单元格中分别插入“爱好”和“复选框”对象。在“上网”等文字后分别插入如图8-22所示的复选框。在 “属性面板”中对复选按钮进行设置，例如将“上网”后的复选框的“复选框名称”、“选定值”和“初始状态”依次设定为“favor”、“net”和“未选中”，将“体育”后的复选框的“复选框名称”、“选定值”和“初始状态”依次设定为“favor”、“moving”和“未选中”等。单元格属性同上。 步骤12 在表格第二行第三列单元格中，输入“选择头像”和“菜单/列表”对象。属性设置参考“菜单/列表”对象属性设置。 步骤13 合并表格第三、四、五、六行的第三列单元格，在此插入“图像域”对象。把光标定位在此单元格中，单击 栏 选“图像域”按钮，选择此素材文件夹中的“images/touxiang/001.gif”图像作为“图像域”源图像。在 “属性面板”中对“图像域”对象进行设置，将 “图像区域” 和“对齐”依次设定为“face”和“顶端”，如图8-23所示。 步骤14 合并表格第八行后两列单元格，在此单元格中，分别插入 对象和 对象作为设置字体格式的按钮。如图8-24所示。 此处的“图像域”对象和“菜单/列表”对象因为没做后台的连接，并不能实现文本格式的控制作用。 注意 步骤15 在表格第九行中，插入“文本域”作为留言内容。 步骤16 在表格第十行中，插入“单选按钮”对象和“图像域”对象或者插入“单选按钮组” 对象，作为“心情选择”。如图8-25所示。 图8-24插入图像域和菜单/列表对象 步骤17 在表格第十一行中，插入“按钮”对象。在 “属性面板”中对“按钮”对象进行设置，例如将“提交”按钮的“按钮名称”、“值”和“动作”依次设定为“ok”、“提交”或“提交表单”，将“重置”按钮的“按钮名称”、“值”和“动作”依次设定为“reset”、“重置” 或“重置表单”。 步骤18 保存文件（本例