Creating a graphic within Macromedia Dreamweaver or Microsoft FrontPage

Adding a graphic created with Menu Maker to a Dreamweaver or FrontPage document is a quick and simple 4 step process. And it's just as easy to edit it later if you decide to change it!

This tutorial will demonstrate how to insert a Menu Maker NavBar into Dreamweaver, but the process is very similar if you are using FrontPage.

Step 1 - In Dreamweaver/FrontPage, place your cursor where you'd like your graphic to appear

Once you have created and saved your NavBar in Menu Maker, it will be placed exactly where your cursor is. Of course, once it is in your HTML editing program, you can move it about just like any other graphic.

Step 2 - Go to Insert / Xara Menu Maker / NavBar

When you installed Menu Maker a new 'Menu Maker' option was added to the insert menu of Dreamweaver / FrontPage. Now if you go to the insert menu and select Menu Maker and then NavBar, Menu Maker will start and open directly at the preview page for NavBar designs.

Step 3 - choose and customize a design from the Menu Maker templates

Now you can customize the graphic by clicking the buttons down the left hand side, which will open the editing dialogs. As you make changes the image will be instantly updated in the preview window. Refer to the Intro tutorial for help on editing the Menu Maker graphics.

Step 4 - Save it
Click on Save, give your graphic a name - you can also save your graphics separately from your HTML - and click Save & Exit. Menu Maker will close and the NavBar will be inserted into your Dreamweaver or FrontPage document along with all the necessary HTML and JavaScript.

And here you can see the final result with the NavBar inserted into the page.

You can edit the graphic again by simply selecting it and clicking Edit in the Property Inspector in Dreamweaver, or double-clicking on the graphic within FrontPage.

It really is as simple as that, in just a couple of minutes you can insert a customized NavBar complete with mouseover state into your Dreamweaver/FrontPage document, without having to worry about copying across the graphics, the HTML or the JavaScript - all that has been automatically created and placed into the Dreamweaver folder.