Well, not really an envelope...

Adding the Folder

We need to create the illusion that the tabs are actually attached to something. In the Dreamweaver 4 Magic book, the tabs appeared to be attached to a manila folder. That's what we'll be repeating in this exercise.

Click on the Rectangle tool to activate it. Drag out a 644 pixel wide by 18 pixel high rectangle. Use #CCCC99 for the fill color, and #ECECD9 for the stroke color.

Open the Info panel and, with the rectangle still selected, type -2 into the X box, and then type 29 into the Y box. Press Enter to accept the changes. The rectangle is made wider than the canvas and dropped off the bottom so that the stroke we'll add later shows only at the top.

Except for the reduced size and the fake torn end, this is what your work should look like at this point:

Finishing the tabs

Step 1: Adding frames

For each tab that you want for your interface, you'll need a separate copy of the tab array that you just created.

Open the Frames panel and click on the right-arrow button at the top right of the panel. Choose 'Duplicate Frame.' The Duplicate Frame dialog box will open.The canvas that we have been working on is Frame 1. My tab array includes five tabs, so I'll need four additional frames.

Type in the number that you need, and then check the 'After current frame' radio button. Click on OK to accept the changes and close the Duplicate Frame dialog box.

If you look in the Layers panel you'll see that the the appropriate number of frames has been added and that Frame 2 is highlighted. Click on the Frame 1 line in the Frames panel.

Step 2: Fusing the tabs with the rectangles

On Frame one, select the rectangle and choose Edit > Copy. We'll use a little paste trick to transfer the colors of the rectangle to the first tab. Select tab 1 and choose Edit > Paste Attributes. To fuse tab 1 with the rectangle, Shift + select the rectangle and the tab, then choose Modify > Combine > Union. Tab 1 and the folder rectangle are now one object.

Here's Frame 1:

Switch to Frame 2 in the Frames panel, and then click on the second tab to select it.

Click on the Bring Forward button in the main tool bar, or choose Modify > Arrange > Bring Forward. Tab 2 should now be forward of tab one, but behind the folder rectangle.

As long as you didn't use the Clipboard after Pasting the rectangle attributes to the tab in Frame 1, the color information will still be there. Click on tab 2 and choose Edit > Paste attributes. Shift + select tab 2 and the folder rectangle and choose Modify > Combine > Union. Tab 2 and the folder rectangle are now one object.

This is what Frame 2 should look like:

Finishing the frames and Exporting -->

Back to top