用户指南取消(C)

使用流式网格布局的响应性设计

搜索

上次更新日期： 2022年2月18日

是否寻求创建适合多种屏幕的反应迅速的网站？了解如何在 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 DOM 结构可视化。

“插入”面板（“窗口”>“插入”）列出可在流式网格布局中使用的元素。在插入元素时，可选择作为流式元素插入。

当选择一个已插入元素时，页面上会显示用于隐藏、复制或删除 Div 的选项。对于层次相互重叠的 Div，还会显示用于交换 Div 的选项。

选项	描述
交换 Div	交换当前所选元素与上方或下方的元素。
隐藏	隐藏元素。要取消隐藏元素，请执行以下操作之一：要取消隐藏 ID 选择器，请将 CSS 文件中的显示属性更改为块。(display:block) 要取消隐藏类选择器，请在源代码中删除应用的类 (hide_<MediaType>)。
上移一行	将元素上移一行
复制	复制当前所选元素。还会复制链接到该元素的 CSS。
删除	对于 ID 选择器，同时删除 HTML 和 CSS。要仅删除 HTML，请按“删除”。对于类选择器，仅删除 HTML。
对齐	对于类选择器，“对齐”选项充当零边距按钮。对于 ID 选择器，“对齐”按钮将元素和网格对齐。

注意:

可使用上下箭头键循环遍历页面上的元素。选择元素边界，然后按方向键。

要将流体元素嵌套在其它流体元素内，请确保焦点处于父元素内。然后，插入所需的子元素。

也支持嵌套重制。嵌套重制可重制（所选元素的）HTML 并生成相关的流体 CSS。将相应地放置所选元素内包含的绝对元素。也可使用重制按钮重制嵌套元素。

删除父元素时，将删除与该元素、其子元素和关联 HTML 对应的 CSS。也可使用“删除”按钮一并删除嵌套元素（快捷键：Ctrl+Delete）。

新用户？