第5章网页布局和框架.pptVIP

第五章 网页布局和框架 内容提要 布局模式 绘制布局表格和布局单元格 使用标尺与网格 调整布局表格及布局单元格 框架的使用 网页布局和框架 5.1 布局模式 5.1.1引例 右图页面分成了四个 不同的区域： 页面顶部的单元格 内放置标题图形； 顶部下方的单元格 内放置局部导航条； 页面左侧的单元格 内放置导航条； 页面右侧的单元格 内放置文字内容 网页布局和框架 5.2 绘制布局表格和布局单元格 在绘制布局表格和布局单元格之前，必须从“标准”模式切换到“布局”模式，执行下列操作之一，切换到“布局模式”： 选择“查看”|“表格模式”|“布局模式”命令 在插入工具栏的“布局”类别中单击“布局模式”按钮 网页布局和框架 绘制布局表格 绘制布局表格的步骤如下： （1）在插入工具栏上的“布局”类别中单击 按钮，光标变成加号（+）形状。 （2）将光标放在页面中要绘制布局表格的位置，按下鼠标左键并拖动，在页面上绘制出布局表格 。 网页布局和框架 绘制布局单元格 绘制布局单元格的步骤如下： （1）在插入工具栏上的“布局”类别中单击 按钮，光标变成加号（+）形状。 （2）将光标放在布局表格中要绘制单元格的位置，按下鼠标左键并拖动，在表格中绘制出布局单元格 。 （3）布局单元格绘制完成后，在插入工具栏上的“布局”类别中单击“标准”按钮，切换到“标准”模式，布局表格变成普通表格。 网页布局和框架 绘制嵌套布局表格 用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。具体步骤如下： （1）在插入工具栏上的“布局”类别中单击按钮，光标变成加号（+）形状。 （2）将光标放在现有布局表格中的空白区域，按下鼠标左键并拖动，在页面上绘制出嵌套布局表格 网页布局和框架 5.3 使用标尺与网格 使用标尺 当处于“布局”模式中时，选择“查看”|“标尺”|“显示”命令，显示标尺 。 使用网格 （1）选择“查看”|“网格”|“显示网格”命令，显示网格。 （2）若要设置网格属性，选择“查看”|“网格”|“网格设置”命令，打开“网格设置”对话框 。 （3）单击“确定”按钮应用更改并关闭对话框，在“布局”模式下的文档窗口中显示网格线 。 网页布局和框架 网页布局和框架 网页布局和框架 5.4 调整布局表格及布局单元格 单击两次布局表格顶部的标签，当表格边框上出现选择控制点时，表格处于选中状态。 将光标放在表格的选择控制点上，光标形状变成双向箭头，按下鼠标左键并拖动，可以调整表格的宽度和高度。 单击单元格的边框，边框上出现8个选择控制点，单元格处于选中状态。 拖动选择控制点可以调整单元格的宽度和高度，操作与表格相似 。 网页布局和框架 设置布局表格的属性 选中布局表格，打开“属性”面板 各选项的含义如下： 固定：将表格设置为固定宽度，在后面的文本框中输入宽度（以像素为单位）。 自动伸展：使表格最右边的列自动伸展。 高：设置表格的高度（以像素为单位）。 背景颜色：设置表格的背景颜色。单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色，或者在文本框中输入一个十六进制数字。 网页布局和框架 填充：设置单元格内容和单元格边框之间的间隔（以像素为单位）。 间距：设置相邻单元格之间的间隔（以像素为单位）。 清除行高：删除表格中所有单元格的显式高度设置。 使单元格宽度一致：如果表格中有固定宽度的单元格，则该选项使HTML代码中的单元格宽度与它们在屏幕上的外观宽度匹配。 删除所有间隔图像：从表格中删除间隔图像。 删除嵌套：删除绘制在一个布局表格中的嵌套表格，而不丢失它的任何内容。此时嵌套表格消失，它包含的单元格成为外部表格的一部分。 网页布局和框架 设置布局单元格的属性 各选项的含义如下： 固定：将单元格设置为固定宽度，在后面的文本框中输入宽度（以像素为单位）。 自动伸展：使单元格自动伸展。 高：设置单元格的高度（以像素为单位）。 背景颜色：设置单元格的背景颜色。单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色，或者在文本框中输入一个十六进制数字。 网页布局和框架 水平：设置单元格内容的水平对齐方式，可供选择的选项包括“左对齐”、“居中对齐”、“右对齐”和“默认”。 垂直：设置单元格内容的垂直对齐方式，可供选择的选项包括“顶端”、“居中”、“底部”、“基线”或“默认”。 不换行：禁止文字换行。如果选中了此复选框，布局单元格按需要加宽以适应文本，而不是在新的一行上