8 Replies Latest reply on May 29, 2010 1:47 PM by pixlor

    Fireworks Pop Up Menu Issue in Dreamweaver

    MTLWebDesigns Level 1

      Hi I have built a pop up/dropdown menu in Fireworks. This menu bar is for a site that I built using dreamweaver. I exported the menu bar in fireworks and then inserted it into dreamweaver but when I do this the button images are missing. Instead of images (of the menu bar categories), there are gray boxes in the shape of the picture (category/button image).

       

      I had this issue before and was able to correct it. I am not sure what I did though. Nothing seems to be working, since I am unaware of how I actually fixed it, I can't figure out how to fix it again.

       

      When I preview the file in fireworks, it looks fine and everything seems to work. When I insert the html file into dreamweaver, I have this issue with the menu bar images. The weird thing is that it is only the button images. I do have this site published and I have uploaded all of the files but the pictures still do not show. The link to this site is www.pariswyattllansoart.com. (the site is still under construction obviously).

       

      The menu bar works fine otherwise. The only issue is that the up and over images for the buttons of the menu bar do not show in dreamweaver or on the published site. Even the images that make up the rest of the menu bar show. If you check the site out, you will see what I mean.

       

      Thanks for your help in advance!

       

      Here is the code for the file:

       

      ****************************************************************************************** *******************

       

      <div id="FWTableContainer854242715">
            <table border="0" cellpadding="0" cellspacing="0" width="740">
              <!-- fwtable fwsrc="Menu Bar 1.png" fwpage="Page 1" fwbase="Menu Bar 1.gif" fwstyle="Dreamweaver" fwdocid = "854242715" fwnested="0" -->
              <tr>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="80" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="56" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="130" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="61" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="130" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="54" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="73" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="50" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="106" height="1" border="0" id="undefined_2" /></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
              </tr>
              <tr>
                <td><a href="http://www.pariswyattllansoart.com/shop art.html" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer0521180405_0', 'MMMenu0521180405_0',-55,18,'MenuBar1_r1_c1');MM_swapImage('MenuBar1_r1_c1','','Menu Bar 1_r1_c1_f2.gif',1)"><img name="MenuBar1_r1_c1" src="Menu%20Bar%201_r1_c1.gif" width="80" height="13" border="0" id="MenuBar1_r1_c1" alt="" /></a></td>
                <td valign="top" bgcolor="#000000"><p style="margin:0px"></p></td>
                <td><a href="http://www.pariswyattllansoart.com/contact.html" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer0521180830_1', 'MMMenu0521180830_1',-40,18,'MenuBar1_r1_c3');MM_swapImage('MenuBar1_r1_c3','','Menu Bar 1_r1_c3_f2.gif',1)"><img name="MenuBar1_r1_c3" src="Menu%20Bar%201_r1_c3.gif" width="130" height="13" border="0" id="MenuBar1_r1_c3" alt="" /></a></td>
                <td valign="top" bgcolor="#000000"><p style="margin:0px"></p></td>
                <td><a href="http://www.pariswyattllansoart.com/news &amp; events.html" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer0521180919_2', 'MMMenu0521180919_2',-30,18,'MenuBar1_r1_c5');MM_swapImage('MenuBar1_r1_c5','','Menu Bar 1_r1_c5_f2.gif',1)"><img name="MenuBar1_r1_c5" src="Menu%20Bar%201_r1_c5.gif" width="130" height="13" border="0" id="MenuBar1_r1_c5" alt="" /></a></td>
                <td valign="top" bgcolor="#000000"><p style="margin:0px"></p></td>
                <td><a href="http://www.pariswyattllansoart.com/policies.html" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer0521181252_3', 'MMMenu0521181252_3',-40,18,'MenuBar1_r1_c7');MM_swapImage('MenuBar1_r1_c7','','Menu Bar 1_r1_c7_f2.gif',1)"><img name="MenuBar1_r1_c7" src="Menu%20Bar%201_r1_c7.gif" width="73" height="13" border="0" id="MenuBar1_r1_c7" alt="" /></a></td>
                <td valign="top" bgcolor="#000000"><p style="margin:0px"></p></td>
                <td><a href="http://www.pariswyattllansoart.com/about paris.html" onmouseout="MM_swapImgRestore();MM_menuStartTimeout(1000)" onmouseover="MM_menuShowMenu('MMMenuContainer0521181434_4', 'MMMenu0521181434_4',-7,18,'MenuBar1_r1_c9');MM_swapImage('MenuBar1_r1_c9','','Menu Bar 1_r1_c9_f2.gif',1)"><img name="MenuBar1_r1_c9" src="Menu%20Bar%201_r1_c9.gif" width="106" height="13" border="0" id="MenuBar1_r1_c9" alt="" /></a></td>
                <td><img src="../Paris Wyatt Llanso Art/Fireworks/spacer.gif" alt="" name="undefined_2" width="1" height="13" border="0" id="undefined_2" /></td>
              </tr>
            </table>
            <div id="MMMenuContainer0521180405_0">
              <div id="MMMenu0521180405_0" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="shop art.html" id="MMMenu0521180405_0_Item_0" class="MMMIFVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> SHOP ART </a> <a href="originals by paris.html" id="MMMenu0521180405_0_Item_1" class="MMMIVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> ORIGINALS BY PARIS </a> <a href="pri nts by paris.html" id="MMMenu0521180405_0_Item_2" class="MMMIVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> PRINTS BY PARIS </a> <a href="order custom painting.html" id="MMMenu0521180405_0_Item_3" class="MMMIVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> ORDER CUSTOM </a> <a href="tags_bags_cards.html" id="MMMenu0521180405_0_Item_4" class="MMMIVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> TAGS, BAGS &amp; CARDS </a> <a href="etsy.html" id="MMMenu0521180405_0_Item_5" class="MMMIVStyleMMMenu0521180405_0" onmouseover="MM_menuOverMenuItem('MMMenu0521180405_0');"> ETSY SHOP </a> </div>
            </div>
            <div id="MMMenuContainer0521180830_1">
              <div id="MMMenu0521180830_1" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="javascript:;" id="MMMenu0521180830_1_Item_0" class="MMMIFVStyleMMMenu0521180830_1" onmouseover="MM_menuOverMenuItem('MMMenu0521180830_1');"> CONTACT PARIS </a> <a href="javascript:;" id="MMMenu0521180830_1_Item_1" class="MMMIVStyleMMMenu0521180830_1" onmouseover="MM_menuOverMenuItem('MMMenu0521180830_1');"> CONTACT INFORMATION </a> </div>
            </div>
            <div id="MMMenuContainer0521180919_2">
              <div id="MMMenu0521180919_2" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="news &amp; events.html" id="MMMenu0521180919_2_Item_0" class="MMMIFVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> NEWS &amp; EVENTS </a> <a href="newsletter.html" id="MMMenu0521180919_2_Item_1" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> NEWSLETTER </a> <a href="blog.html" id="MMMenu0521180919_2_Item_2" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> PARIS' BLOG </a> <a href="upcoming shows.html" id="MMMenu0521180919_2_Item_3" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> UPCOMING SHOWS </a> <a href="archived shows.html" id="MMMenu0521180919_2_Item_4" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> ARCHIVED SHOWS </a> <a href="upcoming openings.html" id="MMMenu0521180919_2_Item_5" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> UPCOMING OPENINGS </a> <a href="archived openings.html" id="MMMenu0521180919_2_Item_6" class="MMMIVStyleMMMenu0521180919_2" onmouseover="MM_menuOverMenuItem('MMMenu0521180919_2');"> ARCHIVED OPENINGS </a> </div>
            </div>
            <div id="MMMenuContainer0521181252_3">
              <div id="MMMenu0521181252_3" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="policies.html" id="MMMenu0521181252_3_Item_0" class="MMMIFVStyleMMMenu0521181252_3" onmouseover="MM_menuOverMenuItem('MMMenu0521181252_3');"> POLICIES </a> <a href="return policy.html" id="MMMenu0521181252_3_Item_1" class="MMMIVStyleMMMenu0521181252_3" onmouseover="MM_menuOverMenuItem('MMMenu0521181252_3');"> RETURN POLICY </a> <a href="shipping policy.html" id="MMMenu0521181252_3_Item_2" class="MMMIVStyleMMMenu0521181252_3" onmouseover="MM_menuOverMenuItem('MMMenu0521181252_3');"> SHIPPING POLICY </a> <a href="custom policy.html" id="MMMenu0521181252_3_Item_3" class="MMMIVStyleMMMenu0521181252_3" onmouseover="MM_menuOverMenuItem('MMMenu0521181252_3');"> CUSTOM POLICY </a> </div>
            </div>
            <div id="MMMenuContainer0521181434_4">
              <div id="MMMenu0521181434_4" onmouseout="MM_menuStartTimeout(1000);" onmouseover="MM_menuResetTimeout();"> <a href="about paris.html" id="MMMenu0521181434_4_Item_0" class="MMMIFVStyleMMMenu0521181434_4" onmouseover="MM_menuOverMenuItem('MMMenu0521181434_4');"> ABOUT PARIS </a> <a href="biography.html" id="MMMenu0521181434_4_Item_1" class="MMMIVStyleMMMenu0521181434_4" onmouseover="MM_menuOverMenuItem('MMMenu0521181434_4');"> BIOGRAPHY </a> <a href="gallereis.html" id="MMMenu0521181434_4_Item_2" class="MMMIVStyleMMMenu0521181434_4" onmouseover="MM_menuOverMenuItem('MMMenu0521181434_4');"> GALLERIES </a> <a href="care tips.html" id="MMMenu0521181434_4_Item_3" class="MMMIVStyleMMMenu0521181434_4" onmouseover="MM_menuOverMenuItem('MMMenu0521181434_4');"> CARE TIPS </a> </div>
            </div>
          </div>

       

      ****************************************************************************************** *******************

        • 1. Re: Fireworks Pop Up Menu Issue in Dreamweaver
          Jennifer Bishop

          This is just a shot in the dark, but have you tried placing the images in the various states of the drop-down? I would be interested to see how you fix this as well.

          1 person found this helpful
          • 2. Re: Fireworks Pop Up Menu Issue in Dreamweaver
            MTLWebDesigns Level 1

            Yeah actually I tried that. I clicked on the individual grey boxes and used the properties panel at the bottom of dreamweaver to replace the image. I was only able to replace the up image. I couldn't figure out how to replace the rollover image. If I could some how replace the roll over image, it would work. So yeah your defiantly on to something. Thank you so much for your input.

            • 3. Re: Fireworks Pop Up Menu Issue in Dreamweaver
              pixlor Level 4

              Look at where the images are defined:

              <img name="MenuBar1_r1_c1" src="Menu%20Bar%201_r1_c1.gif" width="80" height="13" border="0" id="MenuBar1_r1_c1" alt="" />

               

              The "%20" is the URL encoded space you have in your file name. Don't use spaces in file names for the Web. Try removing the spaces/%20s and see if that helps.

               

              Also, you will find that your code is much more readable and maintainable if you name your slices (and consequently your images) for what they are for (news->news.gif, policies->policies.gif, and so on). If you create the table and rollovers from scratch in Dreamweaver, you won't get those awful style names, either. For example, class="MMMIVStyleMMMenu0521181434_4" is not a helpful name. You probably don't need a separate style for each button. If you work it out from scratch you'll have much cleaner code.

               

              Speaking of clean code, see that first row that's all spacer gifs? You don't even need that. Make sure the table cells have the proper width for the images and you can zap that unnecessary stuff.

              • 4. Re: Fireworks Pop Up Menu Issue in Dreamweaver
                MTLWebDesigns Level 1

                Thanks you!!! Your advice was so helpful. First of all thank you for pointing out how I should be saving my files. Because of your advice, I thought I would watch the tutorial again and pay attention to exactly how he was saving his document. I was saving the doc like this: Menu Bar, now I know that I need to save this file like this: menuBar_file and it works wonderfully. The files have to be saved in a folder in the local directory. Also because of how I was saving things, I realized that I had a few other problems with DW. I fixed those issues and DW works wonderfully.

                 

                Also here is something else that I learned from this. Once I got the images working, the dropdown/popup menus where no longer working. The issue was that I was trying to insert the FW dropdown menu into a document that had already been saved as a template. If you do this, there is not enough room for all of the code, so the remedy is to insert the menu bar into an html doc. and then save it as a template.

                 

                Thanks so much again. I have learned so much.

                • 5. Re: Fireworks Pop Up Menu Issue in Dreamweaver
                  MTLWebDesigns Level 1

                  I think this may have also had a major part in my issue. I kept getting this DW Warning: Images folder is not inside site. I looked up tutorials for setting up your site in DW and paid more attention to how you are suppose to save the file. I originally saved the site folder (local directory folder) as: Paris Wyatt Llanso Art and have now changed it to: Paris_Wyatt_Llanso_Art. I then went to site manager and made sure that it was connected to the right folders. It seems to have a lot to do with how things are saved and everything works a lot better now. Thanks again.

                  • 6. Re: Fireworks Pop Up Menu Issue in Dreamweaver
                    pixlor Level 4

                    Happy to help! Looks like you did most of the work on your own, though.

                     

                    When I work on a Web site project, I make a folder for the entire project. Then under that project I might make folders for the content the client sends me, a folder for business files (such as tracking my hours), one for design work (where I put my Fireworks documents), and one for the Web pages, with the images folder under that. Each main folder could have other sub-folders, depending on the needs of the project. Under the design folder, I could have folders for logo design, color and font choices, and page design (sometimes more than one!).

                     

                    So, for example...

                     

                    WebProject

                      |

                      |-- Business [example]

                      |

                      |-- Content [stuff you need; by content type, year, or whatever]

                      |    |

                      |    |-- Docs [example]

                      |    |

                      |    |-- Photos [example]

                      |

                      |-- Design [stuff you create, that isn't directly for the Web]

                      |    |

                      |    |-- Colors [example]

                      |    |

                      |    |-- PageDesign [example]

                      |

                      |-- Web [this is the folder to set for Dreamweaver's site]

                           |

                           |-- images

                           |

                           |-- [other web site folders as needed]

                     

                    1 person found this helpful
                    • 7. Re: Fireworks Pop Up Menu Issue in Dreamweaver
                      MTLWebDesigns Level 1

                      Thank you so much again. Your advice and tips are so helpful. This is only my second site and I am self taught so I really appreciate all of the tips that I can get.

                      • 8. Re: Fireworks Pop Up Menu Issue in Dreamweaver
                        pixlor Level 4

                        Here are some tutorials you might check out. Especially the first:

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

                        http://articles.sitepoint.com/article/html-css-beginners-guide

                         

                        This one is a bit dated, as it uses a table layout, but the theory of what to slice and how is still relevant:

                        http://www.slicingguide.com/

                         

                        I like this book, but it's only available as an ebook, now:

                        http://www.sitepoint.com/books/css2/