Dreamweaver Menu

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

Now that our web layout is ready in Dreamweaver, let us work on the menu. Since the menu will appear in all the pages of the site it is advisable to put this into the template as well.

Our main menu items are going to be images since the text is written in a font that may not be available on all the visitor’s computers. These have already been created in Fireworks and are available in your images folder.

We will simply insert these images into the menu area now. We will link them to the associated pages after we create the respective pages.

To insert the menu images:

  • Click in the menu area
  • Insert > Image > Browse to the images folder and click home.jpg
  • Click the OK button
  • You will see the Home image appears in the menu area of your layout.
  • Click after the home image
  • Repeat the above procedure for the images about-us.jpg, services.jpg and contact-us.jpg.
  • The menu layout now looks like this:

In case you want to use drop down menus you can use the Dreamweaver feature – Spry Menu Bar [Insert > Layout Objects > Spry Menu Bar> then follow the instructions]


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 DIV/ CSS LayoutEditing Styles in Dreamweaver

Posted in Dreamweaver | No Comments »