项目6表格──布局商务网.ppt

项目六表格 布局商务网页 任务一使用表格布局页眉 任务二使用嵌套表格布局主体页面 实训使用表格布局 玉石的种类 页面 任务三使用表格布局页脚 表格网页 本章要点内容 表格的基本概念和组成元素 表格的基本操作 表格的深入使用 利用表格排版 本章学习目标了解表格在网页页面排版中的重要作用 能够对表格进行基本操作并综合实例掌握基本排版技巧 把握表格的排序 数据导入导出以及美化等深入应用 本章学前要求对基本网页操作有所了解 已经学会了文本 图片以及超链接的运用 6 1认识表格 如果读者具有计算机基础 学习过Office系列的办公软件 那么表格应该是一个常见的概念 在网页制作的过程中 表格的概念和Office中的表格基本相似 如图6 1所示 图6 1是表格基本元素的示意图 示意图是一张3行 3列的表格 横向叫行 纵向叫列 行列交叉部分就叫做单元格 单元格和单元格之间的距离叫间距 整张表格的边缘叫做边框 单元格中的内容和单元格边框的距离叫单元格填充 又称边距 学习时请注意这几个概念和表格标记中属性的对应关系 图6 1表格基本元素示意图 表格和单元格的宽度 高度 边框 背景等属性都可以调整 有利于进行全页面的布局排版 特别是边框宽度可以设置为0 从而在浏览器中隐藏表格 让用户感觉不到表格的存在 表格的每个单元格实际上可以看成一个独立的容器 可以插入几乎所有的网页元素 其位置相对于表格来说是固定的 但却伴随着表格宽度高度的更改 因此插入的网页元素可以按照设计者的意愿放置在网页的任何角落 另外 表格的行和列可以被随时插入 删除 复制 粘贴 单元格还可以被拆分或合并 这都为制作网页带来了巨大的灵活性 正是表格具有以上的特点 因此通常认为熟悉运用表格是制作高质量高水准网页的重要手段 尤其是现在那些知名的大型网站 已经离不开表格的帮助 以下是一些经典的使用表格网页 图6 2是联想公司的网站 图6 3是著名的265上网导航 以上两个实例是运用表格的典型案例 其中联想公司的网站看不到表格的边框 265上网导航的网站明显有表格边框 而且边框很细 布局复杂 实例1 实例2 提示 在HTML语言中 表格由表格标记 行标记 单元格标记三个标记构成 举例说明一个两行两列表格的基本标记就是如下 表格内容表格内容表格内容表格内容其中表明表格开始 表明表格结束 表明行开始 表明行结束 表明单元格开始 表明单元格结束 6 2表格的基本操作 6 2 1创建表格了解了基本的名词概念 我们就开始创建表格了 为了使大家能够从整体上掌握表格的基本操作 我们准备了一个实例 如图6 4所示 这是 公安院校学生服务系统 网站的一个页面 由两个大的表格组成 其中第二张表格还涉及到了表格的嵌套使用 本章就以这个实例的制作过程作为介绍表格网页制作的主线 从头到位按按步骤对表格创建 修改和调整的常规用法进行连贯的讲解 与此同时以简单的HTML语言描述所做操作在HTML语言中的引起的变化 希望读者能够自己分析更多的表格实例 尽快的掌握表格的使用技巧 图6 4本章实例 步骤1 新建一个基本的HTML网页并保存 命名为index html 在属性面板中将本页的对齐方式设置为中间对齐 在插入表格之前 我们先建立一个样式表 使得表格内的文字大小都为12 表格 样式表如下 table font size 12px 步骤2 在插入栏选择表格按钮或选择 插入 菜单的 表格 命令 系统弹出表格对话框如图6 5所示 图6 5 表格 对话框 步骤3 初步设置表格 行数为2 列数为1 宽度600 单元格边距为0 单元格间距为2 页眉 选择 无 表格的 标题 可以不填写 对齐标题 可选择默认 摘要 一般为空 设置完毕单击 确定 生成表格 如图6 6所示 在表格对话框中 表格宽度 的单位是像素 也可以是百分比 边框粗细 单元格边距 和 单元格间距 的单位都是像素 在 辅助功能 区域 如果我们填写 标题 则会在表格的上部自动插入我们输入的文本作为表格的标题 在 对齐标题 中可以选择该标题的对齐方式 默认的对齐方式为居中对齐 标题在HTML语言中的标记是 代码如下 标题表格体 图6 6插入的表格 步骤4 在第一个表格后 将光标定位在表格的右外侧 不要换行 按照步骤3的方法再创建一个表格 如图6 7所示 参数为 行数和列数均为2 宽度为600像素 填充为5 间距为0 边框为1 新的表格会自动在第一个表格下方生成 而不会象我们平常使用的Word一样在原表格的旁边生成 提示 一般排版的做法都是先建几个大的表格 再套几个小的表格 但是浏览器在装载表格的时候通常是把一张表格都完全下载到了本地的缓存中才显示表格中的内容 如果一个表格比较长的话 阅览者通常需要等很长时间才能看见内容 因此 我们通常把内容分类后 分批放在较小的表格中 这样有利于加快下载速度 便于浏览 图6 7创建第二个表格 6 2 2选择表格对象 一次性创建的表格不一定符合需要 所以需要修改其大小或者重新设置表格的属性 但是在设置表格 行 列 单元格的属性之前 必须选中这些对象 因此需要先介绍如何选中这些对象 选择整个表格 把鼠标移至表格的左上方 当出现如图6 8的所示箭头的时候单击就可以了 选择连续的单元格 把光标定位在起始单元格内 按住鼠标左键开始向需要选择的方向拖动 单元格边框呈现加粗的黑色 表明被选中 选择不连续的单元格 按住Ctrl键单击所有需要选择的单元格 单元格边框呈现加粗的黑色 表明被选中 图6 8选中表格 选择某一行或某一列 将鼠标移动到行的左侧或列的上方 当鼠标指针变成黑色箭头时 如图6 9所示 单击鼠标 则整个行或列被选中 图6 9选择一行 6 2 3表格属性设置 本章6 2 1中创建的两个表格看上去跟我们的例子还有很大的区别 接下来我们要做的第一件事情就是要设置表格的属性 具体步骤如下 步骤1 选择表格 在表格属性面板上对表格进行设置 如图6 10所示 表格ID 是给表格一个编号以用来区别其它表格 一般可不填 行数 列数 宽度 高度 填充 间距 对其方式以及边框宽度等都可以通过设置相应的值进行修改 其中 对齐方式有4种 分别是默认 左对齐 居中对齐和右对齐 而一般默认就是左对齐 类 选项主要是选择表格所适用的CSS样式 图6 10表格属性面板 通过选择 背景颜色 来给表格设置背景色 选择 边框颜色 给表格边框设置颜色 点击 背景图像 右侧的浏览按钮来浏览图片为表格选择合适的背景图像 属性面板上还有6个按钮 当我们把鼠标放在按钮上的时候系统会自动出现按钮功能提示 它们的作用如下 清除表格宽度清除表格高度将表格宽度转换为像素将表格宽度转换为百分比将表格高度转换为像素将表格高度转换为百分比步骤2 本章实例中的第一个表格暂时不需要更改表格设置 只需要把第二个表格设置成为300像素高就可以了 边框的颜色为 006600 结果如图6 11所示 图6 11表格属性设置结果 提示 表格进行的设置反映到HTML语言中 就是在第一个标记的括号中多了一些用来描述属性的标记和值 比如 设置表格的宽度是300 高度是200 用HTML语言描述如下 表格体其中width表示宽度 height表示高度 当然边框宽度 填充以及间距等等都有相应的语法 有兴趣的读者可以自行查阅相关资料或者通过操作Dreamweaver再比较代码 6 2 4单元格属性设置 上一小节中我们对表格属性进行了设置 接下来我们要对单元格属性进行设置 步骤1 第一个表格的单元格暂时不需要进行设置 只要插入预先准备好的图片banner gif 图片在随书光盘的相应章节的 本章实例 目录内 就可以了 如图6 12 网站的导航栏中的各栏目名称的制作将在稍后介绍 图6 12插入banner gif图片 步骤2 将光标定位在第二张表格的第二行任一个单元格内 在属性面板上设置单元格的高度为30 如图6 13 单元格属性面板上的主要设置内容如下 水平 和 垂直 文本框用来设置单元格的水平对齐方式和垂直对齐方式 一般默认的水平对齐为左对齐 默认的垂直对齐为居中对齐 因此当我们想要保持表格的内容顶格的时候选择表格的垂直对齐方式为 顶端对齐 宽度 和 高度 用来设置单元格的宽度和高度 单位为像素或百分比 背景颜色 用来设置单元格的背景颜色 背景图片 用来设置单元格的背景图片 巧妙的设置好背景颜色和背景图片是表格排版中重要的技巧 图6 13单元格属性面板 不换行 复选框主要是为了防止单元格中较长的文本自动换行 标题 复选框是把本单元格的内容当作标题单元格处理 如我们通常所见的成绩表中的数学 语文等科目项 主要区别是本单元格的HTML由标记变成 文本居中对齐 并且为加粗显示 提示 当我们把第二行任何一个单元格的高度设置为30后 整个第二行的高度都改变了 其原因是当一行之中的任何一个单元格的高度大于其它单元格的时候 整行的高度都跟本行最大高度的单元格一样 同理 列的宽度也受同一列中单元格宽度的影响 步骤3 设置第二张表格第一行第一列的单元格的属性 宽度为120像素 背景图片为预先准备好的图片left bg gif 效果如图6 14所示 提示 在HTML语言中 单元格的属性描述在括号内完成 比如 单元格的宽度是30 高度是20 用HTML语言描述如下 内容其他的属性设置读者可以自行对照代码窗口比较 图6 14单元格属性设置效果 6 2 5表格行和列的调整 在使用表格排版的时候 往往会发现已经创建的表格的行数或列数不能满足需求 需要通过增加或者删除行或列来调整 一种办法就是选中表格 然后在表格属性面板中设置表格的行数和列数 但是此办法通常不具备灵活性 因为它只能在表格的末端增加 删除行或者在表格的右端增加 删除列 当设计者需要在具体某个单元格的具体方位上插入或删除行和列的时候 这办法就不能满足需要 所以 能够灵活的在表格内插入或删除行和列就变得十分重要 下面就介绍调整行和列的另外一种办法 具体的步骤如下 步骤1 选中要插入行或列的单元格 单击鼠标右键 步骤2 在弹出来的菜单中选择 插入行 或 插入列 或 插入行或列 命令 如图6 15所示 若选择 插入行 则在选中行的上方插入一个空白行 若选择 插入列 则在选中列的左侧插入一个空白列 若选择 插入行或列 则显示 插入行或列 对话框 如图6 16所示 在这个对话框中 若选择插入行 则可以设置插入的行数 确认插入的行在当前单元格的上方还是下方 若选择插入列 则可以设置插入的列数 确认插入的列在当前单元格的左方还是右方 步骤3 在步骤1的基础上 选择弹出右键中的 删除行 或 删除列 则选中的行或列被删除 图6 15调整表格行和列的命令图6 16 插入行或列 对话框 6 2 5单元格的拆分与合并 通常为了调整版面我们还会拆分与合并单元格 比如在6 2 3中 我们已经在第一张表格的第一行单元格内插入了banner gif的图片 而第二行却有7个单元格 为了达到实例中的效果 我们需要对第一张表格的第二行单元格进行拆分 具体步骤如下 步骤1 选择第二行的单元格或者将光标定位于要拆分的单元格中 单击鼠标右键 选择 拆分单元格 命令 或单击属性面板上的 拆分 按钮 步骤2 在弹出 拆分单元格 对话框 如图6 17所示的 若 把单元格拆分 的值选择为 行 则下方显示为 行数 用来设置拆分成多少行 本例中选择 把单元格拆分 为 列 在 列数 中选择7 则此单元格被拆分成7列 图6 17 拆分单元格 对话框 步骤3 单击 确定 单元格拆分成功 如图6 18所示 步骤4 设置第二行的背景色为 666666 各单元格的对齐方式为 居中对齐 输入个栏目名称 将文本的颜色设置为白色 此时会出现单元格宽度不一致的情况 我们可以将鼠标移动至两个相邻的单元格中间 当指针变成时按住鼠标左键 左右拉动单元格边框 以调整至合适宽度 接下来 需要将第二张表格的第二行两个单元格合并 步骤如下 步骤1 选中两个单元格 单击鼠标右键 步骤2 在弹出的菜单中选择 合并单元格 命令 或者单击属性面板上的 合并单元格 按钮 两个单元格合并成功 步骤3 设置新单元格的对齐方式为 居中对齐 并输入文字 2006 2007 c 公安学校学生处版权所有 图6 18拆分单元格效果 提示 在HTML语言中将两个单元格合并为一个单元格 那么新单元格所在列的其余单元格的代码就会随之发生变化 如一个两行两列的表格原来的代码如下 colspan 2说明本单元格占了两个单元格的列宽 同理 拆分单元格以此类推 请读者自行分析 6 3表格的深入使用 6 3 1表格排序网页中的表格往往会包含大量的数据 他们的顺序往往是杂乱的 比如图书的索书号 文章的点击率排名以及本章中实例中的学生成绩 如果采取人工的方式进行排序 需要很大的工作量 为此 DreamweaverMX2004提供了表格数据排序功能 对杂乱的表格数据按照设计者设定的规则进行排序 为了让读者弄清楚DreamweaverMX2004是如何排序的 本章在实例中创建了一张学生成绩表 运用DreamweaverMX2004来对成绩进行排序 具体步骤如下 步骤1 将光标定位在第二张表格的第一行第二列 设置水平方向 中间对齐 垂直方向 顶端对齐 插入一个表格 2行1列 填充 和 间距 都是5 边框为0 宽度为95 步骤2 在新表格的第一行输入 学生成绩表总览 的文本 红色 加粗 新表格第二行中再插入一个表格 10行4列 填充 和 间距 都是2 边框为0 宽度为100 输入学生的学号 姓名 英语和数学成绩 如图6 19 步骤3 将光标定位在成绩表中 或选中表格 选择 命令 菜单中的 排序 命令 出现如图6 20的对话框 在 排序按 中选择 列3 即按英语成绩排序 顺序 中选择 按数字顺序 的 升序 为了防止按照英语排序出现两行或多行的数字相同 我们在 再按 列表中选择 列4 即当英语成绩相同时再按照数学成绩排序 仍然是升序 由于该表第一行是项目名称 所以在 选项 的4个复选框中不选择 排序包含第一行 由于表格没有标题和脚注部分 所以 排序标题行 排序脚注行 都不选择 最后一个选项 完成所有设置后所有颜色保持不变 也不选 最后的排序结果如图6 21所示 图6 19插入学生成绩表 图6 20 排序表格 对话框 图6 21表格排序结果 6 3 2表格美化 创建好的表格默认是没有背景颜色和边框效果的 因此难免显得单调乏味 但是设计者完全自己设计 又很难凭空想像其效果 为了解决这个问题 DreamweaverMX2004提供了一些设计好的表格外观样式 供设计者选择 并且设计者还可以根据自己的需要对这些效果进行修改 这样有利于减轻设计者的工作量 能够迅速的创建适合需要的表格 在此 我们仍然以本章实例为参照 对成绩表用Dreamweaver自带的样式进行美化 具体步骤如下 步骤1 选中表格 选择 命令 菜单中的 格式化表格 命令 弹出菜单如图6 22所示 图6 22 格式化表格 对话框 步骤2 设置格式化的条件 行颜色 用于表格美化的行颜色是可以用两种颜色交错的 第一种 选择交错前的颜色 第二种 选择交错后的颜色 交错 下拉列表选择每几行交错一次颜色 第一行 第一行往往是表格各列的名称或项目名称 所以需要有特殊的效果 诸如对齐方式 文字样式 背景颜色和文本颜色 最左列 第一行的设置情况一样 最左列往往也是用来表述行的名称或者统计的名目 也需要一些特殊的格式 表格 填写表格的边框宽度 如果选中 将所有属性套用至TD标签而不是TR标签 复选框 则在HTML代码中 所有的属性全部写在标记中 取代标记 本章实例是按照DreamweaverMX2004的默认样式设置的 结果如图6 23所示 提示 通过前面的学习我们基本上了解了表格排版的过程 但是有三点需要记住 1 为了加快速度 整个页面尽量拆成多个表格 不要在一个表格中排版 2 单一的表格结构要整齐 自己心中要做到有数 避免表格结构复杂 自己都看不懂的情况 3 表格是可以嵌套的 比如我们做的成绩表 但是嵌套的层次不要过深 本章的实例大功告成 最终效果如图6 4所示 但是 表格的应用还没有结束 在接下来的篇幅中我们还将介绍表格数据的导入导出以及非常实用的细线表格的制作技巧 图6 23表格美化的效果 6 3 3表格数据的导入导出 1 导入表格数据表格数据的来源很广泛 可以是现成的文本文件或Excel文件 如果设计者采用复制的办法将文件内容引用到网页文件中 文件的内容少还好 内容很多的情况下几乎就不可能了 因此 DreamweaverMX2004提供了从外部导入表格数据的功能 外部数据的类型可以是文本类型 也可以是Excel文件 当这些文件的内容导入到DreamweaverMX2004中的时候 DreamweaverMX2004将自动为其创建表格 并提示设计者设置表格参数 具体的应用我们举例说明 将图6 25的文本内容导入图6 24的表格中 操作步骤如下 图6 24导入数据的表格图6 25需要导入的文件 步骤1 选择 文件 菜单中的 导入 表格式数据 命令 弹出如图6 26所示 在 数据文件 文本框中填入文件的路径 或者单击 浏览 按钮选择文件的路径 在 定界符 下拉列表框中选择文本文件的数据分隔方式 供DreamweaverMX2004正确区分各数据 本实例中学号 姓名和成绩是用逗号分隔的 因此选择 逗号 其余的分隔符还有 Tab 分号 引号 和 其它 表格宽度 是指导入文本文件后生成的新的表格的宽度 如果选择 匹配内容 则表格的宽度尽量适应原数据文件的排列方式 如果选择 指定 宽度 则可以进行具体的宽度设置 有可能改变原数据文件的排列方式 本实例选择默认的 匹配内容 图6 26 导入表格式数据 对话框 单元格格填充 单元格间距 格式化首行 边框 的设置同表格属性和单元格属性设置 在此不加赘述 步骤2 设置完毕后 点击 确定 按钮 文本文件的内容导入了图6 24的表格中 并生成了新的表格 原来文件的每一段变成了表格的行 如图6 27 DreamweaverMX2004还可直接将Excel文件直接导入成表格 操作方法是选择 文件 菜单的 导入 Excel文档 命令 如图6 28 选择需要导入的Excel文档就可以了 图6 27导入文本文件后的效果 图6 28 打开 Excel文件的对话框 1表格网页实例 表格化的页面在不同平台 不同分辨率的浏览器里都能显示出原有的布局和对齐 图4 1所示的是 天使部落 网页利用表格进行布局的页面效果 图4 1 天使部落 主页 表格是网页排版的灵魂 是页面布局的重要方法 它可以将网页中的文本 图像等内容有效地组合成符合设计效果的页面 本项目将以商务网页为例 介绍使用表格进行网页布局的基本方法 在项目中 将使用表格分别对页眉 主体和页脚进行布局 任务一使用表格布局页眉 1 首先在Dreamweaver8中定义一个本地静态站点 然后把 项目素材 文件夹中的内容复制到站点根文件夹下 2 在网站根文件夹下面新建一个主页文档 并保存为 index htm 3 在 属性 面板中单击页面属性按钮 打开 页面属性 对话框 在 外观 分类中将文本 大小 设为 14像素 页边距全部设为 0 标题 编码 分类的 标题 文本框中输入 盘古石翡翠 然后单击确定按钮 4 将鼠标光标置于页面中 然后在菜单栏中选择 插入 表格 命令 或在 插入 常用 面板中单击 表格 按钮 打开 表格 对话框 参数设置如图所示 然后单击确定按钮 插入表格 注 一般的电脑的分辨率为800 600所以我们在设置网页的宽度是一般设置为760 460 5 确认表格处于被选中状态 然后在 属性 面板的 对齐 下拉列表中选择 居中对齐 选项 设置 背景图像 为 images bg gif 2行2列 6 选定左侧两个单元格后单击鼠标右键 选择 表格 合并单元格 命令 合并表格 表格处于被选中状态下 在单元格 属性 面板的 水平 下拉列表中选择 居中对齐 选项 在 宽 文本框中输入 81 7 仍将鼠标光标置于左侧单元格内 然后在菜单栏中选择 插入 图像 命令 将图像文件 images t1 jpg 插入到单元格中 注 还可以利用站点文件直接拖动到指定的单元格当中 8 在图像 属性 面板的 替换 列表文本框中输入 盘古石翡翠 在 垂直边距 和 水平边距 文本框中均输入 3 9 将鼠标光标置于右侧第1个单元格内 然后在菜单栏中选择 插入 图像 命令 将图像文件 images t2 jpg 插入到单元格中 任务二使用嵌套表格布局主体页面 一 布局网页右上方栏目的内容 二 布局右下方栏目的内容 一 布局网页右上方栏目的内容 1 选中右侧表格第2行或者将鼠标光标置于页眉表格的最右侧 然后单击 插入 常用 面板中的按钮 在页眉表格的下面继续插入一个表格 2 将鼠标光标置于第一个单元格内 在 属性 面板中设置其水平对齐方式为 居中对齐 垂直对齐方式为 顶端 单元格高度为 50 然后将鼠标光标置于第2个单元格内 在 属性 面板中设置其水平对齐方式为 居中对齐 垂直对齐方式为 顶端 单元格高度为 485 3 在菜单栏中 右侧第二行 选择 插入 表格 命令 在左侧单元格中插入一个1行7列的嵌套表格 4 然后在单元格中一次输入以下文本 5 选中整个表格将表格宽度设置成为宽度为100 高度为45颜色为 00cc66 6 选中文本 首页 然后在 属性 面板中设置字体加粗 设置 大小 为 18 像素 这时在 样式 下拉列表中自动出现相应的样式名称 STYLE2 7 运用同样的方法设置其他单元格文本的字体和大小 也可以直接在 样式 下拉列表中选择相对应的样式名称 STYLE2 来设置 二 布局右下方栏目的内容 1 将鼠标光标置于主体页面右下方单元格内 在 属性 面板中设置水平对齐方式为 居中对齐 垂直对齐方式为 顶端 背景颜色为 FFFFFF 2 在Dreamweaver菜单栏中选择 插入 表格 命令 在右侧单元格中插入一个7行5列的嵌套表格 3 将鼠标光标置于第2行的任意一个单元格中 然后单击文档窗口左下角的 标签来选择该行 然后在 属性 面板中设置单元格的宽度和高度均为 150 4 运用同样的方法设