Fireworks vs Dreamweaver

[tomrabbit]

Just trying to get my head round the point at which you should leave Fireworks to develop in Dreamweaver (sorry, I'm a newbie).

I'm working on a flowchart type diagram, where the various boxes will trigger swap images or hyperlinks to other pages.  I am drawing the chart in Fireworks, because it is clearly a lot easier to position things exactly where you want them.  As far as I am concerned, I can achieve all the functionality I need via Fireworks using hotspots and slices, but I keep reading that FW is more of a web prototyping tool, and the code it exports to DW isn't the most robust.

I want to use a page layout with a top title, and a left hand nav bar, with changing page content in the remaining space.  I planned to set up the actual site with its page layout in DW, but to export the flowchart, which will be the content of the index page, from FW.  Could someone please explain to me the best practice for moving from prototyping in FW to developing in DW?   What I mean is, what bits do you do in FW, and what bits should you do in DW?  Is it better to create the hotspots and slices in DW after export?  Sorry if this is too vague a question.  Any hints, or pointers to where it has already been answered appreciated.

[Nadia-P]

Yes, it's true, it's always best to create the comp in Fireworks and then build the site in Dreamweaver.

If you are going to be using hotspots, again, apply them in Dreamweaver - it does have a hotspot tool.

This may help in the understanding of taking a FWs or PS comp to Dreamweaver.

TAKING FIREWORKS COMP TO DREAMWEAVER:

http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html

[bikeman01]

I design in FW.

Then I get the design agreed with a flat jpg or occasionally a html export (prototyping in Adobe speak).

Then I sliceup main elements and export as jpgs/gifs.

DW is only then used to build html/css webpage.

I never use FW html export.

BTW I am glad to see another FW user. Adobe's repositioning of it as a prototyping tool is confusing and overlooks FWs main strength which is web page design. It is way better for the job than PS and it is such a shame more designers don't use it.

[tomrabbit]

Thanks Nadia.  I did parts 1 and 2 the tutorials, and learnt a lot (abandoned part 3, as it seemd to have no relationship with the preceding 2 parts).  However, I'm not really building a full blown website.  This site will never be public, and will only be used locally, and I am actually using the site as a glorified presentation tool, because the navigation elements will allow the presenter or user to flit around between pages as they want, drilling down to whatever level of detail they require. Essentially I am building a flowchart with attitude.  A previous employee has done a similar thing entirely in Fireworks, with great success, which is how I came to be given this piece of work.  What I need to know is, in this particular case, is there a real benefit in transposing to Dreamweaver, because while I feel I'm getting to grips with Fireworks, I need a lot more time to get my head round Dreamweaver.

[Nadia-P]

In this case it sounds like using Fireworks as a protyping tool may be the go for you... see if this article helps:

Rapid interactive prototyping with HTML, CSS, and JavaScript using Fireworks and Dreamweaver CS4

http://www.adobe.com/devnet/fireworks/articles/rapid_interactive_prototyping.html

[skudman1]

Good Info.  I'm a little overwhelmed with all the features in Fire works.  Im trying to build a corporate web site with a look and feel.  Mostly challanged with the rounded corners borders as it looks like they want to use images for these (one for each corner with drop shadows etc..) but  the rectangles will have to be re-sizable to fit the content.

I hope I'll find if it works during the tutorial, or maybe I should just try it to see how it exports to dream weaver.  So you really recommend doing all this in Fireworks, then exporting to Dream weaver or cut n pasting items from Fireworks to Dramweaver..  thx again greg.  I'm sue it will make more sense when I see what kind of html/css/image code the Fireworks Export makes.   ... -- were using grid960 as well, so I imagine I'll just be integration this in Dreamweaver.

[bikeman01]

Hi Greg

Create the design in Fireworks (rounded rectangles and drop shaddws are a cinch

in FW).

When the client approves the design slice up the image and export the images you

need.

Do not export html from fireworks - it's all absolute positioned divs and only

good for html mockups.

Instead fire up DW and create the div layout you need for your design then use

FWs sliced images as backrounds in the div layout. Better still learn enough

html/css to do this bit in notepad.

DW is best used for file management and server behavours coding rather than as a

wyswyg design tool.

Save the html page as a DWT template and start building the site.

Regards

Les

[skudman1]

Thx.... So the "Export from Fireworks --> DW Html/CSS/Images --> Modify CSS etc."  is not the way to go. -- that would be too easy.   My main concern is the dynamic section headings and backgrounds.   For Example  they want us to use a images for each of the 4 corners.. (which would be a small line as an arc image.... then for the Left Right Borders... an image  760x1 px repeat-y (with the left most grey, and pixel x-axis 758 grey, pixel 759 light grey and px 760 transparent....

Will slices do this, or do I need to make my own "decorative css" ... e.g. build these little images in FW (FW or PS) and then build the div containers with the hooks to place the images....

Just trying to figure what I get automated, and what I'll have to custom..... as I'd like to do this with round trip engineering, but don't see Fireworks doing the repeat--y etc...    

thx a bunch ...   Seems like the DW-WYSIWG looks cool, but better to do your own css etc... ?

[bikeman01]

I usualy do rounded corners as images and make them the backgrounds of

corner divs but unless they are particularly decorative it is again better

to do this entirely in css with no images at all but I haven't done it that

way myself yet.

I use DW 8 so I have long since learned not to rely upon its coding - it's

not bad, it usually works but I often spot things that aren't quite right.

This is obvioulsy going to hasppen as the html/css specs move forward and DW

only catches up with each release. I expect CS5 currently writes very good

code but as I don't rush out and buy the latest version each time it is

better for me to know how to do it by hand.

[tomrabbit]

Wow Greg, it's over a year since I posted this one... seems like a lifetime...

Just to say, personally I have now jumped on the bandwagon.  I would only use Fireworks for mock-up pages or for creating images, and wouldn't export the code to DW.  Although it worked fine in this particular case where it wasn't really a website at all, what nailed it for me was when the users asked for the colour scheme of the site to be changed.  Complete nightmare - I had no text, only images of text created in Fireworks.  I had to change every single image and re-export the lot, then re-apply all the slick Javascript I had added.

Lesson learned - I just hate redoing work!  Now I use Dreamweaver for constructing, CSS for formatting, and through a combination of templates and library items, I have a site where the content can be pretty much maintained by anyone with no web building knowledge, which wouldn't be the case if you constructed entirely in Fireworks.  And if they want the colour scheme changed, no probs, it is the work of a moment...

[bikeman01]

exporting html from fireworks, photoshop of anything else is a no no - don't do

it, learn html/css.