Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with Fireworks Navigation tab Bar

Status
Not open for further replies.

fwnewbie

Technical User
Aug 30, 2006
1
US
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.


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.
 
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.


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.
 
Ok, here is the link to the online info I just made.


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 ;)
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top