3 Replies Latest reply on Oct 16, 2007 10:18 PM by pixlor

    rollover help in site design

    dellvostro
      Newbie to fireworks here. I m more used to PS and exporting to image ready for rollover effects.
      I generally design my entire site page and export to IR, than add the frames to show the rollover effects and export. Seems simple enough. However, I cant for the life of me figure out how to do this in Fireworks.
      Ive tried copying my entire page layout from frame 1 to frame 2 but keep getting lost.
      I tried the simple rollover tutorial, but thats only good if your just creating a rollover button. What if I want to layout entire page and add rollovers within page? How is this achieved? Any help is appreciated. Thanks.
        • 1. Re: rollover help in site design
          Level 7
          What HTML authoring are you using?

          Think about this -

          When you use a graphics editor to write your HTML, the editor assumes that
          EVERY PAGE will have the same shape. It then proceeds to write HTML that
          EXACTLY reproduces the shape of the layout you have built, but at the price
          of extreme rigidity of the resulting HTML (the tables are littered with col-
          and rowspans), which means that if your page shape changes at all (i.e., you
          add more content on one page, or larger graphics on another page), the whole
          layout breaks down.

          Based on my observations of posts on the DW forum over the past 5 years and
          more, fully 30% of the posts there can be attributed to this single issue -
          using wizards to write your HTML (even DW's Layout mode is the same).

          Now - adding interactivity in FW is not exactly the same thing, but it's a
          bad habit that needs to be broken (in my opinion). Use FW to do what it
          does exceptionally well - create graphics for the web. Use your HTML
          authoring for what it most likely also does exceptionally well - create HTML
          pages. Don't get the two mixed up....

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "dellvostro" <webforumsuser@macromedia.com> wrote in message
          news:feljpa$1o3$1@forums.macromedia.com...
          > Newbie to fireworks here. I m more used to PS and exporting to image ready
          > for
          > rollover effects.
          > I generally design my entire site page and export to IR, than add the
          > frames
          > to show the rollover effects and export. Seems simple enough. However, I
          > cant
          > for the life of me figure out how to do this in Fireworks.
          > Ive tried copying my entire page layout from frame 1 to frame 2 but keep
          > getting lost.
          > I tried the simple rollover tutorial, but thats only good if your just
          > creating a rollover button. What if I want to layout entire page and add
          > rollovers within page? How is this achieved? Any help is appreciated.
          > Thanks.
          >

          • 2. Re: rollover help in site design
            dellvostro Level 1
            Hello Murray, Thanks for your reply. I generally do my page layout in photoshop and export to image ready to slice up for rollover effects and export slices in images with an html page where I can then open in dreamweaver and modify.
            Id like to try and do the same using fireworks, but am stuck on rollover part.
            Is my work flow incorrect? Design a page layout in fireworks, then export with slices in html where I can open in dreamweaver and tweak my html page further? Usually, I will delete any areas where I want text, insert a table, and paste my text in that area so its not a graphic.
            I find this less time consuming than creating each image and inserting in dreamweaver piece by piece.
            Maybe this is a bad habit or way of using these programs. I cant write code from scratch. Any suggestions would be appreciated. Thank you.
            • 3. Re: rollover help in site design
              pixlor Level 4
              Yes, your workflow is incorrect. Use Fireworks to make graphics, use Dreamweaver to make HTML.

              In Dreamweaver's design view, use Insert> Image Objects > Rollover Image and you'll get a nice dialog that you can use to specify the images for the roll over, the name of the object (for JavaScript manipulation), the alternate text, and a URL if you want the image to link somewhere. If you haven't inserted a rollover image before, then Dreamweaver will add some nice, tight, compatible code to do it. There's no need to write anything from scratch.

              An odd thing...in design view the insert activity will also add the image's height and width to the image tag, In code view, it won't. Don't know why, but go with design view for inserting images with the menu items.

              As for other suggestions, if you're going to make Web sites, learn enough HTML and JavaScript that you can do simple stuff in code. It's a dangerous precedent, to let your programs do your thinking for you. They tend to get uppity.