使用表格.ppt

1、第3讲 使用表格与滚动公告栏的制作,表格是用来在页面中显示表格式数据的元素。很多网页设计人员使用表格进行页面布局（另外布局页面的方法是使用CSS样式表，将在后面的章节中讲解）。本章详细讲解使用表格和用表格进行页面布局的方法。,3.1 表格的基础知识,一般表格都由很多行或列组成，其中每个格称为“单元格”。其中表格的显示由边框、内边距和单元格边距构成。按照表格的组成，内容元素中定义的样式将覆盖外部元素中定义的样式。,3.2 创建表格,可以执行以下操作之一来创建表格。,3.3 选择表格,选择表格是对表格进行进一步操作的基础，其中包括选择整个表格，选择行或列，选择单元格三个部分。下面讲解具体的操作方法

2、。,3.3.1 选择整个表格,可以执行以下操作之一来选择整个表格。,3.3.2 选择表格的行或列,可以执行以下操作之一来选择表格的行或列。,3.3.3 选择单元格,可以执行以下操作之一来选择表格的单元格。,3.4 定义表格属性,表格属性包括表格的整体属性、行或列的属性和单元格的属性。下面进行详细讲解。,3.4.1 表格的整体属性,选择表格后，在属性窗口会显示相应的属性。根据选择的内容不同，属性面板的参数也有所区别。选择整个表格时，属性面板的显示效果如图所示。,3.4.1 表格的整体属性,1填充属性,3.4.1 表格的整体属性,2间距属性,3.4.2 表格的行、列或单元格属性,选择表格行、列或单

3、元格后，属性面板的显示效果如图所示。,3.4.2 表格的行、列或单元格属性,1水平和垂直属性,3.4.2 表格的行、列或单元格属性,2不换行属性,3.4.3 表格属性的显示顺序,表格中的属性之间存在着制约关系，同时表格不同元素之间的属性也会互相影响。下面分别讲解表格各个部分属性间的关系。 1表格元素之间的属性关系,3.4.3 表格属性的显示顺序,2表格不同属性间的制约关系 如果表格同时定义了背景颜色属性和背景图案属性，背景图案会覆盖背景颜色属性。下面用实例演示同时定义背景颜色和背景图案的显示效果。,3.5 处理表格内部元素,处理表格内部元素，是指对表格中的行、列或者单元格进行处理，其内容包括添

4、加或删除行和列、拆分和合并单元格、处理表格的元素等。下面进行详细讲解。,3.5.1 添加或删除行和列,添加或删除行和列是控制表格显示效果的最基本操作，通过这两个操作，可以更改表格整体的显示效果，具体内容如下所示。 1添加行和列,3.5.1 添加或删除行和列,2删除行和列 执行下列操作之一，删除行或列。 单击要删除的行或列中的一个单元格，执行“修改”|“表格”|“删除行”命令或者执行“修改”|“表格”|“删除列”命令，删除所选的行或列。,3.5.1 添加或删除行和列,3使用属性面板添加或删除行或列 可以通过更改属性面板中行或列的参数来添加或删除行或列。更改参数后，将在表格的右侧添加或删除列，在表

5、格的底部添加或删除行。,3.5.2 合并和拆分单元格,合并和拆分单元格可以对表格进行更精细地划分，通过这两个操作，可以使表格中数据的显示方式更加多样化，具体内容如下所示。 1合并单元格的条件 合并单元格的含义就是将几个单元格合并成一个，所以所选的单元格必须能够相邻成行或者成列，或者几个矩形能够排列成一个完整的矩形。如果几个单元格排列得不规则，或不相邻，则不能合并单元格。,3.5.2 合并和拆分单元格,2合并单元格 选择可以合并的单元格，执行下列操作之一，合并单元格。,3.5.2 合并和拆分单元格,3拆分单元格 单击要拆分的单元格，执行下列操作之一，拆分单元格。,3.5.3 处理表格元素,处理表

6、格元素，包括复制或剪切表格、粘贴单元格、删除单元格等。通过相应的操作，可以方便地制作更多的表格和重复的表格内容，具体内容如下所示。 1复制或剪切表格,3.5.3 处理表格元素,2粘贴单元格 执行下列操作之一，合并单元格。 执行“编辑”|“粘贴”命令，粘贴所选的单元格。 右击，打开下拉菜单，选择“粘贴”命令，粘贴所选的单元格。 使用快捷键Ctrl+V，粘贴所选的单元格。,3.5.3 处理表格元素,3删除单元格 在Dreamweaver中没有直接删除单元格的命令。选择单元格，使用Delete键可以删除表格中的内容，但不能删除单元格。 技巧： 可以通过删除单元格内容，然后将单元格与相邻单元格合并的方

7、法，取消相应的单元格。,3.6 调整表格的大小,调整表格的大小，包括调整表格的整体大小，调整表格行或列的大小，调整单元格大小等三部分。下面进行详细讲解。,3.6.1 调整表格的整体大小,选择表格，执行下列操作之一，调整表格的整体大小。,3.6.2 调整表格行或列的大小,选择表格中要调整的行或列，执行下列操作之一，调整表格行或列的大小。 1保持表格大小不变 保持表格宽度不变，可以拖动表格单元格的边线来更改列或行的大小，同时其他的行或列也会相应地受到影响。,3.6.2 调整表格行或列的大小,2只更改一列或一行的大小 按住Shift键，同时拖动选定行或列的边线，则可以只更改选定的行或列，此时整体表格

8、的大小将会受到影响。,3.6.3 清除宽度和高度,在调整表格大小时，如果要重新定义表格的宽度或高度，可以清除已经定义的宽度和高度。 选择表格，执行下列操作之一，清除表格的宽度或高度。,3.6.4 冲突的宽度和高度,如果同时定义了表格的宽度和高度，并同时定义了单元格的宽度和高度，就有可能出现高度和宽度冲突的情况。下面讲解高度和宽度冲突时的显示效果。 1单元格大小之和与表格大小冲突,3.6.4 冲突的宽度和高度,2单元格宽度或高度冲突 在如上图所示的表格中，1和2这样同行的表格要保持相同的高度。如果在1和2两个单元格中定义的高度不同，则最后的高度将使用高度较高的单元格的高度。 在如上衅所示的表格中

9、，1和3这样同列的表格要保持相同的宽度。如果在1和3两个单元格中定义的宽度不同，则最后的高度将使用宽度较宽的单元格的高度。,3.7 嵌套的表格,在表格中需要添加嵌套表格的地方单击鼠标，执行“插入记录”|“表格”命令，可以插入嵌套的表格，嵌套表格的显示效果如图所示。 。,3.8 使用表格布局,使用表格对网页进行布局，并不是推荐的布局方法（推荐使用CSS样式进行布局），但是依然有很多设计师使用表格进行布局。下面讲解使用表格布局的方法。,3.8.1 表格模式,在Dreamweaver中，表格有三种显示模式：标准模式、扩展模式、布局模式，在这三种模式下，表格的显示效果会有所区别。,3.8.2 制作布局

10、表格和布局单元格,在布局模式下，表格的制作是通过布局表格和其中的布局单元格实现的。在布局模式中不能执行“插入”|“表格”命令，只能通过拖拽鼠标的方法制作各种表格和单元格，具体内容如下所示。 1制作布局表格,3.8.2 制作布局表格和布局单元格,2制作布局单元格 选择布局模式，在插入栏的右侧，单击“布局单元格”按钮。将鼠标悬停在布局表格中时，鼠标显示“+”的形状，此时按住鼠标可以拖拽出布局单元格。,3.8.3 制作嵌套的布局表格,一般在制作复杂布局时，要在布局表格中再次使用布局表格。 执行下列操作之一，制作嵌套的布局表格。 使用嵌套布局表格的目的在于使页面的布局更具灵活性。在布局表格中定义的布局

11、单元格之间会互相影响。如果一个单元格中的内容增加，那么其他单元格的高度也会有相应地变化。下面使用实例讲解布局单元格和嵌套布局表格之间的区别。,3.8.3 制作嵌套的布局表格,1使用布局单元格 使用布局表格和布局单元格，制作如图左所示的表格，在其中一个表格内添加内容，其显示效果如图右所示。,3.8.3 制作嵌套的布局表格,2使用嵌套的布局表格,3.8.4 调整布局表格和布局单元格,一般在使用布局表格布局页面时，拖拽出来的布局表格或布局单元格都默认地定义了宽度和高度。在制作的过程中，很可能要修改部分表格的大小。下面讲解具体的操作方法。 1调整布局表格的大小和位置,3.8.4 调整布局表格和布局单元

12、格,2调整布局单元格的大小和位置 如果表格处于最外层，可以执行下列操作之一，调整布局表格的大小。,3.8.4 调整布局表格和布局单元格,3取消高度和自由伸展 在制作表格时，如果在布局表格中选择了“自由伸展”选项，则相应元素的宽度会定义为100%。如果对单元格中的列定义了“自由伸展”选项，常常会对布局造成很大的影响。 选择布局表格，在属性面板或者表格底部的快捷菜单中，可以定义“取消高度”操作，取消高度后，可以重新定义每个单元格的大小。,3.9 表格与代码,在Dreamweaver中，“设计”视图中制作的所有内容，都会对应相应的XHTML代码（或者HTML代码，具体使用的代码和页面的文档类型有关）

13、，除了在“设计”视图中更改表格的各种属性外，也可以在代码视图中修改代码来实现对表格的编辑。,3.9.1 表格结构与代码,从上面的学习中，可以了解到表格可以分为整体表格、表格名称、标题、行或列、单元格等几部分。不同的表格部分会对应相应的表格元素。在“设计”视图中，制作一个两行两列的表格，其显示效果如图所示。,12.9.2 表格属性与代码,在“设计”视图中表格属性面板中的每个属性，如宽度、边框等都对应相应的代码，在“设计”视图中制作一个表格，其显示效果如图所示。,3.10 专家总结,表格元素在网页制作中起着很重要的作用。现在仍然有很多网页的制作都是通过表格进行的，使用表格可以规划网页的布局，显示各种网页内容，同时嵌套的表格，具有很大灵活性，可以制作各种自适应的页面结构。但是在W3C推荐的网页标准中，已经不再提倡使用表格布局了。在新的网页标准中推荐使用CSS样式布局页面，而表格只用来显示数据内容。,滚动公告栏代码与marquee详解,格式 要显示的内容,direction：滚动的方向，这个参数的取值有四个：left（左)、right(右)、up(上)、down(下)。behavior：移动方式，值：scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。loop：循环。若未指定则循环不止(in