Dreamweaver DIV/ CSS Layout

This entry is part 7 of 20 in the series Dreamweaver CS5 Tutorial

Now it is time to complete the Dreamweaver DIV/ CSS Layout.

Using the same principles that we used to create the header area with its associated div tag and css style, let us now create the menu area, the content area and the footer area.

  • Click the ‘Code’ or ‘Split’ buttons to see the HTML code create thus far.

  • Click after the header div tag ends (so that the next div tag is inserted after the header div).

Create a menu div tag and style (the same way you created the header div and style.

  • Insert > Layout objects > Div tag
  • Enter ‘menu’ against ID
  • Click the  ‘New CSS Rule’ button
  • Make sure that the style rule will be defined in ”style.css’
  • Click the OK button
  • Enter the following properties:

  • Click the ‘OK’ button to save the CSS Rule definition for #menu in style.css
  • Click the ‘OK’ button to save the ‘menu’ Div tag
  • The web page and code will look like this. The menu div is created and styled. The text “Content for  id “menu” Goes Here” is automatically inserted by Dreamweaver (though you may not be able to see it because of the black background of the menu area). Select and delete this text.

Click after the menu close tag in the Code view

Now let us create the content area:

  • Insert > Layout objects > Div tag
  • Enter ‘content’ against ID
  • Click the  ‘New CSS Rule’ button
  • Make sure that the style rule will be defined in ”style.css’
  • Click the OK button
  • Enter the following properties:

  • Click the OK button to store the style and then click the OK button to store the div tag.
  • Save the template and the associated CSS [File > Save all Related Files].

Finally let us create the footer area:

  • Insert > Layout objects > Div tag
  • Enter ‘footer’ against ID
  • Click the  ‘New CSS Rule’ button
  • Make sure that the style rule will be defined in ”style.css’
  • Click the OK button
  • Enter the following properties:
    • Background > Background color: #000
    • Box > Width: 100% , Height: 30 px
  • Click OK and OK
  • Select and delete the text “Content for id “footer” Goes Here”
  • Save all related files

Now the basic layout of the webpage is ready.


Dreamweaver CS5 Tutorial

  1. Dreamweaver Cs5 Tutorial
  2. Define Site
  3. Dreamweaver CS5 Template
  4. Dreamweaver Website Layout
  5. CSS Layout – Dreaweaver CS5
  6. Dreamweaver CS5 Website Header
  7. Dreamweaver DIV/ CSS Layout
  8. Dreamweaver Menu
  9. Editing Styles in Dreamweaver
  10. Editable Regions in Dreamweaver Template
  11. Webpages in Dreamweaver
  12. Linking to webpages in Dreamweaver
  13. Styles for text links in Dreamweaver
  14. Web Page Content
  15. Text Styles in Dreamweaver
  16. Heading Styles | Dreamweaver
  17. Contact Forms | Dreamweaver
  18. Form Styles | Dreamweaver
  19. Test Website | Dreamweaver
  20. FTP/ Upload Files to Hosting Server | Dreamweaver
Series Navigation Dreamweaver CS5 Website HeaderDreamweaver Menu

Posted in Dreamweaver | No Comments »