使用表格和框架布局网页 网页设计与制作教学PPT课件.ppt

项目6 使用表格和框架布局网页 任务1 表格的基本操作 任务2 编辑表格 任务3 利用表格进行页面布局 任务4 框架的基本操作 任务5 设置框架 任务6 利用框架进行网页布局 本章重点介绍“表格和框架布局页面”中所使用到的相关知识，为读者实际动手建站打好基础，清晰定位网页元素。 任务1 表格的基本操作 6.1.1 认识表格 表格是由若干行和列组成的二维结构，行列的交汇处称为单元格，水平方向的多个单元格称为一行，垂直方向的多个单元格构成一列。单元格之间的距离称为单元格间距，表格四周边线称为表格的边框，边框到最近的单元格距离称为单元格边距。 在HTML代码中与表格相关的标示符有： 1.table/table：表格标记，表格中所有的具体内容都放在这一对标示符之间 2.tr/tr：行标记，表格的行都放在这一对标示符之间。行标记必须包含在表格标记中，一对表格标记中可以含有多对行标记，表示该表格由多行组成。 3. .td/td：列标记，表格中具体的列内容放在这一对标示符之间，列标记必须和行标记配合使用，即列标记在行标记内部，一对行标记内部可以出现多对列标记，表示该行由多列组成 4.nbsp 6.1.2 插入表格 （1）光标定位 （2）“插入”——“表格”，弹出“表格”对话框 （3）在“表格大小”选项区中设置行数、列数、表格宽度、边框粗细、单元格边距和单元格间距；在“标题”选项区设置表头的格式；在“辅助功能”选项区设置表格的标题和摘要 （4）设置完成后，单击“确定” 6.1.3 表格的嵌套 （1）光标定位在需要嵌套表格的单元格 （2）“插入”——“表格”，在弹出的“表格”对话框中设置表格参数 （3）单击“确定” 任务2 编辑表格 6.2.1 选择表格对象 1.选择整个表格 单击表格边框线 光标置于表格中的任一个单元格，然后连续按两次Ctrl+A组合键 右击表格中的任一个单元格，选择“表格”——“选择表格” 光标置于尾部，向左拖动鼠标 光标置于任一个单元格，“修改”——“表格”——“选择表格” 光标置于第一个单元格，拖动鼠标到最后一个单元格 光标置于第一个单元格，按住shift键，单击最后一个单元格 光标置于第一行的左边缘，鼠标指针变成黑色箭头，向下拖动鼠标到最后一行 光标置于第一列的上边缘，鼠标指针变成黑色箭头，向右拖动鼠标到最后一列 光标置于表格任一个单元格，在标签选择器选择table标签 2.选择单元格 光标置于表格中任一个单元格，然后按下Ctrl+A组合键 光标置于表格中任一个单元格，双击 光标置于表格中任一个单元格，“编辑”——“全选” 光标置于表格中任一个单元格，拖动鼠标至单元格外 光标置于表格中要选择的单元格，在标签编辑器选中td标签 3.选择多个单元格 按下Ctrl键，选择所要选择的单元格 光标置于单元格中拖动鼠标 光标置于该行的左边缘，鼠标变成黑色箭头，单击选择一行 光标置于该行的上边缘，鼠标变成黑色箭头，单击选择一列 光标置于表格中要选择的单元格，在标签编辑器选中tr标签 6.2.2 设置表格属性 表格“属性”面板中各项说明如下： “表格”下拉列表框：设置表格名称 “行”文本框：设置表格中行的数量 “列”文本框：设置表格中列的数量 “宽”文本框：用于设置表格的宽度，单位以像素或百分比 “填充”文本框：用于设置单元格内容到边界之间的距离，以像素为单位 “间距”用于设置相邻单元格之间的距离，以像素为单位 “对齐”下拉列表框：设置表格相对于同一段落其他对齐方式 “边框”文本框：表格的宽度，以像素为单位 “类”下拉列表框：设置表格使用的CSS类 “清除列宽”：从表格中删除所有已指定的列宽 “清除行高”：从表格中删除所有已指定的行高 “将表格宽度转换成像素”：将表格每列的宽度和高度转换为以像素为单位来描述当前宽度 “将表格宽度转换成百分比”：将表格每列的宽度和高度转换为占“文档”窗口宽度的百分比来描述当前宽度 6.2.3 设置行、列与单元格属性 “格式”下拉列表：用于设置表格内容的文本格式 ID下拉列表框：用于为所选择的行设置ID “类”下拉列表框：设置该行使用的CSS类 “链接”：设置所选行的链接目标 “水平”：用于指定单元格、行或列的水平对齐方式 “垂直”：用于指定单元格、行或列的垂直对齐方式 “宽”和“高”：用于指定单元格、行或列的宽度和高度 “背景颜色”：用于设置所选择的单元格、行或列的背景颜色 “合并所选单元格，使用跨度”：用于将所选择的多个行和列合并成一个单元格 “拆分单元格为行或列”：将所选的单元格拆分成多个单元格 “不换行”：用于禁止单元格内容的自动换行 “标题”：将所选的单元格设置为表格标题单元格 “页面属性”：用