网页设计Dreamweaver,表单设计多媒体.docVIP

实验六 表单设计（创建一个信息反馈表单）和添加背景音乐 知识要点： 1. 使用HTML bgsound标记，为网页添加背景音乐效果。 2. 使用【插入】面板【常用】标签中的【媒体】按钮，添加多媒体元素。 3. 使用【插入】面板中的【表单】功能创建表单。使用【文本字段】按钮、【列表/菜单】按钮、【单选】按钮、【复选框】按钮和【提交】按钮制作信息反馈效果。 一、添加背景音乐 知识要点：使用标签bgsound为网页添加背景音乐效果。 操作步骤： （1）进入【拆分】视图。文档窗口上半部分代码视图，下半部分是设计视图。将光标置入到【代码】视图中第24条空白处，在其后面输入左尖括号“”，显示标签列表，如图1所示。 图1 （2）点击右侧的下拉列表箭头，在列表中选择（双击）标签“bgsound”，插入属性后，按一下空格键，在弹出的标签列表中选择（双击）属性“src”，如图2所示。 图2 （3）按【Enter】键后，出现“浏览”字样，如图3所示。单击“浏览”，弹出【选择文件】对话框，选择目录下【02_01】文件夹中的“sound.wav”文件，单击【确定】。然后按一下【空格】键，效果如图4所示。 图3 图4 （4）插入该属性后，在弹出的标签中选择属性“-1”，如图5所示，然后在其后面添加右尖括号“”，如图6所示。 图5 图6 （5）保存文件，按【F12】键浏览效果。 二、创建表单 1. 插入表格并改变表格的属性 （1）单击页面下面的空白图片，如图1所示。然后参照“04 图文混排”中“插入日期”将图片设置为背景第（1）-（5）的步骤，将其修改为背景图片。 图1 选中页面下面的空白图片 （2）将光标置入到单元格中，如图2所示，在文档窗口上方【插入/表单】标签中单击【表单】按钮，在当前单元格中插入一个表单，如图3所示。 图2 光标所在位置 图3 插入表单 (3) 在表单中插入表格。在表单区域中置入光标，在【插入/常用】标签中单击【表格】按钮，在弹出的【表单】对话框中“行”设置为1，“列”设置为2，单击【确定】按钮，插入一个1行2列的表格。如图4所示。 图4 在表单中插入1行2列表格 （4）在右侧单元格中再插入一个9行2列的表格（表格嵌套）。单击右侧单元格，在【插入/常用】标签中单击【表格】按钮，在弹出的【表单】对话框中进行设置，如图5所示，单击【确定】按钮，插入一个9行2列的表格，效果如图6所示。 图5 插入表格参数设置 图6 表格左侧单元格中插入9行2列表格 （5）在新插入的表格左侧单元格中输入文字。拖动鼠标同时选中第1列左侧第2、3、4、5、6、7行单元格，如图6所示，在【属性】面板→【水平】→【右对齐】→【垂直】→【居中】→【宽】设置为100像素→【高】设置为30像素。如图7所示。然后输入相应的文字，并定义文字的CSS样式规则（字体、字号及颜色）。再次调整表格左侧单元的宽度。其效果如图8所示。 图6 选中表格的第2、3、4、5、6、7行 图7 【属性】面板中参数设置 图8 表格中添加文字 （6）插入表单的文本字段和单选按钮。 1）在“姓名”右侧单元格中插入文本字段。将光标置入到第2行第2列单元格中，在【插入】→【表单】→【文本字段】按钮，在此单元格中插入“文本字段”输入框。在【属性】面板→【字符宽度】设置为15→【最多字符数】设为：20→其他参数默认。如图9所示，页面效果如图10所示。 图9 文本字段【属性】设置 图10 插入文本字段的页面效果 2）用同样的方法，分别在第5行第2列和第6行第2列单元格中插入文本字段，其中，“密码”行文本字段的属性参数设置如图11所示，其他参数默认。效果如图12所示。 图11 “密码”行文本字段的属性参数设置 图12 插入文本字段的页面效果 3）在“性别”右侧的单元格中插入第1个单选按钮。将光标置入到第3行第2列单元格中，在【插入】→【表单】→【单选按钮】按钮，即可在单元格中插入一个单选按钮。效果如图13所示，在【属性】面板→【初识状态】勾选【已勾选】单选项→并记下【选定值】为：radio，【单选按钮】名称为：radio。其效果如图14所示。 图13 插入单选按钮效果 图14 插入单选按钮的【属性】设置 4）插入第2个单选按钮。将光标放置到单选项按钮后面，输入文字“男”，在文字的后面，再插入一个单选按钮，再输入文字“女”，其【属性】设置如图15所示。其效果如图16所示。 注意：对于两个单选按钮的【属性】面板中【按钮名称】及【选定值】参数的设置都必须一致！否则，不能实现单选的效果。 图15 插入第2个单选按钮【属性】设置 图16 插入两个单选按钮效果 （7）在“年龄”右侧的单元格中插入表单的“列表/菜单”选项。将光标置入到第3行第2列单元格中，在【插入】→【表单】面板→【列表/菜单】按钮，即可插入一个“