9 Replies Latest reply on Jun 26, 2009 7:06 PM by A. Wayne Webb

    Menu Bar creation question

    A. Wayne Webb Level 1

      I have designed a navigation menu in Photoshop (menu.psd), not much really, that I will be porting over to Fireworks for the creation of the Fireworks html.  As part of the PSD creation process I am adding a spot to include a drop down list.  This list will contain by year the volumes of the publication I have in collection.


      Should I go ahead and set aside the drop down list portion until I port everything over to Dreamweaver?  Or should I try to create the drop down in Fireworks?  I can only suspect that I will need to create the drop down in Dreamweaver within a DIV and then relatively place it where I need it.  To make matters worse I have no experice in creating forms or drop downs.



        • 1. Re: Menu Bar creation question
          Panos Zygopoulos Level 3


          Thanks for the file.

          Where is that spot to include a drop down list? Is this white box at the right?

          If you are a graphic designer and feel more comfortable with graphic design programs you might want to use the css and images exporting option (only FW CS4).

          But, you need to become familiar with the way that option works, so that you get the result that you want.

          This way you could create a drop down list, ready to use in a web site, inside fireworks. There is an item in common library-html folder, combo box. This box, since you export your document as css and images, will work as a real drop down menu inside your web site.

          You could find some articles and videos in adobe.com that will help you to understand how to export css and images.


          -Use the rectangle tool to create your bar.

          -Use text and not vector tools to write characters like  '>' ,  ' | '  .

          -Place slices over objects you want to be exported as images.


          I believe though that If you are creating  just a menu and not a web site, then you should insert your drop down list inside Dreamweaver, edit your images in a graphic design program, and use them in your menu. I think it's a lot faster and easier.

          • 2. Re: Menu Bar creation question
            Jim_Babbage Level 4

            YES! Avoid the FW pop up menus at all costs. Do all that work using 

            Dreamweaver or another commercial extension like Pop Menu Magic from 

            Project Seven.


            Jim Babbage

            • 3. Re: Menu Bar creation question
              A. Wayne Webb Level 1

              Jim & Panos,


              Thank you each.  And welcome aboard to my my hiher lurning Jim. <grin>


              Here is where I stand just now.  My template site file can be viewed at 1896 Brethren's Family Almanac.  The menu bar as shown is just a placeholder Fireworks' PNG image at present.  It can be downloaded here.  As Jim was kind enough to teach me by example it has all the appropriate slices and behaviors in place.  Using the Preview mode in Fireworks it works beautifully.  The PSD it came from can be downloaded here.


              As Panos was kind enough to point out I had created the white box as the container where I would have the drop down list containing year strings.  The box would in either Dreamweaver or Fireworks have coding attached as an overlay for the list.  It would seem that I would be better served doing this in Dreamweaver and will explore the learning curve to do this.  Meanwhile I have a more serious problem.


              In Fireworks I have exported the abovementioned PNG file as a html and images file.  It can be viewed at Menu.HTML.  It looks nothing like the PNG file and has no rollover effects that work as demonstrated in Fireworks' Preview mode.  Did I do something wrong in the exporting?  I tried various options, in all thirty or more, to no avail.


              This HTML, CSS and Menu will be the basis of some 1,154 pages for the almanacs.  This will be split up amongst 21 years' worth.  I have some three or four other years to scan.  My plan is to make the present 1896.CSS the Master.CSS for the whole site.  Each year will have its own header and sidebar.  So the 1896 Brethren's Family Almanac you see at present will in essence be a design template.  There will also be a main site page containing information about the various publishers and the like.


              I also have to integrate the Image Info feature as demonstrated here.  My plan is to use the onClick behavior of the Image Info button in the menu to activate this little pop up window.  Hopefully I am understanding the possibility of doing this correctly.  Now just to figure out to implement it!


              And of course any method whereby I can have a static menu at the root level with only the "go to this web page" links varying amongst the various volumes.  Probably can't be done but it sure would lower the overhead of the site.


              As soon as I get done with the design phase I will decide whether to do something with the footer or remove it.  I have a search engine script around here I purchased but never used.  It was bought as an add on to GoLive but I suspect there should be no problem integrating it either into the Menu.HTML or down in the footer.  I am still open to ideas on that one—include it or not and just where to place it.


              I was hoping Lorraine would chime in.  Between she and Jim the last "lurnin" curve went smooth as butta'!  And thanks one and all for the schoolin'.  Real experience is far better than these darned books!



              • 4. Re: Menu Bar creation question
                pixlor Level 4

                As an alternative, I stumbled upon a CSS menu system here: http://sperling.com/examples/new-menuh/


                I haven't tried it, but it looks like it's been well-tested. The down side is that it requires JavaScript to work. (But, of course you will have a secondary, text-only navigation available, right? )



                • 5. Re: Menu Bar creation question
                  A. Wayne Webb Level 1

                  Glad you chimed in Pixlor.  That moniker envisions such pleasant possible visages.  I have a long-time interest in fantasy realms even though I know that is not how you came up with your apt screen name.


                  I don't think Tedd's method will work for me.  If I was creating a pure css, text only drop down list it would be a beautiful solution.  However, such is not the case.  If you look in his "Some Important things to consider are:" section No. 7 states not to use graphics.  That being said I do plan on exploring his manner of doing things this weekend to see what I may learn.  The java script aspect does not problem me.  Not being able to understand that foreign language I don't tamper with it.


                  I have created a form driven demonstration of the drop down portion of my menu.  This will via relative positioning statements within my menu.html be placed to overlay the white box you see at present in the menu.png file.  And if needed I can remove the white box.  I would prefer to try and make the form transparent in this regard in lieu of removing the white box.  I do like the sublt inner shadow I added to the white box.  You can view the drop down here.


                  And since this drop down will from time to time have additions to it, I need to have it at the root level of my site with each page file referencing to the drop down list.  I would hate to have to update 1,000+ pages just to add another 64 pages — the number of pages in a yearly volume of the 1900s.  By 1900 the publication is generally 64 pages so individually changing all those files would be a total issue of frustration.


                  So other than why Fireworks does not properly export my design to html, and that one still has me stumped, I do have a question or two.


                  I see two ways of going about this.  Have my menu.html at the root level of my site but have each page file reflect with subtle changes the navigation within that yearly volume.  This would take care of the problem of after adding a new volume having to go through 1,000+ pages adding a yearly volume addition.  But I think this may open up a can of worms.


                  Or go ahead and create one menu design for each yearly volume, breaking it up into smaller pieces, and having the dropdownlist.html only at the top level and then overlaid as a div within each file.  How do you reference a html within a html.  I used to do it with frames but that is now frowned upon.  This might be the better way but then how do I in both cases link from within page 354 of 1154 a dropdownlist.html file at the root level?


                  I hope these past two paragraphs came across correctly.


                  I think the best solution at present is to figure out why Fireworks will not properly export my menu design and then pop over to the Dreamweaver forum to answer the design questions.  Unless of course either of you three have any suggestion.


                  Thank you one and all for adding your two cents.  Benjamin Franklin's "a penny saved..." definitively applies.



                  • 6. Re: Menu Bar creation question
                    pixlor Level 4

                    Hee hee. My moniker isn't fantasy-realm inspired, but I like those, too. But...here's a face for ya: http://i183.photobucket.com/albums/x123/pixlor/avatars/lorraine.jpg


                    You should be able to style the drop down box. Check this tutorial on forms for some ideas: http://www.sitepoint.com/article/style-web-forms-css/ then this forum post: http://www.sitepoint.com/forums/showthread.php?t=441545.


                    Every day, I want you to repeat the following phrase five times: "Fireworks is not an HTML authoring tool." Do not use Fireworks to create HTML. Not when you have Dreamweaver. I know it's tempting, but Fireworks's HTML is for prototyping...those quick-n-dirty jobs you throw together to see how something might look. And that's it. When you're building, use Dreamweaver.


                    For a site like yours, organization is key. What you might consider is breaking up your navigation by decades. Then, within each decade, you could have a subnavigation for each year. If you organize your file structure so that each decade is a folder, then you could create your subnavigation as a Server Side Include. Whether or not Includes work for you depends solely upon your Web host. See




                    For example, what you could do is have the select element (drop-down box) navigate a visitor to a main page for each decade...in the decadal folder. Then, if you had a file named "subnav.html" in that folder you would have a line

                        <!--#include virtual="subnav.html" -->

                    placed where your yearly navigation would go. This file would have the same name in each decadal folder, but the contents would be appropriate to the particular decade.

                    So...folder structure and contents:

                    \ [index.html, other main html files]

                         \images [common images, such as navigation]

                         \1900 [index.shtml, subnav.html  (extension on index is probably .shtml for the include to work)]

                              \images [images for 1900-1909]

                         \1910 [index.shtml, subnav.html]

                              \images [images for 1910-1919]

                         ...and so on

                    (Or, maybe you want the images for each year in a separate folder. It depends on how many you have. Break them out till you can wrap your head around them.)


                    An advantage to using this kind of scheme is that you can create a Dreamweaver template that just references "subnav.html" and it doesn't really matter that you're going to have a different one for each decade. Once you get your template built, adding the next page is a matter of "create new page from template" and placing it in the correct decade. For that matter, you can create a template for the subnav.html files, as well.


                    I realize this is sketchy, but so much depends on your information space.

                    • 7. Re: Menu Bar creation question
                      A. Wayne Webb Level 1



                      See, with that auburn hair everything is possible.


                      I will check out the suggested CSS tutorials this weekend as I believe that is the way I will have to go.  Use css as the basis for the holder of the images and then use divs to place them where I need them on the page.


                      As for Fireworks not being an HTML authoring tool I am slowly, real slowly, starting to come to the same conclusion.  It is trying to be a one-stop shopping experience and failing miserably.  The tools in it can not come close to reproducing a Photoshop image.  I've spent the last several hours creating within FW a similar looking menu.png totally from scratch.  It just cannot come up with the nuances or subtleties that are inherent in Photoshop.  This is more because you cannot select the blending modes within FW's Photoshop Live Filters.


                      Neither can it create an html page.  I used to with Photoshop, ImageReady and GoLive do similar things all the time.  For a simple roll over as in my previous exercise, the infobutton.html routine, it works well.  But give it a more complicated exercise, my menu.html routine, and it comes to a loud, screeching halt.  It could at least give me the pleasure of telling me it can't do it.  Instead it goes blissfully on like it can.  Frustrating!


                      A Photoshop to Dreamweaver workflow with the inclusion of css will be my approach.  Create my base menu.psd in Photoshop and save it as a menu.png for inclusion in DW.  Set it up as a background-image using a css placeholder.  Then in Photoshop create my over and down buttons and save each as a png.  In Dreamweaver use these over and down buttons to do what I need done using divs.  I think this will create less frustration on my part.  More work but at least I will get my results.  Bloated code though!


                      Unless it is still proper to use frames.  With frames I could create one to contain a menu.html and then just change it as needed with variables.  At least I think that will work.  If not then I will just continue coding as I am doing and place my menu.html code in each page.  The nicety of doing it that way is that once the images are loaded into the users memory they in essence will not needed to be reloaded.  I really liked using frames in GoLive.  I could reference everything using css but compartmentalize the design process.  But such a workflow is frowned upon for up to date html coding.


                      As for your idea for breaking the material down into decades I don't want to go that routine.  Even if I went with a pure css menu design as suggested by Tedd's work you would still want to utilize a single drop down containing the various years.  Having sub-menus for each decade would be cumbersome to the user.  That would also preclude have my server directory structure broken down into decades with sub directories for each year.  The directory and file structure could get hairy.  I already have enough managing five computers, two networked hard drives, and several thousand directories of my digital archives.


                      And part of the reason I don't want to go that route is my limitations.  Not being a wizard at coding I would spend an inordinate number of hours learning a whole new language.  My strong points are my digital archive creation abilities, my historical knowledge of the group, enough html creation knowledge to be dangerous, a historical researcher of some skill and my willingness to do the work.  This rules out the Server Side Include routines—watch my backside as I run away screaming.


                      So I think what I shall do is work the Photoshop to Dreamweaver routine.  Create a menu.html template and copy and paste it into each document as needed.  I would only need to change the references for the infobutton_down.png and the page navigation buttons.  Professionals would frown on this, wanting to do it with neat, cool code, but I need to remain within my limits.


                      Thank you for your suggestions, they really are from a professional with more knowledge than I.



                      • 8. Re: Menu Bar creation question
                        pixlor Level 4

                        Auburn? Hmm...must be an artifact of the lighting, because it's more of a dark ash blond. Oh well!



                        For your project, frames are perfectly fine. They're just not wise for sites where you want people to flow through pages of different content types. It's mostly because the search engines can't follow them very well. If you like frames and you know how to implement them, and you think that makes sense, go for it.


                        Code Bloat

                        I once took a couple of images to make a simple rollover with. I tried doing nothing but that in Dreamweaver and also in GoLive. The page Dreamweaver gave me was 8k. The page GoLive gave me was 24k - three times larger to do the same thing. Dreamweaver writes good code.


                        Server File Structure

                        I still think some heirarchy for your image data would be a good idea. If you're making a separate page for each image, then having everything in one folder will make it harder for you to find what you want and it will also mean that the server will take longer to find and present the file to your visitors (not much, but still). Organization is really important. I urge you to think about it. It shouldn't get hairy, because you'd only have to think about one decade (or one year) at a time. Thinking about having 100 years worth of images (or more) in one folder seems hairy to me!


                        No Need to Scream

                        For SSI (Server Side Includes), you don't need to learn a new language. You need to do two things. (Providing your Web host supports SSI). You need to use a .shtml extension on your files, instead of .html or .htm and you use that special form of an HTML comment (bracket, exclamation point, two dashes, a space, stuff as in previous post, a space, two dashes, closing bracket). That's it! The anthropomorphized string of events is then as follows:

                        Visitor's Browser to Web Server: My human wants page fred.shtml. [for example]

                        Web Server to Visitors Browser: Sure! Just a sec!

                        Web Server to self: Oh. This file has an .shtml extension. I'd better check it for directives! [reads through] Yup! The Web developer wants me to replace this comment with the contents of that file before I send it to the Visitor's Browser.

                        And that's what happens. The visitor gets a single Web page that looks as if it had always had the included code or text in it. Just like magic, except it's technology.



                        Take the time to learn Dreamweaver templates. Where you talk about copying HTML whenever you make a new page, Dreamweaver has that formalized and it works like a charm. It is much better than copying, because if you later decide you want to make a global change, then you only need to change the template and every page that is based on the template changes too. It will be worth the time for you.

                        • 9. Re: Menu Bar creation question
                          A. Wayne Webb Level 1

                          Thanks for the explanation about the usage of frames in Dreamweaver.  I've been reading where frames are becoming passé and not recommended.  But as a design consideration they fit the bill well for me.  Many pages all built using a similar style.  And they make it much easier to handle the multitude of files within a set of records.


                          Just my newspaper collection for one pre-1900 publication numbers in the 10,000+ images range with more to follow.  One of these days after I locate one of those really large scanners I have another thirty years or so at 800 pages (roughly) per year to add to it.  Some historical committee or other is going to make out like a bandit when I kick the bucket, metaphorically speaking.


                          Yeah, I know what you mean about code bloat.  I fought like the dickens to keep the size of my 1883 Gospel Messenger pages under one megabyte.  The base file is only 10k so I did pretty good with that.  The main image is 452kb, the 384 23kb thumbnails (8.45meg), and the rest roughly 100kb.  The worst part were the thumbnails but without them the site would not work.  That site was the first thing I ever designed.  The base was from Photoshop's Web Photo Gallery but I had to rework it to include metadata I wanted included.  My plan is to take what I am learning now and redesign it along with the other 10,000+ other newspaper images.


                          My site heirarchy will be fairly straightforward and will be set along the same quidelines as my hard drive.  The site structure should look something like this.  I may merge the images and menu directories depending on how the site management looks




                                         images (site images such as buttons, etc.)

                                              menu (everything needed for my menu items)


                                         pages (front end pages)

                                         resources (files not used online such as psd files, etc.)


                                              css (particular to that set of records including that year's header background image and any color scheme different from the main css)








                          I'm going to devote the weekend working trying to create a menu along slightly different methods, designing it as a separate html file.  I will pay attention to the size of the composite files and keep that in mind.  Let me learn how do this sans Fireworks and I'll see how it goes.  I'll keep it as a stand-alone group of files and just copy the contents of the menu.html file as needed over into the various pages.  I think that should work but I will have to see it in action to see how the bloat goes.  I'll report back when I have the menu in hand.


                          And yes, I do plan on using a master template for the pages of each year.  I will have a base temple like you have seen.  And then I will create sub-templates for each year.  Since the sidebar contents and header of each year will differ this is the best way to handle this.


                          I'm still up in the air as to what to do with the footer.  Either delete it or come up with some use for it.  I could use it for a PayPal donation button and an email contact link; I just don't klnow yet.  So in the interim I will keep it in play.


                          Jim might have some ideas as to whether or not I am totally off my rocker or not.