1 Reply Latest reply on Oct 19, 2009 10:44 AM by pixlor

    Fireworks Menu Newbie Question

    CarlyJ

      Hello Everyone,

       

      I am new (but enthusiastic) to Fireworks web development.

      I would like to know what would be the best way to develop a header and a menu bar with pop-up menu for my web site.

      I would like to put a nice picture in the header. Should I combine the picture and the menu in one .png file or should I keep them separate? (How about if I I am creating a nice, big elipse down cut picture header, where in the cut up space I put a nav bar).

      Also I notice that when I create a menu and a pop-up menu even though I use the same fonts - Arial - they look diferent in the main menu and in the pop-up menu? Any suggestions?

      A more general question would be: for creating nice menus is Fireworks the best solution or should I use Photoshop or Dreamweaver?

      Any help whatsoever is very much appreciated.

      I use Fireworks 8.

       

      Thank you,

       

      Carly

        • 1. Re: Fireworks Menu Newbie Question
          pixlor Level 4

          Whatever you do, don't use the menu from Fireworks.

           

          Your life will be much happier if you remember this basic rule: Dreamweaver is for writing code; Fireworks and Photoshop are for making graphics.

           

          Every application has its primary features as well as its "oh yeah, it can also do that" features. Photoshop is for working with photos and it can also produce some Web code. Fireworks is for designing Web layouts and producing Web graphics and it can also produce Web code. But the code from the graphics apps is not nearly as robust as the code you get from Dreamweaver. Code is what Dreamweaver does and it does it exceptionally well. (Can you chop a piece of wood in two with a hammer? Oh sure, but why not use that power saw you have right there, instead?)

           

          Use Fireworks to lay out what you want your page to look like. Slice sections for your graphics and export them. Then, go to Dreamweaver to create your HTML, including your menu bar. It's much less work than setting up a menu bar using Fireworks' fragile (and very ugly) code, importing that code into Dreamweaver, and then trying to figure out why it breaks or any of a number of other problems when you go to edit your page to actually have content.

           

          If you want something beyond a simple menu bar or a menu bar with rollovers, then there are professional plug-ins to Dreamweaver that will give you great results that work in all browsers.

           

           

          CarlyJ wrote:

           

          I would like to know what would be the best way to develop a header and a menu bar with pop-up menu for my web site.

          I would like to put a nice picture in the header. Should I combine the picture and the menu in one .png file or should I keep them separate? (How about if I I am creating a nice, big elipse down cut picture header, where in the cut up space I put a nav bar).

          Also I notice that when I create a menu and a pop-up menu even though I use the same fonts - Arial - they look diferent in the main menu and in the pop-up menu? Any suggestions?

           

          What you can do is place your header image into a Fireworks .png. Add the elements that would make up your menu, graphically. It's helpful to place guides (drag lines from the rulers), where you want the boundaries of your exported images to be. Then, use the slice tool (the green rectangle) to define the areas to be exported. If you name the slices in the Web layer, that will be the image name on export. You can set the export parameters for each slice in the Property Inspector (/Properties panel) at the bottom, or use the Image Preview/Export Preview for a slice. Saving the .png file will save these settings in the .png until you change them. Export your images from Fireworks, then build your HTML and CSS in Dreamweaver.

           

          If the fonts look different, double check that all the parameters are the same. If you want, post your image and someone can have a look at it for you.