Dreamweaver制作表格表单

上传人:豆浆 文档编号:11391528 上传时间:2017-10-13 格式:DOC 页数:8 大小:218KB
返回 下载 相关 举报
Dreamweaver制作表格表单_第1页
第1页 / 共8页
Dreamweaver制作表格表单_第2页
第2页 / 共8页
Dreamweaver制作表格表单_第3页
第3页 / 共8页
Dreamweaver制作表格表单_第4页
第4页 / 共8页
Dreamweaver制作表格表单_第5页
第5页 / 共8页
点击查看更多>>
资源描述

《Dreamweaver制作表格表单》由会员分享,可在线阅读,更多相关《Dreamweaver制作表格表单(8页珍藏版)》请在金锄头文库上搜索。

1、Dreamweaver 制作表格和表单表格当初主要用于数据的格式化显示,现在表格更多地用于排列网页中的内容,今天我们就一起来看看在 Dreamweaver CS3 里如何创建表格,以及如何使用表格对网页中的图文进行布局。一、什么是表格布局表格布局就是为了精确定位、合理安排网页中的文字、图片等元素,它就像网页的脸面,是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置,从而设计出版式漂亮的页面。如图 1 所示,就是一个使用表格布局的页面。图 1 表格布局文字和图片二、表格的使用如果我们要实现如图 1 所示的表格布局页面,该怎么办?不急!下面就一步一步地实现如图 1 所示的表格布局页面。请

2、执行以下步骤:(1) 新建空白文档,然后选择“插入”一“表格”命令,以显示“表格”对话框,如图 2 所示。图 2 “表格”对话框(2) 输入所需的行数为 7 和列数为 4,选择“百分比”或“像素”为单位的表格宽度。(3) 在“边框粗细”后的文本框中输入边框宽度,如果不需要显示边框,请将值设为0。(4) 设置“单元格边距”和“单元格间距”。(5) 设置的相关值如图 2 所示,然后单击“确定”按钮。(6) 选中第 1 行所有单元格,然后右击鼠标选择“表格”一“合并单元格”命令,高度设为 34。同理,合并第 3 行所有单元格,合并第 7 行所有单元格,合并第 1 列第 4 行、第 1 列第 5 行、

3、第 1 列第 6 行这 3 个单元格,合并第 2 列第4 行、第 2 列第 5 行、第 2 列第 6 行这 3 个单元格,合并第 4 列第 4 行、第 4列第 5 行、第 4 列第 6 行这 3 个单元格,合并后的效果如图 3 所示。(7) 按图 1 添加相关文字内容。(8) 光标定位到第 4 行第 1 个单元格里,然后依次选择“插入”一“表单”一“复选框”命令。(9) 在第 1 行单元格里插入图片“commodity_tablehead.gif。同理,在相应位置插入图片 commodity_huaping.jpg、online_pic.gif 和 list_ tool_favl.gif。(1

4、0) 在第 4 行最后一个单元格输入“一口价 283.30”,然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。图 3 插入表格并合并相关单元格(11) 光标定位到第 3 行,然后切换到“代码”视图,如图 4 所示,在光标位置插入如下代码:WANGYEXX.COM同理,在最后一行插入第 2 条虚线。(12) 按 F12 键就可以看到如图 1 所示的效果。图 4 切换到“代码”视图本节作业:制作如图 1 网页。注意事项:1.注意设计视图和代码视图的切换。2.熟练各种面板工具的使用。网页学习网提示:光看教程是无法让你掌握 HTML 知识,最好是完成作业后才进入下一次教程,动起

5、手来吧!点击下载第五章案例及作业资源 返回HTML 入门经典教程列表转载请注明本文地址:http:/ HTML 的一个重要部分,主要用于采集和提交用户输入的信息,它也是实现动态网页的一种主要表现形式。下面我们就使用 Dreamweaver CS3 快速地创建常用的表单页面。一、什么是表单表单是网站管理者与访问者之间沟通的桥梁,包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。表单元素用于接受用户的输入并提供一些交互式操作。用户输入的数据可以通过客户端脚本来验证,然后提交给服务器作进一步的处理。表单在万维网(www)上应用非常广泛,而且仍在不断发展。下面是一个“注册”表单的典型例子,如

6、图 1 所示。图 1 注册表单页面二、表单的使用在 Dreamweaver CS3 中,如何实现如图 1 所示的“注册”表单页面?一看图 1就知道这是一个表单,所以要插入表单,再仔细看看表单域里面的文字和表单元素是不是都很规整、 井然有序?是的,这是什么在起作用?表格,所以这里还使用了表格对表单中的元素进行布局。经过这么一分析,我们基本上知道了图 5.13 所示的“注册”表单 页面是由表单、表格以及表单元素构成的。下面我们就一步一步地实现如图 1 所示的表单页面。1.插入表单在 Dreamweaver 中插入表单时,表单以红线显示。用浏览器浏览时,这条线不会出现在网页上,仅在 Dreamwea

7、ver 中编辑时可见。添加到表单的每个项目都必须在表单内部,否则将视之为另一个表单,了解这一点是非常重要的。为了布局美观,您可以将表格和图形等对象放置到表单标签内。要将表单插入网页,请执行以下步骤。(1) 新建空白文档,将插入点放置在“文档”窗口内要插入表单的地方。单击“表单”工具栏中“表单”图标,或在菜单中选择“插入”一“表单”命令。(2) 此时 Dreamweaver 即插入一个表单,如图 2 所示。在“设计”视图中,表单边框线显示为红色。如果未显示红色边框线,请选择“查看”一“可视化助 理”一“不可见元素”命令。单击表单边框线或选择“文档”窗口左下角的表单标签()可以选中整个表单。(3)

8、 将鼠标放到表单域内或选中表单域,此时在“属性”面板中就可以设置表单域的各项属性,如图 2 所示。图 2 设计视图中显示的表单 动作:此属性指定表单提交到服务器后,处理表单信息的动态页或脚本文件的位置,一般是一个 URL 路径,可以单击“浏览文件”图标来选择适当的页面或脚本文件。这里指定为 。 方法:可指定用于将表单数据提交到服务器的方法。当用户提交表单时,有GET 和 POST 两种方式可将浏览器的信息发送至服务器。选 POST 方式比较安全。在设置好表单域的各个属性后,一个表单就创建好了。2.插入表单元素(1) 在表单域里单击,然后插入一个 10 行 2 列的表格,合并最后 1 行所有单元

9、格,再合并倒数第 2 行所有单元格,其他设詈如图 3 所示。图 3 表格属性(2) 在表格的第 1、第 2、第 3 和第 4 行的第 1 列分别输入文本“登录名:”、“密码:”、“再次输入密码:”和“电子邮箱:”:先把光标定位到要插入表单元素的 单元格,然后使用“表单”工具栏,在第 2 列中分别依次插入一个文本框、两个密码框和一个文本框,属性设置如图 4 和图 5 所示。图 4 登录名文本框属性设置图 5 密码框属性设置(3) 在表格的第 5 行第 1 列中输入文本:“性别:”;在第 2 列中插入一个单选按钮组,并调整两个单选按钮的位置,使其处于同一行,然后在相应位置后插入男女图标,其设置如图

10、 6 所示。图 6 按钮组属性设置(4) 在表格的第 6 行第 1 列中输入文本:“爱好:”;在第 2 列中插入 3 个复选框,并在其后输入相应的文本,以提示用户的选择。(5)在表格的第 7 行第 1 列中输入文本: “出生日期:”;在第 2 列中插入 2个文本框和一个“列表菜单”。单击“属性”面板中的“列表值”按钮,设置其列表值如图 7 所示。图 7 列表属性设置(6) 在表格的第 8 行第 1 列和第 2 列分别插入一个按钮,左边的按钮动作为“重设表单”,右边的按钮动作为“提交表单”,并修改右边按钮的值为“同意以下服务条款,提交注册信息”。(7) 在表格的第 9 行,直接插入一个文件域即可

11、。(8) 在表格的第 10 行,先插入一个图标“read.gif,然后输入相应文本,最后插入一个多行文本域,其设置如图 8 所示。图 8 多行文本域属性设置(9) 把表格的第 1 列第 1 行到第 9 行单元格背景色设为“#E7FBFF”。最后所有的内容填充完和所有的表单元素插入完的效果如图 9 所示。图 9 注册表单元素在设计视图里的效果本节作业:使用 Dreamweaver 制作如下图所示的页面效果。注意事项:1.灵活运用 Dreamweaver 属性面板设置。网页学习网提示:光看教程是无法让你掌握 HTML 知识,最好是完成作业后才进入下一次教程,动起手来吧!点击下载第五章案例及作业资源 返回HTML 入门经典教程列表转载请注明本文地址:http:/

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 行业资料 > 其它行业文档

电脑版 |金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号