四章表格ppt课件.ppt

第四章 表格,韦妍,网页设计与制作,第四章 表格,掌握导入和导出表格的方法,教学任务,理解表格的构成和作用,掌握表格的基本操作和属性设置方法,掌握排序表格的方法,1,2,3,4,掌握使用表格进行网页布局的方法,5,第四章 表格,教学重点与难点,掌握表格的基本操作和属性设置方法,2,掌握使用表格进行网页布局的方法,5,第四章 表格,4.1 插入表格,表格是网页布局设计的常用工具，其在网页中的应用已经突破了传统的用来记载大量数据的功能，它可以使插入页面中的图像和文本等对象被限定在某一固定位置。相对于没有使用表格的页面，使用表格的页面显得更加整齐有序。合理使用布局表格，会使网页对象被组织得更加紧密，使整个页面看起来更加紧凑，如图4-1所示的页面就是使用表格将大量的网页元素对象定位在网页特定的位置上的效果。,第四章 表格,第四章 表格,在设计网页时，可以直接绘制表格，也可以导入表格数据，并将其转化为表格。绘制表格的具体操作步骤如下：（1）在“文档”窗口的“设计”视图中，将插入点放在需要表格出现的位置。（2）在菜单栏中选择【插入】【表格】命令，或在【插入】面板的【常用】模式中，单 击【表格】按钮，弹出【表格】对话框，如图所示。,4.1 插入表格,第四章 表格,其中，各选项的含义如下：行数：确定表格行的数目。列数：确定表格列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度（以像素为单位）。单元格边距：确定单元格边框与单元格内容之间的像素数。,4.1 插入表格,第四章 表格,单元格间距：决定相邻的表格单元格之间的像素数。如果没有明确指定边框粗细或单元格间距和单元格边距的值，则大多数浏览器都按边框粗细和单元格边距设置为 1、单元格间距设置为 2 来显示表格。若要确保浏览器显示表格时不显示边距或间距，请将“单元格边距”和“单元格间距”设置为 0。无：对表格不启用列或行标题。左对齐：可以将表格的第一列作为标题列，以便可为表格中的每一行 输入一个标题。顶对齐：可以将表格的第一行作为标题行，以便可为表格中的每一列 输入一个标题。,4.1 插入表格,第四章 表格,两者兼有：使您能够在表格中输入列标题和行标题。标题：提供一个显示在表格外的表格标题。最好使用标题以方便使用屏幕阅读器的 Web 站点访问者。屏幕阅读器读取表格标题并且帮助屏幕阅读器用户跟踪表格信息。摘要：给出了表格的说明。屏幕阅读器可以读取摘要文本，但是该文本不会显示在用户的浏览器中。,4.1 插入表格,第四章 表格,（3）根据需要选择新建表格的大小、行列数值等，单击【确定】按 钮,完成如图所示的表格，这里一切选择默认设置。,4.1 插入表格,第四章 表格,4.2 设置表格属性,在绘制表格或者导入表格数据后，根据需要可能要对表格属性项进行修改设置才能达到设计的要求。下面就来介绍一下表格属性的设置方法。,第四章 表格,4.2.1 选择表格,1、选择整个表格 选择整个表格的方法有很多种，可以参照下列方法之一进行操作：（1）将鼠标指针移动到表格的上方，当鼠标指针的形状变为表格形状 时，单击鼠标左键即可选中整个表格，如图所示。,4.2 设置表格属性,第四章 表格,13,1、选择整个表格（2）将鼠标指针移动到表格的格线处，当鼠标指针的形状变为上下方向的箭头时，单击鼠标左键即可选中整个表格，如图所示。,4.2 设置表格属性,4.2.1 选择表格,第四章 表格,14,1、选择整个表格（3）将光标置于表格中，单击窗口左下角的标记即可选中整 个表格。（4）将光标置于表格中，在菜单栏中选择【修改】【表格】【选 择表格】菜单命令，即可选中整个表格。（5）将光标置于表格之外，按住【shift】键，然后在表格中的任意处 单击鼠标左键即可选择整个表格。,4.2 设置表格属性,4.2.1 选择表格,第四章 表格,2、选择单元格 选择单个单元格，直接单击要选择的单元格即可。选择行（或列），可按如下几种操作方法进行：(1)将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，单击鼠标左键，则可以选中该行（或该列）。将鼠标指针置于所要选择的行的左方（或列的上方），待鼠标指针形状变为向右（或向下）的箭头时，拖曳鼠标可以选中连续的多行（或多列）。,4.2 设置表格属性,4.2.1 选择表格,第四章 表格,2、选择单元格(2)将鼠标置于待选择的单元格中，然后按住鼠标左键不放并拖动鼠 标，横向拖动可以选择一行，纵向拖动可以选择一列，如果向对 角线方向拖动，行和列可以同时选择。(3)通过与【ctrl】键的结合使用，可以选择多个不连续单元格。按住【ctrl】键，然后单击需要选择的单元格，即可选中该单元格。如 果想取消选择某单元格，只需在按住【ctrl】键的同时，再次单击 该单元格即可。,4.2 设置表格属性,4.2.1 选择表格,第四章 表格,4.2.2设置行数和列数,插入表格后，可以根据需要随时增、减行数或列数，方法如下：1、通过【属性】面板 选中要修改的表格，在表格属性面板上的“行”（或“列”）文本框中直接输入所需的行数（或列数）。2、通过快捷菜单 将光标置于表格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”选项，按照需要选择“插入行”（或“插入列”）。3、通过菜单栏命令 在菜单栏中选择【插入】|【表格对象】命令，在弹出的子菜单中选择相应的选项。或在菜单栏中选择【修改】|【表格】命令，在弹出的子菜单中选择插入行（或列）。,4.2 设置表格属性,第四章 表格,18,4.2.3设置表格对齐方式,表格同网页中的其他元素对象一样，有三种对齐方式，即左对齐、对齐和居中对齐，默认情况下是左对齐，为表格设置对齐方式的操作方法如下：（1）选中要设置对齐方式的表格。（2）在表格【属性】面板上的“对齐”下拉列表框中选择一种对齐方式。,4.2 设置表格属性,第四章 表格,19,4.2.5设置表格边框,表格中的一些效果是通过设置表格边框的属性来实现的，对于表格边框，可以设置它的粗细和颜色。1）边框的粗细在表格【属性】面板上的“边框”用来设置表格边框的粗细，默认情况下设置为1，即如果没有明确指定边框的值，则大多数浏览器按边框值为1的设置显示表格。通过改变该文本框中的数值，可以调整表格边框的粗细。如下图所示为分别将表格的边框设置为0、1和10的效果。,4.2 设置表格属性,第四章 表格,20,第四章 表格,21,2）边框的颜色表格的边框颜色默认情况下是灰色的，通过【CSS样式】面板HTML代码可以为表格的边框选择其他的颜色。为表格边框设置颜色的操作方法如下：（1）选中要改变边框颜色的表格。（2）切换到“代码”视图或“拆分”视图，在对应的表格代码的“table”后按空格后输入“bordercolor=”将弹出一个颜色选择面板，如下 图所示。（3）在弹出的调色板中选择一种颜色。,4.2 设置表格属性,4.2.5设置表格边框,第四章 表格,22,第四章 表格,23,设置完成后的效果如图所示。,第四章 表格,24,4.2.6设置表格背景,在网页中，表格是一个独立的对象，不仅可以设置表格边框的颜色，还可以为其添加背景色或者选择背景图像。1）添加背景色为表格添加背景色的操作方法如下：（1）选中要添加背景色的表格。（2）在【CSS样式】面板中，单击【新建CSS规则】按钮，将弹出【新建CSS规则】对话框，在该对话框中，“选择器类型”选择“标签（重新定义HTML元素）”，“选择器名称”选择“table”。,4.2 设置表格属性,第四章 表格,25,（3）单击【确定】按钮，将弹出【CSS规则定义】对话框。在该对话框中，选择“背景”分类，设置“Background-color”（即背景色），如图所示。,4.2 设置表格属性,4.2.6设置表格背景,第四章 表格,26,（4）选择一种适合的背景色后，单击【确定】按钮，即可为表格添加背景色。为表格添加背景色的效果如图所示。,4.2 设置表格属性,4.2.6设置表格背景,第四章 表格,27,2）选择背景图像 将图像设置为表格的背景，具体操作方法同上述背景色的方法，只是：选中表格后，在“Background-image”文本框中输入图像的存放路径，或者单击 按钮，将弹出【选择图像源文件】对话框，在该对话框中选择一幅图像作为表格的背景图像。单击【确定】按钮返回，这时可以看到表格中已经插入了一副背景图像，如下图所示。,4.2 设置表格属性,4.2.6设置表格背景,第四章 表格,28,第四章 表格,29,4.3 设置单元格的属性,4.3.1单元格的拆分与合并1）合并单元格选择多个单元格后，执行以下操作：方法1：选择【修改】/【表格】/【合并单元格】命令。方法2：单击鼠标右键，在弹出的快捷菜单中选择【表格】/【合并单元格】命令。方法3：单击【属性】面板左下角的“合并”按钮。2）拆分单元格 将光标定位在单元格，执行以下操作：方法1：选择【修改】/【表格】/【拆分单元格】命令。方法2:单击鼠标右键，在弹出的快捷菜单中选择【表格】/【拆分单元格】命令。方法3:单击【属性】面板左下角的“拆分”按钮。4.3.2设置单元格的对齐属性,第四章 表格,30,4.4 表格的嵌套,嵌套表格是指在表格的单元格中再插入表格,常用于控制表格内的文本或图像的位置。嵌套表格单位一般使用百分比，如下所示为左右框架型布局。,第四章 表格,表格布局规则,利用表格布局的嵌套层次不宜过多，一般控制在34层，如下图所示。在使用表格进行布局时，表格边框、边距、间距一般设置为0。,4.4 表格的嵌套,第四章 表格,32,4.5 表格的数据导入导出,有时需要将Word文档中的内容或Excel文档中的表格数据导入到网页中进行发布，或将网页中的表格数据导出到Word文档或Excel文档中进行编辑，Dreamweaver CS4提供了实现这种操作的功能。4.5.1 导入表格数据4.5.2 表格数据的导出,第四章 表格,33,4.6表格的排序,对表格数据进行排序的具体操作方法如下：提示：不能对包含 colspan 或 rowspan 属性的表格（即包含合并单元格的表格）进行排序。(1)选中要排序的表格或单击该表格的任意单元格。(2)选择【命令】菜单下的【排序表格】命令，将弹出【排序表格】对话框。,第四章 表格,34,4.7 项目实训,1、实训题目：京城影讯2、实训目的：通过该网页的制作，掌握表格的插入、基本属性的设置、利用表格制作网页。,第四章 表格,35,3.实训案例效果,Thank You!,网页设计与制作,