教您深入了解新的Dreamweaver CS3 CSS布局

教您深入了解新的Dreamweaver CS3 CSS布局

现在, 更多的设计人员和开发人员在使用 Web 标准传达内容。 一个例子是从基于表格的布局迁移到层叠样式表 (CSS)。 虽然使用 CSS 等 Web 标准的优点包括更灵活强大的跨浏览器站点设计, 但很多人没有时间学习全新的方法来完成工作。

Dreamweaver CS3 能快速运行, 提供不仅仅使您的页面准备就绪的 CSS 布局以, 还在代码中提供扩展的内嵌注释帮助您学习。 在 Web 上的多数站点设计都可以归类为一栏、两栏或三栏布局, 每一种都有附加元素 (例如页眉、页脚等)。

Dreamweaver 提供全面的基本布局设计列表, 这使您能够通过单击鼠标开始使用 CSS。

在本文中, 创建了 Dreamweaver CS3 中 CSS 布局的 Stephanie Sullivan 将讨论什么是 CSS 布局、如何访问这些布局以及在项目中使用它们时注意什么问题。

Dreamweaver CS3 的一个新功能就是 CSS 布局。 创建这些布局是为了帮助 CSS 新手在站点布局访问快速入门。它们不包含任何样式设置。 它们有大量的注释, 使您在将其改编为自己的设计时, 注意到需要进行的更改及其对布局其他部分的影响。 CSS 布局对于理解 CSS 并已使用 CSS 定位的用户也非常有用。 将其看作一种作为开头的坚实基础的快速入门。 以前, 我通过自己的自定义快速入门使用代码片断。 现在, 我有更多的选择已经打包在 Dreamweaver CS3 内部。

Dreamweaver CSS 布局在以下浏览器正确显示: Firefox (Windows 和 Macintosh) 1.0、1.5 和 2.0; Internet Explorer (Windows) 5.5、6.0、7.0; Opera (Windows 和 Macintosh) 8.0、9.0; 以及 Safari 2.0。 在为 CSS 布局编写代码时, 特别避免了特定浏览器的缺陷。 虽然这些当前和旧有浏览器已经过彻底的测试, 但并不表示 CSS 布局不能在更早的浏览器中工作。 如果需要支持 IE 5 Macintosh 等旧有浏览器, 实际上几乎不需要添加内容。 这是 Greg Rewis 和我正在为 New Riders 编写的《Mastering CSS with Dreamweaver CS3》一书所要介绍的内容之一。

CSS 布局有两种访问方式:

* 选择“文件”>“新建”, 然后转到对话框的“空白页”窗格。
* 在 Dreamweaver 欢迎屏幕上, 转到“新建”列并选择底部的“更多…”。

图 1. CSS 布局一览现在, 单击文档内的任何位置和文档窗口底部的标签选择器, 然后右击 body.twoColFixLtHdr。 选择“设置类”>“无”。 这将删除应用到正文选择器的类。

当您考查页面上剩余的选择器时, 您会发现正文选择器外没有字体颜色或大小。 div 上的背景只是表示其起始位置。 除此之外, 没有任何样式。 这些布局都只是不错的结构, 创造性的部分需要您的工作。

最后, 有注释帮助您理解要使用的特定布局类型。 它们直接在 div 中编写 (例如 #sidebar div), “此 div 上的背景颜色将只显示内容的长度。 如果需要分界线, 请将边框放在 #mainContent div 的左侧 (如果它总是要包含更多内容)。”

CSS 也有大量注释, 均在页面分界的选择器之前和个别声明之后。这些 CSS 注释在您需要更改某些值是非常有用, 向您警告页面的其他区域可能受影响。但您可能是更资深的用户, 不需要这些注释, 或者您要保存带注释文件的副本, 然后将无注释的副本放入 Web。 您可以在 Dreamweaver 的“查看和替换”对话框中使用正则表达式以立即搜索所有注释。 如果您不知道自己应如何创建正则表达式, David Powers 已创建了一个供您参考。 它是其网站*的一个扩展部分。 或者, 可以参见 Rob Christensen 的开发人员中心文章“Introduction to Regular Expressions in Dreamweaver*”。
在 #mainContent div 中清除浮动内容

在生成自己的 CSS 布局时, 需要记住以下几点: 首先, 在除绝对定位的布局外的所有布局中, 侧栏是浮动的, 但中心 (#mainContent div) 要迁移以避免浮动栏。 如果您不熟悉浮动的原则, 以下是简洁提示列表 (选息我的开发人员中心文章“Tableless Layouts with Dreamweaver 8*”)。 阅读了解有关浮动和清除的更多信息:

1. 必须赋予浮动内容一个宽度
2. 必须赋予浮动内容一个方向值 (左或右, 不存在上或下)
3. 如果您希望某个浮动内容显示在另一个元素旁边, 则它必须在文档的源顺序中处于该元素的前面。
4. 浮动内容从不覆盖文本和内嵌图像
5. 避免在浮动内容后对块元素使用宽度。 在浮动内容的同一侧使用边距。
6. 由于浮动内容被从文档的“流程中取出”, 所以必须清除另一个容器中的某个浮动内容, 才能使父容器正确地包围它。

在这些布局中, 只需记住一个小小的“转向”。 即如果要在非浮动 div(#mainContent) 中浮动某个内容, 而您想清除该浮动内容, 则应清除所有浮动的 div - 在这种情况下, 还包括侧栏。 当 #mainContent 区域中的后续内容显示在侧栏下方时, 这可能产生理想的效果。

为了保持一致性和帮助我们克服惧怕算术的问题, 我对布局进行了编码。 在三栏布局中, 如果您要浮动所有三个 div, 则必须确保自己的算术正确, 为 #mainContent div 计算出正确的宽度。很容易使用 #mainContent 的边距与侧栏的宽度相同, 从而避免算术计算。 而且, 在某些混合布局中, 计算实际的 #mainContent 宽度可能有问题, 因为在同一布局中您结合使用了 em 和百分比宽度。 因此, 要保持布局的一致性, 我们选择在整个布局中使用一致的边距计算方法。

这就表示, 如果你要清除 #mainContent div 中的浮动内容, 则需要执行以下两项操作之一: 计算 #mainContent 区域的宽度并将其浮动, 同时记住上述浮动原则。 或者, 在 #mainContent 中放入另一个 div, 然后向左或向右浮动。当您将剩余内容放入这个浮动的 div 中后, 就可以清除相应内容而不会发生问题。

还请记住, 如果您不需要真实的分栏外观, 可以将 #mainContent 区域保留无边距状态, #mainContent 区域的文本将显示在侧栏下方内容结束处。
避免浮动内容丢失根据我以前关于浮动内容的介绍, 还有一点需要记住。 那就是, 如果将一个元素置于比 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”一书中将解决这些问题。