Dreamweaver学习HTML+DIV+CSS教学PPT第7章__表格与层.ppt

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