根据我以前关于浮动内容的介绍, 还有一点需要记住。 那就是, 如果将一个元素置于比 div 允许内容区域更宽的 div 中时, 将会遇到 Internet Explorer 中的浮动内容丢失问题。 一个 div 的内容掉到另一个 div 的最后内容之后时, 就会表现出浮动内容丢失现象。 因此, 如果您的客户使用 Contribute 编辑他们自己的网站, 您需要让他们注意图像大小限制。 对于我们创建的固定宽度布局, 此限制为 490px。 将 #mainContent (250px) 的左边距与该 div 的填充 (两侧各 20px) 之和从布局总宽度 (780px) 中扣除, 即得此值。 780 - 250 - 40 = 490px。基于 em 和百分比的布局的算术有点复杂, 因为它们基于用户的字体大小或浏览器窗口大小。 在我即将与 Greg Rewis 合著的“Mastering CSS with Dreamweaver CS3”一书中将解决这些问题。

图 4.这是当资源宽于所提供空间时 Internet Explorer 中的视图
创建等长栏

我要解决的最后一个问题是我在每个栏开始处留下的注释。 “此 div 上的背景颜色将只适用于相应内容。 如果需要分界线, 请将边框放在 #mainContent div 的左侧 (如果它总是要包含更多内容)。”

事实上, 可以在 #mainContent div 上放入边框, 以可视方式分隔侧栏。 但在很多情况下, 您知道自己会有几个非常短小的页面, 或要使用某些类型的动态内容但无法验证这一点。 也许, 您不想使用分隔线, 而是背景颜色或图案。 在这种情况上, 需要使用伪栏方法。这是我在自己创建的多数站点中使用的一种技巧。 您可以使用任何图像程序创建此图形。 我使用了我钟爱的 Fireworks。

控制我的网页宽度的 #container 为 780px 宽。 如果您要创建一个三栏布局, 您将创建自己的画布和图形, 其宽度与您的页面相同, 以使所有三栏都在一个图形中。 对于我们的两栏布局, 由于 #mainContent 白色, 我们实际上可以使用我们栏宽度的分割。这将是一个重复的分割, 因此您可以保持它的高度为大约 10px。 现在, 使用需要用于栏的颜色画一个 230px 宽的矩形 (200px 宽 + 30px 侧填充 = 230px)。 将其作为 GIF 导出到您站点定义的图像目录中。

在 Dreamweaver 中, 单击您的文档内部和标签选择器, 然后选择 #container。 这将在 CSS 面板中显示 #container 的属性。单击底部要编辑的铅笔图标。 转到“背景”类别>“背景”图像, 然后导航到刚创建的图像。 选择“重复 y”。如果您对该值的“重复 y”部分不熟悉, 则只需告诉图形在 y 轴上 (或在您的页面中从上到下) 平铺。 无需定位图形, 因为默认值为左侧和顶部, 这正是我们需要的初始位置。

在您的浏览器中预览页面以查看完整效果。 请注意, 栏现在如何变为页面全长度? 我保留 CSS 布局的默认灰色, 使您能够发现栏实际停止的位置。 当然, 您无需删除此默认颜色。 虽然您正在使用这种颜色, 但可以随时添加注释或删除 #header 及 #footer 上的颜色。 您将注意到, 由于栏图形置于 #container 上, 栏会穿过这些内容。未声明自己的背景颜色的任何元素将显示此图像。 在某些设计中, 您可能选择保持 #footer 透明, 只需赋予其与 #mainContent div 匹配的边距, 使文本离开栏。 在其他设计中, 可能更需要在 #header 和 #footer 上设置背景颜色或图像。

图 5. 新的伪栏显示为页面全长度
下一步工作

编写本文是为了向您概要介绍并使您了解 Dreamweaver CS3 中的新 CSS 布局。 关于使用和扩展不同类型布局以及了解关于使用 Dreamweaver CS3 的 CSS 的高深内容, 请关注开发人员中心, 其中将会摘录我即将与 Greg Rewis 合著的“Mastering CSS with Dreamweaver CS3”一书。关于 Dreamweaver CS3 CSS 布局的更多信息, 还可以参见 Joseph Lowery 关于例如和定制基于 CSS 的布局*的视频教程, 以及 Jon Varese 关于 CSS 页面布局基础*的文章。 关于 CSS 和 Dreamweaver 的更多常规信息, 请检查 Dreamweaver 开发人员中心 CSS 页面*的最新文章和教程。