选择“文件”>“新建”。
上次更新日期：
2024年4月25日
了解 CSS 布局的基本结构以及如何在 Dreamweaver 中使用 CSS 设计页面和内容。
关于 CSS 页面布局
CSS 页面布局使用层叠样式表格式（而不是传统的 HTML 表格或框架），用于组织网页上的内容。 CSS 布局的基本构造块是 div 标签，它是一个 HTML 标签，在大多数情况下用作文本、图像或其他页面元素的容器。 当您创建 CSS 布局时，可将 div 标签放在页面上，向这些标签中添加内容，然后将它们放在不同的位置上。 与表格单元格（被限制在表格行和列中的某个现有位置）不同，div 标签可以出现在网页上的任何位置。 可以以绝对方式（通过指定 x 和 Y 坐标）或以相对方式（通过指定其与当前位置的相对位置）定位 div 标签。 还可通过指定浮动、填充和边距（当今 Web 标准的首选方法）放置 div 标签。
关于 CSS 页面布局结构
在继续阅读本节之前，您应该熟悉基本的 CSS 概念。
CSS 布局的基本构建基块是 div 标记——一个 HTML 标记，在大多数情况下用作文本、图像和其他页面元素的容器。以下示例显示了一个包含 3 个独立 div 标记的 HTML 页面：1 个大型"容器"标记，以及容器标记内的另外 2 个标记（边栏标记和主内容标记）。
A. 容器 div B. 侧栏 div C. 主要内容 div
下面是 HTML 中全部三个 div 标签的代码：
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing.Aenean sagittis.Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
在上述示例中，没有为任何 div 标记附加"样式"。如果没有定义 CSS 规则，每个 div 标记及其内容会位于页面上的默认位置。但是，如果每个 div 标记都有唯一的 ID（如上述示例所示），您可以使用这些 ID 来创建 CSS 规则，应用这些规则后，会更改 div 标记的样式和位置。
以下 CSS 规则可以位于文档的头部或外部 CSS 文件中，它为页面上的第一个或"容器"div 标记创建样式规则：
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#container 规则为容器 div 标记设置样式，使其宽度 为 780 像素，背景为白色，边距为 0（距离页面左侧）， 边框为黑色实线 1 像素，文本左对齐。将该规则应用于容器 div 标记的 结果如下：
A. 文本左对齐 B. 白色背景 C. 1 像素宽黑色实线边框
下一个 CSS 规则为侧栏 div 标签创建样式规则：
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#sidebar 规则为侧边栏 div 标记设置样式，使其宽度 为 200 像素，背景为灰色，上下内边距为 15 像素，右内边距为 10 像素，左内边距为 20 像素。 （默认的填充顺序为顶部-右侧-底部-左侧。） 此外， 该规则通过 float: left 属性定位侧边栏 div 标记，该属性 将侧边栏 div 标记推送到容器 div 标记的左侧。将该规则应用于侧边栏 div 标记的 结果如下：
A. 200 像素宽 B. 顶部和底部填充，15 像素
最后，主容器 div 标记的 CSS 规则完成了 布局：
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
#mainContent 规则为主内容 div 设置样式，左 边距为 250 像素，这意味着在容器 div 的左侧和 主内容 div 的左侧之间放置 250 像素的空间。此外，该规则在主内容 div 的右侧、底部和左侧提供 20 像素 的间距。将该规则应用于 mainContent div 的 结果如下：
完整代码如下所示：
A. 20 像素左侧填充 B. 20 像素右侧填充 C. 20 像素下方填充
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>无标题文档</title>
<style type="text/css">
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
#mainContent {
margin: 0 0 0 250px;
padding: 0 20px 20px 20px;
}
</style>
</head>
<body>
<!--容器 div 标记-->
<div id="container">
<!--侧边栏 div 标记-->
<div id="sidebar">
<h3>侧边栏内容</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div 标记-->
<div id="mainContent">
<h1> 主要内容 </h1>
<p>Lorem ipsum dolor sit amet，consectetuer adipiscing elit。Praesent aliquam，justo convallis luctus rutrum。</p>
<p>Phasellus tristique purus a augue condimentum adipiscing。Aenean sagittis。Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 级别标题</h2>
<p>Lorem ipsum dolor sit amet，consectetuer adipiscing elit。Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
</body>
注释
以上示例代码是使用 Dreamweaver 附带的预设计布局创建新文档时，用于创建两列固定左侧边栏布局的代码的简化版本。
使用 CSS 布局创建页面
在使用 Dreamweaver 创建新页面时，可以创建一个已包含 CSS 布局的页面。 Dreamweaver 附带 16 个可供选择的不同 CSS 布局。 另外，您可以创建自己的 CSS 布局，并将它们添加到配置文件夹中，以便它们在“新建文档”对话框中显示为布局选项。
使用 CSS 布局创建页面
在"新建文档"对话框中，选择"空白页面"类别。（它是默认选择。）
对于“页面类型”，请选择要创建的页面类型。
注释
必须为布局选择 HTML 页面类型。 例如，您可以选择 HTML、ColdFusion®、PHP 等。您无法使用 CSS 布局创建 ActionScript™、CSS、库项目、JavaScript、XML、XSLT 或 ColdFusion 组件页面。"新建文档"对话框中"其他"类别中的页面类型也限制包含 CSS 页面布局。
对于“布局”，请选择您要使用的 CSS 布局。 您可以从 16 种不同的布局中进行选择。预览窗口显示布局并提供所选布局的简要说明。
预设计的 CSS 布局提供以下类型的列：
固定
列宽是以像素指定的。 列不会根据浏览器大小或网站访客的文本设置调整大小。
液态
列宽度指定为网站访客浏览器宽度的百分比。如果网站访客将浏览器设置得更宽或更窄，设计会相应调整，但不会根据网站访客的文本设置进行更改。
从“文档类型”弹出菜单中选择文档类型。
从"布局 CSS 位置"弹出式菜单中选择布局 CSS 的位置。
添加到文档头
将布局的 CSS 添加到要创建的页面头中。
新建文件
将布局的 CSS 添加到新的外部 CSS 样式表，并将新样式表附加到您正在创建的页面。
链接到现有文件
允许您指定包含布局所需 CSS 规则的现有 CSS 文件。当您想要在多个文档中使用同一个 CSS 布局（其 CSS 规则包含在单个文件中）时，此选项特别有用。
执行下列操作之一：
- 如果您从"布局 CSS"弹出菜单中选择了"添加到头部"（默认选项），请单击"创建"。
- 如果您从"布局 CSS"弹出菜单中选择了"创建新文件"，请单击"创建"，然后在"保存样式表文件为"对话框中为新的外部文件指定名称。
- 如果您从"布局 CSS"弹出菜单中选择了"链接到现有文件"，请通过单击"添加样式表"图标将外部文件添加到"附加 CSS 文件"文本框中，填写"附加外部样式表"对话框，然后单击"确定"。完成后，请在"新建文档"对话框中单击"创建"。
注释
选择"链接到现有文件"选项时，您指定的文件中必须已经包含 CSS 文件的规则。
当您将布局 CSS 放入新文件或链接到现有文件时，Dreamweaver 会自动将该文件链接到您正在创建的 HTML 页面。
注释
Internet Explorer 条件注释 (CC) 有助于解决 IE 渲染问题，即使您选择"新建外部文件"或"现有外部文件"作为布局 CSS 的位置，这些注释仍然嵌入在新 CSS 布局文档的头部中。
（可选）您也可以在创建页面时将 CSS 样式表附加到新页面（与 CSS 布局无关）。要执行此操作，请单击"附加 CSS 文件"面板上方的"附加样式表"图标并选择一个 CSS 样式表。
有关此过程的详细演练，请参阅 David Powers 的文章：自动将样式表附加到新文档。
向选项列表添加自定义 CSS 布局
创建一个 HTML 页面，其中包含您想要添加到"新建文档"对话框选项列表中的 CSS 布局。布局的 CSS 必须位于 HTML 页面的 <head> 区域中。
注释
为了使您的自定义 CSS 布局与 Dreamweaver 附带的其他布局保持一致，您应该使用 .htm 扩展名保存 HTML 文件。
将 HTML 页面添加到 Adobe Dreamweaver CS5\\Configuration\\BuiltIn\\Layouts 文件夹中。
（可选）将布局的预览图像（例如 .gif 或 .png 文件）添加到 Adobe Dreamweaver CS5\\Configuration\\BuiltIn\\Layouts 文件夹中。Dreamweaver 附带的默认图像是 227 像素宽 x 193 像素高的 PNG 文件。
注释
为预览图像指定与 HTML 文件相同的文件名，以便您能够轻松管理它。例如，如果您的 HTML 文件名为 myCustomLayout.htm，请将预览图像命名为 myCustomLayout.png。
（可选）通过打开 Adobe Dreamweaver CS5\\Configuration\\BuiltIn\\Layouts\\_notes 文件夹，复制并粘贴同一文件夹中任何现有的笔记文件，然后为自定义布局重新命名副本，为您的自定义布局创建笔记文件。例如，您可以复制 oneColElsCtr.htm.mno 文件，并将其重新命名为 myCustomLayout.htm.mno。
（可选）为自定义布局创建笔记文件后，您可以打开该文件并指定布局名称、描述和预览图像。
