Dreamweaver CC教程：使用 CSS 布局创建页面

Dreamweaver CC教程：使用 CSS 布局创建页面

使用 CSS 布局创建页面
在使用 Dreamweaver 创建新页面时，可以创建一个已包含 CSS 布局的页面。Dreamweaver 附带 16 个可供选择的不同 CSS 布局。另外，您可以创建自己的 CSS 布局，并将它们添加到配置文件夹中，以便它们在“新建文档”对话框中显示为布局选项。

使用 CSS 布局创建页面

1、选择“文件”>“新建”。
2、在“新建文档”对话框中，选择“空白页”类别。（它是默认选择。）
3、对于“页面类型”，请选择要创建的页面类型。
注意:
必须为布局选择 HTML 页面类型。例如，可以选择 HTML、ColdFusion®、PHP 等等。不能使用 CSS 布局创建 ActionScript™、CSS、库项目、JavaScript、XML、XSLT 或 ColdFusion 组件页面。“新建文档”对话框中的“其他”类别中的页面类型也不包括 CSS 页面布局。
1、对于“布局”，请选择您要使用的 CSS 布局。可以从 16 个不同的布局中进行选择。“预览”窗口显示该布局，并给出所选布局的简短说明。
预设计的 CSS 布局提供了下列类型的列：
固定
列宽是以像素指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。
液态
列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。
2、从“文档类型”弹出菜单中选择文档类型。
3、从“布局 CSS 位置”弹出菜单中选择布局 CSS 的位置。
添加到文档头
将布局的 CSS 添加到要创建的页面头中。
新建文件
将布局的 CSS 添加到新的外部 CSS 样式表，并将这一新样式表添加到您要创建的页面。
链接到现有文件
可以通过此选项指定已包含布局所需的 CSS 规则的现有 CSS 文件。当您希望在多个文档上使用相同的 CSS 布局（CSS 布局的 CSS 规则包含在一个文件中）时，此选项特别有用。
1、执行下列操作之一：

如果从“布局 CSS 位置”弹出菜单选择了“添加到文档头”（默认选项），请单击“创建”。 如果从“布局 CSS 位置”弹出菜单选择了“新建文件”，请单击“创建”，然后在“将样式表文件另存为”对话框中指定新外部文件的名称。 如果从“布局 CSS 位置”弹出菜单选择了“链接到现有文件”，请将外部文件添加到“附加 CSS 文件”文本框中，方法是：单击“添加样式表”图标，完成“附加外部样式表”对话框，然后单击“确定”。完成之后，在“新建文档”对话框中单击“创建”。

注意:
当选择“链接到现有文件”选项时，您指定的文件必须已经有其中包含的 CSS 文件的规则。
在将布局 CSS 放在新文件中或现有文件的链接中时，Dreamweaver 自动将文件链接到要创建的 HTML 页面。
注意:
Internet Explorer 条件注释 (CC) 可以帮助您解决 IE 呈现问题，它一直嵌入在新 CSS 布局文档的头中，即使您选择“新建外部文件”或“现有外部文件”作为布局 CSS 的位置也是如此。
2、（可选）创建页面时，还可以将 CSS 样式表附加到新页面（与 CSS 布局无关）。为此，请单击“附加 CSS 文件”窗格上方的“附加样式表”图标并选择一个 CSS 样式表。
有关这个过程的详细说明，请参阅 David Powers 的文章 Automatically attaching a style sheet to new documents（自动将样式表附加到新文档）。