设置“容器”的宽度
要理解一个关键点：我们通常不是直接设置 <body> 标签的宽度，而是创建一个“容器”（<div>），然后将所有页面内容都放在这个容器内，这样做的好处是，我们可以让内容居中，并在容器两侧留出空白，使页面看起来更美观、更易于阅读。
（图片来源网络，侵删）
使用“辅助功能”快速设置（入门级）
这是最直接、最简单的方法,适合新手快速设置一个固定宽度的页面。
-
打开你的 HTML 文件。
-
在设计视图中，点击页面顶部的
<body>标签,选中整个页面内容区域。 -
在右侧的 “属性” 面板中，找到 “辅助功能” 按钮（通常看起来像一个带问号的圆圈或一个辅助功能图标）。
（图片来源网络，侵删） -
点击“辅助功能”按钮,会弹出一个对话框。
-
在 “类” 的下拉菜单中，选择 “container”，如果你没有看到这个选项，可以先在 CSS 中创建一个名为
.container的类。 -
勾选 “使容器居中” 选项。
-
点击“确定”。
（图片来源网络，侵删）
你需要手动添加 CSS 来定义 .container 的宽度：
- 切换到 “CSS 设计器” 面板。
- 点击 “源” 选项卡，选择你的 CSS 文件（
style.css）。 - 点击 “选择器” 选项卡，点击 “添加选择器” 图标。
- 输入
.container并按回车。 - 在下方的 “属性” 区域，找到 “盒” 模型。
- 在 “宽度” 字段中输入你想要的值，
1200px。
这样，你的页面就有了一个固定宽度为 1200px 的居中容器。
使用“CSS 设计器”进行专业设置（推荐）
这是最灵活、最专业的方法,推荐所有用户使用。
场景 A：设置固定宽度
假设你想创建一个宽度为 1200px 的居中容器。
-
创建容器：
- 在设计视图中,将光标放在页面顶部。
- 在 “插入” 菜单中选择 “布局对象” -> “。
- 在弹出的对话框中，为这个 Div 设置一个 ID，
#main-container，然后点击“确定”。
-
应用样式：
- 打开右侧的 “CSS 设计器” 面板。
- 确保你的 CSS 文件已加载。
- 在 “选择器” 部分，点击 “添加选择器” 图标，输入
#main-container并回车。 - 在下方的 “属性” 区域，展开 “盒” 模型。
- 宽度: 输入
1200px。 - 边距: 勾选“居中”,这样容器就会在浏览器窗口中水平居中。
场景 B：设置响应式宽度（现代网页标准）
现代网页通常使用响应式设计，让页面能适应不同尺寸的屏幕，最常用的方法是设置 最大宽度 和 自动边距。
- 创建容器（同上），
#main-container。 - 应用样式：
- 在 “CSS 设计器” 中为
#main-container添加以下样式： - 宽度: 输入
100%，这会让容器宽度始终占满其父元素（这里是<body>）的宽度。 - 最大宽度: 输入
1200px，这是关键！它限制了容器的最大宽度，在大屏幕上不会显得过宽,在小屏幕上则会自动缩小。 - 边距: 勾选“居中”,实现水平居中。
- 在 “CSS 设计器” 中为
这种设置方式非常灵活：
- 在手机上：容器宽度是屏幕的 100%。
- 在平板上：容器宽度是屏幕的 100%。
- 在宽屏桌面显示器上：容器宽度会保持在 1200px，并在屏幕上居中显示,两侧留出空白。
使用“媒体查询”实现不同屏幕不同大小（高级）
这是响应式设计的进阶技巧,可以为不同设备设置不同的页面宽度。
我们希望当屏幕宽度小于 768px（平板或手机）时，容器宽度变为 100%,并去掉左右内边距。
- 在 “CSS 设计器” 中，确保你正在编辑
#main-container的样式。 - 在 “属性” 面板的右上角，点击 “媒体查询” 按钮。
- 在弹出的对话框中，选择 “最大宽度”，并输入
768px，然后点击“确定”。 - 你正在为小于 768px 的屏幕编写样式。
- 在 “盒” 模型中，修改以下属性：
- 宽度:
100% - 内边距: 将左右内边距（
padding-left和padding-right）设置为0。
- 宽度:
这样，当浏览器窗口宽度小于 768px 时，容器就会自动切换为全屏宽度,没有左右留白。
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 辅助功能 | 快速、简单，无需写代码 | 不够灵活，难以进行精细控制 | 新手入门、快速搭建简单页面框架 |
| CSS 设计器 | 灵活、专业、可视化操作，是 DW 的核心功能 | 需要理解基本的 CSS 概念 | 绝大多数情况下的首选方法 |
| 媒体查询 | 实现真正的响应式设计，体验最佳 | 概念稍复杂，需要针对不同设备进行测试 | 现代网页开发，确保在手机、平板、电脑上都有良好体验 |
给新手的建议：
- 从方法二开始，使用
width: 100%; max-width: 1200px; margin: 0 auto;这个“黄金组合”,它几乎能满足所有现代网页的需求。 - 养成良好习惯：始终使用一个容器
<div>包裹你的所有内容，而不是直接设置<body>的样式。 - 多切换视图：在 DW 的 “实时视图”、“实时代码视图” 和 “代码视图” 之间切换,可以更好地理解你的代码是如何工作的。
