How to Add Fluid Elements to a Layout in Dreamweaver

After you create a fluid grid layout in Dreamweaver, the next step is to add <div> tags or other elements to make up the sections of the design. You have two options when you design pages in Dreamweaver CC: use <div> tags or use HTML5 tags.

Both work similarly in these fluid layouts, but using HTML5 tags, such as the <header> and <footer> tags, has some advantage, because the tags add additional meaning and structure to your web page.

To add <div> tags, HTML5 tags, and other elements to a fluid grid layout, follow these instructions:

  1. Choose Insert→Structure→Navigation.

    Alternatively, you can click Navigation in the Structure Insert panel.

  2. Select the Insert as Fluid Element check box in the Insert dialog box.

    When you use the fluid grid layout features, you must select this option when you add tags.

    image0.jpg
  3. In the Insert dialog box, select whether you want to use the class or ID selector to create a new style for the tag you're inserting and then enter a name for the new style.

    Even when you insert HTML5 tags, you must create a corresponding class or ID style that can be used to format the element in all three layouts.

    Class style names must begin with a dot (.) and ID style names must begin with the pound sign (#).

  4. Click OK.

    The tag is added to the layout, forming a new box in the layout, and the corresponding style name is added three times to the CSS layout.

  5. Select the initial <div> tag that was included in the layout and then click the small trash can icon that appears at the bottom right of the <div> tag to delete it.

    Although you can keep the initial <div> tag included in fluid grid layouts, or you can rename the style applied to it.

  6. Choose Insert→Structure→Article.

    The Insert Article dialog box opens (similar to the Insert Header dialog box).

  7. Select the Insert as Fluid Element check box in the Insert dialog box.

  8. In the Insert dialog box, select whether you want to use the class or ID selector to create a new style for the tag you are inserting and enter a name for the new style.

  9. Click OK.

    The tag is added to the layout, forming a new box in the layout, and the corresponding style name is added three times to the CSS layout.

  10. Add as many elements as you want for your layout by repeating Steps 6–9.

    You can add HTML5 elements to your fluid grid layout by clicking their corresponding icons in the Structure Insert panel: one navigation, one header, two articles, and one footer.

    Note that in the code, Dreamweaver adds the prefix fluid- to the name of each style you create for your fluid grid layouts.

    image1.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.