项目六表格布局一翔网店主.pptVIP

点击此处结束放映 网页设计与制作 老虎工作室2012年12月 第一页，共三十四页。 项目六 表格──布局一翔网店主页 任务一 使用表格布局页眉 任务二 使用嵌套表格布局主体页面 任务三 使用表格布局页脚 实 训 布局“电脑商城”网页 第二页，共三十四页。 表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面。本项目以一翔网店主页为例，介绍使用表格进行网页布局的基本方法。在项目中，将使用表格分别对页眉、主体和页脚进行布局。 第三页，共三十四页。 第四页，共三十四页。 任务一 使用表格布局页眉 需要掌握的内容主要有： 1、表格的概念 2、插入表格 3、选择表格 4、设置表格属性 5、设置单元格属性 第五页，共三十四页。 在网页制作中，表格的作用主要体现在两个方面，一个是组织数据，如各种数据表，另一个是布局网页，即把网页的各种元素通过表格进行有序布局。 一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框。表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置。另外，表格的HTML标签是“table”，行的HTML标签是“tr”，单元格的HTML标签是“td”。 一个包括n列表格的宽度＝2×表格边框＋（n＋1）×单元格间距＋2n×单元格边距＋n×单元格宽度+2n×单元格边框宽度（1个像素）。掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的。 1、表格的概念 第六页，共三十四页。 在主菜单中选择【插入】／【表格】命令，或在【插入】／【常用】面板中单击 （表格）按钮打开【表格】对话框进行设置插入即可。 2、插入表格 第七页，共三十四页。 选择表格的方法如下： （1）单击表格左上角或者表格中任何一个单元格的边框线。 （2）将光标移至欲选择的表格内，单击文档窗口左下角对应的“＜table＞”标签。 （3）将光标置于表格的边框上，当光标呈上下箭头形状时单击鼠标。 （4）将光标置于表格内，在主菜单中选择【修改】／【表格】／【选择表格】命令或在鼠标右键快捷菜单中选择【表格】／【选择表格】命令。 3、选择表格 第八页，共三十四页。 选中表格，在【属性】面板中将显示表格的各项属性，同时也可以修改这些属性设置。 4、设置表格属性 第九页，共三十四页。 将光标置于单元格内，在单元格【属性】面板设置其属性。 5、设置单元格属性 第十页，共三十四页。 任务二 使用嵌套表格布局主体页面 （一）设置主体页面布局 （二）设置左侧页面布局 （三）设置右侧页面布局 第十一页，共三十四页。 （一）设置主体页面布局 需要掌握的内容主要有： 1、在表格外插入表格 2、设置单元格属性 3、使用表格制作细线的方法 第十二页，共三十四页。 1、在表格外插入表格 用鼠标选中整个表格或者将光标置于表格的最右侧，然后选择【插入】／【表格】命令插入表格，即可在上一个表格的下面插入表格。 第十三页，共三十四页。 2、设置单元格属性 将鼠标光标置于单元格内，然后根据需要在【属性】面板中设置单元格的水平、垂直对齐方式和单元格宽度等。 第十四页，共三十四页。 3、使用表格制作细线的方法 将鼠标光标置于单元格内，然后设置单元格宽度或高度为较小的数值，如“2”，再设置背景颜色，如“#e4d9d9”，并将单元格源代码中的不换行空格符“nbsp;”删除即可。 第十五页，共三十四页。 （二）设置左侧页面布局 需要掌握的内容主要有： 1、插入嵌套表格 2、在表格中增加行或列 3、删除表格的行或列 第十六页，共三十四页。 1、插入嵌套表格 所谓嵌套表格，就是在表格的单元格中再插入表格。 将光标置于单元格内，在主菜单中选择【插入】/【表格】命令将在单元格中插入一个嵌套表格。