使用HTML创建表.ppt

图6-85 完成背景图像的插入 图6-86 为单元格填充背景颜色 图6-87 添加文字信息 图6-88 最后效果 小 结 本章的内容是介绍如何在网页中加入表格，并且对表格进行设置，使它能够以各种丰富的样式展现出来。表格最重要的三个标签分别是“tabel”、“tr与td”，分别用于定义表格、表格中的行和表格单元格。此外，还有与之相关的一些属性需要记清，比如边框、边距等参数的设置。表格在网页中的作用除了显示数据以外，还经常被用作网页定位和布局的工具。 6.5.4 绘制嵌套表格 图6-61 嵌套表格 6.5.5 为布局单元格添加内容 图6-62 在表格单元格中添加文本 6.5.6 移动或者重新设置布局单元格与表格的大小 在布局中的每个单元格与表格都可以被移动或者重新设置大小，这样就可以方便地调整页面的布局了。 1．重新设置单元格的大小 图6-63 出现把柄后的单元格 2．移动单元格 3．调整表格大小 4．移动一个布局表格 6.5.7 设置布局宽度 在布局视图中可以有两种设定宽度的方式：固定宽度与自动伸展。在列底部区域显示了宽度数值。固定宽度是一个指定的十进制数值，例如300（像素）。自动伸展设置了宽度可以根据窗口的宽度而自动调整。使用了自动伸展命令，布局将总是能够填满浏览器窗口。 图6-64 设置列的布局宽度属性 1．设置自动伸展宽度 设置自动伸展宽度有两种方法。 （1）单击要设为自动伸展宽度的列底部的数字（也就是显示了该列宽度的数值），然后在出现的（允许自动伸展命令）菜单（以后我们把这个菜单称为该列的底部菜单）中选择“列设置为自动伸展”命令，如图6-65所示。 图6-65 选择允许列自动伸展命令 （2）选择该列，然后在属性面板中选择“自动伸展”选项。 2．设置固定宽度列 对于刚刚创建的布局表格与布局单元格而言，表格中的列都是根据初始条件设置的宽度，例如用鼠标拖曳出的宽度。 对于已经被设为自动伸展的列来说，在该列的底部菜单中选择“列设置为固定宽度”命令，就可以把该列转换为固定宽度的列。这时在该列的底部，可以看到在宽度数值两边是绿色双线。 6.6 实践与练习：运用“布局”模式制作网页 本例通过使用“布局表格”与“布局单元格”制作网页，最终的页面效果如图6-66所示。 图6-66 最终效果 1．设计页面 2．绘制表格 3．插入图像 图6-67 创建页面结构 图6-68 绘制网页 图6-69 分别存储图像 图6-70 选择“布局”命令 图6-71 启用“布局模式” ?图6-72 启用“绘制单元格”模式 图6-73 绘制单元格 图6-74 完成第一个单元格的绘制 图6-75 设置单元格的宽、高 图6-76 绘制第二个单元格 图6-77 修改单元格的尺寸 图6-78 完成表格的绘制 图6-79 标准模式下的表格 图6-80 插入图像 ?图6-81 插入对应图像 图6-82 选择图像的插入点 图6-83 选择图像路径 图6-84 插入背景图像 图6-36 “会议议程表”套用设计方案效果 图6-37 在新文档中输入表格标题 图6-38 插入表格 图6-39 向表格的单元格中输入文本 图6-40 选取表格 图6-41 “格式化表格”对话框 图6-42 套用设计方案 图6-43 在格式化对话框中设计新方案 图6-44 “会议议程表”套用设计方案效果 6.3.5 练习5：用表格制作“绿叶乡舟”网页顶部 本例着重练习在Dreamweaver?8中创建复杂的表格。主要通过拆分单元格、合并单元格、插入行、插入列等操作，制作一个复杂的表格。本例最终效果如图6-45所示。 图6-45 “绿叶乡舟”网页顶部效果 图6-46 创建的表格 图6-47 设置表格属行 图6-48 合并单元格 图6-49 插入图像后调节列宽 图6-50 拆分单元格 图6-51 “拆分单元格”对话框 图6-52 拆分单元格后的效果 图6-53 单击单元格背景URL按钮 图6-54 添加背景图 图6-55 输入“绿叶乡舟” 图6-56 “绿叶乡舟”网页顶部效果 6.4 布局单元格与表格 前面我们介绍了用表格进行网页布局定位的基本方法，它是通过直接设定表格的参数来实现的。对于简单的情况，这种方法还可以胜任，如果布局很复杂，用手工直接设定表格就会变成一件极其烦琐的工作。因此Dreamweaver?8为用户提供了方便的手段来创建与控制网页页面的布局