基础（31）教您深入了解新的 Dreamweaver CS3 CSS 布局
- 2021-11-23
- 来源/作者： 互联网 / 佚名
- 2 次浏览
现在, 更多的设计人员和开发人员在使用 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 布局一览
两种方法均会向您显示所有选项, 从空白 HTML 文档开始, 依次到一栏、两栏和三栏选项。 这些选项按布局类型组合。
您会注意到多个图标, 这些图标在整个布局中重用。 这些图标注明布局中的栏使用什么样的宽度。 下面还有文本描述。 锁图标指示栏值已使用固定像素大小编写。 弹簧图标及其上方的 em 或 % 表示栏值已使用弹性方法编写 - 基于 em 或百分比。
图 2. 锁和弹簧图标表示已为各个栏赋予什么值
当您通过在对话框中突出显示来选择启动页面的布局类型后, 您就可以进行多种其他选择。 首先, 需要选择文档类型 (HTML 或 XHTML)。其次, 需要选择放置 CSS 的位置。 选择“添加到开头”会将 CSS 选择器置于文档开头, 使其在您开发页面时显得简单。 然后, 可以使用将的 CSS 管理功能将其移动到外部文件。 选择“新建文件”会将 CSS 选择器置于链接到 X/HTML 文档的新 CSS 文件。最后, 选择“链接到现有文件”会使您能够使用链接图标将 Dreamweaver 指向外部 CSS 文档。 但请记住, 您的选择器名称必须与提供的 X/HTML 文档名称匹配。
CSS 布局的五种类型概述
有五种基本布局定位类型可供选择:
* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。 这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。
* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。
* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。
* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。
* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。
了解和使用 CSS 布局
让我们创建一个 CSS 布局并看看其中的内容。 转到“新建文档”对话框, 选择使用 XHTML 1.0 Transitional 文档类型的 2 栏固定、左侧栏、页眉和页脚, 将 CSS 置于文档开头。 单击“创建”。
您可能注意的第一点就是所有 CSS 选择器都以类 .twoColFixLtHdr 开头。 这种子节点选择器告诉您要使用的是任何页面类型。 twoCol 表示两栏, Fix 表示固定布局, Lt 表示左栏, Hdr 表示有页眉和页脚。 所有页面使用相同的顺序, 因此, 打开不同的类型时这些都有相应的意义。
此类在每个选择器之前的原因是为了使您能够组合布局, 从而编写更有效的 CSS。 Dreamweaver 将类放于每个页面的正文元素上, 我们刚创建的布局显示 <body class="">。如果您的客户端需要不同类型的页面, 一些有两栏, 另一些有三栏, 您可以为两种类型的页面组合 CSS。 为 p、h1、h2、h3、ul、ol等编写的选择器可以编写为简单的类型选择器, 甚至可以编写为有分支名称和类型选择器 (例如 #mainContent h1) 的子节点选择器以保持不同页面类型之间的一致性。 无需重写所有内容 - 只需保持布局部分所需的选择器 - 针对组合页面时的每种页面类型。
如果只要使用一种页面类型, 可以将这些类一起删除。 我自己操作时会删除它们, 因为当它们存在时, 更难阅读 CSS 面板中的选择器名称。但是, 它们也很容易删除。 只需突出显示文档的 CSS 中的 .twoColFixLtHdr 类 (以及其后的空间)。 按 Ctrl/F (Windows) 或 Cmd/F (Mac) 可以打开“查找和替换”对话框。它将在窗口的“查找”部分打开, 其中包含突出显示的类。 请确保“查找范围:”设置为“当前文档”, “搜索:”设置为“源代码”, 并将“替换”区域留空。 单击“替换全部”。 Dreamweaver 会很快将这些类从文档中搜索出来。
图 3. “查找和替换”会很快将外来类从文档中搜索出来
现在, 单击文档内的任何位置和文档窗口底部的标签选择器, 然后右击 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”一书中将解决这些问题。
图 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 页面*的最新文章和教程。
