Help with Fireworks Navigation tab Bar

[fwnewbie]

Hi, I'm a novice with fireworks but after research I've found this is the best tool to accomplish what I want. I've been to the following sites and they both are great tutorials, however I'm still a bit stumped.

http://www.playingwithfire.com/tool_tips/tabs.html

At the end of that tutorial it shows you a content area. How do I get the the content in that area. Also it never explains how to add the text to the tabs it just shows tab a, tab b, tab c on the last image. Also, it doesn't show how to link the tabs, and how when you click on one tab the others go to the back.

Please I would appreciate any help with this.

 

[Web151]

Ok,the content that will reside in that area under your tabs needs to be added within your webpage. So once the graphic work is done for the tabs, you use these as a background in layers or tables. Then you add your content using html. You can use CSS to apply the tabs to a html table cell or layer, as a non-repeating backgound. Then you add in nesting tables or layers, overlaying these backgrounds. Position these so that they sit exactly right in relation to the tab images that are 'behind' them. My own website uses this method.

http://www.web1.uk.com

My links for the tabs actually change URL when a tab is clicked, so the tab image ( set as a background with CSS )at the top is different for each page. In the tutorial you mention, they use a swap image method, so you remain on the same webpage, but it gives the effect of different tabs.

You need to practice layers and CSS to implement this idea. Dreamweaver enables you to get to grips with all this. I will create an example webpage for you to look at that uses tabs navigation.

 

[Web151]

Ok, here is the link to the online info I just made.

http://www.web1.uk.com/Tabs/template1/sample.html

in the working examples, just tabs for home-page and second page, about us, are set up. Should be enough to demo. The tab currently active comes to the front.

Easiest way to learn this is using layers in Dreamweaver, I like to use tables, but DIVs are good practice. Applying the javascript required to use the tabs is easy enough. Should be a matter of a day experimenting in Dreamweaver. Have fun