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

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(自动将样式表附加到新文档)。

 

推荐阅读