通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第7章表格与层(精品).ppt

第7章 表格与层l表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格使用的方法灵活，却略显复杂。使用Dreamweaver不仅可以使创建表格简单快捷，还可以使修改方式更为方便。除此之外，层也是网页中的一个重要容器元素。当网页中有动态效果时，大多使用了层元素。另外，现在流行的Web标准中，层元素是不可缺少的。7.1 基本操作l前面介绍了表格的作用是使网页整齐明了。本节将介绍如何在网页中添加表格，以及简单设置表格的属性来适应网页设计的需要。7.1.1 插入表格l了解了表格的用途之后，接下来了解如何把表格插入到网页中。具体步骤如下：【表格】对话框 图 表格效果 7.1.2 输入数据l插入表格之后，接下来介绍如何把数据输入到表格中，具体步骤如下：输入数据效果 7.1.3 调整表格尺寸l在表格中输入数据后，如果数据内容较多，就需要调整表格的大小，以适应内容的需要。如何进行调整，具体步骤如下：选中表格效果 调整表格效果 7.1.4 表格对齐l从上面的图中可以看出表格默认的对齐方式是左对齐，修改对齐方式的具体步骤如下：居中对齐效果 7.2 编辑表格 l前面介绍了表格的基本操作，还有一些其他的对表格进行编辑的操作。例如，合并或拆分表格单元、添加或删除表格行或列、调整行高或列宽及设置表格标题等。7.2.1 表格标题l一般情况下表格会有一行标题来说明表格的内容项。例如一张学生成绩表，有一行标题说明对应的成绩科目。在表格中，设置标题的具体步骤如下：无表格标题效果 表格标题效果 7.2.2 表格列宽与行高l当单元格中的内容较多时，需要调整表格单元的宽度和高度。Dreamweaver的可视化操作可以使此项操作变得简单方便，具体步骤如下：原始效果 改变宽高效果 7.2.3 添加行或列l在网页设计过程中，当表格的行或列不够时，就需要添加一行或一列。添加行或列的具体步骤如下：原始表格效果 【插入行或列】对话框 7.2.3 添加行或列l单击【确定】按钮，完成插入行，效果如图左所示选择【所选之前】单选按钮，然后单击【确定】按钮，完成插入列，效果如图右所示。插入行效果 插入列效果 7.2.4 删除行或列l了解了如何添加行或列，接下来介绍如何把多余的行或列删除，具体步骤如下：l接着上一小节中的实例，保持插入行和列的效果。l选中需要删除的行，可以同时选中多行。选中上小节中插入的行。l保持光标在选中的行上，然后右击，弹出快捷菜单。l单击【表格】|【删除行】命令，完成行的删除。7.2.5 合并单元格l在表格的使用过程中，有的内容需要占两个或两个以上的单元格。此时需要把多个单元格合并成一个单元格，可以是合并同行的单元格，也可以是合并同列的单元格。具体步骤如下：原始表格效果 合并单元格效果 7.2.6 拆分单元格l上一小节介绍了如何合并单元格。既然有合并，当然也有拆分。拆分单元格的具体步骤如下：【拆分单元格】对话框7.3 表格外观l表格的外观包括表格边框的粗细与颜色、单元格之间的距离（即间距）、表格内容的颜色与对齐方式、表格的背景颜色与背景图像，以及单元格的背景颜色与背景图像等。7.3.1 设置边框粗细l边框的粗细可以为网页增添一些趣味。在插入表格时，默认边框为1像素。如何进行边框粗细的修改，具体步骤如下：无边框效果图 无边框预览效果 7.3.1 设置边框粗细l在【边框】文本框中输入5，按Enter键，效果如图左所示，预览如图右所示。边框为5的效果 加边框预览效果 7.3.2 设置边框颜色l在上一小节中，边框的默认颜色是灰色，如果总以灰色显示会很单调。下面将介绍设置边框的颜色，具体步骤如下：边框颜色效果 单元格边框颜色效果 7.3.3 设置表格间距l插入一个表格后，可以看到表格的边框之间有一个间隙，它就是表格的间距。默认的间距是2像素。如何进行表格的间距的设置？具体步骤如下：表格间距效果 7.3.4 表格填充l表格填充是指单元格内容与单元格边框之间的距离。如何对其进行设置？具体步骤如下：表格填充效果 7.3.5 设置单元格对齐方式l前面设置了表格在页面中的对齐方式，那么表格中内容的对齐方式如何进行设置？具体步骤如下：水平居中效果 底部对齐效果 7.3.6 设置表格背景颜色与图像l前面介绍了网页的背景颜色和图像，其实也可以为表格设置背景颜色和图像，从而使表格的外观更多姿多彩，具体步骤如下：表格背景颜色效果 表格背景图像效果 7.3.7 设置单元格背景颜色与背景图像l前面介绍了表格背景颜色与背景图像，如何设置单元格背景颜色与背景图像？具体步骤如下：单元格背景颜色效果 单元格背景图像效果 7.4 div层l l层是网页中一个重要的动态元素，能使网页动起来，它是网页中不可缺少的重要元素，在后面介绍的Web标准中更是不可或缺。在本节中只介绍层的基本用法，一些高级用法会在相关的内容中再详细介绍。7.4.1 层基本操作l层标签如此的重要，如何把层加入到网页之中？具体步骤如下:插入层效果 改变层大小效果 层背景颜色效果 图 层位置设置效果 7.4.2 层属性操作l层除了大小与背景，还有其他的相关属性，例如层编号、Z轴和溢出方式等，具体步骤如下：层【属性】面板 7.4.2 层属性操作l按F12键，进行预览:l比较设置Z轴前后的效果可以看出，Z轴值越大，层就越靠前。通过设置Z轴值可以修改层的前后顺序。设置Z轴前预览效果 设置Z轴后预览效果 7.4.3 【层】面板l对层的属性修改可以通过层的属性面板进行，还可以在【层】面板修改一部分属性。例如，层的可见属性、Z轴顺序和层编号。具体步骤如下：【层】面板 7.4.3 【层】面板l击【眼睛】按钮，可以使层显示或隐藏。如果此列内容为空，表示从父层继承。单击Layer1前的【眼睛】按钮，使其眼睛图像为闭合，如图左所示。此时预览效果如图右所示。闭合眼睛效果 预览隐藏层效果 7.4.4 层与表格转换l前面介绍了表格与层都可用于网页布局。它们之间也可以相互转换，具体步骤如下：层效果 转换到表格效果 7.5 专家总结l本章介绍了表格的使用方法。表格的设置较为复杂，与表格相关的标签和属性较多。关于层的基本设置读者只需大致了解，在后面将会详细介绍层的用法。关于表格的用法，读者必须多加练习以明白和巩固。下一章将介绍表单的使用。