Fluid grid layouts (cc) – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 140
Fluid grid layouts (CC)
Note:
Using Fluid Grid layouts
Tutorials on Fluid Grid layouts
Create a fluid grid layout
Insert Fluid Grid elements
Nesting elements
The layout of a website has to respond and adapt to the dimensions of the device on which it is displayed. Fluid grid layouts provide a visual way
to create different layouts corresponding to devices on which the website is displayed.
For example, your website is going to be viewed on desktops, tablets, and mobile phones. You can use fluid grid layouts to specify layouts for
each of these devices. Depending on whether the website is displayed on a desktop, tablet, or mobile phone, the corresponding layout is used to
display the website.
More info:
Dreamweaver 12.2 Creative Cloud release includes many enhancements to fluid grid layouts such as support for HTML5 structural elements, and
easy editing of nested elements. For an overview on the complete list of enhancements, click
Inspect mode for Fluid Grid Layout documents are not available in Dreamweaver 13.1 and later.
Tutorials on Fluid Grid layouts
Create a fluid grid layout
1. Select File > New Fluid Grid Layout.
2. The default value for the number of columns in the grid is displayed in the center of the media type. To customize the number of columns
for a device, edit the value as required.
3. To set the width of a page as compared to the screen size, set the value in percentage.
4. You can additionally change the gutter width. The gutter is the space between two columns.
5. Specify the CSS options for the page.
When you click Create, you are asked to specify a CSS file. You can do one of the following:
Create a new CSS file.
Open an existing CSS file.
Specify the CSS file being opened as a Fluid Grid CSS file.
The Fluid Grid for mobile phones is displayed by default. Also, the Insert panel for Fluid Grid is displayed. Use the options in the Insert
133