Dw表格单元格间隙.docx
《Dw表格单元格间隙.docx》由会员分享，可在线阅读，更多相关《Dw表格单元格间隙.docx（8页珍藏版）》请在冰豆网上搜索。
Dw表格单元格间隙
竭诚为您提供优质文档/双击可除
Dw表格单元格间隙
篇一：
dreamweaver制作表格表单
dreamweaver制作表格和表单
表格当初主要用于数据的格式化显示，现在表格更多地用于排列网页中的内容，今天我们就一起来看看在dreamweavercs3里如何创建表格，以及如何使用表格对网页中的图文进行布局。
一、什么是表格布局
表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。
如图1所示，就是一个使用表格布局的页面。
图1表格布局文字和图片
二、表格的使用
如果我们要实现如图1所示的表格布局页面，该怎么办？
不急！
下面就一步一步地实现如图1所示的表格布局页面。
请执行以下步骤：
（1）新建空白文档，然后选择“插入”一“表格”命令，以显示“表格”对话框，如图2所示。
图2“表格”对话框
（2）输入所需的行数为7和列数为4，选择“百分比”或“像素”为单位的表格宽度。
（3）在“边框粗细”后的文本框中输入边框宽度，如果不需要显示边框，请将值设为"0"。
（4）设置“单元格边距”和“单元格间距”。
（5）设置的相关值如图2所示，然后单击“确定”按钮。
（6）选中第1行所有单元格，然后右击鼠标选择“表格”一“合并单元格”命令，高度设为34。
同理，合并第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.gif和list_
tool_favl.gif。
（10）在第4行最后一个单元格输入“一口价283.30”，然后在“属性”面板里设置此单元格背景颜色为“#FF99FF”和居中对齐。
图3插入表格并合并相关单元格
（11）光标定位到第3行，然后切换到“代码”视图，如图4所示，在光标位置插入如下代码：
同理，在最后一行插入第2条虚线。
（12）按F12键就可以看到如图1所示的效果。
图4切换到“代码”视图
本节作业：
制作如图1网页。
注意事项：
1.注意设计视图和代码视图的切换。
2.熟练各种面板工具的使用。
网页学习网提示：
光看教程是无法让你掌握html知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第五章案例及作业资源返回《html入门经典》教程列表
转载请注明本文地址:
/html/jc/525.html
表单是html的一个重要部分，主要用于采集和提交用户输入的信息，它也是实现动态网页的一种主要表现形式。
下面我们就使用dreamweavercs3快速地创建常用的表单页面。
一、什么是表单
表单是网站管理者与访问者之间沟通的桥梁，包含如按钮、文本框、下拉列表框、单选按钮、复选框等表单元素。
表单元素用于接受用户的输入并提供一些交互式操作。
用户输入的数据可以通过客户端脚本来验证，然后提交给服务器作进一步的处理。
表单在万维网（www）上应用非常广泛，而且仍在不断发展。
下面是一个“注册”表单的典型例子，如图1所示。
图1注册表单页面
二、表单的使用
在dreamweavercs3中，如何实现如图1所示的“注册”表单页面？
一看图1就知道这是一个表单，所以要插入表单，再仔细看看表单域里面的文字和表单元素是不是都很规整、井然有序？
是的，这是什么在起作用？
表格，所以这里还使用了表格对表单中的元素进行布局。
经过这么一分析，我们基本上知道了图
5.13所示的“注册”表单页面是由表单、表格以及表单元素构成的。
下面我们就一步一步地实现如图1所示的表单页面。
1.插入表单
在dreamweaver中插入表单时，表单以红线显示。
用浏览器浏览时，这条线不会出现在网页上，仅在dreamweaver中编辑时可见。
添加到表单的每个项目都必须在表单内部，
否则将视之为另一个表单，了解这一点是非常重要的。
为了布局美观，您可以将表格和图形等对象放置到表单标签内。
要将表单插入网页，请执行以下步骤。
（1）新建空白文档，将插入点放置在“文档”窗口内要插入表单的地方。
单击“表单”工具栏中“表单”图标，或在菜单中选择“插入”一“表单”命令。
（2）此时dreamweaver即插入一个表单，如图2所示。
在“设计”视图中，表单边框线显示为红色。
如果未显示红色边框线，请选择“查看”一“可视化助理”一“不可见元素”命令。
单击表单边框线或选择“文档”窗口左下角的表单标签（）可以选中整个表单。
（3）将鼠标放到表单域内或选中表单域，此时在“属性”面板中就可以设置表单域的各项属性，如图2所示。
图2设计视图中显示的表单
●动作：
此属性指定表单提交到服务器后，处理表单信息的动态页或脚本文件的位置，一般是一个uRl路径，可以单击“浏览文件”图标来选择适当的页面或脚本文件。
这里指定为。
●方法：
可指定用于将表单数据提交到服务器的方法。
当用户提交表单时，有get和post两种方式可将浏览器的信息发送至服务器。
选post方式比较安全。
在设置好表单域的各个属性后，一个表单就创建好了。
2.插入表单元素
（1）在表单域里单击，然后插入一个10行2列的表格，合并最后1行所有单元格，再合并倒数第2行所有单元格，其他设詈如图3所示。
图3表格属性
（2）在表格的第1、第2、第3和第4行的第1列分别输入文本“登录名：
”、“密码：
”、“再次输入密码：
”和“电子邮箱：
”：
先把光标定位到要插入表单元素的单元格，然后使用“表单”工具栏，在第2列中分别依次插入一个文本框、两个密码框和一个文本框，属性设置如图4和图5所示。
篇二：
如何用dw创建表格
一、创建基本的表格
一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。
＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。
表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观（即浏览器中显示的表格的样式）来了解最基本的属性。
在讲解之前，我们先来看看表格的基本构造。
下图是一个3行3列的表格。
这里面有两个概念要弄明白：
表格与单元格。
他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。
在上面3行3列的表格中一共有9个单元格。
由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。
前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：
描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。
有这样一个概念后，我们学习起来就可能简单些。
1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色
表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。
表格边框的宽度是用
“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"属性说明，#是16进制的6位数，格式为rrggbb，分别表示红、绿、兰三色的分量。
或者是16种已定义好的颜色名称，参见文本颜色，单元格边框的颜色属性与表格的相同，但只适用于ie。
下面是一个宽为300,高为80,边框宽为4,边框颜色为“FF0000”的一行两列表格，其中第一个单元格的宽为200,高为80，第二个单元格的边框颜色为“0000FF”。
代码如下：
＜tableborder="4"width="300"height="80"bordercolor="#FF0000"＞
＜tr＞
＜tdwidth="200"height="80"＞＜/td＞
＜tdbordercolor="#0000FF"＞＜/td＞
＜/tr＞
＜/table＞
2、表格的水平摆放位置
表格的水平摆放位置是用align="#"属性说明的，#为left（左对齐）,right（右对齐）,
第三个表格的代码如下：
＜tablewidth="80"border="1"align="right"height="30"＞
＜tr＞
＜td＞右对齐＜/td＞
＜/tr＞
＜/table＞
3、单元格里内容的位置属性
水平对齐方式，用align="#"属性说明，#为left（左对齐）,right（右对齐）,center（居中）；垂直对齐方式，用valign="#"属性说明，#为top（上对齐）,bottom（下对齐）,middle（居中）。
分别见下例，注意单元格里的内容与边框的的位置关系：
代码如下：
＜tablewidth="450"border="1"＞
＜tr＞
＜tdwidth="150"＞
＜divalign="left"＞内容左对齐＜/div＞
＜/td＞
＜tdwidth="150"＞
＜divalign="center"＞内容居中＜/div＞
＜/td＞
＜td＞
＜divalign="right"＞内容右对齐＜/div＞
＜/td＞
＜/tr＞
＜/table＞
垂直对齐方式
代码如下：
＜tablewidth="150"border="1"＞
＜tr＞
＜tdheight="40"width="146"valign="top"＞内容上对齐＜/td＞
＜/tr＞
＜tr＞
＜tdheight="40"width="146"valign="middle"＞内容居中＜/td＞
＜/tr＞
＜tr＞
＜tdheight="40"width="146"valign="bottom"＞内容下对齐＜/td＞
＜/tr＞
＜/table＞
4、表格的背景色、背景图片，单元格的背景色、背景图片
背景色属性：
bgcolor="#"，背景图片属性：
background="#"。
代码如下：
＜tablewidth="450"border="1"bgcolor="#539996"bordercolor="#FFFFFF"height="90"＞＜tr＞
＜td＞＜/td＞
＜tdbackground="back01.gif"＞＜/td＞
＜/tr＞
＜tr＞
＜td＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜tr＞
＜tdbgcolor="#FF0000"＞＜/td＞
＜td＞＜/td＞
＜/tr＞
＜/table＞
说明：
在上例中，整个表格的背景色是bgcolor="#539996"，第一行第二列的单元格背景图片是ba
升级会员 