Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

The Tab Panel Magic Booklet

PVII is the leader in creative extensions for Dreamweaver.

More Tab Panel Examples and Tutorials | Tab Panel Magic Home

About this tutorial

We're going to design a Tab Panel Magic widget that looks like a booklet. To complete this tutorial you will need the latest version of Tab Panel Magic 2, so please check your version and update if necessary.

Once you complete the booklet, there is an optional section that will show you how to launch it in a popup box powered by PVII Tooltip Magic.

See the finished widget Live

Of course, you'll want to see what you will be building so click the link below to see the magic booklet. The booklet will launch inside a PVII Tooltip, which you'll learn how to do in the optional last section of this tutorial.

Show me the Finished booklet

1. Download the magic-booklet folder

We've prepared a folder for you to use while taking this tutorial.

Download the magic-booklet folder now

Unzip the folder and copy it to your defined Dreamweaver Web site. This is what the folder looks like:

2. Create your Tab Panel Widget

Open the booklet.htm page, which should look like this:

Place your cursor inside the placeholder text Insert Tab Panel Here and switch to Code View.

<div id="book_wrapper">
<div class="book_inner">
<div class="book_left">
<h3>Designing a widget Booklet</h3>
<div class="p7TPM11">
MOVE TABS HERE
</div>
</div>
<div class="book_right">
INSERT TAB PANEL HERE
</div>
</div>
</div>

Backspace over the placeholder text until the line it is on is empty.

<div class="book_right">

</div>

With your cursor on the blank line, click the Tab Panel Magic 2 icon on your Insert Bar (or Panel) or choose
Insert > Studio VII > Tab Panel Magic 2 by PVII...

The Tab Panel Magic interface will open.

Add 2 new triggers so you have 3 in total. Change the trigger text to Section 1, Section 2, and Section 3

Set Animation to 2-Horizontal Panel Slider

Set Style Theme to 06-Basic

Leave all other settings default

Click OK

Switch to Design View.

Your page now looks like this:

Preview in a browser:

You have a working Tab Panel widget. Now we need to move the triggers (tabs) into the left column.

3. Move the Tab Panel Triggers

Place your cursor inside the Section 1 trigger.

Switch to Code View

Move 4 lines up in the code and you'll find this line:

<div id="p7TPMtabs_1" class="p7TPMtabs_06">

Place your cursor inside the above line. In the middle is fine. Now locate the Tag Selector Bar along the bottom of your window (just above the Property Inspector)

On the Tag Selector Bar, find the tag listed as <div.ptTPMtabs_06#p7TPMtabs_1> and click it.

The entire DIV will highlight in blue.

Choose Edit > Cut (CTRL - X) to cut the code to your clipboard.

Now locate the placeholder text Move Tabs Here:

<div class="p7TPM11">
MOVE TABS HERE
</div>

Backspace over the placeholder text until its line is empty:

<div class="p7TPM11">

</div>

With your cursor on the blank line formerly occupied by the placeholder text, choose Edit > Paste (CTRL - V) to paste in the trigger code.

Switch to Design View.

Your page should now look like this:

Preview in a browser:

Good job! You have successfully built a Tab Panel Magic booklet.

4. pop up your booklet in a tooltip (optional)

This optional step requires Tooltip Magic. Make sure you are using the latest updated version.

In your booklet.htm file, click the Tooltip Magic Advanced Interface icon on your Insert Bar or Panel. Or choose:
Insert > Studio VII > Tooltip Magic by PVII > Insert Tooltip - Advanced...

The Tooltip Magic Advanced UI opens:

Leave Tag Name set to A

For Content Source, select Element ID carried in Attribute and type REL into the box next to it.

Set tooltip Width to 740

Set Position to 12-Lightshow Display

Check the Show Close Button box

Set Trigger Action to Click Only

For Style Theme, select 16-The UnStyle

Leave all other options and settings default.

Click OK

Create a Tooltip Trigger

Now we need a trigger for your tooltip.

Switch to Code View

Locate the opening <body> tag on or about line 16

Create a new line just below the <body> tag and enter the following code:

<p><a href="#" rel="book_wrapper">Show me the booklet</a></p>

Switch to Design View

Your page should look like this:

Preview in a browser

All you will see is the link you just created. The Tooltip Magic script will detect that you've set the Tab Panel as a content source and will automatically hide it until you click the tooltip trigger Show me the booklet.

Click the tooltip trigger

The booklet will pop open centered vertically and horizontally in your window and the page will dim out beneath it. Use the Close Button (X) or click anywhere off the booklet to close it.

That's a wrap!

Closing Notes

CSS3 effects such as drop shadows and curved corners are supported by modern browsers. Older browsers simply display perfectly nice rectangular corners without shadows. This concept is commonly called progressive enhancement.

We hope you've enjoyed this tutorial. If you need, or would like, further information on any part of this tutorial simply start a topic on our Web forum or contact us directly.

1. Assemble your tools

Of course, the best tools are PVII tools. You'll need Tab Panel Magic 2 and (optionally) Tooltip Magic.

2. Design and Structure

Add some simple markup and a few CSS edits. We doubt you'll need a drafting table for this, but it looks professional.

3. Dance with joy

Celebrate a job well done that could only be done with the best Dreamweaver widgets on the planet.