How do Fireworks & Dreamweaver Work Together?

[golfmax13]

Hi,

I only dabble in design and I don't do it for money - just fun. But I'm not having very much fun at the moment. I purchased Macromedia Studio MX 2004 when it came out a year or so ago and I've been frustrated ever since.

Although I have a ton of questions on the programs I'll try to narrow it down to one big concept question. What is the easiest way Fireworks and Dreamweaver can work together?

I've downloaded some templates from designload.net and when I get everything unzipped I have 3 folders; fonts - html - psd. I'm not concerned about the fonts but I'm fairly clueless as to how the html and psd folders entertwine.

I know I can turn the psd files into png's for Fireworks but is that my first step? Also, in the html folder I have the html document(s) and also an image folder with all these sliced images. Naturally I want to tailor their templates to reflect my text and images and that seems to be where I'm getting lost.

Where should I be working to change this template? Do I work with the psd or png to make changes to those files and if so, how do those changes get to the html doc? I've tried this before and after I'm done modifying the png and save images and html my dreamweaver document looks a big maze of mistakes. Chopped up and everything is out of place.

Do I need to modify the images in the image folder? That seems almost impossible because of the odd shaped slices.

I'm just lost that's all. I have read as much as I can on this in every tutorial and thread I could find but they all make it sound like this is a very easy process. So the only thing I can figure is I must be doing this all wrong because this seems like a very difficult process.

If you guys would be so kind as to comment about this or maybe point me in the right direction I would greatly appreciate it!

Thanks Much,

Joe

 

[jshurst]

I am not familiar with MX2004 but nobody else has answered and I'll give it a shot. I feel that Fireworks works very well with Dreamweaver. Open the .png's you have in Fireworks and they should be in layers. The slices are going to be the placeholders so things will look the same as they did before you export them to HTML. Edit these things in Fireworks until you get them to look and behave like you want them to. Then export the HTML to dreamweaver. Make sure to export the images and HTML and put the images in a subfolder. In Dreamweaver just click the Fireworks button and find the html file that you just saved (not all the pics and slices). This HTML page is just a pointer telling the pics and slices how to be assembled.

Also try to keep in mind the size of your pics (navigation bar, menus, whatever you are making). I always design with the measurements showing in pixels. This way you know what you will get on your page when you export it. If you are designing a page that will be displayed on a 800 x 600 resolution monitor then do not make your pics bigger than that. Just one thing to keep in mind.

 

[golfmax13]

Thanks jshurst for the response. I've tried to do everything in FW before and then export to DW but it seems that when it gets over to DW it is totally out of whack.

If you could take a look at this test page I'm working on.

http://3redeemed.com/pgs.htm

This is a jpeg but I've got the png file in FW. I don't really know how to prepare it for export. Like should I be leaving some things out of the png for editible regions in DW? Should I leave the nav bars out and then try to work them in after export to DW? How should I slice this up and especially where the lady is at the top. She overlaps. (no offense lady). But I mean the picture is mostly in the header but some of it will be in the body.

Any light you could shed would be most helpful. I've read the help files and a bunch of tutorials but it seems I learn more when someone actually answers my lame questions. Thanks for taking a crack at this, I appreciate your time!

joe

 

[YNOTU]

Check this link to help with Slicing 101:

http://www.google.com/search?hl=en&q=HOW+TO+SLICE+IN+fireworks+mx&btnG=Google+Search

​