表格排版技巧dreamweaver
Dreamweaver第6讲布局表格
Dreamweaver第6讲布局表格
第六讲Dm中的布局表格
主要内容如下
Dm中的三种视图模式
Dm中的三种表格模式
使用布局表格对网页进行布局
重点：
三种视图模式的切换和异同
三种表格模式的切换和异同
布局表格和布局单元格的使用
难点：
使用布局表格对网页进行布局
一、Dm中的三种视图模式
Dm中的三种视图模式是：设计视图、代码视图和拆分视图。
设计视图：所见即所得
代码视图：编辑网页文件的源代码
拆分视图：混和视图，包含以上两者。
三种视图的使用：
二、Dm中的三种表格模式
在Dm中对表格对象来说，有标准模式、扩展表格模式和布局模式三种模式。
扩展模式和布局模式都是为了简化表格操作的难度。
切换到“布局模式”的步骤是：菜单栏中点击“查看”菜单——“表格模式”——“布局模式”。
切换到“扩展模式”的步骤是：～～～～～～。
三、使用布局模式
1、切换到布局模式
2、绘制布局表格
3、布局表格属性栏
宽度“自动延伸”时：。
4、绘制布局单元格
5、布局表格
注意：
1、一行内只能绘制一个布局表格。
2、布局单元格内不能再欠套布局表格或布局单元格
四、项目实例
使用表格布局模式制作校园网主页。
用Dreamweaver制作网页中的表格
格是现代网页制作的一个重要组成部分。
表格之所以重要是因为表格可以实现网页的精确排版和定位。
虽然现在都提倡WEB标准建立网站，但是有时在网页中还是会应用到表格的。
这个教程我们给大家讲解表格操作的基本方法。
在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。
（看下图）
一张表格横向叫行，纵向叫列。
行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。
单元格和单元格之间的距离叫间距。
整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例
这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。
因此我们需要用到表格来做。
实际上是用两行两列的表格来制作。
1、在插入栏中选择按钮或“插入”菜单>选“表格”。
系统弹出表格对话框如下图。
这些参数我们都已经认识了。
行：2。
列：2。
其余的参数都保留其默认值。
2、在编辑视图界面中生成了一个表格。
表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。
当光标移到点上就可以分别调整表格的高和宽。
移到表格的边框线上也可以调整。
（如下图）
3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。
（如下图）。
dreamweaver表格制作步骤
dreamweaver表格制作步骤具体制作步骤如下：通过利用背景颜色与间距制作细边的表格教程的介绍，大家在Dreamweaver中插入一个表格，若设置其“边框(Border)”为1，预览时其边框线较粗。
以制作一个4行3列、边框线为红色细线的表格为例：1、在Dreamweaver的设计视图中插入一个4行3列的.表格。
2、在“属性”面板中设置此表格的属性如下：边距(CellPad)根据需要自行设置值(例如10);间距(CellSpace)为1;边框(Border) 为0;背景颜色(Bg Color)为红色。
3、选中此表格的所有单元格，在“属性”面板中设置所有单元格的属性如下：背景颜色(Bg)为白色或红色以外的其他颜色。
4、最后，保存网页，按F12预览。
怎么样，一个4行3列的红色细线表格是不是呈现在你面前?另外，如果我们照常想用表格来布局定位，但只要外边框线显示为细线，而内部单元格的分隔线不显示的效果，则可以配合使用嵌套表格。
下面以表格外边框线为红色细线为例来说明操作方法：1、在Dreamweaver的设计视图插入一个1行1列的表格。
2、在“属性”面板设置此表格的属性如下：“边距”根据需要自行设置(例如5);“间距”为1;“边框”为0;“背景颜色”为红色。
3、选中此表格唯一的单元格，在“属性”面板设置此单元格的“背景颜色”为白色或红色以外的其他颜色。
4、将光标定位在此1行1列的表格中，根据需要插入一个几行几列的嵌套表格，此嵌套表格的“边框”一定设置为0，“边距”和“间距”可以根据需要设置或不设置，其他属性可不进行设置。
就可以在嵌套表格的不同单元格内插入文字、图片等其他网页元素了。
【dreamweaver表格制作步骤】。
Dreamweaver CC实用教程 第5章 使用表格进行网页布局
表格排序
第5章 使用表格进行网页 布局
在Dreamweaver中，允许对表格的内容以字母和数字进行排序，对表格内容进行排序可按如下
操作步骤进行。 第1步：选定需要排序的表格。 第2步：执行“命令>排序表格”菜单命令，打开对话框。
第3步：在“排序按”下拉列表中列出了选定表格的所有列。这里选择第3列“数学”。
5.6.1 导入表格数据
Dreamweaver能与其他文字编辑软件进行数据交换，在其他软件创建的表格数据可以导入Dreamweaver
中转化为表格，同样也能将Dreamweaver中的表格数据导出。
14
5.6.2 导出表格数据
导出表格数据的操作步骤如下。 第1步：将光标放置到要导出数据的表格中。 第2步：执行“文件>导出>表格”菜单命令，打开如图所示的对话框。 第3步：在“定界符”下拉列表中选择分隔符，这里包括“空白键”、“逗号”、“ 分号”、“冒号”。 第4步：在“换行符”下拉列表中选择将要导出文件的操作系统，这里包括Windows 、Mac和UNIX。 第5步：单击 按钮，打开“表格导出为”对话框，如图所示。 第6步：在“文件名”文本框中输入导出文件的名称。 第7步：单击 按钮，表格数据文件即被导出了。
第5章 使用表格进行网页 布局
5.3.3 单元格的合并及拆分
在制作网页的过程中，有时需要合并或拆分单元格，下面将分别介绍合并或拆分单元 格的操作方法。 1.单元格的合并 2.单元格的拆分
8
即学即用：制作商品促销网页
学习使用单元格的合并及拆分来制作网页的方法。
第5章 使用表格进行网页 布局
9
5.4
第4步：在“顺序”下拉列表中选择“按字母顺序”或“按数字顺序”。当列的内容是数字时， 选择“按字母排序”可能会产生这样的顺序：2、20、3、30、4，因此这种排序方式不一定按照数字 的大小来排序。 第5步：在“升序”下拉列表框中选择按“升序”或“降序”排列。 第6步：在“再按”下拉列表中，可以选择作为第二排序依据的列。同样，也可以在“顺序”下 拉列表中排序。 第7步：在“选项”区域中，可以选择“排序包含第一行”、“排序标题行”、“排序脚注行” 和“完成排序后所有行颜色保持不变”复选框，可根据需要进行设置。 第8步：设置完成后，单击 按钮，表格即被排序，如图所示，是一个把第3列（也就是“数学”列） 按升序排列后的表格。
Dreamweaver对于表格操作技巧
Dreamweaver对于表格操作技巧Dreamweaver对于表格操作技巧Dreamweaver关于表格的其他操作Dreamweaver关于表格的其他操作一制作细线表格原理：1、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。
2、选中所有单元格，设置其背景为白色。
二自动格式化表格1、先制作好一张表格，然后选中。
2、选菜单中的命令/格式化表格。
即可以其中选择预设好的一些表格样式。
三一像素分割条1、插入一个1行1列，宽为200像素，边框边距均为0的表格。
2、选中表格，设置表格高为1像素，并设置一个背景色（即所要的线条颜色）。
3、切换到代码和设计窗口，将代码Dreamweaver在页面中播放声音Dreamweaver在页面中播放声音1、在完成全页面以后，如果要为该页添加背景音乐，注意背景音乐一般是*.midi文件，这样的声音文件十分小，易于快速下载，其他格式不适合作为背景音乐。
2、在页面中所有表格之外，（注意此时编辑窗口左下方的标签选择栏中仅显示这一项，或是在左下角点一下，这样才能保证这个行为是添加在整个页面上的）。
点击行为窗口上的“+”按钮，（或用菜单窗口/行为，打开行为窗口。
）3、从弹出菜单中选择“播放声音”。
打开一个对话框。
4、在这个对话框里用“浏览”选择要播放的声音，并确定。
5、这时行为面板上自动显示了事件为onload，动作为播放声音。
点击这一行，中间出现一个按钮。
点击按钮，可以设置这个声音在什么事件下播放。
可以选择“显示事件”/“IE5.0。
6、我们常用的如Onload（当页面载入时）、OnClick（单击鼠标）、OnMouseOver（鼠标移到对象上）、OnUnload(当关闭页面时)等。
7、该行为也可以设置在图片上、文字链接上。
在文字链接上播放声音之前，先为文字添加一个空链接，即选中文字，在链接一格里输入一个“#”符号。
Dreamweaver让插入的flash动画变透明1、当网页上已经有背景，或是想要在一张图片上再插入flash动画，而flash动画本身也有背景色，所以会影响美观，这时我们要把它做成透明动画。
DW网页布局[表格_布局表格]
![DW网页布局[表格_布局表格]](https://img.taocdn.com/s3/m/bdd8e244eef9aef8941ea76e58fafab068dc4460.png)
课堂练习2 制作细线表格在Dreamweaver中 ， 有多种方法可以制作细线 表格 ， 下面我们讲解一种最简单也是最常用的 方法 ， 就是通过设置表格的间距和背景颜色来 制作细线表格。
4. 1.4 合并与拆分单元格1． 合并单元格所谓合并单元格 ， 就是将相邻的几个单元格合 并成一个单元格。
课堂练习4 制作圆角表格在浏览网页时 ， 经常会看到圆角表格 ， 这使得 整个网页看起来更加柔和 、美观。制作圆角表格的方法有很多 ， 下面就以制作下 图左侧的表格为例 ， 具体讲解一下此类表格的 制作方法。
4.2使用布局表格布局网页4.2. 1.模式简介及注意事项在dw中使用表格有以下3种模式：•标准模式： 具体内容添加和显示的模式。•表格扩展模式： 使用表格对页面进行布局的模式 ， 也是 传统模式。•布局模式： 使用布局表格对页面进行布局的模式 ， 可以 在添加内容前使用布局单元格和表格来对页面进行布局；也可以在布局模式中将文本 、 图像和其他内容添加到布局 单元格中 ， 这和在标准模式中一样。布局模式同时具有表格和层的共同性质 ， 继承了层的准确 定位和可移动性 ， 还继承了表格的行列属性。
布局单元格只能添 加在布局表格中
可以在原有布局表格 的下方添加布局表格
绘制完布局表格后的代码：<table width= "250 " border= "0 " cellpadding= "0 "cellspacing= "0 " >< !--DWLayoutTable-- ><tr><td width= "250 " height= " 197 " > </td></tr></table><table width= " 70 " border= "0 " cellpadding= "0 "cellspacing= "0 " >< !--DWLayoutTable-- ><tr><td width= " 70 " height= " 146 " > </td></tr></table>布局表格和布局单元格本质上还是表格和单元格 ， 只是在添加布局表格和布局单元格时dw自动添加了其它空 白单元格。
Dreamweaver中表格的创建及基本编辑方法
Dreamweaver中表格的创建及基本编辑方法
Dreamweaver中表格的创建及基本编辑方法
页面布局是网页制作的宏观设置，使用表格进行页面布局是其中最常用的手段
表格是页面布局时非常有用的设计工具。
利用表格布局页面，可以将图像或文本放置在表格的各个单元格中，从而精确控制其位置。
1.表格的创建
在Dreamweaver8中，表格分为普通表格及嵌套表格。
普通表格即传统意义上的表格，嵌套表格是在表格的某个单元格内再插入一个表格，即表格之中再嵌套表格。
普通表格的创建、嵌套表格的创建
2.表格的基本编辑
表格创建好后，根据实际需要，可以对表格进行合并或拆分单元格、删除和添加行或列等操作。
在表格中添加图像和文本等内容后，根据实际需要，也可对表格的大小等进行调整。
3.单元格的合并
合并单元格的操作比较简单，选择要合并的连续单元格区域再单击【属性】面板左下角的【合并所选单元格，使用跨度】按钮即可。
4.添加行或列
将光标插入点定位到相应单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】→【插入行】命令，在选择单元格的上方插入一行新的'单元格；若在弹出的快捷菜单中选择【表格】→【插入列】命令，则可在选择单元格的左侧插入一列新的单元格
5.行或列的删除
将光标插入点定位到需删除的单元格中，单击鼠标右键，在弹出的快捷菜单中选择【表格】→【删除行】命令可以删除光标插入点所在的行；选择【表格】→【删除列】命令则可删除光标插入点所在的列。
【Dreamweaver中表格的创建及基本编辑方法】。
Dreamweaver MX应用表格排序
Dreamweaver MX应用表格排序在Dreamweaver MX中，您可以对一列的内容进行简单排序，也可以对两列的内容进行更为复杂的排序。
您不能对包含有Colspan或Rowspan属性的表格进行排序的，也就是说，不能对那些包含有合并单元格的表格进行排序。
图1下面就看一下具体的排序过程吧！将光标移动到表格内任一单元格内，或选定表格，单击“command(命令)/sort table(排序表格)”，打开排序表格对话框，如图所示。
1.图2在对话框中进行如下的选择：在Sort By（排序按）选项中选择要排序的Column(列)。
在Order(顺序)选项中选择是根据alphabetically(字母)还是根据Numberically(数字)进行排序。
当列的内容是数字的时候这个选项是非常重要的。
数字的排序是对列表按照一位和二位这样进行的(如1, 10, 2, 20, 3, 30)，而不是一个整齐的数字序列(如1, 2, 3,10, 20, 30)。
选取排列顺序是上升-Ascending(A to Z)，还是下降-Descending(Z to A)。
在对成绩表按总分或名次排序时，设置为：Sort By：Column5或Column6 Order：Numberically 及Descending 要在不同的列进行次一级的排序，在Then By（再按）弹出菜单中指定排序选项。
选取Sort Includes First Row选项可以将第一行在排序时包括进去。
如果第一行是不能移动的标题行，则不要选这个选项，如对成绩表排序时就不能选中此项。
对于Sort THEAD Rows(If Any)、Sort TFOOT Rows(If Any)两选项，是Dreamweaver MX中新增加的。
Sort THEAD Rows(If Any)：排序时是否包含THEAD（标题）行。
Sort TFOOT Rows(If Any)：排序时是否包含TFOOT（脚注）行。
DW第六讲 表格及页面排版
表格装饰（常用）
细边框的设置 表格做公告栏（小图片加单元格背景） 表格做细线（与水平线的对比） 插入工具栏/常用/水平线 可在网页中插入水平线
代码：<hr color=“颜色” width=“宽” size=“高” noshade(阴
影)...>
水平线和其他对象有较大间距，且高度不能精确显示。
设置属性（P76）
宽：固定或自动伸展 间隔图像：为防止没有内容的列被挤压，可创建间隔
图像（透明）
四个按钮 优点：可以灵活精确设置表格高度。
第六讲总结
表格的使用（插入、操作、属性、应用） 熟练掌握表格排版 熟悉页面布局的使用
单元格属性 背景的设置、对齐方式、单元格宽度 如果指定所有单元格宽度一致，可通过以下办法：
பைடு நூலகம்
选中所有单元格，将其宽度设为相同大小，如1*10的表格，可将 其所有单元格宽度设为 总宽度/10 px或10 %. 选中表格，单击插入工具栏/布局/“使单元格宽度一致”按钮。即 可将所有单元格宽度设为大小差别不大的像素值。
按住alt键绘制可取消单元格自动吸附当单元格与另一个单元格或表格边框距离小于8像素时会自动吸附布局单元格不能脱离布局表格而存在设置属性p76间隔图像
Dreamweaver课件
第六讲
表格及页面排版*
主要内容
插入表格 表格操作 属性设置
表格装饰页面
表格排版 页面布局
插入表格(P52)
用表格做导航栏 熟练掌握表格及单元格属性设置，用表格装饰页面，
美观实用，且比使用图像小。
表格排版
网页中的大多数元素都是由表格定位. 表格排版时应注意 先规划好大致布局 先建立最外面的表格,然后在其内部创建较小的表格. 让最外面的表格居中.保证在不同分辨率下表格都居中显示.
dreamweaver8网页设计 第三章 使用表格布局网页PPT课件
3．选择单元格
可以选择单个单元格，也可以选择连续的多个单 元格或不连续的多个单元格。
•要选择某个单元格，可首先将插入点置于该单元格内， 然后按【Ctrl＋A】组合键或单击“标签选择器”中对应 的“<td>”标签。
•要选择连续的单元格区域。应首先在要选择的单元格区 域的左上角单元格中单击，然后按住鼠标左键向右下角 单元格方向拖动鼠标，最后松开鼠标左键。
9
综合实例1——用表格布局“SM”网站主 页
本例将在第2章综合实例创建的文档“index.html” 的基础上，使用表格布局文档，以巩固3.1节所 学知识。
10
3.2 表格高级操作
3.2.1 拆分与合并单元格
在网页制作中，经常会用到一些特殊结构的表 格，此时就需要拆分或合并单元格。
11
1．拆分单元格
•如果希望选择一组不相邻的单元格，可按住【Ctrl】键 单击选择各单元格。
7
3.1.3 设置表格属性
选中表格后，可利用“属性”面板查看或修改表 格的行、列、宽，以及填充、间距、背景颜色、 背景图像等属性。
8
3.1.4 设置单元格属性
在表格的某个单元格中单击，“属性”面板中 将显示水平、垂直、宽、高等单元格属性，此 时可通过“属性”面板设置其属性。
拆分单元格就是将一个单元格拆分成多个单元格。
12
2．合并单元格
所谓合并单元格，就是将相邻的几个单元格合并 成一个单元格。 拖动鼠标选中要合并的连续单元格（此处为第1 行中间的3个单元格），然后单击“属性”面板 上的“合并所选单元格，使用跨度”按钮 ，则3 个单元格合并为1个单元格。
13
3.2.2 插入、删除行和列
17
添加
巧用 Dreamweaver 的表格功能
巧用Dreamweaver 的表格功能用表格来作网页排版定位，这是从所周知的事，我在这里再向你介绍几种其它的用途。
一、用表格制作线条在Dreamweaver3中虽有插入水平线的功能，但他插入的线条无法改变颜色，对垂直线条更是无能为力了。
但我们可以用表格来实现，用表格来制作线条还有一个优点就是可方便地改变线条的粗细、长短和颜色，要是用图象就麻烦多了。
下面就是用表格作出来的线条：考虑到表格是以行为单位来定位的，为了能更方便的定位线条，我们把表格放到层上，这样你就可以任意把线条放到任何位置了。
具体作法如下：（1）单击功能面板上的插入层图标，在页面上画一个层，再在功能面板上点击插入表格图标，在弹出的表格面板上把表格的行数和列数均设置为1；（2）选取表格，在表格的属性面板上把“cellpad"、“cellspace"、“border"均设置为“0"，把“W"设置为“100%"，“H"设置为2pixels（象素），设置好表格的背景色（也就是线条的颜色）。
（3）在单元格中点一下，在单元格的属性面板上把“W"设置为“100%"，把“H"设置为2pixels（象素）；（4）在快速启动栏上点击源代码检示窗图标，在源代码编辑窗中把单元格中的“”（“空格”代码）删去。
到此，一条特定颜色的水平线已画好。
若要改变线条颜色，只要改变表格的背景色就行了；若要改变线条高度(即线条的粗细），只要修改（2）、（3）中的“H"即可；改变（2）、（3）中的“W"，就可改变线条的长度；若要把水平线变为垂直线，只要把（2）、（3）中的“W"和“H"的值换一下就行了，是不是方便极了。
二、用表格实现图文绕排使一行文字位于图象的两侧，通过调整图象的对齐属性可以很容易实现，但要想使图象位于多行文字的中间，也就是所谓的文字环绕，只能借助于表格（或层）了。
Dreamweaver CC之表格
在很多网页制作风格中，设置表格内框线的细线效果， 可以强化表格的装饰性而使表格更加美观。但是，细线 表格的设置方式不是简单地将表格边框宽度设置为1px， 因为此时表格边框宽度和形状都不是细线效果。创建细 线表格的方法是，当单元格间距为1px时，分别对表格 和单元格设置不同背景颜色，内框线的细线效果即可显 示出来。 带状表格效果可以令表格中数据显示更加清晰。间隔设 置表格中各行的背景效果，即可形成带状表格，常见的 带状表格与细线表格结合效果如图6-71所示。该种效 果被广泛应用于office系列软件，通过软件自带的表格 样式管理表格数据，在网页设计中可予以借鉴。
Dreamweaver还具有为表格中数据排序的功能
6.5.1练习案例-爱丽丝家具 6.5.2练习案例-鲜花速递网
案例练习目标：练习简单网页排版。 案例操作要点： 1．创建名称为index.html的网页文档并存于站点根 文件夹中。 2．设置页面属性：字体大小12px，颜色白色，加粗， 背景颜色为#897715。 3．采用简单表格进行布局。插入6行2的布局表格， 表格宽度为900px，单元格间距为5px，并根据案例 布局图进行单元格合并。 4．插入单元格的图像用空格隔开。 5．创建名称为mystyle.css的CSS样式文档，并将所 有样式存在该文档中。
1．选择单元格 2．选择行/列 3．选择整个表格
在绘制不规则表格过程中，经常要将多个单元格合 并成一个单元格，或者将一个单元格拆分成多行或 多列。 在采用简单表格布局的网页中，根据网页布局情况 合并和拆分单元格是网页布局的关键工作。 1. 单元格的合并 2. 单元格的拆分
Dreamweaver简介和表格布局
Dreamweaver工作界面
视图 显示/隐藏：窗口 标尺与网格：查看
文档基本操作：新建、保存、关闭、打开 网页基本操作
设置网页属性
网页设计
编辑头部信息：包括网页标题、网页关键字、网页描 述等。
设置文件头内容：<head>……</head>，在浏览器中不可见。 插入--〉HTML文件头标签 设置META标记：记录有关当前页面的信息，如字符编码、作 者、版权信息等。 设置关键字：设置搜索引擎装置，关键字间逗号隔开。 添加描述信息 设置刷新：常用于URL改变后引导用户重定位 添加基础：相对于那个文件进行链接。
网页设计
图像
插入图像：菜单、工具栏、资源面板（F11） 插入图像占位符 设置图像属性
大小、对齐 编辑图像
裁剪图像 重新取样 使用Fireworks优化 调整亮度和对比度 使用图像外部编辑器 锐化图像
网页设计
图像
鼠标经过图像(互动图像) 背景图像的应用
网页背景图像 表格背景图像
创建图像热区 创建导航条 创建web相册：命令--〉创建网站相册
网页设计
超链接
内部链接：网页名称 锚点链接：#锚点名称 E-maile链接：mailto: 空链接：# 站点连接：网址 脚本链接：javaScript:语句或函数名
例：在属性面板链接文本框中输入 Javascript:window.close() 说明：点击链接点可以关闭页面
查看--〉文件头内容
Dreamweaver CS5-ch07-使用表格布局页面
7.2.3 设置列与行的属性
启动Dreamweaver CS5，绘制表格，首先， 需要选中表格对象的行与列，在属性面板 中即可对表格的行与列进行相关的设置。
7.3 编辑与调整表格结构
7.3.1 7.3.2 7.3.3 7.3.4 7.3.5 7.3.6
选择表格及单元格 调整表格和单元格的大小 增加和删除表格的行和列 拆分单元格 合并单元格 剪切、复制、粘贴表格
此时，在窗口中已经将表格排序，通过以上步骤即可 完成排序表格的操作。
7.4.2 导入导出表格数据
启动Dreamweaver CS5，在菜单栏中，选择【插入】→ 【表格对象】→【导入表格数据】菜单项，如图7-44 所示。 弹出【导入表格数据】对话框，单击【数据文件】文 本框右边的【浏览】字样，选择数据文件，在【定界 符】文本框中，选择【逗点】，单击【确定】按钮。 此时，已经将文件导入到窗口中，通过以上步骤即可 完成导入表格式数据的操作方法。
7.3.5 合并单元格
打开Dreamweaver CS5，绘制一个表格，选 中准备合并的单元格，在菜单栏中，选择 【修改】→【表格】→【合并单元格】菜 单项，即可将多个单元格合并成一个单元 格。
7.3.6 剪切、复制、粘贴表格
复制表格的方法与复制文本对象的方法相同，首先， 选中多个单元格对象，在菜单栏中，选择【编辑】→ 【拷贝】菜单项，即可复制表格。 鼠标光标定位于准备粘贴单元格的位置，在菜单栏中， 选择【编辑】→【粘贴】菜单项，即可将所复制的多 个对象粘贴到当前表格中。 剪切表格的方法与剪切文本对象的方法相同，首先， 选中准备剪切的多个单元格对象，在菜单栏中，选择 【编辑】→【剪切】菜单项，即可剪切表格。
Dreamweaver制作表格表单
Dreamweaver制作表格和表单表格当初主要用于数据的格式化显示，现在表格更多地用于排列网页中的内容，今天我们就一起来看看在Dreamweaver CS3里如何创建表格，以及如何使用表格对网页中的图文进行布局。
一、什么是表格布局表格布局就是为了精确定位、合理安排网页中的文字、图片等元素，它就像网页的脸面，是在一个限定的面积范围内合理安排、布置图像、文字等元素的位置，从而设计出版式漂亮的页面。
如图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。
使用Dreamweaver页面布局的一些技巧
使用Dreamweaver页面布局的一些技巧Dreamweaver不仅仅是一个良好的页面制作工具，同时他还可以进行精确的页面排版和布局，这一部分我们介绍几个页面布局方面的技巧。
1、打开辅助表格。
搞过设计的朋友都特别希望能精确的定位网页元素，他们喜欢每个元素都能按自己的愿望精确的定位。
Dreamweaver自带的Grid功能可以有助于这种希望的实现。
执行命令View—Edit Grid打开坐标辅助，可以选择网格状或者是点状显示，同时打开Snap to Grid，以后插入或添加新的元素时，都会按你的设定精确定位。
2、利用表格排版页面技巧。
合理利用Dreamweaver中的表格功能，可以方便的达到美化页面的目的，下面我介绍几个技巧。
1）创建1px边框。
有些朋友抱怨Dreamweaver无法做出单像素的表格边框，其实仔细利用表格的属性面板即可做出这种单像素表格。
首先使用Object面板插入一个表格，定义表格宽、高及行数和列数。
此时Dreamweaver中插入表格的默认CellPad和CellSpace、Border都为0。
在属性面板中定义表格的Border 为0，CellPad为5（这项可使单元格中的内容与单元格边缘之间保持5个像素）；CellSpace为1（此项使得单元格之间保持1个项素的间距）。
设置表格的背景色为深色（如#999999），设置单元格的背景色为浅色（如#FFFFFF）。
在浏览其中观察效果即可。
2）导入数据表格。
有时我们需要将一些在Execel文件中创建的表格导入Dreamweaver中，我们可以下将原来的Execel文件另存为带制表符分隔的.txt 文本文件。
在Dreamweaver中执行Insert—Tabular Date打开如下窗口：添好各个参数后即可将其中的数据导入Dreamweaver的一个表格中。
3）格式化表格。
如果你对重复的设定各个单元格的参数感到厌烦的话，使用Format Table命令可以帮你快速格式化表格，此命令在Command菜单下，此命令内带多种表格配色方案，你可以选择一种，Dreamweaver会自动将色彩方案应用到你选定的表格上。
利用Dreamweaver处理网页表格方法
利用Dreamweaver处理网页表格方法1．创建表格（1）创建新表格利用Dreamweaver4.0创建新表格时，首先选中对象面板上“View”栏目下“StandardView”（标准视图）按钮，然后可以通过下列四种方式中的任意一种：①将对象面板调整到“Common”类上，单击“InsertTable”（插入表格）按钮。
②通过主窗口的菜单“Insert”|“Table”命令。
③使用快捷组合键“Ctrl+Alt+T”。
④将对象面板调整到“Common”类上，拖动“InsertTable”按钮到主窗口的工作区中。
（2）选择表格选择表格可分为选择整个表格和选择表格中的单元格。
①如果要选择整个表格，则可进行如下的操作之一：将光标置于表格中的某个单元格中，选择“Modify”|“Table”|“SelectTable”命令。
将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。
将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“SelectTable”命令。
将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。
单击表格的边线。
②选择单个单元格的方法有以下几种：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。
将光标置于所要选择的单元格中，向右拖动鼠标。
将光标置于所要选择的单元格中，选择“Edit”|“SelectAll”命令。
按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。
③选择多个单元格的方法有以下几种：按住Ctrl键，单击所要选择的所有单元格。
将光标置于单元格中，拖动鼠标，选择多个单元格。
如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。
如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。
④选择的全部单元格的方法有以下几种：将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。
将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。
Dreamweaver中CS6表格间距怎么设置
Dreamweaver中CS6表格间距怎么设置
Dreamweaver中CS6表格间距怎么设置
在Dreamweaver CS6网页设计软件中，可以轻松的对表格单元格间距和填充距离进行调整，无需自己书写代码，只要在表格属性中设置相关内容即可，设置好后表格的排版将会变得同一整齐，还不知道如何设置的朋友可以来看看这篇教程哦。
Dreamweaver CS6表格间距怎么设置?
1、打开电脑的Dreamweaver CS6主程序，然后新建一个空白的html
2、新建之后，我们点击上边的插入的按钮，我们在右侧的插入选项也可以插入
3、选择下边的表格，我们可以看见后面有他的'快捷键
4、这里我们选择两行两列，点击下边的确定
5、然后我们把自己准备插入的图片插入到表格里面
6、然后我们选择表格，点击下边的tabel也行
7、把填充和间距都设置为10，这样我们的表格设置排版就不错了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3、在属性浮动面板中把此单元格的高度设为1，H：1
4、最关键的一步：打开源代码编辑器，把"<td bgcolor="#000000" height="1"> </td>"代码中的 (空格符)去掉，就搞定。
软硬兼施：似乎用CSS来实现还要简单些，具体可参考我主页的源代码。
经验（九）：如何使鼠标指到表格，表格背景变色？
这用的是表格样式表，要达到此效果你只需在<td>代码中加入
onmouseout="this.style.backgroundColor=''
"onmouseover="this.style.backgroundColor='#FFcccc'" ，例：<td
<title>范例</title>
<body>
<table border="1" width="100%">
<tr>
<td>
<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>
</td>
</tr>
</table>
</body>
经验（二）：如何消除分辨率的差异?
这是一个比较老套的话题，但总有人问。我们现在的网页最佳浏览分辨率大多是800*600，但有不少的兄弟用的是640*480或1024*768，怎样让你的网页兼容性更好，你只需把表格的宽度设为100%即可解决这个问题。
经验（三）：为什么我的表格在预览时发生变化？
经验（八）：表格虚线框
1、先在Photoshop中做2个小图片，画横虚线的图片大小为宽3象素高1象素（文件名：1.gif），把第一象素填黑色（如果画黑色线框），画的的 时候用放大镜把图片放到最大，用铅笔点一下就可以那，画竖线的图片大小为宽1象素高3象素，把的第一象素填黑色（文件名：2.gif）。
表D：Cellpad:0；cellspace:0；border:4；Light Brdr:#FFFFFF；Dark Brdr:666666；Bg:#A7D2ED
表E：Cellpad:0；cellspace:0；border:1；Light Brdr:#999999；Dark Brdr:000000；Bg:#A7D2ED
一开始学DW的朋友，都比较喜欢用图层排版，其主要原因是图层可以把对象放到你想放的任意位置，并且只需拖动鼠标，看起来非常轻松， 但用F12预览就面目全非，后悔了吧？还是用表格排版吧。层的定位方式与表格的不同，层采取的定位方式是动态定位方式（引自<<Dreamw eaver3网页设计>>），它的定位靠的是两个参数Left和Top，这两个参数设置层框架与浏览器的边框的的距离，无论你是在最大化，还 是在不同的分辨率下他都始终在一个位置，而表格在不同的情况下它将有所变化。尤其当你用表格的同时又用图层排版，这样的效果会让你痛苦一辈子。图层没用 吗？当然有用，一般用它来做一些特效，用的好可以让你的主页锦上添花。
1.整个表格不要都套在一个表格里，尽量拆分成多个表格。
2.表格的嵌套层次尽量要少，最好嵌套表格不超过3层。
3.单一表格的结构尽量整齐。
4、用鼠标选取所有表格单元格，把属性浮动面板的参数Bg设为#ffffff，这个颜色设为应为你页面的该是黄色，试一试就知道了。
经验（七）：表格中横线和竖线画法
下面讲述如何画横线，如果横线会画，那竖线就No Promble!
1、在DW编辑窗口中插入一个一列多行的表格，同时打开属性浮动面板
经验（五）：关于表格背景图片的一个技巧。
大家都知道在一个较大的表格中放入背景图片，背景图片就会重复填充直到整个页面。我们可以利用表格的这个特性来减小我们网页中图片的大小，比如一个渐变 图，你看上去像是一整张图片，它其实用的就是表格背景重复填充特性，而用的可能就是大小只有1k甚至更小的图片，在此如果要用一张大的图片是很不划算的。 你若要插入一根水平线，用这方法也很有效。
2、在DW编辑窗口中插入一个三列三行的表格，把表格的第一行单元格合并，再把第三行的单元格合并。
3、在第一行中通过属性浮动面板填入背景图片1.gif，把单元格的高度设为1象素，切记要通过修改源代码把此单元格的空格）去掉。用同样的方法处理第3行。这样虚线框的上边和下边画好了
4、现在第二行有3列，左右两列分别用步骤3插入2.gif，再强调一遍一定要把 去掉。
onmouseout="this.style.backgroundColor=''"
onmouseover="this.style.backgroundColor='#FFcccc'">，“#ffccc”是你鼠标指到表格上要变的颜色，你根据需要改变个颜色。
经验（十）：如何利用表格实现画中画，也就是页中页效果？
--------------------------------------------------------------------------------------------------------------------------------------
经验（一）：为什么说表格比图层排版要好？
经验（六）:表格细边框
画表格边框有许多方法，以下是非常常见的方法：
1、在DW编辑窗口中插入一个表格。
2、按Ctrl+F3或点击Window|Properties命令打开属性浮动面板。
3、用鼠标选取整个表格，在属性浮动面板中如下设置：CellSpace:0;Border:0;Bg Color:#000000(这个颜色可以根据需要更改)。
经验（四）：如何使表格具有立体效果？
我在刚开始学做主页时，为了使菜单具有立体效果，花了不少心思不得其解，最终用图片做菜单。现在我已知道了几种立体效果，现在和大家分享，先看看下面的效 果：我把这四个表格的参数告诉你(没有写出来的不填，使用系统默认的），你可以根据需要，适当的改一改参数以达到最佳效果，这些参数你只需填到表格属性面 板中：
</html>
插入被嵌入页的关键代码是：<IFRAME src="example.htm" width="300" heitht="100"></IFRAME>。
example.htm是被嵌入的页面，标签<IFRAME>还有一些可用的参数设置如下：
marginwidth:网页中内容在表格右侧的预留宽度；例如：marginwidth="20"，单位是pix，下同。
表A：Cellpad:0；cellspace:0；border:1；Light Brdr:#000000；Bg:#A7D2ED；Brdr:#FFFFFF
表B：Cellpad:0；cellspace:2；border:1；Bg:#A7D2ED
表C：border:1；Light Brdr:#000000；Bg:#A7D2ED；Brdr:#FFFFFF
marginheight:网页中内容在表格顶部预留的高度；
hspace:网页右上角的的横坐标；
vspace:网页右上角的纵坐标；
frameborder:是否显示边缘；填"1"表示"是"，填"0"表示"否"
scrolling:是否出现滚动条；填"1"表示"是"，填"0"表示"否"
经验（十一）：在使用表格中应注意那些问题？
关于DW中表格的种种{DW点滴} 2010-01-20 14:24:23 阅读30 评论0 字号：大中小
如何做好一个网站，表格的应用的确是成败的关键！~~~通过一段时间的研究，本人发现表格的真是博大精深！~~
故，在网上收集了很多相关的问题，方便自己查阅，也分享给大家！~~~
其中多为粘贴复制的，若有不妥之处，还请见谅！~~~
网页的排版大多使用表格，利用一个表格单元可以嵌入一个网页，你知道吗？这样做有很多好处，比如你把经常更新的区域划分一个表格单元，然后在这个表格单元 中嵌入你想要更新的内容，今后更新主页只需上传这个被嵌套的页面就可以了，没有必要对首页进行更新，是不是很方便。我写个最简单的例子代码：
<html>
<head>
我们经常会在做完表格排版后预览，发现表格的样子变了，不是有的高度变长了，就是宽度变宽了。出现这个情况的原因是，你在排版的时候，把表格高度或长度用 鼠标拖长或拖短过，这样DW就会在你网页代码中自动加入一些宽的长度代码或高度代码。由于在排版的过程中，经常会这样做，所以你的网页代码加了许多的这些 高和宽的代码，当你预览的时候浏览器就会按这些代码来显示，于是就会出现表格样子发生变化。好在DW为你提供了决办法，按Ctrl+F3后用鼠标点击表格 边框出来表格属性面板，点属性面板的（除掉表格中定义高度的Html语句），而它（除掉表格中定义宽度的Html语句）你最好少用，用不好会弄巧成拙，如 果你的网页中用到割过的图片，此时用它来消除图片间的空隙非常有效。