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

1、第7章 表格与层,表格是网页中的一个重要容器元素，可包含文字和图像。表格使网页结构紧凑整齐，使网页内容的显示一目了然。表格使用的方法灵活，却略显复杂。使用Dreamweaver不仅可以使创建表格简单快捷，还可以使修改方式更为方便。除此之外，层也是网页中的一个重要容器元素。当网页中有动态效果时，大多使用了层元素。另外，现在流行的Web标准中，层元素是不可缺少的。,7.1 基本操作,前面介绍了表格的作用是使网页整齐明了。本节将介绍如何在网页中添加表格，以及简单设置表格的属性来适应网页设计的需要。,7.1.1 插入表格,了解了表格的用途之后，接下来了解如何把表格插入到网页中。具体步骤如下：,【表格】

2、对话框图 表格效果,7.1.2 输入数据,插入表格之后，接下来介绍如何把数据输入到表格中，具体步骤如下：,输入数据效果,7.1.3 调整表格尺寸,在表格中输入数据后，如果数据内容较多，就需要调整表格的大小，以适应内容的需要。如何进行调整，具体步骤如下：,选中表格效果 调整表格效果,7.1.4 表格对齐,从上面的图中可以看出表格默认的对齐方式是左对齐，修改对齐方式的具体步骤如下：,居中对齐效果,7.2 编辑表格,前面介绍了表格的基本操作，还有一些其他的对表格进行编辑的操作。例如，合并或拆分表格单元、添加或删除表格行或列、调整行高或列宽及设置表格标题等。,7.2.1 表格标题,一般情况下表格会有一

3、行标题来说明表格的内容项。例如一张学生成绩表，有一行标题说明对应的成绩科目。在表格中，设置标题的具体步骤如下：,无表格标题效果 表格标题效果,7.2.2 表格列宽与行高,当单元格中的内容较多时，需要调整表格单元的宽度和高度。Dreamweaver的可视化操作可以使此项操作变得简单方便，具体步骤如下：,原始效果 改变宽高效果,7.2.3 添加行或列,在网页设计过程中，当表格的行或列不够时，就需要添加一行或一列。添加行或列的具体步骤如下：,原始表格效果 【插入行或列】对话框,7.2.3 添加行或列,单击【确定】按钮，完成插入行，效果如图左所示选择【所选之前】单选按钮，然后单击【确定】按钮，完成插入

4、列，效果如图右所示。,插入行效果 插入列效果,7.2.4 删除行或列,了解了如何添加行或列，接下来介绍如何把多余的行或列删除，具体步骤如下： 接着上一小节中的实例，保持插入行和列的效果。 选中需要删除的行，可以同时选中多行。选中上小节中插入的行。 保持光标在选中的行上，然后右击，弹出快捷菜单。 单击【表格】|【删除行】命令，完成行的删除。,7.2.5 合并单元格,在表格的使用过程中，有的内容需要占两个或两个以上的单元格。此时需要把多个单元格合并成一个单元格，可以是合并同行的单元格，也可以是合并同列的单元格。具体步骤如下：,原始表格效果 合并单元格效果,7.2.6 拆分单元格,上一小节介绍了如何

5、合并单元格。既然有合并，当然也有拆分。拆分单元格的具体步骤如下：,【拆分单元格】对话框,7.3 表格外观,表格的外观包括表格边框的粗细与颜色、单元格之间的距离（即间距）、表格内容的颜色与对齐方式、表格的背景颜色与背景图像，以及单元格的背景颜色与背景图像等。,7.3.1 设置边框粗细,边框的粗细可以为网页增添一些趣味。在插入表格时，默认边框为1像素。如何进行边框粗细的修改，具体步骤如下：,无边框效果图 无边框预览效果,7.3.1 设置边框粗细,在【边框】文本框中输入5，按Enter键，效果如图左所示，预览如图右所示。,边框为5的效果 加边框预览效果,7.3.2 设置边框颜色,在上一小节中，边框的

6、默认颜色是灰色，如果总以灰色显示会很单调。下面将介绍设置边框的颜色，具体步骤如下：,边框颜色效果 单元格边框颜色效果,7.3.3 设置表格间距,插入一个表格后，可以看到表格的边框之间有一个间隙，它就是表格的间距。默认的间距是2像素。如何进行表格的间距的设置？具体步骤如下：,表格间距效果,7.3.4 表格填充,表格填充是指单元格内容与单元格边框之间的距离。如何对其进行设置？具体步骤如下：,表格填充效果,7.3.5 设置单元格对齐方式,前面设置了表格在页面中的对齐方式，那么表格中内容的对齐方式如何进行设置？具体步骤如下：,水平居中效果 底部对齐效果,7.3.6 设置表格背景颜色与图像,前面介绍了网

7、页的背景颜色和图像，其实也可以为表格设置背景颜色和图像，从而使表格的外观更多姿多彩，具体步骤如下：,表格背景颜色效果 表格背景图像效果,7.3.7 设置单元格背景颜色与背景图像,前面介绍了表格背景颜色与背景图像，如何设置单元格背景颜色与背景图像？具体步骤如下：,单元格背景颜色效果 单元格背景图像效果,7.4 div层,层是网页中一个重要的动态元素，能使网页动起来，它是网页中不可缺少的重要元素，在后面介绍的Web标准中更是不可或缺。在本节中只介绍层的基本用法，一些高级用法会在相关的内容中再详细介绍。,7.4.1 层基本操作,层标签如此的重要，如何把层加入到网页之中？具体步骤如下 :,插入层效果

8、改变层大小效果,层背景颜色效果图 层位置设置效果,7.4.2 层属性操作,层除了大小与背景，还有其他的相关属性，例如层编号、Z轴和溢出方式等，具体步骤如下：,层【属性】面板,7.4.2 层属性操作,按F12键，进行预览: 比较设置Z轴前后的效果可以看出，Z轴值越大，层就越靠前。通过设置Z轴值可以修改层的前后顺序。,设置Z轴前预览效果 设置Z轴后预览效果,7.4.3 【层】面板,对层的属性修改可以通过层的属性面板进行，还可以在【层】面板修改一部分属性。例如，层的可见属性、Z轴顺序和层编号。具体步骤如下：,【层】面板,7.4.3 【层】面板,击【眼睛】按钮，可以使层显示或隐藏。如果此列内容为空，表示从父层继承。单击Layer1前的【眼睛】按钮，使其眼睛图像为闭合，如图左所示。此时预览效果如图右所示。,闭合眼睛效果 预览隐藏层效果,7.4.4 层与表格转换,前面介绍了表格与层都可用于网页布局。它们之间也可以相互转换，具