DREAMWEAVER+CS4+网页设计与制作指南_第5章.ppt

第5章表格的应用 在制作网页设计时 需要对页面进行布局划分 对网页元素进行定位 表格在网页设计中占有重要的地位 本章学习的主要内容 表格的基本操作单元格属性的设置表格属性的设置表格的排序及格式化表格数据的导入导出 5 1表格的基本操作 制作页面一般是在文档中先插入表格 然后按照页面的布局 对表格进行拆分 合并 添加等操作 表格由3个部分组成 行 列 单元格 在设计页面时 需要借助表格来定位页面元素 使用表格也可以导入表格化数据 设计页面分栏 对页面中的文本 图像等元素进行科学的 合理的定位 5 1 1创建表格 表格是为网页布局方式设计的重要元素 因此学会创建及编辑表格是学习dreamweavercs4的重要知识点 5 1 2单元格的拆分与合并 表格中 横向称为 行 竖向称为 列 行与列围成的区域称为 单元格 在单元格中可以插入文本 图像等元素 也可以利用单元格的高度与宽度 为页面创建1px 像素 的空隙 5 1 3行与列的添加与删除 通过前面的学习 读者应该对单元格有了一定的认识 下面再对形成单元格的行与列来做进一步的了解 行与列可进行添加与删除的操作 5 2设置单元格属性 单元格作为表格的重要组成部分 其属性的设置影响到表格的外观 将鼠标放到某个单元格内 可以通过属性控制面板对这个单元格进行设置 5 3设置表格属性 前面讲了表格的组成元素 行 列 单元格 的用法及操作 下面就表格的属性进行介绍 在选中表格后 可以通过表格 属性 面板来进行属性的设置及更改 在 属性 面板中 可以设置表格的宽度 高度以及对齐方齐 这些跟文本及图像的设置方法基本相同 还有一些是表格特有的属性 下面进行详细介绍 5 3 1表格的边框属性 表格的边框在代码中为bordercolor 属性有两个 边框的大小和颜色 边框的颜色是为了美化表格和网页而设置的 并只有在表格的宽度大于0时才有效 关于边框的属性如下 bordercolordark 指定行的3d边框的阴影颜色 表格边框的宽度大于0时才有效 bordercolorlight 指定行的3d边框的高亮颜色 表格边框的宽度大于0时才有效 5 3 2表格的背景属性 表格背景可以使用颜色填充也可以使用图片填充 5 3 3表格的对齐属性 选中表格 在 属性 面板中可以设置表格在文档中的对齐方式 可以设置为 左对齐 居中对齐 右对齐 根据需要进行设置 默认是 左对齐 属性 5 3 4表格的填充与间距 使用表格的填充与间距可以让表格的显示呈现不同的效果 数值越大 各单元格之间的距离也就越大 5 3 5表格的嵌套 在实际的网页设计中 常会遇到这样的问题 在文档中插入一个几行几列的表格 在第1行插入图片和文字以后 对第1行再进行操作时 会发现表格中单元格的宽 高度会随着插入的元素的大小发生不规则的变化 要让这些元素随用户的意愿排列 就需用到表格的嵌套 5 4表格的排序 在网页中 常对表格中大量的数据排序问题的处理没有头绪 现在使用dreamweavercs4可以很容易地将表格内的数据排序 5 5格式化表格 dreamweavercs4自带了许多很漂亮的表格样式 可以在制作页面时直接使用 或者根据实际的需要做修改后使用 如图5 51所示为格式化前后表格的对比效果 左侧为格式化前的表格 右侧为格式化后的表格 5 6表格数据的导入导出 dreamweavercs4可以与excel等处理软件进行结合 进入表格数据的导入和导出 这样可以将excel等软件处理的数据直接插入到网页中 不必单独在dreamweavercs4中重新录入数据 节省了很多录入数据的时间 5 6 1表格数据的导入 dreamweavercs4可以与其他软件相结合 通过外部数据导入制作数据量大的表格内容 5 6 2表格数据的导出 dreamweavercs4可以将数据导出 此数据可以向其他软件中导入 在数据量大时此操作可以准确方便地进行数据的移动 5 7本章小结 本章主要讲解表格的使用 使用表格可以对文字和表格进行定位 以及对网页进行整体布局定位 用表格对网页进行排版时 一般将边框设为0 这样在浏览网页时不会看到表格