表格的设计与制作材料.pptVIP

5.4 特效表格的制作 制作圆角表格的步骤 （1）插入表格 新建文档，然后在新建的文档中插入一个3行3列的表格，在“表格”对话框中设置表格宽度400像素，边框粗细为0，单元格边距为0，单元格间距为0。 （2）插入图片 (3）设置单元格宽度和高度 （4）设置页面背景颜色 （5）设置表格背景色 （6）调整中心单元格的高度 （8）按F12保存并预览网页 5.4 特效表格的制作 2.宽度固定的圆角表格 5.4 特效表格的制作 （1）插入表格 新建文档，然后在新建的文档中插入一个3行1列的表格，在“表格”对话框中设置表格宽度140像素，边框粗细为0，单元格边距为0，单元格间距为0。 （2）插入图像 在表格的上下两行分别插入图所示的图片（top.gif，bottom.gif），此时表格如图 在中间的单元格中插入一个1行1列的表格，将这个表格的间距设置为1，边框粗细为0 ，宽度为100%，背景颜色与图片颜色相同（#0080ff）。 把刚插入表格的唯一的单元格的背景设置为白色，并将这个单元格的高度设置为100像素。 按F12保存并在浏览器中预览，效果如图5-38所示。 5.5 布局表格 该网页的设计思想是，首先新建空白网页，指定图像素材作为跟踪图像，然后进入“布局模式”，依照跟踪图像绘制布局表格和布局单元格。返回标准模式后，在布局表格基础上再插入标准表格进一步布局页面，接着分别插入图像或设置图像作为背景，输入文本并设置项目列表，从而完成图示网页的主页设计。具体操作步骤为： 1.新建网页： 2.保存网页： 3.设置跟踪图像： 4.进入布局模式： 5.绘制布局表格： 6.绘制其他布局表格： 5.5 布局表格 7.单击文档窗口上方的“退出”按钮，返回“标准”模式，根据跟踪图像手动调整表格。 8.取消跟踪图像： 9.设置单元格背景： 10.拆分单元格： 11.选中第二栏所在的表格，在属性面板中将表格背景设置为#0000cc，边框为0，间距为1 12.拖动选择第二行所有单元格，在单元格属性面板中将其单元格背景颜色设置为#0099ff，各单元格宽度为100像素。 13.选中表格1，在表格属性面板中将表格的边框设置为1，边框颜色设置为#0099ff。以相同的方法，将表格2、3、4、5的表格的边框设置为1，边框颜色设置为#0099ff。如图所示。 5.5 布局表格 5.5 布局表格 14.设置最下方的表格： 15.将光标定于表格1、2、4、5中，在然后再依次输入对应的文字内容。 16.将光标定于表格3中，属性面板中设置其垂直对齐方式为“顶端对齐”，然后再选中【插入】——【表格】菜单命令，插入一个11行1列的表格，宽度为100%，单元格边距为1。 17.将光标定于刚插入的表格的第一行，选择【插入】——【图像】菜单命令，选择图像ncxy.jpg，将其插入，选中图像，在属性面板中将对齐方式设为“居住”；在表格的其余各行依次输入“学院简介”等文字内容。 18.依次将网页中所有输入的文字大小设置为12像素。 19.选中“校园新闻”在属性面板中设置对齐方式为“居中对齐”，颜色为#0000ff，“学院简介”、“公告公示”、“校园电台”、“快捷导航”设置与“校园新闻”相同。 20.按F12在保存并预览，效果如图5-54所示。 5.5 布局表格 （2）从布局模式切换到标准模式 单击“布局模式”文档工具栏中的“退出” 按钮 单击“布局”工具栏中的“标准按钮” 回到标准视图模式 选择主菜单中的【查看】——【表格模式】——【标准模式】命令回到标准模式。 2.创建布局表格 3.创建布局单元格 4.在布局单元格中添加内容 第5章 表格的设计与制作 5.5 布局表格 5.5.3 调整布局表格和布局单元格 1.调整布局表格和布局单元格的大小 （1）调整布局表格的大小 （2）调整布局表格的大小 2.移动布局单元格 3.布局表格和布局单元格的属性 （1）通过属性面板修改布局表格的属性 （2）使用下拉菜单修改布局表格的属性 （3）通过属性面板修改布局单元格的属性 第5章 表格的设计与制作 5.5 布局表格 5.5.4布局模式排版实例 第5章 表格的设计与制作 第5章 表格的创建与制作 第5章 表格的设计与制作 第5章 表格的设计与制作 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用 5.1表格的创建 5.1.1在HTML代码中创建表格 1.表格的组成 行、列、单元格 2.表格的基本标签 在HTML文档中，创建表格使用的基本标签有table/table、tr/tr、td/td和th/th，这些标签的具体含义及用法如表5-1所示： 第5章 表格的设计与制作 5.1表格的创建 第5章 表格的