Creating Template Driven Websites With Fireworks 4 & Dreamweaver 4

The process of updating your website may seem like a fun task at first. You may feel as though you’re really accomplishing a lot by working with your code and images everyday…getting things just right. But believe me, it’s gets old quick.

Enter Fireworks and Dreamweaver.

This lethal combo from Macromedia makes updating your website a breeze. Files created in Fireworks can be exported as GIFs or JPGs for use in Dreamweaver, but unlike many other graphics apps, you can specify the source file for each of your images in Dreamweaver to allow for easy updating. With a simple click, you can edit your Fireworks images and auto-save the results. I’ll show you how…

We’ll start with a simple example:

Create a page header that includes the date for updating.

1. Open Fireworks and create a 468 x 60 document.
2. Being an example, I’m not going to go really in-depth on how to create your banner. For our purposes, just create a simple text-based banner, as I have below, with the date. Be sure NOT to convert your text to paths!
3. In your document’s Optimize settings, choose GIF format. Click, File/Export to export your document as a GIF file. (For ease of use, create a folder on your desktop for all files related to this tutorial.)
4. Save your document in PNG format by clicking File/Save. Use the same filename that you used for the GIF version.
5. Open Dreamweaver and click File/Save to save your HTML Page. (Save your document first so that your images links will be relative.)
6. Open the Objects toolbar if it is not already open and click the Insert Image button. Find the banner you just created (GIF version and insert it into your HTML page. Save your HTML document.
7. Now you should have an HTML page with the banner you created. No big deal right? Now to the easy updating part…
8. Right click on your image and select “Edit With Fireworks 4”. When Fireworks 4 Launches, hit “Yes”, you do want to specify the source file. Find the file you just made in Step 4.
9. It will open the PNG file you just created. Simply make the necessary changes to your image, and hit Done. Fireworks will auto-save your image under the PNG name.
10. When you bring up Dreamweaver, the image will be the one you just modified in Fireworks.

This Dreamweaver feature should decrease your update time, and increase your productivity.

Murdok provides free highly informative newsletters for web developers, IT professionals and small business owners. We deliver 50 million email newsletters per month and have over 4,000,000 unique opt-in subscribers. From our extensive range of email newsletters we can provide you with a selection of newsletters that best meet your interests.