网页设计与制作cs8第4章ppt课件

第4章表格的应用,第4章表格的应用,4.1表格的创建4.2表格的格式化4.3导入和导出表格式数据4.4对表格进行排序4.5实例制作,4.1表格的创建,4.1.1插入表格4.1.2.创建嵌套表格,4.1.1插入表格,1.在文档窗口中，将光标放在需要创建表格的位置，在“插入”栏的“常用”类别中，单击“表格”按钮，或选择“插入”菜单下的“表格”选项，弹出“表格”对话框。2.对“表格”对话框中的各个参数进行设置行数：确定表格具有的行的数目。列数：确定表格具有的列的数目。表格宽度：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。边框粗细：指定表格边框的宽度。如果您没有明确指定边框粗细的值，则大多数浏览器按边框粗细设置为1显示表格。若要确保浏览器显示的表格没有无边框，请将边框粗细设置为0。单元格边距：确定单元格边框和单元格内容之间的像素数。单元格间距：确定相邻的表格单元格之间的像素数。,4.1.2.创建嵌套表格,表格之中还有表格就叫做嵌套表格。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的网页。制作嵌套表格的步骤如下：（1）单击一个表格中的单元格，定位插入的光标。（2）选择“插入”菜单中的“表格”选项，打开“表格”对话框。（3）在“表格”对话中，为嵌套表格指定所需要的属性，然后单击“确定”按钮，完成操作。在表格中可以直接输入文字或插入图像，也可以进行文字粘贴。,4.2表格的格式化,4.2.1选择单元格对象4.2.2表格的HTML代码4.2.3设置表格属性4.2.4设置单元格、行和列属性4.2.5套用“表格模板”4.2.6去除表格辅助线,4.2.1选择单元格对象,1.选中整个表格要选中整个表格，有如下几种方法：（1）选择整个表格的方法是把鼠标放在表格边框的任意处，当鼠标指针右下角出现标志时，单击鼠标左键即可选中整个表格。（2）在表格内任意处单击，然后在状态栏的标签选择器中单击标记，即可选中整个表格。（3）在单元格任意处单击鼠标右键，在弹出的快捷菜单中选择“表格”选项中的“选择表格”命令或者按Ctrl+A组合键，即可选中整个表格。,2.选中表格行要选中表格行，有如下三种方法：（1）将鼠标指针移动到表格行左方表格之外的位置，当鼠标指针变为一个指向右方的黑色箭头形状时，单击鼠标左键即可选中相应的表格行。在此基础上，按住鼠标左键，上下拖动鼠标，即可选中多行。（2）先单击要选中表格行的第一个单元格，然后按住鼠标左键拖动鼠标，直到表格行的最后一个单元格中，再释放鼠标，即可选中表格行，如图4-4所示。在此基础上，若继续按住鼠标左键上下拖动鼠标，即可选中多个表格行。（3）先单击要选中表格行的任意一个单元格，然后在状态栏的标记选择器中单击标记，即可选中该表格行。,3.选中表格列选中表格列的方法与选中表格行的方法类似，这里不再赘述。4.选中单元格（1）在要选择的单元格中按下鼠标左键，并拖拽鼠标到相邻单元格中，当单元格四周带有黑色粗框时释放鼠标，即可选中该单元格。（2）要选中某一单元格，按住Ctrl键，用鼠标在需要选中的单元格单击即可。（3）在要选中的单元格单击鼠标左键，然后在状态栏的标记选择器中单击标记，即可选中该单元格。,4.2.2表格的HTML代码,插入表格后，切换到代码模式或拆分模式，都可以看到一个表格的代码表示。任何表格都有三个基本要素：表行、表头和表项，每个要素都有自己的标签。其基本定义格式如下：定义表格；定义表行定义表头定义表项（单元格）,1.表格尺寸设置一个表由开始，结束，表格的标题和内容全都包含在这两个标记之间。表格的整体外观由标记的属性决定。主要有以下几项表格属性：（1）表的大小用width=“数值”和height=“数值”属性说明。前者为表宽，后者为表高，数值是为像素数或占窗口的百分比。（2）定义表格的粗细由border=“n”说明，n取整数，单位是像素（如果省略，则不带边框）。将border设成不同的值，可产生不同的效果。（3）表格间距用cellspacing=数值表示，数值的单位是像素。,2.表格内文字的布局与对齐表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列以align属性来设置，而上下排列则由valign属性来设置。其中左右排列的位置可以分为三种：居左（left）、居中（center）和居右（right）。上下排列常用的有四种：上对齐（top）、居中（middle）、下对齐（bottom）和基线（baseline）。,3.表格的颜色在表格中，既可以对整个表格设置底色，也可以对任何一行、一个单元格使用背景色。主要有以下三种：（1）表格的背景颜色：（2）行的背景颜色：（3）单元格的背景颜色：或注：值为颜色的名称。,4.2.3设置表格属性,在编辑窗口中，单击表格的左上角或在边框线上的任意位置双击，即可选中表格，在属性面板中可进一步设置表格,4.2.4设置单元格、行和列属性,表格由很多单元格组成，每个单元格可以设置不同的属性。也可以同时选中多个单元格，设置其共同的属性。,4.2.5套用“表格模板”,在要格式化的表格中单击，再使用“命令”菜单中的“格式化表格”命令，打开“格式化表格”对话框，在该对话框中选择一种样式，最后按“确定”按钮,4.2.6去除表格辅助线,方法一：选中表格，单击宽度辅助线上的数字和小三角形，从下拉菜单中选择“隐藏表格宽度”，这样，表格的宽度辅助线就被去掉了。方法三：选择“查看”菜单中的“可视化助理”选项，在打开的级联菜单中单击“表格宽度”选项同。这样也可以删除表格的宽度辅助线。方法二：选择工具栏上的“视图选项”图标，从下拉菜单中选择“表格宽度”，这样表格宽度的辅助线没有了。,4.3导入和导出表格式数据,1.导入表格数据(1)选择“文件”菜单下的“导入”选项，在其子菜单中单击“表格式数据”命令，或选择“插入”菜单下的“表格对象”选项，在其子菜单中单击“导入表格式数据”。打开“导入表格式数据”对话框(2）在该对话框中，此对话框允许您指定有关表格式数据文件的信息，并指定要使用这些数据创建的表格的属性。若要完成“导入表格式数据”对话框，请执行以下操作：数据文件：是要导入的文件的名称。单击“浏览”按钮选择一个文件，数据文件可以是纯文本格式，也可以是Excel等软件创建的文件，定界符：是正在导入的文件中所使用的分隔符，其中有逗号，分号，Tab，引号，其它等几个选项。设置完毕后，单击“确定”按钮，系统完成导入表格数据操作。,2.导出表格（1）请将插入点放置在表格中的任意单元格中，选择“文件”菜单中“导出”选项，在子菜单中单击“表格”命令。即会出现“导出表格”对话框。（2）在“导出表格”对话框中，指定导出表格的选项。此对话框允许您设置分隔符和换行符样式以通过从表格中导出数据来创建文本文件。定界符：指定应该使用哪个分隔符字符在导出的文件中隔开各项。换行符：指定您将在哪个操作系统中打开导出的文件：Windows、Macintosh还是UNIX。（不同的操作系统具有不同的指示文本行结尾的方式。）设置后单击“导出”按钮，即会出现“表格导出为”对话框，（3）在该对话框中输入文件名称，单击“保存”，完成导出表格的操作。,4.4对表格进行排序,1.选择该表格或单击任意单元格。选择“命令”菜单中的“排序表格”命令。即会出现“排序表格”对话框2.该对话框允许您指定表格的排序方式，若要完成“排序表格”对话框，请执行以下操作：排序按：可以确定哪个列的值将用于对表格的行进行排序。顺序：确定是按字母还是按数字顺序以及是以升序（A到Z，小数字到大数字）还是降序对列进行排序。再按/顺序：确定在不同列上第二种排序方法的排序顺序。在“再按”弹出式菜单中指定应用第二种排序方法的列，并在“顺序”弹出式菜单中指定第二种排序方法的排序顺序。排序包含第一行：指定表格的第一行应该包括在排序中。如果第一行是不应移动的标题，则不选择此选项。对标题行：进行排序指定使用与body行相同的条件对表格thead部分（如果存在）中的所有行进行排序。对脚注行进行：排序指定使用与body行相同的条件对表格tfoot部分（如果存在）中的所有行进行排序。设置完成后，单击“应用”或“确定”按钮，完成操作。,4.5实例制作,4.5.1虚线表格4.5.2几种特殊表格的制作4.5.3圆角表格4.5.4运用表格排版制作页面,4.5.1虚线表格,在浏览Internet时，会发现很多网站排版所用的表格都是经过各种美工制作的，非常漂亮，不仅起到了网页排版的作用，而且在很大程度上美化了网页，使网页看起来非常清爽、简洁。虚线表格就是其中一种。,4.5.2几种特殊表格的制作,表格在网页设计中可以说是非常重要的一个元素，表