Dreamweaver80第二十三讲 使用“布局模式”进行页面布局和框架的基础知识.doc

第十七讲 使用“布局模式”进行页面布局和框架的基础知识 在上一讲中，我们学习了利用布局模式进行页面布局设计。在本讲中我们继续学习使用“布局模式”进行页面布局和并开始学习框架的基础知识。通过本讲的学习，我们希望达到下面的学习目标： ◆ 设置列宽度； ◆ 使用间隔图像； ◆ 在“文档”窗口中使用框架集； ◆ 设计框架集； ◆ 选择框架和框架集； ◆ 在框架中打开文档。 17.1 设置列宽度 可以为列指定一个特定的宽度或让它延伸以填充浏览器窗口尽量大的部分。也可以使用间隔图像为列指定一个最小宽度。有时 HTML 代码中设置的列宽度与屏幕上的外观宽度不匹配。发生这种情况时，用户可以使宽度一致。 表格中的列可以具有固定的宽度或自动延伸。在布局完成之前让某个列自动伸展可能会对表格布局产生无法预料的效果。为了防止列变得出乎意料得宽或窄，在让某个列自动伸展之前，请先创建完整的布局，并在使列自动伸展时使用间隔图像。如果每个列都包含其他内容，可以使该列保持所需的宽度，则无需使用间隔图像。 如果要使列自动伸展，则单击列标题菜单，然后选择“列设置为自动伸展”，或者先选择列中的一个单元格，然后在属性检查器中单击“自动伸展”。 在给定的表格中用户只能让一个列自动伸展。如果尚未给该站点设置间隔图像，将出现“选择占位图像”对话框。 如果出现“选择占位图像”对话框，请选择下列选项中的一个，然后单击“确定”。 在自动伸展列的顶部或底部会出现波浪线。在包含间隔图像的列的顶部或底部会出现双线。 ? ◇“创建占位图像文件”创建一个 GIF 图像以用作间隔图像，并允许选择一个 存储该间隔图像文件的文件夹，例如站点的图像文件夹。如果没有为站点创 建间隔图像文件，将使用这个推荐的选项； ? ◇“使用现存的占位图像文件”允许指定现有的间隔图像文件用于自动伸展表 格中。间隔图像应该是单像素的透明 GIF； ? ◇“对于自动伸展表格不要使用占位图像”指定 Dreamweaver 应该避免向表格 中自动添加间隔图像。如果插入间隔图像时没有使列自动伸展，则不会出现 此选项。如果选择此选项，则布局中固定宽度的列可能收缩到一个较小的宽 度，甚至收缩为零宽度，间隔图像帮助将布局的结构维持在最初绘制它时的 状态。只有当已经将足够的内容放置在固定宽度的列中以防止它们收缩时或 者已经手动添加了间隔图像时，才使用此选项。 如果要将某个列设置为固定宽度，则选择下列操作之一： ? ◇单击列标题菜单，然后选择“使列宽度固定”。“使列宽度固定”在代码中 为该列指定一个宽度，该宽度与该列的当前可视宽度匹配。 ? ◇通过单击列中的一个单元格的边缘来选择该单元格，然后在属性检查器中单 击“固定”并键入一个数值。 如果用户输入的数值小于列内容的宽度， 则 Dreamweaver 将自动设置宽度以匹配内容的宽度。 操作完成后，在列的顶部或底部会出现列宽度。 如果用户看到一个列的宽度有两个数字，说明 HTML 代码中设置的列宽度与这些列在屏幕上的外观宽度不匹配。可以使代码中指定的宽度与可视宽度相匹配。如果要使宽度一致，先单击欲设置的列的单元格，则可以单击表格标题菜单，然后选择“使所有宽度一致”。Dreamweaver 重置代码中指定的宽度以匹配可视宽度。 17.2 使用间隔图像 若要将列的最小宽度限制到某一特定值，可在该列中插入一个间隔图像。用户也可以从单个列或整个表格中删除间隔图像。第一次插入间隔图像时，用户可以为站点设置间隔图像。 如果要将间隔图像插入到列中，单击列标题菜单，然后选择“添加间隔图像”。 如果尚未给该站点设置间隔图像，将出现“选择间隔图像”对话框。如果出现“选择间隔图像”对话框，请选择一个选项，然后单击“确定”。 Dreamweaver 可以将间隔图像插入到列中。该图像是不可见的，但该列可能稍有移位，顶部或底部会显示双线以表明它包含一个间隔图像。 如果要从单个列中删除间隔图像，先单击列标题菜单，然后选择“删除间隔图像”。Dreamweaver 删除间隔图像。列将可能会产生移位。 如果要从表格中删除所有间隔图像，单击表格标题菜单，然后选择“移除所有分隔符图像”。或者选择该表格，然后单击属性检查器中的“删除所有间隔图像”按钮。整个表格的布局可能会产生移位。如某些列中没有内容，则这些列将可能从“设计”视图中完全消失。 17.3 使用框架进行页面布局 框架布局技术提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同