14 Replies Latest reply on May 31, 2010 12:22 PM by Chuck A. McIntyre

    Is it possible to design a website completely in Fireworks?

    BrandonFw

      Just wondering if this is possible I used to be a engineering designer (& learned dozens of progams while in the field) & I'm trying to help my buddy with his new business building a website. I have no desire or need to learn code. Fireworks seems easy & I was wondering if it was possible to design a complete website in it?

       

      I'm almost done with his site I exported it as html & images in Fw's CS5 the only problem I'm having is the layout is fixed. I clicked on the center button under the export options but it doesn't do anything?

       

      I would also like the parts (header, nav buttons, images, & text boxes) to change as a proportion of the browser/screen size (I believe this is called flexible) but remain overall centered on all the pages.

       

      Thanks for helping out the newbie, please let me know how I can return the favor it would be my pleasure.

       

      -Brandon

        • 1. Re: Is it possible to design a website completely in Fireworks?
          Linda Nicholls Level 4

          "Fireworks seems easy & I was wondering if it was possible to design a  complete website in it?"

           

          It's possible, but not easy for someone who doesn't know much about web development. Fireworks is not a WYSIWYG editor. It was created for producing images for the web rather than creating actual web pages. There are WYSIWYG editors out there if you look for them. I think it would be super if the future development of Fireworks was headed in that direction. I have a feeling I'm going to get jumped on for saying that. ;-)

          "I would also like the parts (header, nav buttons,  images, & text boxes) to change as a proportion of the  browser/screen size (I believe this is called flexible) but remain  overall centered on all the pages."

           

          Images cannot be resized by the browser. Buttons can be, but only if they aren't images. They need would need to be created with CSS. HTML text will flow in a flexible layout, but as you have observed, Fireworks does not create flexible layouts. There's nothing wrong with fixed layouts. I prefer them myself. It's very tiring to read a column of text wider than 450 pixels.

           

           

           


          • 2. Re: Is it possible to design a website completely in Fireworks?
            Jim_Babbage Level 4

            Fireworks is a graphics application with some HTML capabilities. The HTML and Images export is NOT what you want to use for your friend's web site; it creates a rigid, table-based html layout, made completely of graphics. It's fine for a prototype, but not fine at all for a finished web site. It will not be user or search engine friendly and will not be easy to update.

             

            The other option is CSS and Images export, but it is not a one-button solution. There is every chance that you will still need to tweak the design in an HTML program afterwards.

             

            A good grasp of HTML and CSS is important if you want to go this route.

             

            Jim Babbage

            • 3. Re: Is it possible to design a website completely in Fireworks?
              pixlor Level 4

              BrandonFw wrote:

               

              ... I'm trying to help my buddy with his new business building a website. I have no desire or need to learn code. ...

               

              You can design a site in Fireworks, but sites are built with code. If you don't want to learn how to code, then you should bow out and let/help your buddy  find someone else, especially as this is a site for his new business. If you were helping him with a personal site, then it might be okay. For a business site, however, you should know what you're doing, and that means knowing how to code.

              • 4. Re: Is it possible to design a website completely in Fireworks?
                pziecina Level 6

                Hi

                 

                Designing a web site in fireworks, (or even photoshop) is o/k but under no circumstances should you use the html/css code it creates for a business web site. I can guarantee with about 99.9% certainty that it will at some point 'break' in one of the popular browsers that are in use these days, (remember IE only has about 60% of the market share of browsers in use these days, and that's across all versions of IE, 6, 7, and 8).

                 

                Even the 'experts' at adobe say that one should not use the fireworks code in a live site, but as a design template, for creating the site using a program such as dreamweaver.

                 

                It is possible to get your images, buttons, etc. to resize depending on the users browser window size by using % values and css, but this is a technique that will require a good working knowledge of html and css.

                 

                If this was for a personal site I would not worry about the code being generated by fireworks, but for a business site I would have to agree with pixlor and recommend that this is something better left to a professional, (no insult intended). That is not to say that they could not use your design as a starting point or even as a template for creating the pages.

                 

                For a tutorial on converting a fireworks html/table generated layout to a compliant html/css layout see - http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html.

                 

                PZ

                www.pziecina.com

                • 5. Re: Is it possible to design a website completely in Fireworks?
                  Chuck A. McIntyre Level 3

                  I am re-designing our company's Website using (in order) PhotoShop CS5, Flash (with f4v fullscreen capable video), Fireworks and Dreamweaver CS5. I have always admired the appearance of websites created by graphic artists as opposed to non-artistic "code heads".  It is of course important that the site does not contain code errors or an oddball configuration that will cause it to fall apart when viewed in browsers like, Wheezer Von Hacktule's Web Shredder etc.  I'm a video editor, and can't be bothered with the quantum properties of a pixel and edit from the pixel on up as some of the code heads do.  And their sites look like it.  Look at some of the sites regulars in the Dreamweaver forum have put together... sorry to be a critic.

                   

                  Trust me, unless you are designing Websites for a bank or some top secret government project, the visual design method IS the most quick and straight forward. Yes CSS.

                   

                  Without going into a lot of detail:

                  You start your design with PhotoShop, carefully name your layers (lowercase and use underscores) and put them in order.  Make sure to include "white space" between your graphic elements.  When you are happy with the appearance, open the PSD with Fireworks.  Using the shape tool in Fireworks, create your divs. Give them names like top_head and side_buttons etc. and keep the shape "divs" on the lower layers in Fireworks just above your background.  Run the shapes to the outside edge of your design BUT allow space of about 5 pixels between the divs, keeping them separate. Use the slice tool to tell Fireworks what your exported images are going to be.  Be sure to name them in the Fireworks layer pallette.  Be careful that nothing overlaps the div shape container and that no slice overlaps on to another.  You can better see this by zooming way in on your design.  BTW Fireworks optimizes images for the Web, much better than PhotoShop.  Optimize each image according to its type, photographic, use jpeg, clip art-like images use gif.

                   

                  Don't "slice" text areas you want to remain HTML text as opposed to an image of text.  Fireworks will automatically create that area as text upon export.

                   

                  Export from Fireworks as CSS and images.

                   

                  Open your html page in Dreamweaver.  Some things will be out of alignment.  That is where knowledge of CSS comes in.  Do your refinements in Dreamweaver.  You may need to go back to Fireworks and make some changes, then re-export.

                   

                  OK, so I created a rather complex design and I saved it as a template.  I uploaded the design to our server and checked it in Adobe Browserlab as well as the W3C Markup Validation page.  No alignment errors across many browsers and zero code errors at the W3C Markup Validation page.

                  • 6. Re: Is it possible to design a website completely in Fireworks?
                    Linda Nicholls Level 4

                    Why aren't you designing in Fireworks, Chuck? :-)

                    • 7. Re: Is it possible to design a website completely in Fireworks?
                      Chuck A. McIntyre Level 3

                      Good point.  My brain skipped over the "completely" word. I wouldn't build a site entirely in Fireworks, but Fireworks is of HUGE benefit to site designers when used appropriately with Dreamweaver and other tools.  I use Fireworks as the "second stop" in my design process.  I just see guys tearing their hair out in the Dreamweaver forum, trying to use Dreamweaver at the beginning of their Web page building sequence.

                      • 8. Re: Is it possible to design a website completely in Fireworks?
                        BrandonFw Level 1

                        Thank you so much Linda this was a big help.

                         

                        I used Fw's for all my images, & then just dumped everthing into 1 of Dw's pre coded documents. And, before I put anything in Dw I just changed the colors & text to get it the way I wanted it. I even made a really simple & clean looking flash nav bar in Flash Catalyst!

                         

                        Wish I could show you guys the site but my buddy hasn't bought the domain yet. Haha, I kinda wowed myself with how good it turned out.

                        • 9. Re: Is it possible to design a website completely in Fireworks?
                          BrandonFw Level 1

                          Wow Jim thank you for the great knowledge! This really helped me get a clear understanding of what the program is for & isn't. Thanks again Jim!

                          • 10. Re: Is it possible to design a website completely in Fireworks?
                            BrandonFw Level 1

                            Thanks Pixlor for the great overall understanding of site building! I hope the code is acceptable for a starting site for his business, since I basically used the 1 adobe's engineers created. I see coding is a very important piece of the puzzle & did end up learning some. For example I used IFrames code to intergrate wordpress & Bridge Web gallery's into my generic background. Thanks again Pixlor.

                            • 11. Re: Is it possible to design a website completely in Fireworks?
                              BrandonFw Level 1

                              http://forums.adobe.com/people/pziecinaWow Pziecina, thank your candid wisdom! I really didn't want to do this because it's uses similar skills as my previous career which is not what God wired me to do. But he doesn't have any money to spare right now, & we both are being extremely frugal untill we make it. I'm starting my own business as well tomorrow actually, & I completely agree with you I don't want to waste my time doing something I can't be the best in the world at & I know great proffessional specialists are worth there weight in gold! Thanks again Pziecina!

                              • 12. Re: Is it possible to design a website completely in Fireworks?
                                BrandonFw Level 1

                                Haha thanks Chuck! Wow I really appreciate the humor & step by step workflow process! Great wisdom, thanks again & have a great weekend!

                                • 13. Re: Is it possible to design a website completely in Fireworks?
                                  Jurriën

                                  Hello Brandon,

                                   

                                  I built websites within Fireworks. But most of the time they need some correction. Here I use Dreamweaver. I can recommend the following tutorial. It was for CS4, but I presume it works for CS5 as well: "http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design_02.html". A rule you have to follow: never let your items in Fireworks overlap each other, because this would export your HTML with fixed layers. You have to export overlapping images as a group or as background. But if you follow the tutorial I have mentioned above, you will be an expert at the finish.

                                   

                                  Regards,

                                   

                                  Jurriën

                                  • 14. Re: Is it possible to design a website completely in Fireworks?
                                    Chuck A. McIntyre Level 3

                                    Brandon:

                                     

                                    If you open Adobe Media Player and click on the "Fireworks" category, you will find a video tutorial by Greg Rewis.  This specific tutorial's description is: "Turn a PhotoShop layout into a working Webpage faster than ever."  In my opinion, THIS gem of a Fireworks tutorial is the missing piece of the workflow puzzle, that so many guys struggling in the Dreamweaver forums need to have a look at and learn.  Granted, everyone has a different learning style.  Many creative people are right brain dominant and need software tools that allow them to work visually.  Many of us right brainers like to get things put together first and then iron out the details as needed, without sifting through a jungle of unnecessary detailed mind boggle that doesn't relate to the project at hand.  That's the beauty of this Fireworks tutorial.  The last stop is Dreamweaver, where you put the final touches on your page design.  It may take a few hours of getting everything to align and check out, but it's really not that difficult.