9 Replies Latest reply: Oct 17, 2010 11:53 AM by skudman1 RSS

    Transferring PNG from Fireworks to Dreamweaver as HTM

    lady.cherz

      I am having a problem with CS5.  I am building whole webpages in Fireworks on the design and button work.  In CS3, I would hit export choose where the htm and png and images went and Fireworks would export the whole page as an htm that I could build the page around.  In CS5, I am only getting a bit of the htm showing up.  It is like the whole file is lost somewhere in transition.  I tried updating html in Dreamweaver on the png and the mess that ensued wasn't even close to useable.  What am I missing to make this export go smoothly?

        • 1. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
          MurraySummers ACP/MVPs

          I am building whole webpages in Fireworks on the design and button work.

           

          This is a very poor approach.  The HTML written by FW (or by any graphics application) is unsuitable for production work, and will break unexpectedly as you begin to add page content to it.  You can use FW to design the graphics, but you should definitely build your HTML in DW.

           

           

          Taking a Fireworks comp to a CSS-based layout in Dreamweaver

          http://tinyurl.com/2a2o44g (this links to the following URL - http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html)

          http://tinyurl.com/23dmder (this links to the following URL - http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html)

          • 2. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
            lady.cherz Community Member

            Neither of your links work.  I may have not explained myself well.  It is the buttons, button states, links, rollovers and such that I am building in Fireworks along with the designs for the page.  The rest of the code, I add once in Dreamweaver but I bring in the png with the design there.  It is how to import the HTM and keep it intact, as we could with CS3 and CS4 that I am not achieving in CS5.

            • 3. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
              MurraySummers ACP/MVPs

              Try again please - this is a forum software glitch....

               

              I think it is unwise to use *any* FW HTML at all, even the bit you are describing.

              • 4. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                lady.cherz Community Member

                Broken link?

                 

                 

                Send us an e-mail.

                 

                The page you are attempting to access may have moved.
                Check out the Developer Connection article archive,
                organized by product and technology.

                 

                 

                Links just won't work.  When I am done with the png and export it to Dreamweaver, I bring the code to w3c.org standards that is output by Fireworks.  If I am building a swf in Flash is very similar to what I am achieving with Fireworks in a png.  Acceptable or not to someone else, if I can use that htm as part of my xhtml strict and achieve my goal, is what I would like to achieve with CS5 as I did with CS3 and CS4.

                 

                This is not the page that I am currently working with but an example of how I am using these png's.  http://www.localclipz.com/index.html

                • 5. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                  MurraySummers ACP/MVPs

                  Sorry about that!

                   

                  Try this link -

                   

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

                   

                  I bring the code to w3c.org standards that is output by Fireworks.

                   

                  The problem is not with the code meeting standards, it's with the code being designed in a monolithic fashion.  FW does its best to make the code EXACTLY reproduce the graphic layout you have used, and it does a good job with that.  But as soon as your content changes 'shape' the layout falls apart.  It's this issue that FW cannot anticipate, but that you as a web developer can and should as you build your pages.  FW's HTML is NOT suitable for production work, period, and is only useful for rapid prototyping of website layouts for presentations.

                  • 6. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                    lady.cherz Community Member

                    That article is exactly what I am talking about using.  When I go to do the export, the files are being lost in space in CS5.  How to get the export to work in CS5 is what I am trying to accomplish and it is not happening.  I tried updating HTML in Dreamweaver but I am doing something wrong in this process and all the help that I have read is not accomplishing the task. 

                    • 7. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                      lady.cherz Community Member

                      Had some luck and just got an htm to transfer from fireworks to Dreamweaver.  From what I read in your article that was provided, a CSS file and library should have exported too and did not.  I am wondering if my defaults are setup wrong to acheive this.  Am exploring a library export feature now. 

                       

                      I do understand your point of view on the sizing on content, that requires an update in Fireworks to achieve, unless I cut out each element of the design to incorporate the content.  I am a student and have not had javascript and PHP yet.  Once I do, then my methods will change, for now I rewrite the xhtml of the Fireworks htm output so that I can keep my designs as designs.   Been playing with this in my spare time a bit and am rather liking the flexibility that I can enjoy by doing up whole pages rather quickly and standards compliant.  Not the intention of the developers but my work is gaining popularity as I muck along.  Instead of piecing together 100 picture puzzles with reams of divs, I am coming at the approach in a different manner.  Unorthodox yes, but the design flexibility is interesting and my SEO is great once completed.  This is the main reason I wish to continue to perfect this aspect of my programming.  As I gain experience and more knowledge, I think this aspect is going to allow me to do website designs that will be pleasing to the eye and accomplish a lot of curves that are a totally pain to do with conventional programming.  Sorry to be different and probably totally ignorant in your view.  I just see something that I can use this for in the future and wish to continue perfecting the technique.

                       

                      Flash offers so many advantages that are not available in conventional programming but the SEO of flash needs to be pushed to work well in application.  I do flash, only when I have to for elements.  I have another AS3 class this term and may change my thinking on flash but I am just not pleased with the SEO output so wish to accomplish the affects with Fireworks that are similar to flash.  Not a big fan of a lot of movement on a page so rather fits my preferences with this unique approach that I am trying to perfect.  To each their own but if I can do standards compliant graphics with some of the work taken out by Fireworks, then my webpages are less time consuming than most.

                      • 8. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                        Nancy O. MVP

                        lI wish to continue to perfect this aspect of my programming.  As I gain experience and more knowledge, I think this aspect is going to allow me to do website designs that will be pleasing to the eye and accomplish a lot of curves that are a totally pain to do with conventional programming.  Sorry to be different and probably totally ignorant in your view.  I just see something that I can use this for in the future and wish to continue perfecting the technique.

                         

                        I could teach you to spit into the wind, too.  Would you want to perfect that technique?

                        Shortcuts that produce rigid layouts, fragile code and pages that do not render well in ALL browsers are not shortcuts.  They are a waste of time.   There is nothing to be gained from learning to work this way.

                         

                        To reiterate what Murray already said, don't use graphics apps to generate your code.  Use FW for images only.  Use DW to build web pages.

                         

                        Creating  your first web site in DW CS5 -
                        http://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html

                         

                         

                        Good luck with your project,

                         

                         

                        Nancy O.
                        Alt-Web Design & Publishing
                        Web | Graphics | Print | Media  Specialists
                        http://alt-web.com/
                        http://twitter.com/altweb

                        • 9. Re: Transferring PNG from Fireworks to Dreamweaver as HTM
                          skudman1

                          Good response.  It's just tempting as all the CS5 tutorials show you doing that (good marketing etc...and don't blame them)..  The round trip engineering potential as tempting, but as a coder I agree.  It's like auto code generators from Class Diagrams to Java never work... managers love them, but developers don't cause they just don't work, and create obfuscated code.