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

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