dw中网站的布局必须对显示该网站的设备尺寸作出响应与调整(响应式设计)。流式网格布局提供了一种可视化方式来创建与显示网站的设备相对应的不同布局。本文小编来教大家怎么创建流式网格布局。
可以在dw2017 中编辑现有的流式网格布局。但是无法创建流式网格布局。
相反,在 dw2017 中可使用 bootstrap 创建响应式布局。
操作方法如下:
1、选择文件 - 流式网格(传统)。
2、媒体类型的中央将显示网格中列数的默认值。要自定义设备的列数,请按需编辑该值。
3、要相对于屏幕大小设置页面宽度,请以百分比形式设置该值。
4、还可更改栏间距宽度。栏间距是两列之间的空间。
5、指定页面的 CSS 选项。
单击“创建”后,系统会要求您指定一个 CSS 文件。您可以执行以下操作之一:
· 创建一个新的 CSS 文件。
· 打开一个现有的 CSS 文件。
· 指定作为流式网格 CSS 文件被打开的 CSS 文件。
默认情况下显示适用于移动电话的“流式网格”。此外,还显示“流式网格”的“插入”面板。使用“插入”面板中选项可创建您布局。
要转而设计适用于其它设备的布局,请单击设计视图下方各个选项中的对应图标。
6、保存此文件。保存 HTML 文件时,系统提示您将依赖文件(如 boilerplate.css 和 respond.min.js)保存到计算机上的某个位置。指定一个位置,然后单击“复制”。
boilerplate.css 基于 HTML5 样板文件。该文件是一组 CSS 样式,可确保在多个设备上渲染网页的方式保持一致。respond.min.js 是一个 JavaScript 库,可帮助在旧版本的浏览器中向媒体查询提供支持。
以上就是c4d创建流式网格布局的操作方法,网格布局功能运用范围很广,例如,在桌面计算机、平板电脑和移动电话上查看网站的时候可以使用流式网格布局为其中每种设备指定布局。根据在桌面计算机、平板电脑还是移动电话上显示网站,将使用相应的布局显示网站。希望大家可以熟练掌握运用c4d创建流式网格布局的操作方法。