网页设计dreamweaver,表单设计&多媒体

《网页设计dreamweaver,表单设计&多媒体》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验六表单设计（创建一个信息反馈表单）和添加背景音乐知识要点：1.使用HTML标记，为网页添加背景音乐效果。2.使用【插入】面板【常用】标签中的【媒体】按钮，添加多媒体元素。3.使用【插入】面板中的【表单】功能创建表单。使用【文本字段】按钮、【列表/菜单】按钮、【单选】按钮、【复选框】按钮和【提交】按钮制作信息反馈效果。一、添加背景音乐知识要点：使用标签为网页添加背景音乐效果。操作步骤：（1）进入【拆分】视图。文档窗口上半部分代码视图，下半部分是设计视图。将光标置入到

2、【代码】视图中第24条空白处，在其后面输入左尖括号“<”，显示标签列表，如图1所示。图1（2）点击右侧的下拉列表箭头，在列表中选择（双击）标签“bgsound”，插入属性后，按一下空格键，在弹出的标签列表中选择（双击）属性“src”，如图2所示。图2（3）按【Enter】键后，出现“浏览”字样，如图3所示。单击“浏览”，弹出【选择文件】对话框，选择目录下【02_01】文件夹中的“sound.wav”文件，单击【确定】。然后按一下【空格】键，效果如图4所示。图3图4（4）插入该属性后，在弹出的标签中选择属

3、性“-1”，如图5所示，然后在其后面添加右尖括号“>”，如图6所示。图5图6（5）保存文件，按【F12】键浏览效果。二、创建表单1.插入表格并改变表格的属性（1）单击页面下面的空白图片，如图1所示。然后参照“04图文混排”中“插入日期”将图片设置为背景第（1）-（5）的步骤，将其修改为背景图片。图1选中页面下面的空白图片（2）将光标置入到单元格中，如图2所示，在文档窗口上方【插入/表单】标签中单击【表单】按钮，在当前单元格中插入一个表单，如图3所示。光标位置插入的表单图2光标所在位置图3插入表单(3)在

4、表单中插入表格。在表单区域中置入光标，在【插入/常用】标签中单击【表格】按钮，在弹出的【表单】对话框中“行”设置为1，“列”设置为2，单击【确定】按钮，插入一个1行2列的表格。如图4所示。图4在表单中插入1行2列表格（4）在右侧单元格中再插入一个9行2列的表格（表格嵌套）。单击右侧单元格，在【插入/常用】标签中单击【表格】按钮，在弹出的【表单】对话框中进行设置，如图5所示，单击【确定】按钮，插入一个9行2列的表格，效果如图6所示。图5插入表格参数设置图6表格左侧单元格中插入9行2列表格（5）在新插入的表

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

6、列单元格中，在【插入】→【表单】→【文本字段】按钮，在此单元格中插入“文本字段”输入框。在【属性】面板→【字符宽度】设置为15→【最多字符数】设为：20→其他参数默认。如图9所示，页面效果如图10所示。插入文本字段图9文本字段【属性】设置图10插入文本字段的页面效果2）用同样的方法，分别在第5行第2列和第6行第2列单元格中插入文本字段，其中，“密码”行文本字段的属性参数设置如图11所示，其他参数默认。效果如图12所示。图11“密码”行文本字段的属性参数设置插入文本字段图12插入文本字段的页面效果3）在“

7、性别”右侧的单元格中插入第1个单选按钮。将光标置入到第3行第2列单元格中，在【插入】→【表单】→【单选按钮】按钮，即可在单元格中插入一个单选按钮。效果如图13所示，在【属性】面板→【初识状态】勾选【已勾选】单选项→并记下【选定值】为：radio，【单选按钮】名称为：radio。其效果如图14所示。插入单选按钮图13插入单选按钮效果图14插入单选按钮的【属性】设置4）插入第2个单选按钮。将光标放置到单选项按钮后面，输入文字“男”，在文字的后面，再插入一个单选按钮，再输入文字“女”，其【属性】设置如图15所

8、示。其效果如图16所示。注意：对于两个单选按钮的【属性】面板中【按钮名称】及【选定值】参数的设置都必须一致！否则，不能实现单选的效果。图15插入第2个单选按钮【属性】设置图16插入两个单选按钮效果（7）在“年龄”右侧的单元格中插入表单的“列表/菜单”选项。将光标置入到第3行第2列单元格中，在【插入】→【表单】面板→【列表/菜单】按钮，即可插入一个“列表/菜单”选项。在【属性】面板→单击【列表值】按钮→弹出【列表值】对话框→在对话框中添加年龄