网页设计与制作 第2版 项目教学 作者 王君学 古淑强 项目六 表格-布局一翔网店主页-.pptVIP

网页设计与制作 项目六 表格──布局一翔网店主页 表格是网页排版的灵魂，是页面布局的重要方法，它可以将网页中的文本、图像等内容有效地组合成符合设计效果的页面。本项目以一翔网店主页为例，介绍使用表格进行网页布局的基本方法。在项目中，将使用表格分别对页眉、主体和页脚进行布局。 任务一 使用表格布局页眉 需要掌握的内容主要有： 1、表格的概念 2、插入表格 3、选择表格 4、设置表格属性 5、设置单元格属性 1、表格的概念 在网页制作中，表格的作用主要体现在两个方面，一个是组织数据，如各种数据表，另一个是布局网页，即把网页的各种元素通过表格进行有序布局。 一个完整的表格包括行、列、单元格、单元格间距、单元格边距（填充）、表格边框和单元格边框。表格边框可以设置粗细和颜色等属性，单元格边框粗细不可设置。另外，表格的HTML标签是“table”，行的HTML标签是“tr”，单元格的HTML标签是“td”。 一个包括n列表格的宽度＝2×表格边框＋（n＋1）×单元格间距＋2n×单元格边距＋n×单元格宽度+2n×单元格边框宽度（1个像素）。掌握这个公式是非常有用的，在运用表格布局时，精确地定位网页就是通过设置单元格的宽度或者高度来实现的。 2、插入表格 在主菜单中选择【插入】／【表格】命令，或在【插入】／【常用】面板中单击 （表格）按钮打开【表格】对话框进行设置插入即可。 3、选择表格 选择表格的方法如下： （1）单击表格左上角或者表格中任何一个单元格的边框线。 （2）将光标移至欲选择的表格内，单击文档窗口左下角对应的“＜table＞”标签。 （3）将光标置于表格的边框上，当光标呈上下箭头形状时单击鼠标。 （4）将光标置于表格内，在主菜单中选择【修改】／【表格】／【选择表格】命令或在鼠标右键快捷菜单中选择【表格】／【选择表格】命令。 4、设置表格属性 选中表格，在【属性】面板中将显示表格的各项属性，同时也可以修改这些属性设置。 5、设置单元格属性 将光标置于单元格内，在单元格【属性】面板设置其属性。 任务二 使用嵌套表格布局主体页面 （一）设置主体页面布局 （二）设置左侧页面布局 （三）设置右侧页面布局 （一）设置主体页面布局 1、在表格外插入表格 2、设置单元格属性 3、使用表格制作细线的方法 （二）设置左侧页面布局 1、插入嵌套表格 2、在表格中增加行或列 3、删除表格的行或列 如果要删除表格的行或列，可以先将光标置于要删除的行或列中，或者将要删除的行或列选中，然后在主菜单中选择【修改】/【表格】/【删除行】或【删除列】命令或在鼠标右键快捷菜单选择【表格】/【删除行】或【删除列】命令即可。其实，最简便的方法是选定要删除的行或列，然后按下Delete键直接删除。 如果要删除表格的内容而不想删除表格，可以选择一个或多个单元格，但不能选择整行、整列或者整个表格。只有这样，被选择的行、列或者单元格中的内容被删除后，表格的结构或属性才不会发生变化。 （三）设置右侧页面布局 需要掌握的内容主要有： 1、选择表格的行、列和单元格 2、合并单元格 3、拆分单元格 1、选择表格的行、列和单元格 选择表格的行、列的方法如下： （1）当鼠标位于欲选择行首或者列顶时，鼠标变成黑色箭头，这时单击鼠标左键，便可选择行或者列。 （2）按住鼠标左键从左至右或者从上至下拖曳，将欲选择的行或列选择。 （3）还有一种方法可以选择行，将光标移到欲选择的行中，然后单击文档窗口左下角的“tr”标签，这种方法只能用来选择行，而不能用来选择列。 选择表格不相邻的行、列的方法如下： （1）按住Ctrl键，把鼠标置于欲选择的行首或者列顶，当鼠标变成黑色箭头时，依次单击鼠标左键。 （2）按住Ctrl键，在已选择的连续行或列中单击想取消的行或列将其去除。 2、合并单元格 合并单元格是针对多个单元格而言的，而且这些单元格必须是连续的一个矩形。合并单元格首先需要选中这些单元格，然后执行以下任一操作即可。