第六章 利用表格设计和制作网页.ppt

1 21 第6章利用表格设计和制作网页 主讲 栾庆磊 第6章利用表格设计和制作网页 2 21 学习目标 掌握创建表格的方法 掌握表格的基本操作方法 掌握表格属性的设置方法 掌握单元格属性的设置方法 了解表格的高级应用技巧 掌握利用 布局模式 规划网页的方法 了解表格数据的导入和导出方法 第6章利用表格设计和制作网页 3 21 目录 利用表格进行页面布局的实例表格的高级应用技巧利用 布局模式 规划网页表格的其他应用本章小结配套实训练习题 第6章利用表格设计和制作网页 4 21 利用表格进行页面布局的实例 设计目标页面分析实训引导制作步骤 第6章利用表格设计和制作网页 5 21 设计目标 设计 畅想未来 网站的首页 效果如下图所示 返回 第6章利用表格设计和制作网页 6 21 页面分析 本页面自上而下由页眉 导航栏 主内容区及页脚4部分组成 需要使用4个外表格来合理地进行网页布局 其中第1个表格 用于定位页眉和导航栏板块 第2个表格用于定位主内容区中的 用户登录 和 公告通知 板块 第3个表格 用于定位主内容区中的 热门话题 和主要栏目简介 第4个表格 用于定位页脚板块 教程P108 返回 第6章利用表格设计和制作网页 7 21 实训引导 1 本页面中使用的图像文件由配套光盘webcourse chapter06 images文件夹提供 2 页面中的文字资料txt6 txt 素材网页 ex6 login html和ex6 remenhuati html 样式文件css chapter6 css由配套光盘webcourse chapter06 materials文件夹提供 将css chapter6 css样式文件复制到本地站点future文件夹下 3 页面效果请参见配套光盘webcourse chapter06文件夹下的index6 html文件 返回 第6章利用表格设计和制作网页 8 21 制作步骤 首先新建一个文件 将页面属性设置为 文本大小为12像素 背景颜色为 CCCCCC 上边距 左边距的值均为0 网页标题 Title 为 畅想未来 链接的 下划线样式 为 仅在变换图像时显示下划线 然后将网页保存到本地站点的根文件夹future下 取名为index6 html 接下来依次按照下述内容进行操作 1 通过绘制表格来设计页面布局 2 在表格中插入页面元素 如文本 图像等 3 利用CSS样式美化表格中的文本以及表格的背景 边框 4 设置表格属性 如表格的对齐方式 背景图像和背景色等 5 设置单元格属性 如单元格 行或列内容的对齐方式 背景图像和背景色等 返回 第6章利用表格设计和制作网页 9 21 创建表格和表格的基本操作 插入空白表格合并与拆分单元格在表格中插入页面元素利用CSS样式美化表格 第6章利用表格设计和制作网页 10 21 插入空白表格 插入用于页面布局的第1个表格 操作步骤见教程P110 插入用于页面布局的第2 3 4个表格 操作步骤见教程P113 第6章利用表格设计和制作网页 11 21 合并与拆分单元格 将第3个表格的第1列的2个单元格进行合并 效果如图6 8所示 操作步骤见教程P114 将第3个表格的第1行第2列单元格进行拆分 效果如图6 8所示 操作步骤见教程P114 第6章利用表格设计和制作网页 12 21 在表格中插入页面元素 在第1个表格中插入页面元素 其在扩展表格模式下的显示效果如图6 14所示 操作步骤见教程P116 在第2个表格中插入页面元素 其在扩展表格模式下的显示如图6 15所示 操作步骤见教程P117 在第3个表格中插入页面元素 其在扩展表格模式下的显示如图6 16所示 操作步骤见教程P117 采用前面所述的方法在第4个表格的单元格中分别插入相应的文本 其在扩展表格模式下的显示如图6 17所示 操作步骤略 第6章利用表格设计和制作网页 13 21 利用CSS样式美化表格 利用CSS样式美化表格中的文本 操作步骤见教程P119 利用CSS样式美化表格背景 操作步骤见教程P120 利用CSS样式美化表格边框 操作步骤见教程P120 第6章利用表格设计和制作网页 14 21 设置表格属性 将用于页面布局的4个外表格居中对齐 操作步骤见教程P122 将 热门话题 表格中的内嵌7行2列表格的单元格间距调整为3 操作步骤见教程P123 将相应表格的高度进行适当的调整 操作步骤见教程P123 第6章利用表格设计和制作网页 15 21 设置表格行 列及单元格属性 为第1个外表格的第2行设置背景图像 操作步骤见教程P125 调整第2个外表格各单元格的宽度 效果如图6 28所示 操作步骤见教程P125 设置第3个外表格及其内嵌表格的单元格属性 效果如图6 29所示 操作步骤见教程P125 为第4个外表格中的各单元格分别设置背景颜色 操作步骤见教程P126 第6章利用表格设计和制作网页 16 21 表格的高级应用技巧 利用表格制作水平线和垂直线 将第4个表格的第1行单元格制作水平线细线 效果如图6 30所示 操作步骤见教程P126 制作立体导航栏表格 将第1个表格中的内嵌导航栏表格制作成立体导航栏表格 效果如图6 33所示 操作步骤见教程P128 第6章利用表格设计和制作网页 17 21 利用 布局模式 规划网页 从 标准 模式切换到 布局 模式下 操作步骤见教程P129 创建用于页面布局的4个布局表格 操作步骤见教程P129 在布局表格中绘制布局单元格 操作步骤见教程P130 第6章利用表格设计和制作网页 18 21 表格的其他应用 6 7 1表格数据的导入和导出 如图6 41所示 将Excel工作表ex6 6 1 xls中的数据导入到网页中 效果如图6 42所示 操作步骤见教程P132 6 7 2一个自动套用表格格式实例 将网页文件ex6 table html中的表格进行格式化 效果如图6 46所示 操作步骤见教程P134 第6章利用表格设计和制作网页 19 21 本章小结 本章通过 畅想未来 网站首页的设计制作 详细介绍了以下内容 1 表格的基本操作和如何利用表格进行页面布局的方法 其中包括 创建表格 在表格中插入页面元素 设置表格属性 设置表格行 列 单元格的属性和设置表格的总体属性 及利用表格来定位页面元素 2 表格的高级使用技巧 其中包括利用表格制作水平线和垂直线及立体导航栏表格的制作方法 3 利用 布局模式 规划网页的方法 4 表格的其他应用 如自动套用表格格式和