选择文件 > 流式网格（传统）。
上次更新日期：
2021年12月20日
是否寻求创建适合多种屏幕的反应迅速的网站？ 了解如何在 Dreamweaver 中使用流式网格设计适合移动设备和桌面设备的网站。
网站的布局必须对显示该网站的设备尺寸作出响应与调整（响应式设计）。 流式网格布局提供了一种可视化方式来创建与显示网站的设备相对应的不同布局。
例如，将在桌面计算机、平板电脑和移动电话上查看您的网站。 可使用流式网格布局为其中每种设备指定布局。 根据在桌面计算机、平板电脑还是移动电话上显示网站，将使用相应的布局显示网站。
详细信息：自适应布局与响应式布局
检查模式不可用于流式网格布局文档。
创建流式网格布局
您可以在 Dreamweaver 2017 中编辑现有的流式网格布局。 但是，您无法创建流式网格布局。
相反，在 Dreamweaver 2017 中可使用 bootstrap 创建响应式布局。 有关 Bootstrap 的详细信息，请参阅使用 Bootstrap 文件。
媒体类型的中央将显示网格中列数的默认值。 要自定义设备的列数，请按需编辑该值。
要相对于屏幕大小设置页面宽度，请以百分比形式设置该值。
还可更改栏间距宽度。 栏间距是两列之间的空间。
指定页面的 CSS 选项。
单击“创建”后，系统会要求您指定一个 CSS 文件。 您可以执行以下操作之一：
- 创建一个新的 CSS 文件。
- 打开一个现有的 CSS 文件。
- 指定作为流式网格 CSS 文件被打开的 CSS 文件。
默认情况下显示适用于移动电话的“流式网格”。 此外，还显示“流式网格”的“插入”面板。 使用“插入”面板中选项可创建您布局。
要转而设计适用于其它设备的布局，请单击设计视图下方各个选项中的对应图标。
保存此文件。 保存 HTML 文件时，系统提示您将依赖文件（如 boilerplate.css 和 respond.min.js）保存到计算机上的某个位置。 指定一个位置，然后单击“复制”。
boilerplate.css 基于 HTML5 样板文件。 该文件是一组 CSS 样式，可确保在多个设备上渲染网页的方式保持一致。 respond.min.js 是一个 JavaScript 库，可帮助在旧版本的浏览器中向媒体查询提供支持。
编辑流式网格文档
您可以直接在实时视图中编辑流式网格文档，以便：
- 将 HTML 类与 ID 关联到元素。 有关更多信息，请参阅元素显示。
- 编辑图像属性和文本。 有关更多信息，请参阅快速属性检查器和在“实时”视图中编辑文本。
- 插入新元素。 有关详细信息，请参阅插入流式网格元素。
还可使用元素快速视图使流式网格文档的 HTML DOM 结构可视化。
插入流体网格元素
“插入”面板（“窗口”>“插入”）列出可在流式网格布局中使用的元素。 在插入元素时，可选择作为流式元素插入。
在“插入”面板中，请单击您要插入的元素。
在随后显示的对话框中，单击“之前”、“之后”或“嵌套”，以相对于文档中突出显示的参考元素放置元素。
选择类，或输入 ID 值。 类菜单显示在创建页面时指定的 CSS 文件中的类。
选中“作为流式元素插入”复选框。
当选择一个已插入元素时，页面上会显示用于隐藏、复制或删除 Div 的选项。 对于层次相互重叠的 Div，还会显示用于交换 Div 的选项。
|
选项 |
描述 |
|
交换 Div |
将当前选择的元素与其上方或下方的元素互换。 |
|
隐藏 |
隐藏元素。 |
|
上移一行 |
将元素向上移动一行 |
|
复制 |
复制当前所选元素。 关联到元素的 CSS 也会被复制。 |
|
删除 |
对于 ID 选择器，同时删除 HTML 和 CSS。 要仅删除 HTML，请按 Delete 键。 |
|
对齐 |
对于类选择器，"对齐"选项用作零页边距按钮。 |
注释
可使用上下箭头键循环遍历页面上的元素。 选择元素边界，然后按方向键。
嵌套元素
要将流体元素嵌套在其他流体元素内，请确保焦点处于父元素内。 然后，插入所需的子元素。
也支持嵌套重制。 嵌套重制可重制（所选元素的）HTML 并生成相关的流体 CSS。 将相应地放置所选元素内包含的绝对元素。 也可使用重制按钮重制嵌套元素。
删除父元素时，将删除与该元素、其子元素和关联 HTML 对应的 CSS。 也可使用“删除”按钮一并删除嵌套元素（快捷键：Ctrl+Delete）。
