Skip navigation
tomrabbit
tomrabbit
Currently Being Moderated

Fireworks vs Dreamweaver

Sep 7, 2009 5:19 AM

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.

20986 Views   10 Replies   Latest reply: bikeman01, Oct 19, 2010 9:15 AM
 
Replies
  • Nadia-P
    Currently Being Moderated
    1. Nadia-P,
    Sep 7, 2009 5:22 AM   in reply to tomrabbit
    Report

    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

     
    |
    Mark as:
  • bikeman01
    Currently Being Moderated
    2. bikeman01,
    Sep 8, 2009 2:04 AM   in reply to Nadia-P
    Report

    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.

     
    |
    Mark as:
  • tomrabbit
    Currently Being Moderated
    3. tomrabbit,
    Sep 11, 2009 1:19 AM   in reply to Nadia-P
    Report

    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.

     
    |
    Mark as:
  • Nadia-P
    Currently Being Moderated
    4. Nadia-P,
    Sep 11, 2009 4:55 AM   in reply to tomrabbit
    Report

    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_proto typing.html

     
    |
    Mark as:
  • skudman1
    Currently Being Moderated
    5. skudman1,
    Oct 16, 2010 6:54 PM   in reply to Nadia-P
    Report

    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.

     
    |
    Mark as:
  • bikeman01
    Currently Being Moderated
    6. bikeman01,
    Oct 17, 2010 4:27 AM   in reply to skudman1
    Report

    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

     
    |
    Mark as:
  • skudman1
    Currently Being Moderated
    7. skudman1,
    Oct 17, 2010 8:30 AM   in reply to bikeman01
    Report

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

     
    |
    Mark as:
  • bikeman01
    Currently Being Moderated
    8. bikeman01,
    Oct 18, 2010 12:58 AM   in reply to skudman1
    Report

    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.

     
    |
    Mark as:
  • tomrabbit
    Currently Being Moderated
    9. tomrabbit,
    Oct 19, 2010 6:07 AM   in reply to skudman1
    Report

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

     
    |
    Mark as:
  • bikeman01
    Currently Being Moderated
    10. bikeman01,
    Oct 19, 2010 9:15 AM   in reply to tomrabbit
    Report

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

    it, learn html/css.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points