下面我将为你提供一个详细的、分步的教程，从准备工作到最终完成一个完整的 950px 宽度的模板。
（图片来源网络，侵删）
第一部分：准备工作与核心概念
在开始之前,我们需要明确几个关键点：
- 950px 是什么？ 这通常指的是内容区域（Content Area）的宽度，而不是整个浏览器的宽度,整个页面背景通常是铺满全屏的。
- 布局方式： 我们将使用最稳定、最常用的
<div>+ CSS 的方式进行布局，这是 Dreamweaver 的核心功能。 - Dreamweaver 版本： 本教程基于较新版本的 Dreamweaver（如 CC 2025 及以后），其代码视图、实时视图和 CSS 设计器功能非常强大，老版本（如 CS6）的步骤类似,但界面可能略有不同。
第二部分：分步制作教程
我们将创建一个典型的三栏布局模板：一个页眉、一个包含侧边栏和主内容区的主体部分,以及一个页脚。
步骤 1：创建新文件并设置基本结构
-
打开 Dreamweaver，选择
文件 > 新建。 -
在弹出的窗口中，选择
HTML，然后点击创建。
（图片来源网络，侵删） -
你会看到一个默认的 HTML5 文档结构，我们需要修改一下,并添加我们的容器。
-
修改
<body>标签内的内容： 删除 Dreamweaver 默认生成的所有内容（如<h1>标签），替换为以下结构化的<div>：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>950px 模板</title> <!-- 我们将在下一步创建并链接 CSS 文件 --> <link rel="stylesheet" href="style.css"> </head> <body> <div id="page-container"> <header id="main-header"> <h1>网站标题</h1> <p>这里是网站副标题或导航菜单</p> </header> <div id="main-content-wrapper"> <aside id="sidebar"> <h2>侧边栏</h2> <p>这里是侧边栏内容。</p> </aside> <main id="primary-content"> <h2>主内容区</h2> <p>这里是网站的主要文章或内容。</p> </main> </div> <footer id="main-footer"> <p>© 2025 版权所有</p> </footer> </div> </body> </html> -
创建 CSS 文件：
- 在 Dreamweaver 中，选择
文件 > 新建。 - 选择
CSS，然后点击创建。 - 一个空白 CSS 文件会出现，立即
文件 > 另存为，并将其命名为style.css，并保存在与你的 HTML 文件同一个文件夹中。 - 回到 HTML 文件，确保
<head>标签中的<link>标签正确指向了style.css。
- 在 Dreamweaver 中，选择
步骤 2：设置 CSS 样式（核心步骤）
我们来编写 CSS，将这个结构变成一个漂亮的 950px 模板。
（图片来源网络，侵删）
-
打开
style.css文件,开始编写样式。 -
重置默认样式并设置全局样式（推荐做法）： 在 CSS 文件开头添加以下代码,可以消除不同浏览器之间的默认样式差异。
/* style.css */ /* 1. 重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 关键！让 padding 和 width 计算更直观 */ } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.6; background-color: #f4f4f4; /* 给整个页面一个浅灰色背景 */ color: #333; } -
创建并居中 950px 的主容器： 这是最关键的一步，我们用一个
#page-container来包裹所有内容，并设置其宽度为 950px，然后通过margin: 0 auto;使其水平居中。/* 2. 主容器 - 950px 宽度并居中 */ #page-container { width: 950px; margin: 20px auto; /* 上下 20px，左右 auto 实现水平居中 */ background-color: #fff; /* 内容区域背景为白色 */ border: 1px solid #ddd; /* 可选：加一个边框 */ box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 可选：加一个阴影，增加层次感 */ } -
设置页眉样式： 让页眉充满整个容器的宽度,并添加一些内边距和背景色。
/* 3. 页眉 */ #main-header { background-color: #333; color: #fff; padding: 20px; text-align: center; } -
设置主体内容区（三栏布局）： 这里我们将使用 Flexbox，这是现代 CSS 布局最简单、最强大的方式，我们将让
#main-content-wrapper成为一个 flex 容器。/* 4. 主体内容区 - 使用 Flexbox 布局 */ #main-content-wrapper { display: flex; /* 将子元素变为 flex 项目 */ } /* 侧边栏样式 */ #sidebar { width: 250px; /* 侧边栏固定宽度 */ padding: 20px; background-color: #e9e9e9; order: 2; /* 可选：将侧边栏放在主内容区后面 */ } /* 主内容区样式 */ #primary-content { flex: 1; /* 关键！这会让主内容区占据所有剩余空间 */ padding: 20px; order: 1; /* 可选：将主内容区放在前面 */ }- Flexbox 解释：
display: flex;让#main-content-wrapper能够控制其子元素的排列。#primary-content上的flex: 1;是一个神奇的属性，它会让该元素自动伸缩，填满父容器中除了#sidebar之外的所有空间，这样，无论侧边栏多宽,主内容区都会自适应。
- Flexbox 解释：
-
设置页脚样式： 和页眉类似,让它充满容器宽度。
/* 5. 页脚 */ #main-footer { background-color: #333; color: #fff; text-align: center; padding: 10px 20px; }
步骤 3：在 Dreamweaver 中查看和调整
-
实时预览： 在 Dreamweaver 的设计视图中，你应该能看到一个大致成型的布局，但最准确的预览方式是点击右上角的
实时视图按钮，它会以浏览器的模式渲染你的页面,让你看到最终效果。 -
使用 CSS 设计器： Dreamweaver 的
CSS 设计器面板是可视化管理 CSS 的利器。- 在代码视图中点击一个元素（
#page-container）。 - 在右侧的
CSS 设计器面板中，你会看到该元素的所有 CSS 规则。 - 你可以直接在这里修改
Width为950px，勾选Margin的A(Auto) 来实现居中，或者修改Background颜色等，修改会实时反映在实时视图中。
- 在代码视图中点击一个元素（
-
并测试： 在 HTML 代码中向各个
<div>添加更多文本、图片等，观察布局是否稳定，Flexbox 布局非常健壮，即使内容增多,布局通常也不会错乱。
第三部分：完整代码示例
HTML (index.html)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">950px 模板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-container">
<header id="main-header">
<h1>我的网站</h1>
<nav>导航菜单 | 关于我们 | 联系我们</nav>
</header>
<div id="main-content-wrapper">
<aside id="sidebar">
<h2>侧边栏</h2>
<p>这里是侧边栏内容，可以放置广告、分类、最新文章等。</p>
<img src="https://via.placeholder.com/200x150" alt="占位图">
</aside>
<main id="primary-content">
<article>
<h2>主文章标题</h2>
<p>这是主内容区的第一段文字，通过使用 Dreamweaver 和 CSS，我们轻松创建了一个固定宽度的布局，主内容区会自动填充剩余空间，非常灵活。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</article>
</main>
</div>
<footer id="main-footer">
<p>© 2025 我的网站. 保留所有权利。</p>
</footer>
</div>
</body>
</html>
CSS (style.css)
/* style.css */
/* 1. 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
/* 2. 主容器 - 950px 宽度并居中 */
#page-container {
width: 950px;
margin: 20px auto;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
/* 3. 页眉 */
#main-header {
background-color: #2c3e50;
color: #fff;
padding: 20px;
text-align: center;
}
#main-header nav {
margin-top: 10px;
font-size: 0.9em;
}
/* 4. 主体内容区 - 使用 Flexbox 布局 */
#main-content-wrapper {
display: flex;
}
/* 侧边栏样式 */
#sidebar {
width: 250px;
padding: 20px;
background-color: #ecf0f1;
order: 2; /* 将侧边栏放在主内容区后面 */
}
#sidebar img {
max-width: 100%;
height: auto;
margin-top: 15px;
border: 1px solid #bdc3c7;
}
区样式 */
#primary-content {
flex: 1; /* 占据所有剩余空间 */
padding: 20px;
order: 1; /* 将主内容区放在前面 */
}
#primary-content article {
margin-bottom: 30px;
}
/* 5. 页脚 */
#main-footer {
background-color: #2c3e50;
color: #fff;
text-align: center;
padding: 10px 20px;
margin-top: auto; /* 可选：确保页脚始终在底部 */
}
第四部分：进阶技巧与注意事项
- 响应式设计（媒体查询）：虽然模板是 950px 固定宽度，但你仍然可以添加媒体查询，在小屏幕设备（如手机）上将其改为全宽布局。
/* 在 style.css 末尾添加 */ @media (max-width: 980px) { #page-container { width: 100%; margin: 0; border: none; box-shadow: none; } } - 使用 Dreamweaver 模板功能：如果你希望网站的页眉、页脚和导航栏在多个页面中保持一致，可以使用 Dreamweaver 的
资源 > 模板功能，创建一个模板文件，然后将可编辑区域标记出来，基于此模板创建新页面,修改时只需更新模板即可。 - 代码提示与检查：充分利用 Dreamweaver 的代码提示功能，它能帮你快速输入 HTML 标签、CSS 类名和属性，使用
文件 > 在浏览器中预览来在不同浏览器（Chrome, Firefox, Edge）中测试你的页面,确保兼容性。
通过以上步骤，你就可以在 Dreamweaver 中成功地制作出一个专业、稳定的 950px 宽度网页模板了，这个模板结构清晰,易于扩展和维护。
