Make a Drop Down Navigation Menu in Adobe Fireworks Part Two

[ezedogs]

can you add a search box in fireworks cs5? please send me an e-mail if you can if you have a video ezequiel1981@live.com

thanks and the video is great by the way.

[storyindustrial]

@ezedogs There is no way to add a search field in Fireworks. They have an image of one but it serves no function.

[dirtandrock]

@storyindustrial Hi! great tutorial by the way. I have created my drop down list and everything looks fine. I want to link each drop down option to a page. When i preview this, it tells me that internet explorer cannot find the page. How do i link pages to the drop down list and are there any specifc folders the HTML files need to be in? thanks

[storyindustrial]

@dirtandrock Thanks, I'm nor sure why exactly Internet Explorer cannot find the page. Maybe try saving the Fireworks document or trying it on a different browser. You can link the pages within the wizzard you use while creating the menu. In the first section there is a column called link. From there type the hard code (exact file location) of the page you want to link.

[ag3nt5mith]

thank you

[HEALTHEWORLDKINGOPOP]

Thank you for such a wonderful video,but i have a question : Can i link the pop-up buttons in Dreamweaver ?

[storyindustrial]

@HEALTHEWORLDKINGOPOP You can hardcode the links in Dreamweaver. You can also edit the menu in Fireworks. I have a video on doing that as well.

[oldwrestlingluv]

Wonderful!  Saves me loads of time now.

[ned6591]

Your videos are great. I followed your video to make a drop down menu and when I pasted it into Dreamweaver and tested it there was a white box around my dropdown menu. Do you have any idea what I might have done wrong?

[storyindustrial]

@ned6591 My guess is either that is something that Dreamweaver inserted that only appears in Dreamweaver or there is a CSS border around the menu. Try opening the menu in Internet Explorer and see what happens. If there is still a box check the CSS rules Fireworks made when you exported the menu.

[Bigrippa96]

Thank you! Great video and you are really helping me out! THANKS!

Question for ya, so I'm making a drop down nav bar and if I wanted to make the slices on the nav bar (home, services, contact, etc) change colors when you scrolled over them (more then what you did with the hue) could I create 2 bars with different colors and export them into dreamweaver as roll over images? Or what would be easier?

Thanks!

[storyindustrial]

@Bigrippa96 Either you can change the hue or just create a different color in the second frame (state in CS4 and 5).

[Bigrippa96]

@storyindustrial Got it! Thanks! One final question, after I make the nav bar in fireworks, I want to make it so when you click on home it takes you to my homepage. How would I go in and do that? I tried adding it to the link box and it didn't work? Thank you again!

Your're the best help anyone on youtube has given me!

[storyindustrial]

@Bigrippa96 It sounds like the file path was wrong. In Dreamweaver click on the image for the home page and use the arrow to automatically link to the file. Dreamweaver will enter the correct path for you. Thanks for your comment.

[Bigrippa96]

@storyindustrial final question, I promise :)

when I import the bar into dreamweaver, the drop down menu comes with it, however once I click anywhere in dreamweaver it goes away and when I load the website the drop down menu is no where to be found. I go back to dreamweaver, click on the edge of my nav bar and it is there. Any idea what I'm doing wrong?

[BDeiste]

@Bigrippa96

I've tried it on my site at bdugas.com, I've done a slice for the pop up and a hot spot with a second frame that changes color on the same design button. It kind of works, maybe i should have done it the other way around.

[storyindustrial]

@Bigrippa96 Instead of hue change the color to whatever color you need. The two bars would be exactly how to do the effect.

[BDeiste]

Thanks for the video.

You've done copy html from fireworks and paste html in Dreaweaver. Couldn't we do save in fireworks and from dreamweaver do insert fireworks html instead of the copy and paiste? Would this work?

Also I've exported my layouts in css and the pop ups would not work,. However when I exported my prototype in plain old html with good old tables the pop up menu worked. How come.

Thanks a lot!

[storyindustrial]

@BDeiste When you do a copy and paste the entire application is placed onto the clipboard. You can try it your way and see if it works. As far as the CSS exports not working, I'm not sure. If it works with the tables use that.

[BDeiste]

@storyindustrial

I don't wht step I have forgotten but when I export my roll overs or pop up in css they don't work.

[rivagraphics]

so I have the code exported into my html file in dreamweaver but now I cant figure out how to like the pages together with my template.....I got the home button to work but all the rollover buttons dont give me a name for where that button is in the code.....so i cant point the file to link it. :/ PLEASE HELP!

[storyindustrial]

@rivagraphics When Fireworks exports slices it tends to give the images very odd and strange names. The best thing you can do is click on each image in design view and manually link the files.

[IRR1DE0]

@storyindustrial I'm having the same problem with linking as rivagraphics, and I've tried clicking on the image. However, it does not let me select any of the drop down parts of the nav bar...

I'm working with CS5. Any ideas? Thanks

[iDominateUx]

I made a complete different menu. Mine is horizontal and is suppose to have an effect where if my mouse goes over the button it changes colors. I tried two different methods of putting the menu into Dreamweaver and neither worked. The drop down menus still work however... i want the color to change. i tested in Fireworks in preview browser AND it works? what am i doing wrong?

[storyindustrial]

@iDominateUx With Fireworks I don't think that is possible. Try Dreamweaver Spry for your menu. That can give you the effects you are needing.

[ghmichael]

thanks for the video.

Michael

[Nonoproduct]

Brlliant Thanks BUT. you started out saying it was going to be with "less" code css ,html etc because it was going to be in hotspots and then you go on to do it in slices. .... shame....... but still good. thanks again.

[storyindustrial]

@Nonoproduct Sorry, I must have made the video in a hurry. If you are worried about too much code Fireworks is probably something you will want to avoid. Hotspots will generate a little less code bit it still generates quite a bit. Glad you enjoyed the video anyway, thanks again.

[forestpingu]

Brilliant, thanks!

[storyindustrial]

@forestpingu You are welcome.

[darsh94wba]

Thanks :)

[storyindustrial]

@darsh94wba Sure, thanks for the support.

[usmanawan100]

what a excellent video thanks alot plz tell about how to avoid absolute positioning when exporting html layouts in css

[storyindustrial]

@usmanawan100 There really is no way to "avoid" an AP div tag when exporting Fireworks HTML. It should not cause any problems with your site. If you are having problems just change the div tag from AP to not AP and it should work.

[usmanawan100]

what a excellent video thanks alot

[jgramsey]

Thanks for these tutorials! I spent hours trying to figure out how to copy a Fireworks page with drop downs into Dreamweaver - simple!

[storyindustrial]

@jgramsey Yeah its really easy.