6 Replies Latest reply on Jun 10, 2010 1:07 AM by Michel Bozgounov

    Export Image and CSS

    gdallas Level 1

      Downloaded the trial of FW CS5 last night, and am having trouble exporting things properly, i.e. images and text.


      PLease see attached. purely as a simple example, how would i export everything as a backgound image apart from the text that i highlighted in red box. I want the text to be selectable text in a browser? i just cantwork out how to have text when you also need a bacground image behind it too. post-45041-12759431957837.jpg


      Many thanks

        • 1. Re: Export Image and CSS
          Linda Nicholls Level 4

          Here's one method. Export the image from Fireworks without the text. Set up your site in Dreamweaver and open a new HTML page. Use the image as a background image for the page. Type your text over it.

          • 2. Re: Export Image and CSS
            gdallas Level 1

            to be honest, i was hoping to this all in fireworks, rather than  the old school method. sitegrinder can do this, so why not fireworks!

            • 3. Re: Export Image and CSS
              Linda Nicholls Level 4

              Fireworks is not a WYSIWYG editor. It was designed for creating web images  and prototypes rather than actual web pages. That said, I'd like to see it become the best of all WYSIWYG editors myself. :-)  It has the potential to be far superior to programs like iWeb, RapidWeaver, Serif Web Plus, Xara Web Designer, etc.

              • 4. Re: Export Image and CSS
                gdallas Level 1

                ye, not entirley convinced by that argument to be honest. once upon a time maybe.


                From CS4, they introduced export to "CSS & images", which was a very exciting thought. Then, when you actually get down to use its, its appears to be extremely limitied in what it can do, which is pathetic IMHO.


                Take a company like Sitegrinder. they developed their product, which takes your layered photoshop PSD, and "grinds" it into nice clean HTML, CSS java script, php etc etc.


                take my original site, http://lensart.me.uk/gallery.html i designed it in photoshop, then (and i kid you not) 30 mins later its was a uplaoded to my site in proper web format, with the contact form and gallery and all. its also editable in a Deamweaver too. 


                I think i will stick with sitegrinder, i just thought i'd download the trial of fireworks to see what it can do...not much by the looks of things.

                • 5. Re: Export Image and CSS
                  Michel Bozgounov Level 2

                  Fireworks is a graphic design editor with prototyping/wireframing capabilities. Period.


                  Yep, it can export as CSS/HTML and automatically slice a design, but this is for prototyping. This is not intended to replace a good coder/designer!


                  In Photoshop and Illustrator, you create stunning visual design and then a great coder creates the code (while exporting various images for the design).


                  In Fireworks, you also create stunning visual design and then a great coder must create the code (while exporting various images for the design). But you also get the benefit of being able to quickly export a working, clickable HTML/CSS prototype! But that's it. A prototype!


                  So if you don't know how to edit 5 lines of code in Dreamweaver or Coda or any other great code editor, you better forget about Fireworks and grab a copy of FrontPage...


                  You see, WYSIWYG will never work properly in the Web design field. Dreamweaver once tried this, and results were poor. Now the Dw team is back on track, and you can see that version CS5 concentrates on code much more! This is wise.


                  Yes, there are tools that can automatically create code, "slice", export the images, align them, format and place text, create the HTML/CSS for you and so on. But none of these tools will ever come close to a good, thoughtful coder's level of work. Professionals use Fireworks, Photoshop and Illustrator to create the design (the visuals). Then they export the visual design as various, optimized images, and create the code by hand. There's no shortcut.


                  So Fireworks is fine. It just seems, you are not quite aware what it is for... (And yes, Adobe is to blame, too... Because they do not educate their users...)

                  • 6. Re: Export Image and CSS
                    Michel Bozgounov Level 2

                    And let me just add that the code you show us (the automatically generated website) is far from perfect. Lots un-needed stuff inside -- but this is how machines "think". They don't, actually.


                    Fireworks is a great tool that can help you create great visual design. But it won't help you much creating the code for you (or thinking for you). This is the part where a human enters the scene... And same is with Ai/Ps. Just my two cents...