10 Replies Latest reply on Oct 19, 2010 9:15 AM by bikeman01

    Fireworks vs Dreamweaver


      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.

        • 1. Re: Fireworks vs Dreamweaver
          Nadia-P Level 5

          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.




          1 person found this helpful
          • 2. Re: Fireworks vs Dreamweaver
            bikeman01 Level 1

            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.

            1 person found this helpful
            • 3. Re: Fireworks vs Dreamweaver
              tomrabbit Level 1

              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.

              • 4. Re: Fireworks vs Dreamweaver
                Nadia-P Level 5

                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


                • 5. Re: Fireworks vs Dreamweaver

                  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.

                  • 6. Re: Fireworks vs Dreamweaver
                    bikeman01 Level 1

                    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



                    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.




                    • 7. Re: Fireworks vs Dreamweaver
                      skudman1 Level 1

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

                      • 8. Re: Fireworks vs Dreamweaver
                        bikeman01 Level 1

                        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.

                        • 9. Re: Fireworks vs Dreamweaver
                          tomrabbit Level 1

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

                          • 10. Re: Fireworks vs Dreamweaver
                            bikeman01 Level 1

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

                            it, learn html/css.