《网页设计与制作教学课件》4b数据显示与简单布局.pptVIP

数据显示与简单布局 * 制作数据表格 管理表格单元 表格布局 本章学习要点： 1. 制作数据表格 * 网页文档是一种计算机数据的载体。在管理网页文档中各种数据时，通常需要将数据按照数据表的方式进行管理。此时，就可以使用Dreamweaver CS5的表格技术，通过定制行和列的信息，实现高效而有序的数据处理。 1.1 创建数据表格 * 在使用Dreamweaver的表格技术管理数据之前，首先应创建数据表格。Dreamweaver既支持用户通过【插入】面板直接在网页中插入数据表格，也支持多个数据表格之间的嵌套。 语法： … … …… …… 表格标记符table 表格行 tr （table row） 表格数据 td （table data） a．插入数据表格 语法： … …… … …… …… 表头是指表格的第一行，其中的文字可以实现居中并且加粗显示。 注意：使用 替代 ，惟一不同就是标记中的内容居中加粗显示。 例子 如果需要直接插入数据表格，可在【插入】菜单中，选择【表格】，在弹出对话框中填入相应信息。 插入面板 * b．嵌套数据表格 在使用表格展示数据时，有时需要在表格的某一个单元格中显示多种数据。此时，就需要使用嵌套表格。Dreamweaver允许用户以嵌套的方式插入表格，灵活地显示各种数据信息。 1.2 设置表格属性 Dreamweaver不仅可以插入各种表格，还允许用户通过【属性】检查器设置表格，以及表格中单元格的各种属性，从而实现丰富的表格应用。 * a．设置表格的属性 Cellpadding:单元格边距 表格填充 -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间 Cellspacing:单元格间距 表格间距 -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离 * 单元格宽度width b．设置表格单元格的属性 表格往往是由一个或多个单元格组成的。除设置表格本身的属性外，还需要设置表格中各种单元格的属性。 单元格内容的水平对齐方式 属性名：align 单元格内容的垂直对齐方式 属性名：valign 合并单元格 拆分单元格 单元格的高度height 单元格内容不自动换行，单元格的宽度会随内容的增加而扩展 属性：nowrap nowrap 单元格转换成标题单元格，单元格内的文本会加粗并水平居中 td--th 单元格背景 bgcolor 页面属性设置， 改变页面的外观 属性 作用 合并所选单元格 将所选的多个同行或同列单元格合并为一个单元格 拆分单元格为行或列 将已选择的位于多行货多列中的独立单元格拆分为多个单元格 水平 定义单元格中内容的水平对齐方式 垂直 定义单元格中内容的垂直对齐方式 宽 定义单元格的宽度 高 定义单元格的高度 不换行 选中该项目则单元格中的内容将不自动换行，单元格的宽度也将随内容的增加而扩展。 标题 选中该项目，则将普通的单元格转换为标题单元格，单元格内的文本加粗并水平居中显示 背景颜色 单击该项目的颜色拾取器，可选择颜色并将颜色应用到单元格背景中。 表格单元格的属性设置 1.3 表格标签 * 一个XHTML表格通常多种嵌套的XHTML标签组成。在表格中，常见的XHTML标签主要包括以下几种。 常见的表格标签 标签 作用 标签 作用 table 定义表格 caption 定义位于表格外部的标题行 th 定义位于表格内部的标题单元格 tr 定义表格内的表格行 td 定义表格的普通单元格 thead 定义表格的表头内容 tbody 定义表格的主体内容 tfoot 定义表格的脚注内容 表格 的属性 在TABLE标记内使用frame、rules和border等属性可以设置表格的边框和单元格分隔线。 frame属性 表格最外层的四条框线，可以用frame属性进行控制；默认取值是void，不显示边框。 属性值 说明 属性值 说明 void 无边框 lhs 仅有左框 above 仅有顶框 rhs 仅有右框 below 仅有底框 box 4个边框都有 hsides 仅有顶、底框 border 同上 vsides 仅有左、右框 rules属性 用于控制是否显示单元格之间的分隔线；取值有none/yes/rows/cols /groups Rules cols/rows只显示竖直/水平的间隔线 Rules groups 显示竖直和水平的间隔线 border属性 用于设置边框的宽度，其值为像素数。如果设置border “0”，则意味着frame “void”，rules “ none ”。 行标记 属性 描述 align 行内容的水平对齐 valign 行内容的垂直对齐 bgcolor 行的背景颜色 background 行的背景图像 bordercolor 行的边框颜色 Bbo