DW网页布局(表格、布局表格)

1、DW网页布局网页布局(表格、布局表格表格、布局表格) 第4章 使用表格使用表格 DW网页布局网页布局(表格、布局表格表格、布局表格) 4.1 4.1 使用表格使用表格 所谓表格就是由一个或多个单元格构成的集合，所谓表格就是由一个或多个单元格构成的集合， 表格中横向的多个单元格称为行，垂直的多个单表格中横向的多个单元格称为行，垂直的多个单 元格称为列。行与列的交叉区域称为单元格，网元格称为列。行与列的交叉区域称为单元格，网 页中的元素通常都被放置在这些单元格中，以使页中的元素通常都被放置在这些单元格中，以使 其其“各安其位各安其位”。 此处表示未此处表示未 明确设置单明确设置单 元格的宽度元格的

2、宽度 此处显示了表格的宽此处显示了表格的宽 度。如果只显示一个度。如果只显示一个 “”符号，表示未符号，表示未 明确设置表格宽度明确设置表格宽度 DW网页布局网页布局(表格、布局表格表格、布局表格) 4.1.1 4.1.1 创建表格创建表格 在在DreamweaverDreamweaver中创建表格的方法非常简单。中创建表格的方法非常简单。 确定插入点后，单击确定插入点后，单击“常用常用”插入栏中的插入栏中的“表表 格格”按钮，打开按钮，打开“表格表格”对话框，设置各项参对话框，设置各项参 数后，单击数后，单击“确定确定”按钮，即可插入表格。按钮，即可插入表格。 DW网页布局网页布局(表格、布

3、局表格表格、布局表格) 4.1.2 4.1.2 选择表格和单元格选择表格和单元格 在在DreamweaverDreamweaver中选择表格的方法非常简单，中选择表格的方法非常简单， 只需用鼠标单击表格边框线即可。只需用鼠标单击表格边框线即可。 要选择某个单元格，可首先将插入点放置在要选择某个单元格，可首先将插入点放置在 该单元格内，然后按该单元格内，然后按【CtrlCtrlA A】组合键或单组合键或单 击击“标签选择器标签选择器”中对应的中对应的“”标签。标签。 要选择某行或某列，可将光标置于该行左侧要选择某行或某列，可将光标置于该行左侧 或该列顶部，当光标形状变为黑色箭头或该列顶部，当光标

4、形状变为黑色箭头 或或 时单击鼠标。时单击鼠标。 DW网页布局网页布局(表格、布局表格表格、布局表格) 4.1.3 4.1.3 设置表格和单元格的属性设置表格和单元格的属性 选中表格后，使用属性面板可以修改表格的选中表格后，使用属性面板可以修改表格的 行、列、宽、高，以及填充、间距等。行、列、宽、高，以及填充、间距等。 在单元格中单击，属性面板中将显示相应单在单元格中单击，属性面板中将显示相应单 元格的属性。元格的属性。 DW网页布局网页布局(表格、布局表格表格、布局表格) 1 1设置表格和单元格的宽度与高度设置表格和单元格的宽度与高度 制作网页时，很多情况下都需要改变表格和单制作网页时，很多

5、情况下都需要改变表格和单 元格的宽度与高度，通过拖动边框或在属性面元格的宽度与高度，通过拖动边框或在属性面 板的板的“宽宽”和和“高高”文本框中直接输入数值，文本框中直接输入数值， 就可以非常方便地改变表格和单元格的宽度与就可以非常方便地改变表格和单元格的宽度与 高度。高度。设置表设置表 格高度格高度 设置单元格设置单元格“ 宽宽”和和“高高” DW网页布局网页布局(表格、布局表格表格、布局表格) 2 2为表格和单元格设置背景颜色及背景图像为表格和单元格设置背景颜色及背景图像 为表格和单元格设置背景颜色及背景图像的为表格和单元格设置背景颜色及背景图像的 方法相当简单。方法相当简单。 将插入点置

6、将插入点置 于单元格中于单元格中 单击单击“背景背景” 文本框后的文文本框后的文 件夹图标件夹图标 选选 择择 文文 件件 DW网页布局网页布局(表格、布局表格表格、布局表格) 课堂练习课堂练习1 1 使用表格构建使用表格构建“火百合火百合”主页布局主页布局 在学习了表格的简单应用后，下面将结合表格在学习了表格的简单应用后，下面将结合表格 与图像的应用来看一下与图像的应用来看一下“火百合火百合”主页的具体主页的具体 制作方法。制作方法。 DW网页布局网页布局(表格、布局表格表格、布局表格) 课堂练习课堂练习2 2 制作细线表格制作细线表格 在在DreamweaverDreamweaver中，有

7、多种方法可以制作细线中，有多种方法可以制作细线 表格，下面我们讲解一种最简单也是最常用的表格，下面我们讲解一种最简单也是最常用的 方法，就是通过设置表格的间距和背景颜色来方法，就是通过设置表格的间距和背景颜色来 制作细线表格。制作细线表格。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) 4.1.4 4.1.4 合并与拆分单元格合并与拆分单元格 1 1合并单元格合并单元格 所谓合并单元格，就是将相邻的几个单元格合所谓合并单元格，就是将相邻的几个单元格合 并成一个单元格。并成一个单元格。 拖动鼠标选拖动鼠标选 中要合并的中要合并的 单元格单元格 单击单击“合并所合并所 选单元格

8、，使选单元格，使 用跨度用跨度”按钮按钮 DW网页布局网页布局(表格、布局表格表格、布局表格) 2 2拆分单元格拆分单元格 拆分单元格表示将一个单元格拆分成多个单元拆分单元格表示将一个单元格拆分成多个单元 格，下面继续在前面的文档中操作，也就是将格，下面继续在前面的文档中操作，也就是将 前面合并的单元格拆分开来，具体操作如下。前面合并的单元格拆分开来，具体操作如下。 在要拆分在要拆分 的单元格的单元格 中单击中单击 单击单击“拆分单元格拆分单元格 为行或列为行或列”按钮按钮 打开打开“拆分单元拆分单元 格格”对话框，设对话框，设 置各项参数后单置各项参数后单 击击“确定确定”按钮按钮 DW网页

9、布局网页布局(表格、布局表格表格、布局表格) 4.1.5 添加或删除行和列 在使用表格布局网页时，往往需要在创建好在使用表格布局网页时，往往需要在创建好 的表格中添加或删除行和列。的表格中添加或删除行和列。 在要添加行或列在要添加行或列 的单元格中单击的单元格中单击 鼠标右键，在弹鼠标右键，在弹 出的快捷菜单中出的快捷菜单中 选择选择“表格表格”“ 插入行或列插入行或列”菜菜 单单 在打开的在打开的“插入插入 行或列行或列”对话框对话框 中设置各项后单中设置各项后单 击击“确定确定”按钮按钮 DW网页布局网页布局(表格、布局表格表格、布局表格) 4.1.6 4.1.6 格式化表格格式化表格 在

10、使用表格显示数据信息时，为便于浏览者阅在使用表格显示数据信息时，为便于浏览者阅 读，往往需要为单元格设置不同的背景颜色。读，往往需要为单元格设置不同的背景颜色。 常用的方法如下。常用的方法如下。 选中表格后，选选中表格后，选 择择“命令命令”“格格 式化表格式化表格”菜单菜单 在在“格式化表格格式化表格 ”对话框中设置对话框中设置 各项后，单击各项后，单击“ 确定确定”按钮按钮 DW网页布局网页布局(表格、布局表格表格、布局表格) 课堂练习课堂练习3 3 制作嵌套表格制作嵌套表格 所谓嵌套表格，所谓嵌套表格，就是就是在一个大表格的某个单元在一个大表格的某个单元 格里插入一个新的表格格里插入一个

11、新的表格，我们看到的绝大多数，我们看到的绝大多数 网页都是由多个表格相互嵌套进行网页布局的网页都是由多个表格相互嵌套进行网页布局的 。 本节通过制作本节通过制作“lily”lily”网站中的网站中的“产品展示产品展示” 页面来看看嵌套表格的应用和制作方法。页面来看看嵌套表格的应用和制作方法。 DW网页布局网页布局(表格、布局表格表格、布局表格) 课堂练习课堂练习4 4 制作圆角表格制作圆角表格 在浏览网页时，经常会看到圆角表格，这使得在浏览网页时，经常会看到圆角表格，这使得 整个网页看起来更加柔和、美观。整个网页看起来更加柔和、美观。 制作圆角表格的方法有很多，下面就以制作下制作圆角表格的方法

12、有很多，下面就以制作下 图左侧的表格为例，具体讲解一下此类表格的图左侧的表格为例，具体讲解一下此类表格的 制作方法。制作方法。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) 4.24.2使用布局表格布局网页使用布局表格布局网页 4.2.1.4.2.1.模式简介及注意事项模式简介及注意事项 在在dwdw中使用表格有以下中使用表格有以下3 3种模式：种模式： 标准模式：标准模式：具体内容添加和显示的模式。具体内容添加和显示的模式。 表格扩展模式：表格扩展模式：使用表格对页面进行布局的模式，也是使用表格对页面进行布局的模式，也是 传统模式。传统模式。 布局模式：布局模式：使用布局

13、表格对页面进行布局的模式，可以使用布局表格对页面进行布局的模式，可以 在添加内容前使用布局单元格和表格来对页面进行布局；在添加内容前使用布局单元格和表格来对页面进行布局； 也可以在布局模式中将文本、图像和其他内容添加到布局也可以在布局模式中将文本、图像和其他内容添加到布局 单元格中，这和在标准模式中一样。单元格中，这和在标准模式中一样。 布局模式同时具有表格和层的共同性质，继承了层的准确布局模式同时具有表格和层的共同性质，继承了层的准确 定位和可移动性，还继承了表格的行列属性。定位和可移动性，还继承了表格的行列属性。 DW网页布局网页布局(表格、布局表格表格、布局表格) 模式切换的操作方式：查

14、看模式切换的操作方式：查看-表格模式表格模式- 标准模式标准模式/ /布局模式布局模式/ /表格扩展模式。表格扩展模式。 在不同模式下，工具栏的各个按钮作用不同。在不同模式下，工具栏的各个按钮作用不同。 注意：只有在注意：只有在“设计设计”视图中才可切换到视图中才可切换到“布布 局局”模式。在布局模式中不能像布局表格的模式。在布局模式中不能像布局表格的 空白区域插入内容，只能创建布局单元格，空白区域插入内容，只能创建布局单元格， 布局单元格才是承载具体内容的容器。布局单元格才是承载具体内容的容器。 4.2.2.4.2.2.绘制布局表格绘制布局表格 按住按住ctrlctrl键可以绘制多个布局表格

15、。键可以绘制多个布局表格。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) 4.2.34.2.3绘制布局单元格：绘制布局单元格： 按住按住ctrlctrl键拖动可以连续绘制多个布局单元格。键拖动可以连续绘制多个布局单元格。 注意要点： n如果页面已包含内容，则只能在现有内容的下方空白 区绘制新的布局表格。 n在一个布局表格中可创建多个布局单元格;布局单元 格不能存在于布局表格之外;更不能在一个布局单元 格中创建布局表格。 也可以仅在准备添加内容时绘 制每一个单元格。 n当绘制的布局单元格不在布局表格中，则自动创建一 个布局表格作为该单元格的容器，这时表格与页边距 相差8个像素

16、。 n表格不能互相重叠，可以嵌套。一个表格可以完全包 含在另一个表格当中。将插入点放置到一个布局表格 中，即可绘制嵌套布局表格 。嵌套布局表格的大小 不能超过包含它的表格。 DW网页布局网页布局(表格、布局表格表格、布局表格) 布局表格不能添加布局表格不能添加 在布局单元格中在布局单元格中 布局单元格只能添布局单元格只能添 加在布局表格中加在布局表格中 不能在原有内不能在原有内 容的右侧，添容的右侧，添 加布局表格了加布局表格了 布局表格不能互相布局表格不能互相 重叠，只能嵌套重叠，只能嵌套 可以在原有布局表格可以在原有布局表格 的下方添加布局表格的下方添加布局表格 布局表格不能添加布局表格不

17、能添加 在布局单元格中在布局单元格中 布局单元格只能添布局单元格只能添 加在布局表格中加在布局表格中 不能在原有内不能在原有内 容的右侧，添容的右侧，添 加布局表格了加布局表格了 布局表格不能互相布局表格不能互相 重叠，只能嵌套重叠，只能嵌套 DW网页布局网页布局(表格、布局表格表格、布局表格) 绘制完布局表格后的代码：绘制完布局表格后的代码： 布局表格和布局单元格本质上还是表格和单元格，只是布局表格和布局单元格本质上还是表格和单元格，只是 在添加布局表格和布局单元格时在添加布局表格和布局单元格时dw自动添加了其它空自动添加了其它空 白单元格。白单元格。 DWDW网页布局网页布局( (表格、布

18、局表格表格、布局表格) ) 4.2.44.2.4设置布局表格和布局单元格的属性和参数设置布局表格和布局单元格的属性和参数 1.1.布局表格可以设置尺寸、背景、自动伸展等属性。布局表格可以设置尺寸、背景、自动伸展等属性。 2.2.设置布局单元格属性设置布局单元格属性 在布局模式中，只有在布局单元格内部插入页面内容。在布局模式中，只有在布局单元格内部插入页面内容。 （1 1）设置布局单元格的位置（移动：单击该单元格）设置布局单元格的位置（移动：单击该单元格 的边缘用鼠标拖放；设置背景、对齐方式；清除单元的边缘用鼠标拖放；设置背景、对齐方式；清除单元 格高度：选择属性检查器中的格高度：选择属性检查器

19、中的“清除行高清除行高”）。）。 （2 2）设置布局单元格内容的格式（调整大小：属性）设置布局单元格内容的格式（调整大小：属性 面板或直接拖放面板或直接拖放 （3 3）为布局单元格添加间隔图像（需设置列自动伸）为布局单元格添加间隔图像（需设置列自动伸 展）展） DW网页布局网页布局(表格、布局表格表格、布局表格) 3.3.在布局模式中查看表格与单元格宽度在布局模式中查看表格与单元格宽度 布局表格和单元格的宽度会出现在该表格的顶部或底部。布局表格和单元格的宽度会出现在该表格的顶部或底部。 宽度旁边是表格标题菜单与列标题菜单的箭头。使用宽度旁边是表格标题菜单与列标题菜单的箭头。使用 菜单可以快速访

20、问一些常用命令。菜单可以快速访问一些常用命令。 有时可能不出现列宽；可能会看到以下任何一种情况：有时可能不出现列宽；可能会看到以下任何一种情况： （1 1）无宽度：如果您未看到表格的宽度或列的宽度，则）无宽度：如果您未看到表格的宽度或列的宽度，则 说明没有在说明没有在 HTML HTML 代码中指定该表格或列的宽度。代码中指定该表格或列的宽度。 （2 2）波浪线：出现波浪线表示这种列是置为自动伸展的）波浪线：出现波浪线表示这种列是置为自动伸展的 列。列。 （3 3）双线：包含间隔图像的列在列宽周围具有双线。该）双线：包含间隔图像的列在列宽周围具有双线。该 列可能稍有移位，顶部或底部会显示双线以

21、表明它包列可能稍有移位，顶部或底部会显示双线以表明它包 含一个间隔图像。含一个间隔图像。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) （4 4）两个数字：当拖动表格的右下角来调整表格的大小）两个数字：当拖动表格的右下角来调整表格的大小 ，或者添加到单元格中的内容比该单元格的设置宽度大时，或者添加到单元格中的内容比该单元格的设置宽度大时 ，会出现这种情况。如果出现两个数，则说明，会出现这种情况。如果出现两个数，则说明“设计设计”视视 图中显示的可视宽度与图中显示的可视宽度与 HTML HTML 代码中指定的宽度不一致。代码中指定的宽度不一致。 例如，如果您将某列的宽度设置为

22、例如，如果您将某列的宽度设置为 200 200 像素，而添加的像素，而添加的 内容将宽度延长为内容将宽度延长为 250 250 像素，则该列的顶部将显示两个像素，则该列的顶部将显示两个 数字：数字：200200（代码中指定的宽度）和（代码中指定的宽度）和 (250)(250)（带括号，表（带括号，表 示该列呈现在屏幕上的可视宽度）。示该列呈现在屏幕上的可视宽度）。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) 4.4.使用间隔图像：使用间隔图像： 间隔图像是不可见的、单像素的、透明间隔图像是不可见的、单像素的、透明 GIFGIF图像，用于控图像，用于控 制自动伸展表格中的间

23、距，以维持表格和单元格的宽度。制自动伸展表格中的间距，以维持表格和单元格的宽度。 若不在自动伸展表格中使用间隔图像，则表格列的大小将若不在自动伸展表格中使用间隔图像，则表格列的大小将 发生改变或消失（如果表格不包括内容）。若要将列的最发生改变或消失（如果表格不包括内容）。若要将列的最 小宽度限制到某一特定值，可在该列中插入一个间隔图像小宽度限制到某一特定值，可在该列中插入一个间隔图像 。单击列标题菜单，然后选择。单击列标题菜单，然后选择“添加间隔图像添加间隔图像”（也可同（也可同 法法 “删除间隔图像删除间隔图像 ）。）。 5.5.网格线：从任何新布局单元格的边缘向外延伸到包含该网格线：从任何

24、新布局单元格的边缘向外延伸到包含该 单元格的布局表格的边缘，这些线可以方便将新单元格和单元格的布局表格的边缘，这些线可以方便将新单元格和 以前的单元格对齐，并显现基础以前的单元格对齐，并显现基础 HTML HTML 表格的结构。表格的结构。 Dreamweaver Dreamweaver 网格已设置，并且这种网格不会根据单元格网格已设置，并且这种网格不会根据单元格 的位置发生更改，因此可以用它来设计页面的布局。的位置发生更改，因此可以用它来设计页面的布局。 DWDW网页布局网页布局( (表格、布局表格表格、布局表格) ) 6.6.固定宽度列固定宽度列 ：具有特定的宽度值。 7.7.自动伸展列自

25、动伸展列 ：就是表格可以按照屏幕比例来自动调整 宽度，相当于将表格的宽度定义为百分比；如果布局中包 括自动伸展列，则该布局会始终填充访问者浏览器窗口的 整个宽度。常见的布局是让页上包含主要内容的列自动伸 展，这会将所有其它列自动设置为固定宽度。例如，假设 您的布局在页的左边有一个较宽的图像，在右边有一列文 本。您可能将左边的列设置为固定宽度，让侧栏区域自动 伸展。 8.8.设置设置“布局布局”模式的首选参数，模式的首选参数，打开对话框首选参数， 然后从左侧的类别列表中选择“布局模式”。 在其中可以设置自动插入间隔图像 、单元格外框、单元 格高亮、表格外框、表格背景 。 DW网页布局网页布局(表格、布局表格表格、布局表格) 8.8.设置布局表格属性设置布局表格属性 固定、自动伸展、调整大小固定、自动伸展、调整大小 （最外面的布局表格只能调（最外面的布局表格