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

第4章 构建网页布局构建网页布局 使用表格使用表格使用布局表格使用布局表格4.1 4.1 使用表格使用表格 所谓表格就是由一个或多个单元格构成的集合，所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为表格中横向的多个单元格称为行行，垂直的多个单，垂直的多个单元格称为元格称为列列行与列的交叉区域称为行与列的交叉区域称为单元格单元格，网，网页中的元素通常都被放置在这些单元格中，以使页中的元素通常都被放置在这些单元格中，以使其其““各安其位各安其位”” 此处表示未此处表示未明确设置单明确设置单元格的宽度元格的宽度 此处显示了表格的宽此处显示了表格的宽度如果只显示一个度如果只显示一个“▼”“▼”符号，表示未符号，表示未明确设置表格宽度明确设置表格宽度 4.1.1 4.1.1 创建表格创建表格 在在DreamweaverDreamweaver中创建表格的方法非常简单中创建表格的方法非常简单确定插入点后，单击确定插入点后，单击““常用常用””插入栏中的插入栏中的““表表格格””按钮，打开按钮，打开““表格表格””对话框，设置各项参对话框，设置各项参数后，单击数后，单击““确定确定””按钮，即可插入表格。

按钮，即可插入表格 4.1.2 4.1.2 选择表格和单元格选择表格和单元格 在在DreamweaverDreamweaver中选择表格的方法非常简单，中选择表格的方法非常简单，只需用鼠标单击表格边框线即可只需用鼠标单击表格边框线即可要选择某个单元格，可首先将插入点放置在要选择某个单元格，可首先将插入点放置在该单元格内，然后按该单元格内，然后按【【CtrlCtrl＋＋A A】】组合键或单组合键或单击击““标签选择器标签选择器””中对应的中对应的““””标签要选择某行或某列，可将光标置于该行左侧要选择某行或某列，可将光标置于该行左侧或该列顶部，当光标形状变为黑色箭头或该列顶部，当光标形状变为黑色箭头 或或 时单击鼠标时单击鼠标4.1.3 4.1.3 设置表格和单元格的属性设置表格和单元格的属性 选选中中表表格格后后，，使使用用属属性性面面板板可可以以修修改改表表格格的的行、列、宽、高，以及填充、间距等行、列、宽、高，以及填充、间距等 在在单单元元格格中中单单击击，，属属性性面面板板中中将将显显示示相相应应单单元格的属性元格的属性1 1．设置表格和单元格的宽度与高度．设置表格和单元格的宽度与高度 制作网页时，很多情况下都需要改变表格和单制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖动边框或在属性面元格的宽度与高度，通过拖动边框或在属性面板的板的““宽宽””和和““高高””文本框中直接输入数值，文本框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与就可以非常方便地改变表格和单元格的宽度与高度。

高度设置表设置表格高度格高度 设置单元格设置单元格““宽宽””和和““高高”” 2 2．为表格和单元格设置背景颜色及背景图像．为表格和单元格设置背景颜色及背景图像 为表格和单元格设置背景颜色及背景图像的为表格和单元格设置背景颜色及背景图像的方法相当简单方法相当简单 将插入点置将插入点置于单元格中于单元格中 单击单击““背景背景””文本框后的文文本框后的文件夹图标件夹图标选择选择文件文件 课堂练习课堂练习1 1 使用表格构建使用表格构建““火百合火百合””主页布局主页布局在学习了表格的简单应用后，下面将结合表格在学习了表格的简单应用后，下面将结合表格与图像的应用来看一下与图像的应用来看一下““火百合火百合””主页的具体主页的具体制作方法制作方法 课堂练习课堂练习2 2 制作细线表格制作细线表格在在DreamweaverDreamweaver中，有多种方法可以制作细线表中，有多种方法可以制作细线表格，下面我们讲解一种最简单也是最常用的方格，下面我们讲解一种最简单也是最常用的方法，就是通过设置表格的间距和背景颜色来制法，就是通过设置表格的间距和背景颜色来制作细线表格。

作细线表格 4.1.4 4.1.4 合并与拆分单元格合并与拆分单元格 1 1．合并单元格．合并单元格 所谓合并单元格，就是将相邻的几个单元格合所谓合并单元格，就是将相邻的几个单元格合并成一个单元格并成一个单元格 拖动鼠标选拖动鼠标选中要合并的中要合并的单元格单元格单击单击““合并所合并所选单元格，使选单元格，使用跨度用跨度””按钮按钮2 2．拆分单元格．拆分单元格 拆分单元格表示将一个单元格拆分成多个单元拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下前面合并的单元格拆分开来，具体操作如下 在要拆分在要拆分的单元格的单元格中单击中单击单击单击““拆分单元格拆分单元格为行或列为行或列””按钮按钮打开打开““拆分单元拆分单元格格””对话框，设对话框，设置各项参数后单置各项参数后单击击““确定确定””按钮按钮 4.1.5 添加或删除行和列在使用表格布局网页时，往往需要在创建好在使用表格布局网页时，往往需要在创建好的表格中添加或删除行和列。

的表格中添加或删除行和列 在要添加行或列在要添加行或列的单元格中单击的单元格中单击鼠标右键，在弹鼠标右键，在弹出的快捷菜单中出的快捷菜单中选择选择““表格表格””>“>“插入行或列插入行或列””菜菜单单 在打开的在打开的““插入插入行或列行或列””对话框对话框中设置各项后单中设置各项后单击击““确定确定””按钮按钮 4.1.6 4.1.6 格式化表格格式化表格 在使用表格显示数据信息时，为便于浏览者阅在使用表格显示数据信息时，为便于浏览者阅读，往往需要为单元格设置不同的背景颜色读，往往需要为单元格设置不同的背景颜色常用的方法如下常用的方法如下选中表格后，选选中表格后，选择择““命令命令””>“>“格格式化表格式化表格””菜单菜单 在在““格式化表格格式化表格””对话框中设置对话框中设置各项后，单击各项后，单击““确定确定””按钮按钮 课堂练习课堂练习3 3 制作嵌套表格制作嵌套表格 所谓嵌套表格，所谓嵌套表格，就是就是在一个大表格的某个单元格在一个大表格的某个单元格里插入一个新的表格里插入一个新的表格，我们看到的绝大多数网页，我们看到的绝大多数网页都是由多个表格相互嵌套进行网页布局的。

都是由多个表格相互嵌套进行网页布局的 本节通过制作本节通过制作““lily”lily”网站中的网站中的““产品展示产品展示””页页面来看看嵌套表格的应用和制作方法面来看看嵌套表格的应用和制作方法 课堂练习课堂练习4 4 制作圆角表格制作圆角表格 在浏览网页时，经常会看到圆角表格，这使得在浏览网页时，经常会看到圆角表格，这使得整个网页看起来更加柔和、美观整个网页看起来更加柔和、美观制作圆角表格的方法有很多，下面就以制作下制作圆角表格的方法有很多，下面就以制作下图左侧的表格为例，具体讲解一下此类表格的图左侧的表格为例，具体讲解一下此类表格的制作方法制作方法 4.24.2使用布局表格布局网页使用布局表格布局网页4.2.1.4.2.1.模式简介及注意事项模式简介及注意事项在在dwdw中使用表格有以下中使用表格有以下3 3种模式：种模式：•标准模式：标准模式：具体内容添加和显示的模式具体内容添加和显示的模式•表格扩展模式：表格扩展模式：使用表格对页面进行布局的模式，也是使用表格对页面进行布局的模式，也是传统模式传统模式•布局模式：布局模式：使用布局表格对页面进行布局的模式，可以使用布局表格对页面进行布局的模式，可以在添加内容前使用布局单元格和表格来对页面进行布局；也在添加内容前使用布局单元格和表格来对页面进行布局；也可以在布局模式中将文本、图像和其他内容添加到布局单元可以在布局模式中将文本、图像和其他内容添加到布局单元格中，这和在标准模式中一样。

格中，这和在标准模式中一样 布局模式同时具有表格和层的共同性质，继承了层的准确布局模式同时具有表格和层的共同性质，继承了层的准确定位和可移动性，还继承了表格的行列属性定位和可移动性，还继承了表格的行列属性模式切换的操作方式：查看模式切换的操作方式：查看------表格模式表格模式--------标标准模式准模式/ /布局模式布局模式/ /表格扩展模式表格扩展模式在不同模式下，工具栏的各个按钮作用不同在不同模式下，工具栏的各个按钮作用不同注意：只有在注意：只有在““设计设计””视图中才可切换到视图中才可切换到““布布局局””模式在布局模式中不能像布局表格的模式在布局模式中不能像布局表格的空白区域插入内容，只能创建布局单元格，空白区域插入内容，只能创建布局单元格，布局单元格才是承载具体内容的容器布局单元格才是承载具体内容的容器4.2.2.4.2.2.绘制布局表格绘制布局表格按住按住ctrlctrl键可以绘制多个布局表格键可以绘制多个布局表格4.2.34.2.3绘制布局单元格：绘制布局单元格：按住按住ctrlctrl键拖动可以连续绘制多个布局单元格键拖动可以连续绘制多个布局单元格注意要点：n如果页面已包含内容，则只能在现有内容的下方空白区绘制新的布局表格。

n在一个布局表格中可创建多个布局单元格;布局单元格不能存在于布局表格之外;更不能在一个布局单元格中创建布局表格 也可以仅在准备添加内容时绘制每一个单元格n当绘制的布局单元格不在布局表格中，则自动创建一个布局表格作为该单元格的容器，这时表格与页边距相差8个像素n表格不能互相重叠，可以嵌套一个表格可以完全包含在另一个表格当中将插入点放置到一个布局表格中，即可绘制嵌套布局表格 嵌套布局表格的大小不能超过包含它的表格布局表格不能添加布局表格不能添加在布局单元格中在布局单元格中布局单元格只能添布局单元格只能添加在布局表格中加在布局表格中不能在原有内不能在原有内容的右侧，添容的右侧，添加布局表格了加布局表格了布局表格不能互相布局表格不能互相重叠，只能嵌套重叠，只能嵌套可以在原有布局表格可以在原有布局表格的下方添加布局表格的下方添加布局表格布局表格不能添加布局表格不能添加在布局单元格中在布局单元格中布局单元格只能添布局单元格只能添加在布局表格中加在布局表格中不能在原有内不能在原有内容的右侧，添容的右侧，添加布局表格了加布局表格了布局表格不能互相布局表格不能互相重叠，只能嵌套重叠，只能嵌套绘制完布局表格后的代码：绘制完布局表格后的代码：

白单元格4.2.44.2.4设置布局表格和布局单元格的属性和参数设置布局表格和布局单元格的属性和参数1.1.布局表格可以设置尺寸、背景、自动伸展等属性布局表格可以设置尺寸、背景、自动伸展等属性2.2.设置布局单元格属性设置布局单元格属性在布局模式中，只有在布局单元格内部插入页面内容在布局模式中，只有在布局单元格内部插入页面内容1 1）设置布局单元格的位置（移动：单击该单元格）设置布局单元格的位置（移动：单击该单元格的边缘用鼠标拖放；设置背景、对齐方式；清除单元的边缘用鼠标拖放；设置背景、对齐方式；清除单元格高度：选择属性检查器中的格高度：选择属性检查器中的““清除行高清除行高””） （（2 2）设置布局单元格内容的格式（调整大小：属性）设置布局单元格内容的格式（调整大小：属性面板或直接拖放面板或直接拖放（（3 3）为布局单元格添加间隔图像（需设置列自动伸）为布局单元格添加间隔图像（需设置列自动伸展）展）3.3.在布局模式中查看表格与单元格宽度在布局模式中查看表格与单元格宽度 布局表格和单元格的布局表格和单元格的宽度会出现在该表格的顶部或底部宽度会出现在该表格的顶部或底部宽度旁边是表格标题菜单与列标题菜单的箭头。

宽度旁边是表格标题菜单与列标题菜单的箭头使用菜使用菜单可以快速访问一些常用命令单可以快速访问一些常用命令有时可能不出现列宽；可能会看到以下任何一种情况：有时可能不出现列宽；可能会看到以下任何一种情况：（（1 1）无宽度：）无宽度：如果您未看到表格的宽度或列的宽度，则如果您未看到表格的宽度或列的宽度，则说明没有在说明没有在 HTML HTML 代码中指定该表格或列的宽度代码中指定该表格或列的宽度 （（2 2）波浪线：）波浪线：出现波浪线表示这种列是置为自动伸展的出现波浪线表示这种列是置为自动伸展的列3 3）双线：）双线：包含间隔图像的列在列宽周围具有双线该包含间隔图像的列在列宽周围具有双线该列可能稍有移位，顶部或底部会显示双线以表明它包含列可能稍有移位，顶部或底部会显示双线以表明它包含一个间隔图像一个间隔图像 （（4 4）两个数字：）两个数字：当拖动表格的右下角来调整表格的大小，当拖动表格的右下角来调整表格的大小，或者添加到单元格中的内容比该单元格的设置宽度大时，或者添加到单元格中的内容比该单元格的设置宽度大时，会出现这种情况如果出现两个数，则说明会出现这种情况如果出现两个数，则说明““设计设计””视图视图中显示的可视宽度与中显示的可视宽度与 HTML HTML 代码中指定的宽度不一致。

代码中指定的宽度不一致例如，例如，如果您将某列的宽度设置为如果您将某列的宽度设置为 200 200 像素，而添加的像素，而添加的内容将宽度延长为内容将宽度延长为 250 250 像素，则该列的顶部将显示两个像素，则该列的顶部将显示两个数字：数字：200200（代码中指定的宽度）和（代码中指定的宽度）和 (250)(250)（带括号，表（带括号，表示该列呈现在屏幕上的可视宽度）示该列呈现在屏幕上的可视宽度）4.4.使用间隔图像：使用间隔图像：间隔图像是不可见的、单像素的、透明间隔图像是不可见的、单像素的、透明 GIFGIF图像，用于控图像，用于控制自动伸展表格中的间距，以维持表格和单元格的宽度制自动伸展表格中的间距，以维持表格和单元格的宽度若不在自动伸展表格中使用间隔图像，则表格列的大小将若不在自动伸展表格中使用间隔图像，则表格列的大小将发生改变或消失（如果表格不包括内容）发生改变或消失（如果表格不包括内容）若要将列的最若要将列的最小宽度限制到某一特定值，可在该列中插入一个间隔图像小宽度限制到某一特定值，可在该列中插入一个间隔图像单击列标题菜单，然后选择单击列标题菜单，然后选择““添加间隔图像添加间隔图像””（也可同法（也可同法 ““删除间隔图像删除间隔图像 ）。

5.5.网格线网格线：：从任何新布局单元格的边缘向外延伸到包含该从任何新布局单元格的边缘向外延伸到包含该单元格的布局表格的边缘，这些线可以方便将新单元格和单元格的布局表格的边缘，这些线可以方便将新单元格和以前的单元格对齐，并显现基础以前的单元格对齐，并显现基础 HTML HTML 表格的结构表格的结构Dreamweaver Dreamweaver 网格已设置，并且这种网格不会根据单元格网格已设置，并且这种网格不会根据单元格的位置发生更改，因此可以用它来设计页面的布局的位置发生更改，因此可以用它来设计页面的布局 6.6.固定宽度列固定宽度列 ：：具有特定的宽度值7.7.自动伸展列自动伸展列 ：：就是表格可以按照屏幕比例来自动调整宽度，相当于将表格的宽度定义为百分比；如果布局中包括自动伸展列，则该布局会始终填充访问者浏览器窗口的整个宽度常见的布局是让页上包含主要内容的列自动伸展，这会将所有其它列自动设置为固定宽度例如，假设您的布局在页的左边有一个较宽的图像，在右边有一列文本您可能将左边的列设置为固定宽度，让侧栏区域自动伸展8.8.设置设置““布局布局””模式的首选参数，模式的首选参数，打开对话框首选参数，然后从左侧的类别列表中选择“布局模式”。

在其中可以设置自动插入间隔图像 、单元格外框、单元格高亮、表格外框、表格背景 8.8.设置布局表格属性设置布局表格属性 固定、自动伸展、固定、自动伸展、调整大小调整大小 （最外面的布局表格只能调（最外面的布局表格只能调整大小，不能整大小，不能移动，嵌套的表格可以移动）移动，嵌套的表格可以移动） 移动：移动：通过单击表格顶部的标签选择一个表格后，用鼠标通过单击表格顶部的标签选择一个表格后，用鼠标拖放也可以使用方向键移动也可以使用方向键移动9.9.表格的格式化，表格的格式化，可以通过属性检查器完成；也可以通过设可以通过属性检查器完成；也可以通过设计方案完成，操作方式是计方案完成，操作方式是““命令命令————格式化表格格式化表格”” 4.2.54.2.5添加内容添加内容 布局表格和布局单元格创建好后，在布局表格和布局单元格创建好后，在““布局布局””模式中可模式中可以将文本、图像和其它内容添加到布局单元格中，就像在以将文本、图像和其它内容添加到布局单元格中，就像在““标准标准””模式中将内容添加到表格单元格一样模式中将内容添加到表格单元格一样单击要添加内容的单元格，然后键入文本或插入其它内容。

不能将内容插入至布局表格的空白（灰色）区域，因此在可以将内容添加至表格前，必须先创建布局单元格当添加宽度大于布局单元格的内容时，该单元格将自动扩展当单元格扩展时，该单元格所在的列也随之扩展，这可能会改变周围单元格的大小该列的列宽变为显示代码中出现的宽度，后面的括号中是该列的可视宽度（屏幕上显示的宽度） 4.2.64.2.6课堂实例课堂实例1――1――用布局表格布局网站主用布局表格布局网站主页页 要设计一个精美的网页，先要规划好版式网页中最常用的版式类似于报刊，这种版式采用规范的、理性的分割方法，把网页分成竖向通栏、双栏、三栏、四栏或横向的通栏、双栏、三栏、四栏等一般以竖向分栏为多，这种版式给人以和谐、理性的美几种分栏方式结合使用，既理性、条理，又活泼而富有弹性练习 使用布局表格排版网站首页 在布局模式下，通过使用布局表格设计一个网站首页的版式，效果如图所示。