Creating the Menu in Dreamweaver CS4

This entry is part 7 of 19 in the series Dreamweaver CS4 Tutorials

Let us now work on the menu area. To do this, let us create a new div called ‘menu’ with the accompanying css rule.

We first need to point the cursor immeadiatetly after the ‘header’ div. We can do this in 2 ways:

1. The first way is in the design view:

  • Select the ‘header’ div by clicking anywhere inside the header area and clicking on the ‘div#header’ tag that appears at the bottom of the screen.
    header-div-selection
  • The header tag area will get highlighted. Click the ‘right arrow’ key of your keyboard to move the cursor immediately after the ‘header’ div.

2. The second way is in the Code View:

  • Click on the ‘Code View’ button.
    code-view
  • Find the code for the ‘header’ div and place your cursor right after the closing div
 tag.
code-view-closing-div-tag

Once you have place your cursor in the right spot, insert a div named menu.

  • Insert Layout Objects > Div Tag
  • ID: menu
  • Click ‘New CSS Rule’ button
    • Selector Type: ID
    • Selector Name: #menu
    • Rule Definition: styles.css
    • Click OK.
  • In the ‘CSS Rule Definition for #menu’ screen give the following properties:
    • Background> Background- image:  images/menu-bg.jpg
    • Box > Width: 100%
    • Box > Height: 32px
    • Click OK
  • Insert Div Tag screen > Click OK.
  • You will see the menu area with the background image and width/ height specified appearing in template.dwt.
  • Delete the default content inserted within the ‘menu’ div and insert the 4 menu images – Home, About Us, Services, Contact Us. The menu div is now complete. We will link the menu images later after we create all the required html pages.
    menu-images


Dreamweaver CS4 Tutorials

  1. Dreamweaver CS4 Tutorial
  2. Define a New Site in Dreamweaver CS4
  3. Create a template in Dreamweaver CS4
  4. Design your template in Dreamweaver CS4
  5. Design the CSS Style Sheet in Dreamweaver CS4
  6. Insert Images in Dreamweaver CS4
  7. Creating the Menu in Dreamweaver CS4
  8. Content in Dreamweaver CS4
  9. Insert Editable Regions in the Dreamweaver Template
  10. Dreamweaver CS4 Template Based Web Pages
  11. Formatting Headings in Dreamweaver CS4
  12. Formatting Images in Dreamweaver CS4
  13. Linking pages in Dreamweaver CS4
  14. Forms in Dreamweaver CS4
  15. Dreamweaver CS4 Form Validation Tutorial
  16. Tables in Dreamweaver CS4
  17. Testing the Website in the Browser
  18. Upload your site with Dreamweaver CS4
  19. How to validate your Contact PHP form in Dreamweaver CS4
Series Navigation Insert Images in Dreamweaver CS4Content in Dreamweaver CS4

Tags: ,
Posted in Dreamweaver | No Comments »