当前位置:首页 >> 互联网 >>

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


实验六 表单设计(创建一个信息反馈表单)和添加背景音乐

知识要点: 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 列单元格中,在【插入】→【表单】面板→【列表/菜单】 按钮,即可插入一个“列

表/菜单”选项。在【属性】面板→单击【列表值】按钮→弹出【列表值】对话框→在对话 框中添加年龄段数值。注意,每添加一个年龄段数值,需单击一下添加按钮( “+”号) ,如 图 17 所示,单击【确定】按钮,效果 18 所示。

图 17 “列表值”对话框参数设置

图 18 插入“列表/菜单”选项效果

(8)在“兴趣爱好”右侧单元格中插入表单的复选框按钮。 1)插入一个复选框按钮。将光标置入到第 7 行第 2 列单元格中,在【插入】→【表单】 →【复选框】 按钮,在单元格中插入复选框。在复选框的后面输入文字“体育” ,并定义

文字的字体、字号及颜色等参数。如图 19 所示。

图 19 插入“复选框”按钮

2)用相同的方法,再次插入多个复选框,并分别输入相应的文字,设置它们的字体、 字号及颜色等参数。效果如图 20 所示。

图 20 添加文字后的效果

(9)插入表单的文本区域,制作“意见”文字输入框。 1)将光标置入第 8 行第 1 列单元格中,在【属性】面板→【水平】→【右对齐】→【垂 直】→【顶端】 ,在单元格中输入“意见”文字,设置文字颜色,并单击【加粗】按钮。效 果如图 21 所示。

图 21 添加“意见”文字效果

2)将光标置入“意见”右侧的单元格中,单击【插入】→【表单】面板→【文本区域】 按钮,插入一个文本区域。在【属性】面板→【字符宽度】设为:45→【行数】设为:5。 如图 22 所示,其效果如图 23 所示。

图 22 插入“文本区域”属性参数设置

图 23 插入“文本区域”效果

(10)制作“提交”与“重置”按钮 1)将光标置于第 9 行第 2 列单元格中,选择【编辑】→【首选参数】菜单命令→在【首 选参数】对话框→选择【常规】→在【编辑选项】中→勾选【允许多个连续的空格】复选框, 以便在插入两个按钮中添加空格。在【属性】面板→【水平】设置为: 【居中对齐】→【垂 直】设置为: 【居中】 。 2)在【插入】→【表单】→单击两次【按钮】 按钮,插入两个提交按钮,效果如

图 24 所示。将光标置入到两个按钮之间,多次按空格键,将其分隔开。效果如图 25 所示。

图 24 插入两个按钮效果

图 25 在两个按钮中添加空格效果

3)选中第 2 个按钮,在【属性】面板→【动作】→勾选【重设表单】选项,如图 25 所示。

图 26 第 2 个按钮的【属性】设置为“重置”

4)保存文件,敲击【F12】键进行浏览,效果如图 27 所示。

图 27 制作表单提交按钮效果

(11)在左侧单元格中插入图片。点击左侧单元格,单击【插入】面板→【常规】→【图 像】按钮→在弹出的对话框选择“bdsj.png”图像文件→将【属性】面板→【垂直边距】设 置为:20→【水平边距】设置为:30。其效果如图 28 所示。

图 28 表单设计完成效果


相关文章:
网页设计多媒体之Dreamweaver教程
网页设计多媒体Dreamweaver 教程 一、网站概述 1、网站与网页的概述 、 网页...表单: ⑤音频和视频:通过在网页中插入音视频插件实现,两种格式比较流行,一是 ...
网页设计Dreamweaver 复习题(选择题)4
网页设计Dreamweaver 复习题(选择题)4_计算机软件及...“&”代表( A. < B. > C. & D. “ ...同一文件的不同部分、多媒体信息,但不能是应用程序...
《网页设计与制作Dreamweaver》期末考试试题_图文
网页设计制作Dreamweaver》期末考试试题_教学案例/...( A. " B.   C. & D. &...文本 插件 后可插入网页的多媒体对象包括( ABCD )...
Dreamweaver 网页设计 试题
Dreamweaver 网页设计 试题_IT认证_资格考试/认证_...& D. © 12. 关于超链接,下列( A. ...在Dreamweawer 中,可以向网页中插入的多媒体格式有...
Dreamweaver网页设计模拟试题第一套
Dreamweaver网页设计模拟试题第一套_其它_高等教育_教育...文本 插件 后可插入网页的多媒体对象包括( ABCD )...( B E. " F.   G. & H. ...
Dreamweaver网页设计
&amp D.&copy 9.如果希望插入到网页中的视频是循环播放的,则在代码段中会有...图片只能是 JPG 类型 2.在 Dreamweaver 中,可以向网页中插入的多媒体格式有( ...
Dreamweaver网页设计复习资料-2012.6
Dreamweaver网页设计复习资料-2012.6_其它考试_资格考试...&NBSP; C. & D.© 9. 关于超链接,...如下图所示,为插入网页中的( B )多媒体格式的...
Dreamweaver网页设计模拟试卷
下列特殊符号( A. " B.   C. & D. © )表示的是...必须准备两张图片 3. 在 Dreamweaver 中,可以向网页中插入的多媒体格式有( )...
Dreamweaver网页设计模拟试卷
下列特殊符号( A. " B.   C. & D. © )表示的是...必须准备两张图片 3. 在 Dreamweaver 中,可以向网页中插入的多媒体格式有( )...
Dreamweaver 8.0 多媒体网页制作教程
Dreamweaver 8.0 多媒体网页制作教程_计算机软件及应用_IT/计算机_专业资料。自己...多媒体动画、表格、 图层、框架、表单、Flash 和 ActiveX 等网页元素,使各项...
更多相关标签: