How to Create a One-Column Fluid Grid Layout in Dreamweaver - dummies

How to Create a One-Column Fluid Grid Layout in Dreamweaver

By Janine Warner

Before you dive into creating a complicated fluid grid design in Dreamweaver, consider trying a simpler one. Start by creating a simple, one-column fluid grid layout, following these easy instructions:

  1. Choose File→New.

    The New Document window opens. Note: Make sure you have completed the site setup process before you start working on a new fluid grid layout.

  2. From the left side of the screen, select Fluid Grid Layout.

    The New Document window options change to the fluid grid options.


  3. Specify the number of columns you want in each of the three layouts.

    To add or remove columns, select the text field over each column in turn and enter the number of columns you want.

  4. Specify the percentage of the browser window you want each layout to cover.

    Select the text field below each layout in turn and enter a number representing the percentage of space you want the layout to cover when the design is viewed in a browser window. For example, by default the desktop layout is set to take up 90 percent of the available space, but you could change it to 95 percent to give yourself more design space and reduce the margin space.

  5. Change the percent of column width to alter the amount of margin space between each column.

    By default, Dreamweaver sets each margin to take up 25 percent of the available space.

  6. Use the drop-down list to specify a doctype.

    By default, fluid grid layouts are created using the HTML5 doctype. Unless you need to change the doctype to be more compatible with other formatting used in your website, HMTL5 is the recommended option for responsive web designs.

  7. Click Create.

    The Save As dialog opens ready to save a CSS file.

  8. Enter a name for your CSS file and click Save.

    A new HTML file opens in the Dreamweaver workspace, but is not yet saved. The CSS file you named is saved and its name becomes visible in the Files panel.

    Note: Unlike the process of creating other types of pages in Dreamweaver, the CSS file is saved first and the HTML file is saved in a later step.

  9. Choose File→Save

    The Save As dialog box opens.

  10. Enter a name for your HTML file, and click OK.

    The Save As dialog box closes and a notice appears in Dreamweaver informing you that your fluid grid layout requires two additional files: boilerplate.css and respond.min.js.

  11. Click OK to copy the boilerplate.css and respond.min.js files to your site folder.

    All three files are added to the Files panel and you return to your newly named HTML file open in the Dreamweaver workspace.


  12. Give the page a title by entering text in the Title field at the top of the workspace.

And that completes the process of creating a new set of files for your fluid grid layout.