《dw教学》第四讲----表格布局

1、编辑ppt1主讲主讲:刘苗刘苗编辑ppt2编辑ppt3n通过本讲的学习，使大家掌握表格的创建及各通过本讲的学习，使大家掌握表格的创建及各属性设置和表格的基本操作，会使用表格和布属性设置和表格的基本操作，会使用表格和布局表格做网页布局局表格做网页布局教学目标教学目标编辑ppt4n表格表格n布局表格布局表格本讲主要内容本讲主要内容编辑ppt5任务一、任务一、网页布局网页布局 在页面设计中，页面布局是一个很重要的部分，在页面设计中，页面布局是一个很重要的部分，DW中提供了表格、布局表格、布局单元格、层、中提供了表格、布局表格、布局单元格、层、框架来设计网页布局的方法。框架来设计网页布局的方法。布局的

2、辅助功能布局的辅助功能1、使用标尺：、使用标尺：单位：单位：坐标原点：可以移动，也可以重设原点坐标原点：可以移动，也可以重设原点.显示：查看标尺显示显示：查看标尺显示2、使用网格：查看网格网格设置、使用网格：查看网格网格设置编辑ppt63、跟踪图像、跟踪图像 页面属性跟踪图像透明度。它可以更好地帮助页面属性跟踪图像透明度。它可以更好地帮助进行网页的设置，完成初步的布局绘制布局表格和进行网页的设置，完成初步的布局绘制布局表格和布局单元格）。预览时，追踪图像是无图象显示的布局单元格）。预览时，追踪图像是无图象显示的仅仅作为辅助功能。仅仅作为辅助功能。注意：注意：n“标尺、网格、跟踪图象标尺、网格、

3、跟踪图象”则是对网页中的元素进行则是对网页中的元素进行精确的定位。精确的定位。n 表格是将网页中的内容进行定位，完成网页布局表格是将网页中的内容进行定位，完成网页布局编辑ppt7任务二、表格任务二、表格1、表格概述、表格概述在网页文档中在网页文档中,表格对整理所有内容的布局操作表格对整理所有内容的布局操作起着重要作用。起着重要作用。 通过表格可以将页面划分为不同的部分，实现通过表格可以将页面划分为不同的部分，实现对元素的准确定位。对元素的准确定位。 利用表格可控制文本和图形在页面上出现的位置，利用表格可控制文本和图形在页面上出现的位置，方便地设计出水平或垂直结构。方便地设计出水平或垂直结构。

4、表格是对文本和图形进行布局的重要工具。表格是对文本和图形进行布局的重要工具。编辑ppt82、HTML表格标记表格标记n表格标签：表格标签： 创建一个表格创建一个表格 设置设置表格表格边框的宽度边框的宽度 设置表格的宽度。用设置表格的宽度。用绝对象素或总宽度的百分比绝对象素或总宽度的百分比表示表示n行标签：行标签： 表格中的每一行表格中的每一行n单元格标签：单元格标签： 表格中的一行中的每一格表格中的一行中的每一格n表格头标签：表格头标签： 设置表格头：通常是黑体居中文字设置表格头：通常是黑体居中文字编辑ppt93、创建表格、创建表格n单击插入常用工具栏上的按钮单击插入常用工具栏上的按钮n将光标

5、停放在选定的位置，执行插入将光标停放在选定的位置，执行插入表格表格n将插入面板中的按钮从插入面板中拖到页面的相将插入面板中的按钮从插入面板中拖到页面的相应位置。应位置。编辑ppt104、设置表格属性、设置表格属性nTable id(表格名）表格名） nRows设置表格的行数，设置表格的行数，Cols设置表格的列数设置表格的列数nWidth：设置表格的宽度，以像素或百分比为单位：设置表格的宽度，以像素或百分比为单位nHeight：设置表格的高度，以像素或百分比为单位：设置表格的高度，以像素或百分比为单位编辑ppt11nCellpad(填充填充)：单元格填充值：单元格填充值 nCellspace（

6、间距）（间距）:单元格间距单元格间距nAlign（对齐）：表格的对齐方式（对齐）：表格的对齐方式nBorder（边框）：表格的边框宽度（边框）：表格的边框宽度nBordcolor（边框颜色）（边框颜色）:表格边框色表格边框色nBgcolor：表格背景色：表格背景色nBgimage：表格背景图像：表格背景图像编辑ppt125、设置单元格属性、设置单元格属性n前提：选中单元格或光标定位到单元格中前提：选中单元格或光标定位到单元格中nHorz(水平水平):设置单元格内容的水平对齐方式设置单元格内容的水平对齐方式nVert（垂直）：设置单元格的垂直对齐方式（垂直）：设置单元格的垂直对齐方式nW和和H：

7、以像素表示的单位设置单元格的宽度和高：以像素表示的单位设置单元格的宽度和高度如果要使用百分比为单位，刚在数值后加百度如果要使用百分比为单位，刚在数值后加百分比符号（）分比符号（）编辑ppt13Bg(背景背景):设置单元格的背景图案（上方）设置单元格的背景图案（上方） 设置单元格的背景颜色（下方）设置单元格的背景颜色（下方）Boder(边框边框):设置单元格的颜色（边框）设置单元格的颜色（边框）Merge(合并合并):合并单元格合并单元格Split(拆分拆分):拆分单元格拆分单元格No wrap:禁止换行复选框禁止换行复选框Header(标题标题)：将选中的单元格设置为表格标题，默认：将选中的单

8、元格设置为表格标题，默认情况下，标题单元格中的内容被设为粗体并且居中对情况下，标题单元格中的内容被设为粗体并且居中对齐齐 编辑ppt146、表格的基本操作、表格的基本操作n选择表格整体、行、列、单元格选择表格整体、行、列、单元格n调整整个表格、行、列大小调整整个表格、行、列大小n插入插入/删除行和列删除行和列n合并合并/拆分单元格拆分单元格n复制及粘贴单元格复制及粘贴单元格编辑ppt15在表格中选定一个或多个单元格，单元格连续可在表格中选定一个或多个单元格，单元格连续可以被剪切或复制，不连续则不能。以被剪切或复制，不连续则不能。选择选择edit/cut（copy）命令或用快捷键。）命令或用快捷

9、键。 粘贴单元格的操作如下：粘贴单元格的操作如下： 若要在表格内粘贴单元格若要在表格内粘贴单元格,则单击想要粘贴的位置则单击想要粘贴的位置,若要生成一新的表格若要生成一新的表格,则将光标置于表格外。则将光标置于表格外。 选择选择edit/paste命令或用快捷键。命令或用快捷键。编辑ppt16注意：注意：如何让插入的表格自动居中？如何让插入的表格自动居中？在属性面板中的在属性面板中的“对齐对齐”中选择中选择“居中对齐居中对齐”如何让表格中的文字居中？如何让表格中的文字居中？（默认下文字是垂直居左对齐）（默认下文字是垂直居左对齐）方法：光标放在文字的位置，在属性面板中方法：光标放在文字的位置，在

10、属性面板中“水平水平”中中选择选择“居中对齐居中对齐”，“垂直垂直”选择选择“居中居中”编辑ppt177、表格排序、表格排序A 选定表格，执行选定表格，执行command/sort table命令命令B 在弹出的对话框中在弹出的对话框中sort by（排序按）在此下拉列表中选定（排序按）在此下拉列表中选定排序的列。排序的列。Order(顺序顺序):选择一字母还是数字排序选择一字母还是数字排序 alphabetically/numberically右侧右侧 ascending升序升序descending降序降序Then by(再按再按):设置在另外一列中进行下级的排序设置在另外一列中进行下级的排

11、序Sort includes first row（排序包括第一行），如果表格第一（排序包括第一行），如果表格第一行是标题，则不需要选中该复选框行是标题，则不需要选中该复选框。编辑ppt188、格式化表格、格式化表格 选 定 表 格 ， 执 行选 定 表 格 ， 执 行 c o m m a n d / f o r m a t a b l e在弹出的对话框中选择一种设计格式。在弹出的对话框中选择一种设计格式。9、表格的嵌套、表格的嵌套 表格嵌套是把一个新的表格插入到原有的单元格表格嵌套是把一个新的表格插入到原有的单元格中，嵌套表格受外面单元格大小限制。中，嵌套表格受外面单元格大小限制。编辑ppt1

12、910、导入与导出表格、导入与导出表格导出表格导出表格要把要把DW中创建的表格数据导出必须把数据存为一种可中创建的表格数据导出必须把数据存为一种可分隔数据的文件格式，可以使用逗号、冒号、分号、空分隔数据的文件格式，可以使用逗号、冒号、分号、空格等作为分隔符。在格等作为分隔符。在DW中不允许导出表格的一部分。中不允许导出表格的一部分。A、将光标定位在表格的任一单元格中、将光标定位在表格的任一单元格中B、选择、选择 文件文件/导出导出/导出表格导出表格 命令命令 delimiter(分隔符分隔符)选择一种分隔符。如选择一种分隔符。如逗号逗号Linebreaks(换行符换行符)选择一种操作系统，如选

13、择一种操作系统，如“windows”。单击单击“导出导出”并保存即可。并保存即可。编辑ppt20导入表格导入表格（在数据庞大时常用）（在数据庞大时常用） 向向DW中导入表格数据应将源表格数据保存为以某种分中导入表格数据应将源表格数据保存为以某种分隔符作为数据间隔的纯文本文件。如果有已经制作好隔符作为数据间隔的纯文本文件。如果有已经制作好的的Excel工作表，打开这个工作表执行工作表，打开这个工作表执行“文件另存为文件另存为”命令，保存类型选择命令，保存类型选择“文本文件文本文件”。 选择选择file/import/tabular data命令命令 或或insert/table objects/

14、import tabular data命令命令 或在或在insert/command面板中选择面板中选择tabular data按钮按钮编辑ppt21ndata file(数据文件数据文件)输入要导入的文件名称。输入要导入的文件名称。文件导入文件导入Excell文档或者文档或者word文档文档ndelimiter(定界符定界符)分割表格数据的分割符如果选择分割表格数据的分割符如果选择other右侧会出现新的文本框右侧会出现新的文本框,在其中输入新的分隔符。在其中输入新的分隔符。nfit to data适应数据适应数据set设置，以指定表格的宽度。设置，以指定表格的宽度。 注意：在记事本中输入数

15、字再按注意：在记事本中输入数字再按Tab键可做表格键可做表格编辑ppt22任务三、任务三、布局表格布局表格1、布局的三种模式、布局的三种模式n标准：标准：最常用的一种模式，即标准模式下显示的表最常用的一种模式，即标准模式下显示的表 格等内容，最接近在浏览器中实际显示状态。格等内容，最接近在浏览器中实际显示状态。n扩展：扩展：加粗显示表格的边框，便于对表格进行选加粗显示表格的边框，便于对表格进行选 择，移动等操作择，移动等操作,便于对表格及逆行选择移动等操作。便于对表格及逆行选择移动等操作。在该模式下显示的表格，与在浏览器中显示的表格在该模式下显示的表格，与在浏览器中显示的表格不一致，如需查看表格的视觉效果可以在标准模式不一致，如需查看表格的视觉效果可以在标准模式下进行。下进行。n布局：布局：可以在布局中使用布局表格和布局单元格创可以在布局中使用布局表格和布局单元格创建表格，在该模式下可以方便快捷地创建网页的布建表格，在该模式下可以方便快捷地创建网页的布局。局。编辑ppt232、布局表格、布局表格 插入插入布局对象布局对象布局表格布局表格 （页面上显示的布局表格外框为绿色，而单元格为（页面上显示的布局表格外框为绿色，而单元格为蓝色）蓝色）3、布局表格的属性设置