网页设计与制作Dreamweaver CS6标准教-ppt课件-06.pptxVIP

第6章 表格;1.表格的基本操作 2.简单表格的排版 3.复杂表格的排版 4.表格的数据功能;在一个表格中，横向称为行，纵向称为列，行列交叉部分称为单元格，单元格中的内容和边框之间的距离称为边距，单元格和单元格之间的距离称为间距，整张表格的边缘称做边框。;6.1.1表格的组成 6.1.2插入表格 6.1.3表格属性 6.1.4表格单元格属性 6.1.5在表格中插入内容 6.1.6选择表格元素 6.1.7合并和拆分单元格 ;一个完整的表格是由多个HTML表格标签组合而成的。 table和/table分别是表格的起始标签和终止标签，所有有关表格的内容均位于这两个标签之间。tr和/tr是表格的行标签，出现几对tr和/tr，表格就包含几行。td和/td是表格的列标签，位于tr和/tr标签之间，出现几对td和/td，该行就包含几列。;选择菜单【插入】|【表格】，或选择【插入】面板中的【布局】选项卡，单击【表格】按钮 ，也可使用Ctrl+Alt+T组合键，打开【表格】对话框，设置表格相关属性后，单击【确定】按钮，即可在网页中光标所在位置上插入表格。;在页面中新建表格或选中表格，打开表格【属性】面板，在表格的【属性】面板中，可以设置表格属性，用来控制表格的外观特征。;在对表格的操作过程中，如需设置行、列或者是某几个单元格的属性，可选中一个或多个单元格，打开单元格【属性】面板进行设置。;根据需要可以在表格的某些单元格中插入文本、图像或各种多媒体对象。在表格中插入内容通常采用两种方法。 （1）直接在【文档】窗口中插入。 （2）利用剪贴板插入。 ;1．选择单元格 2．选择行/列 3．选择整个表格;在绘制不规则表格过程中，经常要将多个单元格合并成一个单元格，或者将一个单元格拆分成多行或多列。 在采用简单表格布局的网页中，根据网页布局情况合并和拆分单元格是网页布局的关键工作。 1. 单元格的合并 2. 单元格的拆分 ;简单表格排版就是在页面中插入一个边框宽度为0的表格，通过对行、列和单元格的设置和调整，实现网页元素的精确定位，完成页面排版?? 用于行列比较规整，结构比较简单的网页。;6.2.1课堂案例-融通室内装饰 6.2.2复制、粘贴表格 6.2.3删除表格和清除表格内容 6.2.4增加和删除表格的行和列 ;案例学习目标：学会表格基本操作，体验简单排版过程。 案例知识要点：选择菜单【修改】|【表格】，打开子菜单，选择相应菜单项，对表格进行编辑，实现简单表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计。 素材所在位置：光盘/素材/ch06/课堂案例-融通室内装饰。 案例布局如图6-11所示，案例效果如图6-12所示。;1.利用菜单 2.利用快捷键 3.利用鼠标直接拖动 ;1.删除整个表格 2.删除整行或整列 3.清除表格中的内容;1.利用表格【属性】面板 2.利用【修改】菜单;通过更多次的拆分合并，以及更多的表格嵌套，形成更加复杂的表格布局形式。 由于浏览器下载网页是采取逐层下载的形式，如果将整个复杂网页放在一个大table中进行布局，会极大地影响网页的下载速度。 如果表格超过了3层，搜索引擎就不再抓取。 应尽量将一个大的表格，拆分成多个小的表格，由上至下排列，以最大地提高网页的浏览和检索效率。 ;6.3.1课堂案例-江雨桥的博客 6.3.2表格的嵌套 6.3.3单元格与表格背景 6.3.4细线表格 ;案例学习目标：学习复杂表格排版。 案例知识要点：在页面中插入多个表格。在主表格中，通过嵌套表格和进一步拆分单元格，实现复杂表格的排版。在表格【属性】面板和单元格【属性】面板中设置其基本属性，对整个页面进行外观设计。 素材所在位置：光盘/素材/ch06/课堂案例-江雨桥的博客。 案例效果图如图6-35所示，案例布局如图6-36所示。;1. 嵌套表格的大小 2. 嵌套表格的位置;在Dreamweaver中，单元格【属性】面板中仅提供了单元格的背景颜色设置方法，设置表格的背景，或是设置单元格的背景图片，通常采用以下两种方法。 1.直接修改代码 2.通过添加CSS样式;在很多网页制作风格中，设置表格内框线的细线效果，可以强化表格的装饰性而使表格更加美观。但是，细线表格的设置方式不是简单地将表格边框宽度设置为1px，因为此时表格边框宽度和形状都不是细线效果。 创建细线表格的方法是，当单元格间距为1px时，分别对表格和单元格设置不同背景颜色，内框线的细线效果即可显示出来。;在实际制作网页过程中，有时需要将其他程序中建立的表格数据导入到网页中，利用【导入表格式数据】命令可以很容易地实现这一功能。;6.4.1课堂案例-远景苑小区 6.4.2导入Word或Excel数据 6.4.3排序 ;案例学习目标：学习使用表格表示数据。 案