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

网页设计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表单进行网页设计 表单设计网页制作课程 15 电商 4、5 班 2 课时 一、 【教学目标...
用dreamweaver制作查询表单
dreamweaver制作查询表单_IT/计算机_专业资料。dreamweaver 多条件查询 表单 asp 用Dreamweaver 做搜索表单本例介绍了在 Dreamweaver MX 2004 中如何制作 ASP 搜索...
Dreamweaver表单应用详解
Dreamweaver表单应用详解_互联网_IT/计算机_专业资料...为了顾及不同的网页设计工具, 本文只讲述代码的设计...提交的媒体方式是默认的 application/x-www-form-...
网页设计(考试参考答案)
网页设计》模拟试卷 1 套一、判断正误(正确的用“?” 、错误的用“?”...(4)在 DREAMWEAVER cs6 中,与表格一样,表单也能嵌套。 (? )(5)在 ...
《Dreamweaver制作表单》教学设计
教学设计 作者:王丽莉 来源:《黑河教育》2013 年第 07 期 教材分析 《Dreamweaver 制作表单》是中等职业制作网页的方法及过程专业教材《网页设计制 作》中第七...
网页基本设计题目及答案
16. 17. D.网页的边界 18. 在 Dreamweaver 设计视图中,单击___D___可以选中表单虚线框。 A. B. C. D. 在表格“属性”面板中,可以___D___。 A....
dreamweaver制作留言板步骤
dreamweaver制作留言板步骤_计算机软件及应用_IT/计算机_专业资料。留言板 动态...用 DW 制作以下这样的页面: 设置表单的属性如下: 姓名:设置为单行文本域,名称...
1-6:DW 8 表单的制作
1-6:DW 8 表单制作_电脑基础知识_IT/计算机_专业资料。汨罗市职业中专学校...Dreamweaver 8 软件、教学视频文件 教学资源 设备资源: 电脑、易思多媒体教学...
dreamweaver网页制作 第7章 表单
dreamweaver网页制作 第7章 表单_IT/计算机_专业资料。dreamweaver软件入门必备知识 第7 章 表单制作动态网页时,要实现信息交互,常常用到表单。常见的表单有搜索...
网页制作说课PPT_图文
教材分析与处理本节课是《DREAMWEAVER CS3 网页制作案例应用》第 8 项目的表单...多媒体设备,如投影仪、麦克风等 软件环境: 1. 2. 3. 4. WinXP,Dreamweaver...
更多相关标签: