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

1、第五章第五章 网页布局和框架网页布局和框架 内容提要内容提要p布局模式布局模式p绘制布局表格和布局单元格绘制布局表格和布局单元格 p使用标尺与网格使用标尺与网格 p调整布局表格及布局单元格调整布局表格及布局单元格 p框架的使用框架的使用 网页布局和框架网页布局和框架5.1 布局模式布局模式5.1.1引例引例右图页面分成了四个右图页面分成了四个不同的区域：不同的区域：p页面顶部的单元格页面顶部的单元格内放置标题图形；内放置标题图形；p顶部下方的单元格顶部下方的单元格内放置局部导航条；内放置局部导航条；p页面左侧的单元格页面左侧的单元格内放置导航条；内放置导航条；p页面右侧的单元格页面右侧的单元格

2、内放置文字内容内放置文字内容 网页布局和框架网页布局和框架5.2 绘制布局表格和布局单元格绘制布局表格和布局单元格p在绘制布局表格和布局单元格之前，必须从在绘制布局表格和布局单元格之前，必须从“标标准准”模式切换到模式切换到“布局布局”模式，执行下列操作之模式，执行下列操作之一，切换到一，切换到“布局模式布局模式”：选择“查看”|“表格模式”|“布局模式”命令在插入工具栏的“布局”类别中单击“布局模式”按钮网页布局和框架网页布局和框架p绘制布局表格绘制布局表格绘制布局表格的步骤如下：绘制布局表格的步骤如下：（1）在插入工具栏上的）在插入工具栏上的“布局布局”类别中单击类别中单击 按按钮，光标变

3、成加号（钮，光标变成加号（+）形状。）形状。（2）将光标放在页面中要绘制布局表格的位置，）将光标放在页面中要绘制布局表格的位置，按下鼠标左键并拖动，在页面上绘制出布局表按下鼠标左键并拖动，在页面上绘制出布局表格格。网页布局和框架网页布局和框架p绘制布局单元格绘制布局单元格绘制布局单元格的步骤如下：绘制布局单元格的步骤如下：（1）在插入工具栏上的）在插入工具栏上的“布局布局”类别中单击类别中单击 按钮，光标变成加号（按钮，光标变成加号（+）形状。）形状。（2）将光标放在布局表格中要绘制单元格的位置，）将光标放在布局表格中要绘制单元格的位置，按下鼠标左键并拖动，在表格中绘制出布局单元按下鼠标左键并

4、拖动，在表格中绘制出布局单元格格。（3）布局单元格绘制完成后，在插入工具栏上的）布局单元格绘制完成后，在插入工具栏上的“布局布局”类别中单击类别中单击“标准标准”按钮，切换到按钮，切换到“标标准准”模式，布局表格变成普通表格。模式，布局表格变成普通表格。网页布局和框架网页布局和框架p绘制嵌套布局表格绘制嵌套布局表格用户可以将一个布局表格绘制在另一个布局表格用户可以将一个布局表格绘制在另一个布局表格中，创建嵌套表格。具体步骤如下：中，创建嵌套表格。具体步骤如下：（1）在插入工具栏上的）在插入工具栏上的“布局布局”类别中单击按钮，类别中单击按钮，光标变成加号（光标变成加号（+）形状。）形状。（2）

5、将光标放在现有布局表格中的空白区域，按）将光标放在现有布局表格中的空白区域，按下鼠标左键并拖动，在页面上绘制出嵌套布局下鼠标左键并拖动，在页面上绘制出嵌套布局表格表格 网页布局和框架网页布局和框架5.3 使用标尺与网格使用标尺与网格p使用标尺使用标尺 当处于当处于“布局布局”模式中时，选择模式中时，选择“查看查看”|“标标尺尺”|“显示显示”命令，显示标尺命令，显示标尺。p使用网格使用网格（1）选择）选择“查看查看”|“网格网格”|“显示网格显示网格”命令，命令，显示网格。显示网格。（2）若要设置网格属性，选择）若要设置网格属性，选择“查看查看”|“网格网格”|“网格设置网格设置”命令，打开命

6、令，打开“网格设置网格设置”对话对话框框。（3）单击）单击“确定确定”按钮应用更改并关闭对话框，按钮应用更改并关闭对话框，在在“布局布局”模式下的文档窗口中显示网格线模式下的文档窗口中显示网格线。网页布局和框架网页布局和框架网格设置网格设置网页布局和框架网页布局和框架颜色：指定网格线的颜色。颜色：指定网格线的颜色。单击拾色器右下方的三单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色，或者在文本角箭头并从颜色选择器中选择一种颜色，或者在文本框中输入一个十六进制数字。框中输入一个十六进制数字。显示网格：选中该复选框可以使网格在显示网格：选中该复选框可以使网格在“设计设计”视视图中可见。图中可

7、见。靠齐到网格：选中该复选框可以使页面对象和网格靠齐到网格：选中该复选框可以使页面对象和网格线靠齐。线靠齐。间隔：控制网格线的间距。在文本框中输入一个数间隔：控制网格线的间距。在文本框中输入一个数字，并从右侧的下拉列表框中选择字，并从右侧的下拉列表框中选择“像素像素”、“英寸英寸”或或“厘米厘米”作为间距的单位。作为间距的单位。显示：指定网格线是显示为线条还是显示为点。显示：指定网格线是显示为线条还是显示为点。网页布局和框架网页布局和框架5.4 调整布局表格及布局单元格调整布局表格及布局单元格p 单击两次布局表格顶部的标签，当表格边框上出现单击两次布局表格顶部的标签，当表格边框上出现选择控制点

8、时，表格处于选中状态。选择控制点时，表格处于选中状态。将光标放在表格的选择控制点上，光标形状变成双将光标放在表格的选择控制点上，光标形状变成双向箭头，按下鼠标左键并拖动，可以调整表格的宽度和向箭头，按下鼠标左键并拖动，可以调整表格的宽度和高度。高度。p 单击单元格的边框，边框上出现单击单元格的边框，边框上出现8个选择控制点，个选择控制点，单元格处于选中状态。单元格处于选中状态。拖动选择控制点可以调整单元格的宽度和高度，操拖动选择控制点可以调整单元格的宽度和高度，操作与表格相似作与表格相似。网页布局和框架网页布局和框架p设置布局表格的属性设置布局表格的属性 选中布局表格，打开选中布局表格，打开“

9、属性属性”面板面板 p各选项的含义如下：各选项的含义如下：固定：将表格设置为固定宽度，在后面的文本框中输入固定：将表格设置为固定宽度，在后面的文本框中输入宽度（以像素为单位）。宽度（以像素为单位）。自动伸展：使表格最右边的列自动伸展。自动伸展：使表格最右边的列自动伸展。高：设置表格的高度（以像素为单位）。高：设置表格的高度（以像素为单位）。背景颜色：设置表格的背景颜色。背景颜色：设置表格的背景颜色。单击拾色器右下方的单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色，或者在文三角箭头并从颜色选择器中选择一种颜色，或者在文本框中输入一个十六进制数字。本框中输入一个十六进制数字。网页布局和框架

10、网页布局和框架填充：设置单元格内容和单元格边框之间的间隔（以像素填充：设置单元格内容和单元格边框之间的间隔（以像素为单位）。为单位）。间距：设置相邻单元格之间的间隔（以像素为单位）。间距：设置相邻单元格之间的间隔（以像素为单位）。清除行高：删除清除行高：删除表格中所有单元格的显式高度设置。表格中所有单元格的显式高度设置。使单元格宽度一致：如果表格中有固定宽度的单元格，则使单元格宽度一致：如果表格中有固定宽度的单元格，则该选项使该选项使HTML代码中的单元格宽度与它们在屏幕上的代码中的单元格宽度与它们在屏幕上的外观宽度匹配。外观宽度匹配。删除所有间隔图像：从表格中删除间隔图像。删除所有间隔图像：

11、从表格中删除间隔图像。删除嵌套：删除绘制在一个布局表格中的嵌套表格，而不删除嵌套：删除绘制在一个布局表格中的嵌套表格，而不丢失它的任何内容。此时嵌套表格消失，它包含的单元丢失它的任何内容。此时嵌套表格消失，它包含的单元格成为外部表格的一部分。格成为外部表格的一部分。网页布局和框架网页布局和框架p设置布局单元格的属性设置布局单元格的属性p各选项的含义如下：各选项的含义如下：固定：将单元格设置为固定宽度，在后面的文本框中输入固定：将单元格设置为固定宽度，在后面的文本框中输入宽度（以像素为单位）。宽度（以像素为单位）。自动伸展：使单元格自动伸展。自动伸展：使单元格自动伸展。高：设置单元格的高度（以像

12、素为单位）。高：设置单元格的高度（以像素为单位）。背景颜色：设置单元格的背景颜色。背景颜色：设置单元格的背景颜色。单击拾色器右下方的单击拾色器右下方的三角箭头并从颜色选择器中选择一种颜色，或者在文本三角箭头并从颜色选择器中选择一种颜色，或者在文本框中输入一个十六进制数字。框中输入一个十六进制数字。网页布局和框架网页布局和框架水平：设置单元格内容的水平对齐方式，水平：设置单元格内容的水平对齐方式，可供选择的选项可供选择的选项包括包括“左对齐左对齐”、“居中对齐居中对齐”、“右对齐右对齐”和和“默认默认”。垂直：设置单元格内容的垂直对齐方式，可供选择的选项垂直：设置单元格内容的垂直对齐方式，可供选

13、择的选项包括包括“顶端顶端”、“居中居中”、“底部底部”、“基线基线”或或“默默认认”。不换行：禁止文字换行。如果选中了此复选框，布局单元不换行：禁止文字换行。如果选中了此复选框，布局单元格按需要加宽以适应文本，而不是在新的一行上继续该格按需要加宽以适应文本，而不是在新的一行上继续该文本。文本。网页布局和框架网页布局和框架p设置列宽度设置列宽度 在在“布局布局”模式中，可以为表格的列指定一个特定的宽度，或者模式中，可以为表格的列指定一个特定的宽度，或者让其自动伸展以填充浏览器窗口尽量大的部分。也可以使用间隔图像让其自动伸展以填充浏览器窗口尽量大的部分。也可以使用间隔图像为列指定一个最小宽度。为

14、列指定一个最小宽度。1.使用间隔图像使用间隔图像 若要将列的最小宽度限制到某一特定值，可在该列中插入一个间若要将列的最小宽度限制到某一特定值，可在该列中插入一个间隔图像。具体执行步骤如下：隔图像。具体执行步骤如下：（1）单击列标题菜单，选择）单击列标题菜单，选择“添加间隔图像添加间隔图像”命令命令（2）如果尚未给站点设置间隔图像，将打开）如果尚未给站点设置间隔图像，将打开“选择占位图像选择占位图像”对话对话框框。（3）如果选择）如果选择“创建占位图像文件创建占位图像文件”单选按钮，将打开单选按钮，将打开“保存间隔保存间隔图像文件为图像文件为”对话框，指定间隔图像文件名和存储该文件的文件夹，对话

15、框，指定间隔图像文件名和存储该文件的文件夹，完成后单击完成后单击“保存保存”按钮。按钮。（4）间隔图像插入到列中，该图像是不可见的，列的底部会显示双）间隔图像插入到列中，该图像是不可见的，列的底部会显示双横线以表明它包含一个间隔图像横线以表明它包含一个间隔图像。网页布局和框架网页布局和框架2列设置为自动伸展列设置为自动伸展自动伸展列可根据浏览器窗口的宽度自动进行调整。自动伸展列可根据浏览器窗口的宽度自动进行调整。p设置自动伸展列的具体步骤如下：设置自动伸展列的具体步骤如下：（1）单击列标题菜单，选择）单击列标题菜单，选择“列设置为自动伸展列设置为自动伸展”命令命令。（2）如果尚未给站点设置间隔

16、图像，将打开）如果尚未给站点设置间隔图像，将打开“选择占位选择占位图像图像”对话框，该对话框与图对话框，该对话框与图5-19所示类似，新增了所示类似，新增了“对对于于自动伸展表格不要使用间隔图像自动伸展表格不要使用间隔图像”单选按钮，选中该选单选按钮，选中该选项表示避免向表格中自动添加间隔图像。选择对话框中的项表示避免向表格中自动添加间隔图像。选择对话框中的某个选项，单击某个选项，单击“确定确定”按钮，完成相应设置。按钮，完成相应设置。（3）自动伸展列的底部出现波浪线。其余列的底部出现）自动伸展列的底部出现波浪线。其余列的底部出现双横线，表明自动添加了间隔图像双横线，表明自动添加了间隔图像。网页布局和框架网页布局和框架3.列设置为固定宽度列设置为固定宽度p若要将列设置为固定宽度，执行以下步骤：若要将列设置为固定宽度，执行以下步骤：（1）选择列中的一个单元格，打开）选择列中的一个单元格，打开“属性属性”面面板。板。（2）选择）选择“固定固定”单选按钮，在后面的文本框单选按钮，在后面的文本框中输入单元格（列）的宽度。中输入单元格（列）的宽度。网页布局和框架网页布局和框架5.5 设置布局模式