Q
"How do I make tabs? How do I make a tabbed interface that really works?"--A.G.

This one is simple and fun

Begin with a rectangle with rounded corners. Use the skew tool, which you'll find if you hold the cursor on the scale tool, to widen the bottom of the shape.

Clone the tab twice and line up the tabs across the top of the rectangle they will be attached to.

Open the Frames panel and click on the button at the top right to pop up the frames menu. Choose Duplicate Frames. Enter the number two and check the After Current Frame radio button. Click on OK.

On Frame 1, move the second and third tabs behind the rectangle.

Click on the first tab, then on the rectangle, and choose Modify > Combine > Union.

On Frame 2, move tabs 1 and 3 behind the rectangle.

Click on the middle tab, then on the rectangle, and choose Modify > Combine >Union.

On Frame 3, move tabs 1 and two behind the rectangle.

Click on the third tab, then on the rectangle, and choose Modify > Combine > Union.

Use the polygon hotspot tool to add hotspots to the tabs on Frame 1.

If you like, you can draw the first one then clone it for the other tabs. Use your arrow keys to shift the clones into position.

Cover everything with one, large slice.

Open the Layers panel and select the Web layer. All of the objects on the Web layer will be selected. We want to be able to select them one at a time, however. To enable that, click on an empty spot on the canvas.

We'll use the Swap Image behavior to control the tabbed interface.

To add the first Swap image the Behavior, click on Hotspot 1 in the Layers panel. It will be the one at the bottom, over tab one. The behavior control Button pops up.

Click on the behavior control button and select Add Swap Image Behavior from the menu that pops up.

The Swap Image wizard will open.

Click in the in the right side of the Swap Image wizard to select the slice (the slice will change color to let you know that it is selected). Make sure that Frame 1 is selected. Keep Preload images checked but uncheck Restore Image onMouseOut. Click on OK to accept the changes and close the Swap Image wizard.

Open the Behaviors panel (Window > Behaviors) and change the default onMouseOver to onClick.

Click on Hotspot 2 in the Layers panel to select it.  Click on the Behavior Control Button and select Add Swap Image Behavior from the menu that pops up. In the Swap Image editor, click on the slice and choose Frame 2. Keep Preload images checked but uncheck Restore Image onMouseOut. Click O.K. to close the Swap Image wizard. Return to the Behaviors panel and change the default onMouseOver to onClick.

Click on Hotspot 3 in the Layers panel to select it, and then on the Behavior control button. Select Add Swap Image Behavior from the menu that pops up. In the Swap Image editor, select the slice and choose Frame 3. Keep Preload images checked but uncheck Restore Image onMouseOut. Click O.K. then return to the Behaviors panel. Change the default onMouseOver to onClick. You're ready to optimize and export. Export Images and HTML.

Once the tabbed interface has been added to your page in Dreamweaver, click on each of the hotspots and check in the DW Behaviors panel to make sure there is no Restore onMouseOut function. Dreamweaver likes to surprise you with these.

If they've been inserted, click on the restore line in the Behaviors panel and then on the — (delete) button. Go ahead and try these tabs. :-)

Massimo Foti's Disable Fake Link command will prevent the hourglass from showing and the page from bounding to the top onClick. Both of these excellent extensions are available at the Dreamweaver Exchange.

Back to top