Importing to Dreamweaver

We have to open the Dreamweaver site to make the nav bar appear in our site. We will edit the template that is used in the site and replace the existing navigational system.

Opening the template

In the local site window go to the Templates folder and open it by clicking on the little plus sign . In the folder open the template that is named general.dwt

The template has the navigational system in a table of its own and we can conveniently remove the entire table. All we have to do is to select the appropriate <table> tag from the status bar of the document window. To make sure we find the right table we click on the table cell that has the About graphic in it. The tags displayed in the status line look like this:

You can see that the <img> tag for the selected graphic is bolded. All we have to do now is to find the closest <table> tag to the left of the selected image tag.

When we click on the <table> tag the entire table will be selected. You can see that in the display by the border around the table. All we need to do now is to hit the Delete key on the keyboard. The space for the new nav bar is free. We removed the table, Dreamweaver shows the entire document grayed out.

We need to position the cursor in our cleared area. Scroll up the top and click in the table cell that is closest to the banner. We are now ready to import the Fireworks HTML.

Importing the Fireworks HTML

	The screen shot of shows the Fireworks icon in the Common tab of the Dreamweaver MX interface. It is used to integrate Fireworks HTML into Dreamweaver. Click on the icon to launch the import dialog.

We will use the Browse... button to locate the Fireworks HTML file we created earlier. It is in the /graphics/ folder of our site.

It is the only HTML file in the folder, all other files are image files. Click on the filename and select the file by clicking on the Open button. The dialog shown above will appear again and contain a filename in the field on the left of the Browse... button.

There is a checkbox next to the Word Options. Let's check the box - it will cause the Fireworks HTML to be integrated into the current Template and then the external Fireworks HTML file will be removed. This is what we want to do, since the Fireworks HTML file resided inside the graphics folder. In order to clean up the file - which is of no value any longer - we have to check the box. If the box is unchecked the Fireworks HTML file will remain.

Preview the nav bar

When you save the template all files built upon it will be updated. The new nav bar is integrated in the entire site. Preview any file from the site window by pressing F12 to bring up the browser.

The only thing left to do is to create the /contact/ folder with the new content. Since the folder does not exist yet the link is broken. This however will be the end of the navigational graphics tutorial.