dreamweaver制作表格表单

《dreamweaver制作表格表单》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、行所有单元格，合并第7行所有单元格，合并第1列第4行、第1列第5行、第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.g

4、if和list_tool_favl.gif。(10)在第4行最后一个单元格输入“一口价283.30”，然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。图3插入表格并合并相关单元格(11)光标定位到第3行，然后切换到“代码”视图，如图4所示，在光标位置插入如下代码：WANGYEXX.COM同理，在最后一行插入第2条虚线。(12)按F12键就可以看到如图1所示的效果。图4切换到“代码”视图本节

5、作业：制作如图1网页。注意事项：1.注意设计视图和代码视图的切换。2.熟练各种面板工具的使用。网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！点击下载第五章案例及作业资源返回《HTML入门经典》教程列表转载请注明本文地址:http://www.wangyexx.com/html/jc/525.html表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它也是实现动态网页的一种主要表现形式。下面我们就使用DreamweaverCS3快速地创建常用的表单页面。一、

6、什么是表单表单是网站管理者与访问者之间沟通的桥梁，包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。表单元素用于接受用户的输入并提供一些交互式操作。用户输入的数据可以通过客户端脚本来验证，然后提交给服务器作进一步的处理。表单在万维网(www)上应用非常广泛，而且仍在不断发展。下面是一个“注册”表单的典型例子，如图1所示。图1注册表单页面二、表单的使用在DreamweaverCS3中，如何实现如图1所示的“注册”表单页面？一看图1就知道这是一个表单，所以要插入表单，再仔细看看表单域里面的文字和表单元素是不是都很规

7、整、井然有序？是的，这是什么在起作用？表格，所以这里还使用了表格对表单中的元素进行布局。经过这么一分析，我们基本上知道了图5.13所示的“注册”表单页面是由表单、表格以及表单元素构成的。下面我们就一步一步地实现如图1所示的表单页面。1.插入表单在Dreamweaver中插入表单时，表单以红线显示。用浏览器浏览时，这条线不会出现在网页上，仅在Dreamweaver中编辑时可见。添加到表单的每个项目都必须在表单内部，否则将视之为另一个表单，了解这一点是非常重要的。为了布局美观，您可以将表格和图形等对象放置到表单标签内。要将表

8、单插入网页，请执行以下步骤。(1)新建空白文档，将插入点放置在“文档”窗口内要插入表单的地方。单击“表单”工具栏中“表单”图标，或在菜单中选择“插入”一“表单”命令。(2)此时Dreamweaver即插入一个表单，如图2所示。在“设计”视图中，表单边框线显示为红色。如果未显示红色边框线，请选择“查看”一“可视化助理”