如何在 Dreamweaver 中使用流体网格布局创建快速响应的网站

优质

小牛编辑

144浏览

2023-12-01

是否寻求创建适合多种屏幕的反应迅速的网站？了解如何在 Dreamweaver 中使用流体网格设计适合移动设备和桌面设备的网站。

网站的布局必须对显示该网站的设备尺寸作出响应与调整（响应性设计）。流体网格布局为对应显示该网站的设备而创建不同布局提供了可视化方式。

例如，将在桌面计算机、平板电脑和移动电话上查看您的网站。可使用流体网格布局为其中每种设备指定布局。根据在桌面计算机、平板电脑还是移动电话上显示网站，将使用相应的布局显示网站。

详细信息：自适应布局与响应性布局（英文）

注意:检查模式不可用于流体网格布局文档。

创建流体网格布局

注意:您可以在 Dreamweaver CC 2017 中编辑现有的流体网格布局。但是，您无法创建流体网格布局。

相反，在 Dreamweaver CC 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）。