Dreamweaver DIV/ CSS Layout

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.

Posted in: tutorial web