dw,表格布局
DW-07使用表格
42
教育学院
网站建设
第7章使用表格
4、统一列宽
调整表格中的各列宽度后，可以使再其宽度 相同。
方法：单击某一列，在其列宽度菜单中，选 择“清除列宽”。
2019年11月22日星期五
43
教育学院
网站建设
第7章使用表格
三、增加行和列
1、增加行
方法：右击某行→“表格”—“插入行”/“插入行 或列”；
“修改”—“表格”—“插入行”/“插入行或列” 命令。
2019年11月22日星期五
19
教育学院
网站建设
第7章使用表格
辅助中的标题
2019年11月22日星期五
20
教育学院
网站建设
第7章使用表格
表格宽度菜单：单击表格中的任意位置，在表格的 上方或者下方显示宽度和宽度分布。
单击其中的小三角可以对其进行相应的设置。 也可以在“查看”中“可视化助理”的“表格宽度” 中设置显示或者隐藏，默认显示。
边框：用于设置表格外边框的宽度。 类：用于设置表格的CSS样式。 单击 按钮，（宽度橡皮擦）可以取消单元格的 宽度设置，使其宽度随单元格的内容自动缩放。 单击 按钮，（高度橡皮擦）可以取消单元格的 高度设置，使其高度随单元格的内容自动调整。 单击 按钮，可以将表格宽度转换为像素。 单击 按钮，可以将表格宽度转换为百分比。
“修改”—“表格”—“插入列”/“插入行或列” 命令。
“插入”—“表格对象”—“在左边插入列”/“在 右边插入列”命令。
选中表格，在属性面板中“列”数中增加数值。
2019年11月22日星期五
46
教育学院
网站建设
第7章使用表格
四、删除表格元素
1、删除单元格内的对象
表格排版技巧dreamweaver
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%即可解决这个问题。
dw两个表格并排
竭诚为您提供优质文档/双击可除dw两个表格并排篇一：dreamweaver表格属性2.把插入点放在表格中，然后在文档左下角的“标签选择器”中选择table标签。
3.选择“窗口”/“标签检查器”，打开“标签检查器”面板。
设置表格外围边框的显示状况。
在标签检查器中，单击frame属性右边的下拉箭头。
在标签选择器中，单击rules属性右边的下拉箭头。
thead,tbody,tfoot,和colgroup标记定义。
设置表格的亮边框和暗边框为了使效果明显，实例中插入三行三列、边框为6、边框颜色为黑色的表格。
在“标签检查器”中选择bordercolordark，设置表格的暗边框。
单击颜色选择器，选择一种颜色。
在“标签检查器”中选择bordercolorlight，设置表格的亮边框。
设置表格内容的排列方向在“属性选择器”中，选择dir右边的下拉箭头。
rtl：内容从右向左排列篇二：如何用dw创建表格一、创建基本的表格一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。
＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。
表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。
在讲解之前，我们先来看看表格的基本构造。
下图是一个3行3列的表格。
这里面有两个概念要弄明白：表格与单元格。
他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。
在上面3行3列的表格中一共有9个单元格。
由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。
前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标(dw两个表格并排)记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。
第7章 DW中的表格
1.抬头： 抬头： 抬头 由两个大的表格组成： 上面大表格是图片区，下面是导航区。图片区分为一行两列，左边是赛迪网的 LOGO ，右边是其他图片信息区。图片信息区中插入了一个两行两列的表格，上 面一行，将两个单元格合并成一个，然后放上"赛迪信息"，"赛迪商务"，"赛迪资 询"，以及一个防止变形的白色图片；下面一行，左边是互动学校的动画图标，右 边单元格中再插入一个三行一列的表格，并加上带链接的"赛迪寻呼"，"赛迪社区"， "信息助理"。 下面的表格分为一行两列，前面空格中输入带链接的" 资讯中心 | 技术天地 | 软件 特供 | IT财经 | 市场专家 | 互动学校 | DIY专区 | 媒体全文 | IT罗盘 | IT人才 "信息， 后面是一个显示时间的 Javascript 脚本。 2.正文区： 正文区： 正文区 正文区是一个一行三列的大表格构建而成，每一列中或插入单独的表格，或进行 拆分，形成多个区域并输入相应的信息，最后组成了网页的主要内容。由于原理 上面已经讲清楚，这里就不再赘述，大家可以自己试着体会一下。
除了上面已经介绍的参数外，属性面板还提供了其他的参数： Align：表格的对齐方式，分别是居左，居中，居右。 Bgcolor：表格的背景颜色。 Brdr Color：边线颜色，只有当 Border 参数为 1 即边线显现时本参数才有意义。 BgImage：表格的背景图片。 ：清除行高与列宽。 ：根据表格的当前值，分别将表格比例改为绝对尺寸或者相对比例尺寸。
3.点按合并单元格图标，结果如图
4.选中第一列上面两个表格，点按合并单元格图标，结果如图
5.最后再输入文字。
提示： 提示：表格的制作方法有很多种，上面我们给出的仅仅是一种做法，你也可以先 定制一个三行三列，甚至一行一列的表格，然后通过合并与拆分来完成后面的工 作。 表格的网页定位： 表格的网页定位： 表格的网页定位，主要是通过将网页内容分成若干个区，然后将相应的内容 分别填入不同的表格，从而做成非常规范与专业的网页。上面我们明白了表 格的制作方法，下面我们通过一个实例来讲解表格的网页定位技术。 大家对"互动学校"这个页面比较感兴趣？它看起来有点复杂，不过当你静 下心来仔细想一下，你就会明白，它其实是由若干个表格做成的。如图
dw两个表格并排
竭诚为您提供优质文档/双击可除dw两个表格并排篇一：dreamweaver表格属性2.把插入点放在表格中，然后在文档左下角的“标签选择器”中选择table标签。
3.选择“窗口”/“标签检查器”，打开“标签检查器”面板。
设置表格外围边框的显示状况。
在标签检查器中，单击frame属性右边的下拉箭头。
在标签选择器中，单击rules属性右边的下拉箭头。
thead,tbody,tfoot,和colgroup标记定义。
设置表格的亮边框和暗边框为了使效果明显，实例中插入三行三列、边框为6、边框颜色为黑色的表格。
在“标签检查器”中选择bordercolordark，设置表格的暗边框。
单击颜色选择器，选择一种颜色。
在“标签检查器”中选择bordercolorlight，设置表格的亮边框。
设置表格内容的排列方向在“属性选择器”中，选择dir右边的下拉箭头。
rtl：内容从右向左排列篇二：如何用dw创建表格一、创建基本的表格一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。
＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。
表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。
在讲解之前，我们先来看看表格的基本构造。
下图是一个3行3列的表格。
这里面有两个概念要弄明白：表格与单元格。
他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。
在上面3行3列的表格中一共有9个单元格。
由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。
前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标(dw两个表格并排)记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。
DW网页局(表格、布局表格)
6. 固定宽度列 ： 具有特定的宽度值。7. 自动伸展列 ： 就是表格可以按照屏幕比例来自动调整 宽度 ， 相当于将表格的宽度定义为百分比； 如果布局中包 括自动伸展列 ， 则该布局会始终填充访问者浏览器窗口的 整个宽度 。常见的布局是让页上包含主要内容的列自动伸 展 ， 这会将所有其它列自动设置为固定宽度 。例如 ， 假设 您的布局在页的左边有一个较宽的图像 ， 在右边有一列文 本 。您可能将左边的列设置为固定宽度 ， 让侧栏区域自动 伸展。8.设置“布局 ”模式的首选参数 ， 打开对话框首选参数， 然后从左侧的类别列表中选择“布局模式 ”。在其中可以设置自动插入间隔图像 、单元格外框、单元 格高亮、表格外框、表格背景 。
第4章 构建网页布局
• 使使用用表表格格• 使使用用布布局局表表格格
4. 1 使用表格所谓表格就是由一个或多个单元格构成的集合 ， 表格中横向的多个单元格称为行 ， 垂直的多个单 元格称为列 。行与列的交叉区域称为单元格 ， 网 页中的元素通常都被放置在这些单元格中 ， 以使
其“各安其位 ”。
4.2.3绘制布局单元格：按住ctrl键拖动可以连续绘制多个布局单元格。注意要点：■ 如果页面已包含内容 ， 则只能在现有内容的下方空白 区绘制新的布局表格。■ 在一个布局表格中可创建多个布局单元格 ;布局单元 格不能存在于布局表格之外 ;更不能在一个布局单元 格中创建布局表格 。 也可以仅在准备添加内容时绘 制每一个单元格。■ 当绘制的布局单元格不在布局表格中 ， 则自动创建一 个布局表格作为该单元格的容器 ， 这时表格与页边距 相差8个像素。■ 表格不能互相重叠 ， 可以嵌套 。一个表格可以完全包 含在另一个表格当中 。将插入点放置到一个布局表格 中 ， 即可绘制嵌套布局表格 。嵌套布局表格的大小 不能超过包含它的表格。
dw布局模式[Android五种布局模式]
![dw布局模式[Android五种布局模式]](https://img.taocdn.com/s3/m/cc66eab364ce0508763231126edb6f1aff007172.png)
Android布局是应用界面开发的重要一环，在Android中，共有五种布局方式，分别是：LinearLayout (线性布局)，FrameLayout(框架布局)，AboluteLayout(绝对布局)，RelativeLayout(相对布局)，TableLayout(表格布局)。
在window下有预览功能，可以在某ml中查看布局的样式，在linu某中无。
一、LinearLayout线性布局，这个东西，从外框上可以理解为一个div，他首先是一个一个从上往下罗列在屏幕上。
每一个LinearLayout里面又可分为垂直布局(android:orientation="vertical")和水平布局(android:orientation="horizontal" )。
当垂直布局时，每一行就只有一个元素，多个元素依次垂直往下;水平布局时，只有一行，每一个元素依次向右排列。
linearLayout中有一个重要的属性 android:layout_weight="1"，这个weight在垂直布局时，代表行距;水平的时候代表列宽;weight值越大就越大。
线形布局中预览和真机中完全一样。
Te某tView占一定的空间，没有赋值也有一定的宽高，要特别注意。
二、FrameLayoutFrameLayout是最简单的一个布局对象。
它被定制为你屏幕上的一个空白备用区域，之后你可以在其中填充一个单一对象—比如，一张你要发布的图片。
所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。
后一个子元素将会直接在前一个子元素之上进行覆盖填充，把它们部份或全部挡住(除非后一个子元素是透明的)。
三、AboluteLayoutAboluteLayout 这个布局方式很简单，主要属性就两个 layout_某和 layout_y 分别定义这个组件的绝对位置。
dw表格铺满页面
竭诚为您提供优质文档/双击可除dw表格铺满页面篇一：dreamweaver中网页制作与布局——表格布局20xx年全国技工教育和职业培训优秀教研成果评选活动参评教案参评组别：b组专业分类：计算机与信息技术课程名称：网页设计与制作《一个简单网页的制作》教案1234篇二：用dreamweaver制作网页中的表格格是现代网页制作的一个重要组成部分。
表格之所以重要是因为表格可以实现网页的精确排版和定位。
虽然现在都提倡web标准建立网站，但是有时在网页中还是会应用到表格的。
这个教程我们给大家讲解表格操作的基本方法。
在开始制作表格之前，我们首先对表格的各部分的名称做一个介绍。
（看下图）一张表格横向叫行，纵向叫列。
行列交叉部分就叫做单元格。
单元格中的内容和边框之间的距离叫边距。
单元格和单元格之间的距离叫间距。
整张表格的边缘叫做边框。
下面看看我们使用表格制作的页面的实例这幅页面的排版格式，如果用以前我们所讲的对齐方式是无法实现的。
因此我们需要用到表格来做。
实际上是用两行两列的表格来制作。
1、在插入栏中选择按钮或“插入”菜单>选“表格”。
系统弹出表格对话框如下图。
这些参数我们都已经认识了。
行：2。
列：2。
其余的参数都保留其默认值。
2、在编辑视图界面中生成了一个表格。
表格右、下及右下角的黑色点是调整表格的高和宽的调整柄。
当光标移到点上就可以分别调整表格的高和宽。
移到表格的边框线上也可以调整。
（如下图）3、在表格的第一格按住左键不放，向下拖拽选中二格单元格。
（如下图）篇三：dreamweaver制作数据库页面1、首先确认站点根目录下有专门的数据库存放目录，比如d:\newgate下面的database文件夹（有则ok，无则新建）。
接着打开microsoftaccess，"文件"---“新建...”数据库，在弹出的对话框中选择存放路径并命名。
2、在新建的数据库中“使用设计器创建表”，弹出的“表1”中设计你的相关字段，注意各自的“数据类型”，还有一点很重要：字段id，类型自动编号，并选择它定为主键。
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
添加
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。
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。
《dw教学课件》第四讲----表格布局27页PPT
5、设置单元格属性
前提：选中单元格或光标定位到单元格中 Horz(水平):设置单元格内容的水平对齐方式． Vert（垂直）：设置单元格的垂直对齐方式． W和H：以像素表示的单位设置单元格的宽度和高
度．如果要使用百分比为单位，刚在数值后加百分 比符号（％）
13
Bg(背景):设置单元格的背景图案（上方） 设置单元格的背景颜色（下方）
6
ቤተ መጻሕፍቲ ባይዱ
3、跟踪图像 页面属性－跟踪图像－透明度。它可以更好地帮助 进行网页的设置，完成初步的布局绘制布局表格和 布局单元格）。预览时，追踪图像是无图象显示的 仅仅作为辅助功能。
注意： “标尺、网格、跟踪图象”则是对网页中的元素进行
精确的定位。 表格是将网页中的内容进行定位，完成网页布局
7
任务二、表格
绝对象素或总宽度的百分比表示 行标签：
<tr>…</tr>表格中的每一行 单元格标签：
<td>…</td>表格中的一行中的每一格 表格头标签：
<th>…</th>设置表格头：通常是黑体居中文字
9
3、创建表格
单击插入常用工具栏上的按钮 将光标停放在选定的位置，执行插入→表格 将插入面板中的按钮从插入面板中拖到页面的相应
21
data file(数据文件)输入要导入的文件名称。 文件－导入－Excell文档或者word文档
delimiter(定界符)分割表格数据的分割符如果选择 other右侧会出现新的文本框,在其中输入新的分隔符。
①如何让插入的表格自动居中？ 在属性面板中的“对齐”中选择“居中对齐” ②如何让表格中的文字居中？ （默认下文字是垂直居左对齐） 方法：光标放在文字的位置，在属性面板中“水平”中
Dreamweaver第6讲布局表格
Dreamweaver第6讲布局表格
第六讲Dm中的布局表格
主要内容如下
Dm中的三种视图模式
Dm中的三种表格模式
使用布局表格对网页进行布局
重点：
三种视图模式的切换和异同
三种表格模式的切换和异同
布局表格和布局单元格的使用
难点：
使用布局表格对网页进行布局
一、Dm中的三种视图模式
Dm中的三种视图模式是：设计视图、代码视图和拆分视图。
设计视图：所见即所得
代码视图：编辑网页文件的源代码
拆分视图：混和视图，包含以上两者。
三种视图的使用：
二、Dm中的三种表格模式
在Dm中对表格对象来说，有标准模式、扩展表格模式和布局模式三种模式。
扩展模式和布局模式都是为了简化表格操作的难度。
切换到“布局模式”的步骤是：菜单栏中点击“查看”菜单——“表格模式”——“布局模式”。
切换到“扩展模式”的步骤是：～～～～～～。
三、使用布局模式
1、切换到布局模式
2、绘制布局表格
3、布局表格属性栏
宽度“自动延伸”时：。
4、绘制布局单元格
5、布局表格
注意：
1、一行内只能绘制一个布局表格。
2、布局单元格内不能再欠套布局表格或布局单元格
四、项目实例
使用表格布局模式制作校园网主页。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
竭诚为您提供优质文档/双击可除
dw,表格布局
篇一：中学dreamweaver教案：表格布局与设计
教学课题:表格布局及设计
教学目标：
1、知识与技能：
（1）能够掌握dreamweaver中表格的基本操作方法；
（2）能够独立完成简单表格实例的实际应用；
（3）初步掌握使用表格进行网页布局的方法；
（4）掌握表格对调特殊的设置方法；
（5）熟悉掌握使用网络硬盘保存网页的方法；
（5）概括、总结表格使用中要注意的事项。
2、过程与方法
（1）能够插入指定行、列数的表格，并对表格格式按要求进行修改；
（2）能够在表格中插入如指定对象，并对其做相应调整；
（3）能够修改网页基本属性。
3、情感态度与价值观
（1）通过本课简单表格对象的操作，增强学生学习网页制作的信心；
（2）通过独立完成作品，培养学生应用信息技术展现个性空间的理念；
（4）独立绘制出有规则、组织合理的表格网页，使同学产生学生知识的渴求，，制作简
单的表格对象，使同学们在枯燥繁重的学习生活中体验到一些学习的乐趣，增加学生们对知识的渴求，培养良好的学习情趣；
教学策略与方法：
1、问题激发策略：使用多媒体网络教室全屏演示系统全屏控制，提出操作环节中遇到的问题中，让同学们在自主实践环节，自己运用已有的知识去处理相关操作；
2、示范-模仿教学策略：使用多媒体网络教室全屏演示系统窗口控制，让学生与教师同步跟学操作，增加实际操作效果；
3、自主实践学习、同学间协作实践学习等策略，充分运用网络教室教师与学生电脑的互动特点，教学全屏演示、窗口演示、学生作品展示等过程，指导学生完成作品，并启发学生触类旁通，对网页中表格的基本操作有一定的发解。
教学课时：共需四课时（上机实践）
教学过程：
第5课表格布局及设计
一、创设情景，引入新课
通过前几课的学习，同学们对dw有了初步的了解，可
以自己制作出纯文字构成的简单网页，也可以做出规则表格构成的网页，网页的保存是非常重要的，同学已经发现，当我们引入使用网络硬盘保存的方式之后，就引发出一些问题，本节课，我们进一步学习网页表格的制作与设计，并实践在局域网中，网站的保存与网页的访问。
1、表格属性复习
①数值属性：行列数、宽高数值、填充间距边框数值；
②对齐方式：左对齐、居中对齐、右对齐；
③颜色：背景、边框(边框数据不为0时有效)；
④背景图像；
2、表格中插入图片对象：
①设定表格大小，以及宽度、高度值；
②菜单：插入→图像→index.gif
3、表格合并及拆分:
（二）、教学演示，学生跟做
4、教师活动：开始新课讲解，引出本课要完成一个5*9的表格
在回顾前表格基础知识之后，我们可以发现：表格控制其实不同于以往如word中采用拖拽控制句柄的方法，而是采用输入精确数值的方法，精确定义表格的大小，步骤1：修改页面属性：修改标题、背景颜色
步骤2：插入5*9的表格：
步骤2：设置表格各行高、各列宽数值
步骤
3：合并单元格：按照教材33页要求，把第1、5、
4行，第1、9列部分或全部单格进行合并操作：
步骤4：向已合并的单元格中插入图片，四个边框中插入的图片上下左右，分别为：mail_01.gif、mail_02.gif、mail_03.gif、mail_04.gif，第2行3、5、7列插入的图片分别为：pen_01.jpg、pen_02.jpg、pen_03.jpg，在第4行的已合并的第3格中图片分别为：frieng.jpg、link1、link2。
步骤5：输入文字：在第
3
行第3、5、7格输入文字，在输入文字时要特别注意一点，就是文本内容在换行时，直接回车和ctRl+回车是不一样的，前者将会产生很大的行距，
后者行距是正常的，我们要采用后者，那
ctRl+
回车的方式进行换行。