《dw教学课件》第四讲----表格布局.ppt

网页三剑客,主讲:刘苗,第四讲 表格布局,3,通过本讲的学习，使大家掌握表格的创建及各属性设置和表格的基本操作，会使用表格和布局表格做网页布局,教学目标,4,表格 布局表格,本讲主要内容,5,任务一、网页布局,在页面设计中，页面布局是一个很重要的部分，DW中提供了表格、布局表格、布局单元格、层、框架来设计网页布局的方法。 布局的辅助功能 1、使用标尺： 单位： 坐标原点：可以移动，也可以重设原点. 显示：查看标尺显示 2、使用网格：查看网格网格设置,6,3、跟踪图像 页面属性跟踪图像透明度。它可以更好地帮助进行网页的设置，完成初步的布局绘制布局表格和布局单元格）。预览时，追踪图像是无图象显示的仅仅作为辅助功能。 注意： “标尺、网格、跟踪图象”则是对网页中的元素进行精确的定位。 表格是将网页中的内容进行定位，完成网页布局,7,任务二、表格,1、表格概述 在网页文档中,表格对整理所有内容的布局操作起着重要作用。 通过表格可以将页面划分为不同的部分，实现对元素的准确定位。 利用表格可控制文本和图形在页面上出现的位置，方便地设计出水平或垂直结构。 表格是对文本和图形进行布局的重要工具。,8,2、HTML表格标记 表格标签： 创建一个表格 设置表格边框的宽度 设置表格的宽度。用绝对象素或总宽度的百分比表示 行标签： 表格中的每一行 单元格标签： 表格中的一行中的每一格 表格头标签： 设置表格头：通常是黑体居中文字,9,3、创建表格 单击插入常用工具栏上的按钮 将光标停放在选定的位置，执行插入表格 将插入面板中的按钮从插入面板中拖到页面的相应位置。,10,4、设置表格属性 Table id(表格名） Rows设置表格的行数，Cols设置表格的列数 Width：设置表格的宽度，以像素或百分比为单位 Height：设置表格的高度，以像素或百分比为单位,11,Cellpad(填充)：单元格填充值 Cellspace（间距）:单元格间距 Align（对齐）：表格的对齐方式 Border（边框）：表格的边框宽度 Bordcolor（边框颜色）:表格边框色 Bgcolor：表格背景色 Bgimage：表格背景图像,12,5、设置单元格属性 前提：选中单元格或光标定位到单元格中 Horz(水平):设置单元格内容的水平对齐方式 Vert（垂直）：设置单元格的垂直对齐方式 W和H：以像素表示的单位设置单元格的宽度和高度如果要使用百分比为单位，刚在数值后加百分比符号（）,13,Bg(背景):设置单元格的背景图案（上方） 设置单元格的背景颜色（下方） Boder(边框):设置单元格的颜色（边框） Merge(合并):合并单元格 Split(拆分):拆分单元格 No wrap:禁止换行复选框 Header(标题)：将选中的单元格设置为表格标题，默认情况下，标题单元格中的内容被设为粗体并且居中对齐,14,6、表格的基本操作 选择表格整体、行、列、单元格 调整整个表格、行、列大小 插入/删除行和列 合并/拆分单元格 复制及粘贴单元格,15,在表格中选定一个或多个单元格，单元格连续可以被剪切或复制，不连续则不能。 选择edit/cut（copy）命令或用快捷键。 粘贴单元格的操作如下： 若要在表格内粘贴单元格,则单击想要粘贴的位置,若要生成一新的表格,则将光标置于表格外。 选择edit/paste命令或用快捷键。,16,注意： 如何让插入的表格自动居中？ 在属性面板中的“对齐”中选择“居中对齐” 如何让表格中的文字居中？ （默认下文字是垂直居左对齐） 方法：光标放在文字的位置，在属性面板中“水平”中选择“居中对齐”，“垂直”选择“居中”,17,7、表格排序 A 选定表格，执行command/sort table命令 B 在弹出的对话框中sort by（排序按）在此下拉列表中选定排序的列。 Order(顺序):选择一字母还是数字排序 alphabetically/numberically右侧 ascending升序descending降序 Then by(再按):设置在另外一列中进行下级的排序 Sort includes first row（排序包括第一行），如果表格第一行是标题，则不需要选中该复选框。,18,8、格式化表格 选定表格，执行command/formatable 在弹出的对话框中选择一种设计格式。 9、表格的嵌套 表格嵌套是把一个新的表格插入到原有的单元格中，嵌套表格受外面单元格大小限制。,19,10、导入与导出表格 导出表格 要把DW中创建的表格数据导出必须把数据存为一种可分隔数据的文件格式，可以使用逗号、冒号、分号、空格等作为分隔符。在DW中不允许导出表格的一部分。 A、将光标定位在表格的任一单元格中 B、选择 文件/导出/导出表格 命令 delimiter(分隔符)选择一种分隔符。如逗号 Linebreaks(换行符)选择一种操作系统，如“windows”。单击“导出”并保存即可。,20,导入表格（在数据庞大时常用） 向DW中导入表格数据应将源表格数据保存为以某种分隔符作为数据间隔的纯文本文件。如果有已经制作好的Excel工作表，打开这个工作表执行“文件另存为”命令，保存类型选择“文本文件”。 选择file/import/tabular data命令 或insert/table objects/import tabular data命令 或在insert/command面板中选择tabular data按钮,21,data file(数据文件)输入要导入的文件名称。 文件导入Excell文档或者word文档 delimiter(定界符)分割表格数据的分割符如果选择other右侧会出现新的文本框,在其中输入新的分隔符。 fit to data适应数据set设置，以指定表格的宽度。 注意：在记事本中输入数字再按Tab键可做表格,22,任务三、布局表格,1、布局的三种模式 标准：最常用的一种模式，即标准模式下显示的表 格等内容，最接近在浏览器中实际显示状态。 扩展：加粗显示表格的边框，便于对表格进行选 择，移动等操作,便于对表格及逆行选择移动等操作。在该模式下显示的表格，与在浏览器中显示的表格不一致，如需查看表格的视觉效果可以在标准模式下进行。 布局：可以在布局中使用布局表格和布局单元格创建表格，在该模式下可以方便快捷地创建网页的布局。,23,2、布局表格 插入布局对象布局表格 （页面上显示的布局表格外框为绿色，而单元格为