项目一表格布局商务网页.ppt

项目一表格 布局商务网页 任务一使用表格布局页眉 任务二使用嵌套表格布局主体页面 实训使用表格布局 玉石的种类 页面 任务三使用表格布局页脚 表格是网页排版的灵魂 是页面布局的重要方法 它可以将网页中的文本 图像等内容有效地组合成符合设计效果的页面 本项目将以商务网页为例 介绍使用表格进行网页布局的基本方法 在项目中 将使用表格分别对页眉 主体和页脚进行布局 任务一使用表格布局页眉 1 首先在Dreamweaver8中定义一个本地静态站点 然后把 项目素材 文件夹中的内容复制到站点根文件夹下 2 在网站根文件夹下面新建一个主页文档 并保存为 index html 3 在 属性 面板中单击页面属性按钮 打开 页面属性 对话框 在 外观 分类中将文本 大小 设为 14像素 页边距全部设为 0 在 标题 编码 分类的 标题 文本框中输入 盘古石翡翠 然后单击确定按钮 4 将鼠标光标置于页面中 然后在菜单栏中选择 插入 表格 命令 或在 插入 常用 面板中单击 表格 按钮 打开 表格 对话框 参数设置如图所示 然后单击确定按钮 插入表格 5 确认表格处于被选中状态 然后在 属性 面板的 对齐 下拉列表中选择 居中对齐 选项 设置 背景图像 为 images bg gif 6 选定左侧两个单元格后单击鼠标右键 选择 表格 合并单元格 命令 合并表格 表格处于被选中状态下 在单元格 属性 面板的 水平 下拉列表中选择 居中对齐 选项 在 宽 文本框中输入 87 7 仍将鼠标光标置于左侧第1个单元格内 然后在菜单栏中选择 插入 图像 命令 将图像文件 images t1 jpg 插入到单元格中 8 在图像 属性 面板的 替换 列表文本框中输入 盘古石翡翠 在 垂直边距 和 水平边距 文本框中均输入 3 9 将鼠标光标置于右侧第1个单元格内 然后在菜单栏中选择 插入 图像 命令 将图像文件 images t2 jpg 插入到单元格中 任务二使用嵌套表格布局主体页面 一 布局网页右上方栏目的内容 二 布局右下方栏目的内容 一 布局网页右上方栏目的内容 1 选中右侧表格第2行或者将鼠标光标置于页眉表格的最右侧 然后单击 插入 常用 面板中的按钮 在页眉表格的下面继续插入一个表格 2 将鼠标光标置于第一个单元格内 在 属性 面板中设置其水平对齐方式为 居中对齐 垂直对齐方式为 居中对齐 单元格高度为 50 然后将鼠标光标置于第2个单元格内 在 属性 面板中设置其水平对齐方式为 居中对齐 垂直对齐方式为 顶端 单元格高度为 490 3 在菜单栏中选择 插入 表格 命令 在上侧单元格中插入一个1行7列的嵌套表格 4 然后在单元格中输入文本 5 将鼠标光标置于 首页 单元格内 按住Shift键不放 依次向右拖曳单元格至 翡翠论坛 单元格 已添加文本的单元格完全被选中后 设置单元格属性 6 选中文本 首页 然后在 属性 面板中设置字体加粗 设置 大小 为 18 像素 这时在 样式 下拉列表中自动出现相应的样式名称 STYLE2 7 运用同样的方法设置其他单元格文本的字体和大小 也可以直接在 样式 下拉列表中选择相对应的样式名称 STYLE2 来设置 二 布局右下方栏目的内容 1 将鼠标光标置于主体页面右下方单元格内 在 属性 面板中设置水平对齐方式为 居中对齐 垂直对齐方式为 顶端 背景颜色为 FFFFFF 2 在菜单栏中选择 插入 表格 命令 在右侧单元格中插入一个7行5列的嵌套表格 3 将鼠标光标置于第2行的任意一个单元格中 然后单击文档窗口左下角的 标签来选择该行 然后在 属性 面板中设置单元格的宽度和高度均为 128 4 运用同样的方法设置第5行单元格的高度为 128 然后设置第3行和第6行单元格的高度为 30 水平对齐方式为 居中对齐 5 选择表格第4行所有单元格 然后在菜单栏中选择 修改 表格 合并单元格 命令 对单元格进行合并 6 将鼠标光标置于合并后的单元格中 在 属性 面板中设置其高度为 1 背景图像为 images bg gif 7 单击文档窗口左上角的代码按钮 切换到 代码 视图 将单元格源代码中的不换行空格符 删除 然后再单击设计按钮 切换到 设计 视图 8 在表格第2行的4个单元格中依次插入图像 images fc1 jpg images fc2 jpg images fc3 jpg images fc4 jpg images fc5 jpg 并在每个图像下面的单元格中输入相应的文本 选中图像 images fc5 jpg 在其 属性 面板中将 边框 宽度设为 1 9 在表格第5行的4个单元格中依次插入图像 images fc6 jpg images fc7 jpg images fc8 jpg images fc9 jpg images fc10 jpg 并在每个图像下面的单元格中输入相应的文本 选中图像 images fc7 jpg 在其 属性 面板中将 边框 宽度设为 1 10 由于图片大小不一 表格的大小在插入图像后会出现改变 应在 属性 面板中设置单元格的宽度和高度均为 128 11 选择表格的第7行 然后按下Delete键将该行删除 任务三使用表格布局页脚 1 将鼠标光标置于网页主体部分最外层表格的右侧 然后插入一个2行1列 宽为 78像素 的表格 其单元格边距和边框粗细均为 0 单元格间距为 3 2 在 属性 面板中设置表格的高度为 50像素 背景图像为 images bg gif 3 将每行单元格的水平对齐方式均设置为 居中对齐 然后输入相应的文本 实训使用表格布局 玉石的种类 页面 本项目主要介绍了使用表格布局网页的基本方法 本实训将让读者进一步巩固所学的基本知识 要求 把 项目实训 素材 文件夹下的内容复制