8 Replies Latest reply on Feb 9, 2010 11:04 AM by ITLogic

    Quick question about button symbols and simple roll overs

    ITLogic Level 1

      I have bee prototyping my last several web sites in Fireworks before coding it in Dreamweaver. I see two ways to accomplish the same thing and wonder if there is any advantage to either or if its just a user preference of which way to do it.

       

      When creating a simple roll over it seems it can be done 2 ways:

       

      1) Create a slice around the image then, from the slice, select to creatte a simple rollover behavior.

       

      2) Convert the image to a button symbol and then edit the symbol to add the over effect.

       

      Both are simple ways to do it. Is their any advantage to either one?

        • 1. Re: Quick question about button symbols and simple roll overs
          JoyceEvans Level 3

          The advantage to the symbol is that you can make 1 button, add all states then add as many buttons as needed changing the text. The rollover method is quick and easy. BUT, I still prefer to code buttons in Dreamweaver adding the behaviors there. With either method in FW, you can export all states and code in DW. If you want to insert FW code and have working buttons you'll need to export html and images.

          1 person found this helpful
          • 2. Re: Quick question about button symbols and simple roll overs
            ITLogic Level 1

            Thanks Joyce! After creating the roll overs using both methods, I agree. I like converting the image to a button symbol better than adding the roll over behavior. Not to mention, you can save the new button symbol in the common library and reuse it in other projects.

             

            I just didn't know if Fireworks created different or better javascript code depending on the method you used. It is a little weird because I use the export as CSS to create a template to use in Dreamweaver. After getting that sorted out, I then have to export again as HTML so That I can copy the code for the rollovers and save it in an external .JS file.

             

            Its really not a big deal to have to export it two different ways to get everything I need, but it would be nice if they consolidated CSS and HTML exports in one shot in CS5.

            • 3. Re: Quick question about button symbols and simple roll overs
              JoyceEvans Level 3

              Fireworks is more powerful then many think. Not always the best code bit great layout and comping tool!. As you work more with web pages you can learn to make CSS based menus in Dreamweaver :-)

              • 4. Re: Quick question about button symbols and simple roll overs
                ITLogic Level 1

                Boy you're not kidding! Fireworks is priceless. I used to be a little confused on what the point of it was. There was so much overlap between Fireworks and Photoshop and Illustrator, I didn't know what Fireworks was supposed to be used for. Then, I got the video on Fireworks and prototyping from Lynda.com. Holy cow! That was one of the best things I've ever done.

                 

                Sure, it isn't perfect and, like you said, the code it generates is only useful up to a point. For layout and commuicating your design to clients, it is incredible!

                 

                I don't think it was ever intended to be some code generator to the point you don't need Dreamweaver. However, in my workflow, I will usually create my simple base layout in Fireworks and make that my master page. When I'm done, I export the master page as CSS and make that my Dreamweaver template. Once in Dreamweaver, I can use the images exported from all the other pages in Fireworks as well as get all the pixle dimensions I need to line everything up in Dreamweaver to match the layout in Fireworks.

                 

                I LOVE it!

                • 5. Re: Quick question about button symbols and simple roll overs
                  ITLogic Level 1

                  Oh, by the way, you are right again. I usually use the generated JavaScript to do the roll overs, silly me didn't even think to do it will CSS instead. What was I thinking? Thanks for snapping me out of my momentary lack of brain. I will use CSS for the rollovers on the project I'm currently working on... DUH!

                   

                  Oh... also.... WHO DAT! Sorry if you're not a football fan, but I live in New Orleans and getting ready to go to the Saints parade. I'm a little excited. lol

                  • 6. Re: Quick question about button symbols and simple roll overs
                    JoyceEvans Level 3

                    Yea, another Convert to FW!! :-) Not a fan BUT it's all over the news, congrats!

                    1 person found this helpful
                    • 7. Re: Quick question about button symbols and simple roll overs
                      Jim_Babbage Level 4

                      Yes Fireworks is a great tool. I'm very happy to hear also that you enjoyed the Rapid Protoyping title at lynda.com. I had a lot of fun putting that together.

                      • 8. Re: Quick question about button symbols and simple roll overs
                        ITLogic Level 1

                        Hey WOW! The man himself. Yes, your Lynda.com title is a MUST. Very cool tutorial. I mentioned earlier that I was always confused on what the purpose of Fireworks was when Photoshop and Illustrator come in the CS suite. It wasn't until I watched that video that I realized what the point of Fireworks was. Adobe should market Fireworks as their prototyping tool and not a graphics editor. I think there are still very many people with Fireworks who still don't really know what the point of the program is.

                         

                        I think I saw a CS3 title on Lynda.com about the design workflow. There should be, if not already, a title that shows the workflow of using Photoshop, Illustrator, Dreamweaver and Fireworks together in a project from conception to implementation. It gets a little confusing because there is so much overlap in functions between all the Adobe programs.