Support Home | Webstyle | Tutorials

Macromedia Dreamweaver and Microsoft FrontPage Integration

Adding a graphic created with Webstyle to a Dreamweaver or FrontPage document is a quick and simple 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 Webstyle NavBar into Dreamweaver, but the process is the same for any of the other Webstyle graphic types and very similar if you are using FrontPage.

Open your Dreamweaver document and place your cursor where you'd like your graphic to appear on the page (it can be a new or existing page, but if new we recommend saving the page before you continue).

Once you have created and saved your NavBar in Webstyle, it will be placed exactly where your cursor is. Of course you can subsequently move it about, just like any other graphic.

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

Now you can customize the Webstyle template graphic by clicking the buttons down the left hand side, which will open the editing dialogs - text, color, size etc. As you make changes the image will be instantly updated in the preview window.



Click on Save, give your graphic a name - note you can also save your graphics separately from your HTML if required - and click Save & Exit. Webstyle 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 at the original cursor position.

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 menus 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.