9 Replies Latest reply on Aug 28, 2009 2:11 PM by trixiesirisheyes

    FW4 and CSS export help

    Deaf Mike Level 1

      hi hope someone can give me some tips or tech help with FW4:


      i created the FW file.  you can see the general layout and how i put things on different layers here:




      i was hoping to make a temp box called the flash box so i could swap it out for a SWF file


      i made a large BG image.  i know you can make a 2-pixel BG and repeat it, but i wanted to make a large one so i could learn how to make it fill the screen, then put the website over it.


      after i exported the file with the CSS and images setting, here is the result:






      what happened to the blue BG image?  it doesn't show up in the export


      i can't seem to figure out where the flash box went.  it didn't export.


      hope someone can help.  i'm starting to enjoy learning FW4 as i see the benefits of using it.  i heard elsewhere that FW4 is not a full-blown web creation tool.  at the same time, i'd like to learn all of the work-arounds so i can use it together with work-arounds to get going on web pages.


      thanks - deaf mike

        • 1. Re: FW4 and CSS export help
          Jim_Babbage Level 4

          We can probably help better if you post a link to the PNG file.


          And that's correct, Fireworks is not a full blown web page creation 

          tool. It's not even a half-blown web page creation tool. It is a 

          screen graphics editing/creation tool, with some html features built 

          in for prototyping.


          In the meantime, try creating a rectangle that covers the entire page 

          design. Make sure your background image is inside that rectangle, then 

          slice it as a background slice and set it to repeat X. FW should 

          understand that the background slice is supposed to repeat within the 



          If you haven't done so, I strongly recommend you read this article:




          Jim Babbage

          • 2. Re: FW4 and CSS export help
            Nadia-P Level 5

            Seriously, do not use Fireworks to generate the html for your webpage.  It is graphics program with *some* html capabilites, but I would never use it for a live site.  It is always best to create the layout in Fireworks, slice it up as for use as individual images, or uses 'pieces' for background images and write the markup (html + css) in Dreamweaver or a HTML editor of your choice.


            This tutorial may help you make the transition.  Naturally it helps to have at least a basic knowledge of html and css before working with Dreamweaver, it will make using DW so much easier.






            Creating your first website (series)  (using Dreamweaver)

            http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS42d4a1c0291fbe4e59147ede1232ff9686c-8 000.html






            Adobe® Community Expert : Dreamweaver



            Unique CSS Templates | Tutorials | SEO Articles




            • 3. Re: FW4 and CSS export help
              Deaf Mike Level 1

              I want to get better at designing web sites.  My biggest problem, though, is I don't like CSS.  I guess I'm too right-brained to grasp what often looks like programming to me.


              I'll give your tutorial links a chance and see if they help me.  I'm hoping that DW CS4 has more features in it to reduce the amount of CSS-ing you need to know.



              • 4. Re: FW4 and CSS export help
                pixlor Level 4

                Sorry, Mike, but if you want to design Web sites, you're going to need to know what you're doing. Programs can't think; they can't design. Dreamweaver is an HTML/CSS editor, and so it will be better at helping you than Fireworks, which is a graphics program.


                I ran across this beginning-level tutorial, and I think it's very nice:

                http://net.tutsplus.com/tutorials/html-css-techniques/design-and-code-your-first-website-i n-easy-to-understand-steps/

                Give it a try.

                • 5. Re: FW4 and CSS export help

                  I agree to an extent. It is excelent for graphics, but it is pretty good with CSS too, however not perfect. I do all my text content in Dreamweaver, though I use the Lorim Ipsum thing for text place holders to see how it looks.


                  First off, if you didn't know, there is now an enhanced CSS export. Read the 4 page article at the following link. It's good stuff!



                  Once I create my mark-up, I export to CSS and images. I name the file fireworks.htm which creates fireworks.css. The fireworks.css is almost never 100% correct. So I create another file called fireworks_overides.css and link it to my HTML right after the fireworks.css link. This way, If I export the CSS again, I can just overwrite the previous fireworks.css and my fixes I made by hand are still in fireworks_overides.css.


                  Once I have it all sorted out, Fireworks has generated a GREAT starting point for me to create a template in Dreamweaver and go forward with the site development in Dreamweaver.


                  Also, if I use a Menu Bar from the common library, I build a navigation system from that. Whenever I do that, or use anything with a behavior that exports associated Javascript, I also so a regular export of the design to HTML. That way I get the Javascript code needed and can turn that into an external .js file and link it to the final CSS and Images export.


                  Anyway, I think my point was... It is definetly NOT a web editor like Dreamweaver, but it is more than just a graphics program. The CSS it generates still needs some tweeking, but is very usable for live sites. The final product from Fireworks is a GREAT starting product for Dreamweaver.

                  • 6. Re: FW4 and CSS export help
                    Deaf Mike Level 1

                    As I always state, I always appreciate the feedback I receive on my posts.  One thing I want to clairfy though - I never stated that FW was a web designer in that it will create 100% perfect CSS.  What I was hoping FW could do is after I do a layout of a web page in FW, that I could then cut up the design and export along with CSS and the page would have the basic layout translated to a web page.  THAT is what I was really interested in knowing.


                    For example, I did a very simple layout in FW - I then exported it.  It did a nice job, but the wrapper was to the left of the browser.  So then I had to go into CSS and tweak the code to make the page center in the browser.


                    Anyway, I have a question - suppose I am doing a simple FW layout and I want a 980 pixel wide wrapper element.  Can someone tell me how you actually draw a wrapper in FW so that when you export it, it exports the drawn box into the 980 pixel wrapper?


                    Thanks - Mike

                    • 7. Re: FW4 and CSS export help
                      ITLogic Level 1

                      Sorry Mike, I meant that for a different comment on this thread.


                      1) to center your design go to HTML setup... under the File menu and change it to center alignment. You can also set your background image there if you use one.


                      2) If your entire site is 980px fixed, then start with your canvas being 980px wide. Then put a rectangle that covers the canvas completely. That rectangle will be exported as a div container for everything else inside it.

                      • 8. Re: FW4 and CSS export help
                        Deaf Mike Level 1

                        OK, thanks.  This helps a lot.

                        • 9. Re: FW4 and CSS export help

                          When I took a "Creating Web Pages" class at the local community college 6 years, our teacher would not let us use Dreamweaver or GoLive or any other WYSIWYG editor. We had to code by hand. "That way, when your page breaks, and it will break, you will be able to look into the code and fix it." After 6 years of building websites, I can verify this is true. The site WILL break. Dreamweaver's CSS rendering engine, while great now, doesn't work perfectly.


                          AND, often sites will work in Firefox or Safari, but not in Internet Explorer. Or vice versa. Sometimes you even need to introduce hacks into your CSS. Dreamweaver is not going to help you fix it. It just does what you tell it to do.


                          If you want to develop websites and harness the power of CSS, you need to learn CSS, just as much as you need to learn (X)HTML. That way, when you validate your sites (you do validate them to the W3C's HTML and CSS validators, don't you?), and you get an error (which can translate into a site breakage on some platform, on some browser), you'll know how to fix it.


                          Let me put it this way. I make quilts. I love designing them. I love, love, love picking out fabric! I'm really good at it! Cutting up the fabirc is mind-numbingly fun. I **loathe with a passion** piecing the quilt - sewing the pieces together. I pretty much hate doing the applique and embroidery, too, if the quilt needs it. I love the hand quilting. I love the way people love my quilts. So I put up with the parts I loathe or dislike so I can do the stuff I love.