PVII Tab Panel Magic PDF

PVII Tab Panel Magic
PVII Tab Panel Magic (TPM) automates the task of creating a tabbed panel widget on your page.
You can insert up to 5 widgets on any one web page. Everything you need is included.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen PVII
PVII Tab Panel Magic 2 of 56
PVII Tab Panel Magic ................................................................................................................ 1

Before you begin .................................................................................................................................... 4
Move your Tab Panel Magic files to a Defined Dreamweaver site ...................................................... 4
Included folders and files...................................................................................................................... 4
Install the Tab Panel Magic Extension ................................................................................................. 4
Introduction ............................................................................................................................................. 5
Covered in this Guide ........................................................................................................................... 5
Creating your first Tab Panel................................................................................................................. 6
Establishing an insertion point.............................................................................................................. 6
Inserting a Tab Panel ........................................................................................................................... 9
Setting Tab Panel Options ................................................................................................................. 10
Changing to a No-Box Style Theme.................................................................................................... 13
Tab Panel Assets Created ................................................................................................................. 16
Editing Tab Panel Styles ...................................................................................................................... 17
Creating a Floating Tab Panel ............................................................................................................. 21
Floating the Tab Panel ....................................................................................................................... 23
Creating a new CSS Style Selector ............................................................................................... 23
Triggering a Tab Panel externally ....................................................................................................... 27
Switching to and editing a Basic Style Theme .................................................................................. 31
Modifying Tab Button Colors .............................................................................................................. 33
Reverting to default Style Themes...................................................................................................... 38
CSS Analysis......................................................................................................................................... 39
Tab Panel Magic CSS for multiple Tab Panels .................................................................................. 39
Tab Panel Magic CSS Rules.............................................................................................................. 40
TPM Images ........................................................................................................................................... 45
Bitmap editing..................................................................................................................................... 45
Fireworks editing ................................................................................................................................ 45
Support and Contact info..................................................................................................................... 46
PVII Knowledge Base......................................................................................................................... 46
Newsgroup forum communities.......................................................................................................... 46
E-Mail: support@projectseven.com ................................................................................................... 47
RSS News Feeds ............................................................................................................................... 47
Before you Contact us........................................................................................................................ 47
Snail mail ............................................................................................................................................ 47
Appendix 1: Using PVII Tab Panel Magic ........................................................................................... 48
Overview............................................................................................................................................. 48
Inserting a New Tab panel ................................................................................................................. 48
Modifying an Existing Tab panel ........................................................................................................ 50
Managing the User Interface Items .................................................................................................... 51
Mode .............................................................................................................................................. 51
Panel Title ...................................................................................................................................... 51
Display Title Panel ......................................................................................................................... 51
Tab Buttons.................................................................................................................................... 51
Add ................................................................................................................................................. 51
Delete ............................................................................................................................................. 51
Up................................................................................................................................................... 51
Down .............................................................................................................................................. 51
Button text ...................................................................................................................................... 51
Global Options.................................................................................................................................... 52
Style Theme ................................................................................................................................... 52
Animation ....................................................................................................................................... 52
The Interface Control Buttons ............................................................................................................ 52
OK .................................................................................................................................................. 52
Cancel ............................................................................................................................................ 52
© 2006 Project Seven Development 2 of 56

Help ................................................................................................................................................ 52
Appendix Removing a Tab Panel ........................................................................................................ 53
Overview............................................................................................................................................. 53
Open the Remove PVII Tab panel Magic interface............................................................................ 53
What will be Removed ................................................................................................................... 53
What will Not be Removed............................................................................................................. 54
Remove.......................................................................................................................................... 54
Cancel ............................................................................................................................................ 54
Help ................................................................................................................................................ 54
Appendix: Trigger Panel Behavior...................................................................................................... 55
Creating a new Trigger Panel behavior.............................................................................................. 55
Modifying an existing Trigger Panel behavior .................................................................................... 55
The Interface ...................................................................................................................................... 55
OK .................................................................................................................................................. 55
Cancel ............................................................................................................................................ 56
Help ................................................................................................................................................ 56

Before you begin

Backup the p7_tpm_103.zip archive and move it to a safe location. You'll also be moving your Tab
Panel Magic files into a Dreamweaver site and installing the Tab Panel Magic extension.
Move your Tab Panel Magic files to a Defined Dreamweaver site

Create a new folder inside a defined Dreamweaver site. Name the folder TPM.
Important: If you are not sure what a Defined Dreamweaver site, please refer to the Dreamweaver help documentation
topic: Getting Started with Dreamweaver. You can also access a PVII site definition tutorial here. You must be working
within a properly defined Dreamweaver site to use Tab Bar Magic.
Included folders and files

The p7_tpm_103.zip archive contains two folders and three files in the archive's root:
1. Folder: tutorials
2. Folder: user_guide
3. File: license.htm
4. File: p7_tabpanel_103.mxp
5. File: readme_first.htm
Note: If you do not see any folders, that means your zip program is not set up properly. See your program's help file or
contact the vendor to learn how the program should be set so that folder structure is preserved.
Using Windows File Explorer or Mac Finder, move the unzipped contents of the TPM archive to the
new TPM folder you created in your Dreamweaver site. Start Dreamweaver and open the Files panel
(F8).
Install the Tab Panel Magic Extension

When you expand the TPM folder, locate the extension installer file: p7_tabpanel_103.mxp and double-
click. The Extension Manager will launch and the installation will begin. Follow the onscreen prompts
and dialogs. When the installation has completed, close the Extension Manager. Restart
Dreamweaver to make the extension available.
Note: If the installer file name ends with a different number than listed above, don't panic. It simply means that there was a
revision to the extension that occurred after this user guide was written. OS X users: If, upon double-clicking the installer,
Extension Manager does not properly launch, you have a file association issue. To remedy the problem locate the installer
file from inside a Finder window and double-click it.

Introduction
This document will teach you how to use the Tab Panel Magic system. TPM comes with an
installation file, which is used to install it into your Dreamweaver application interface. Please read
this guide in its entirety and keep it handy for reference as you use the TPM system.
TPM automates the process of building tabbed user interfaces (UIs) - interface elements that allow
you to display multiple panels of content whose access is controlled by clicking CSS-styled tabs.
You can insert as many Tab Panel elements per page as you want, although the system has built-in
CSS support for up to five Tab Panel elements per page. Each Tab Panel element can contain as
many individual tabs (and associated content panels) as you need.
Tip: While a Tab Panel element can have as many tabs as you want, we recommend limiting them to as many as will
comfortably fit within the overall width of your particular Tab Panel element(s).
Covered in this Guide

This user guide contains tutorials that will teach you, step-by-step:
1. How to insert a Tab Panel into a page

2. How to choose a Tab Panel style
3. How to set options
4. How to edit styles
5. How to create a floating Tab Panel
6. How to use external panel triggers
The User Guide also contains:
1. A complete CSS analysis covering each rule contained in a TPM style sheet.
2. A mini guide to editing TPM background images.
3. Copies of the extension Help Files, which cover every aspect and option of the TPM
user interfaces.
Please read this user guide before you attempt to use the extension.

Creating your first Tab Panel

There are two work pages in the included tutorials folder:
1. page1.htm
2. page2.htm
Open page1.htm - we'll be using it for this first exercise.
We'll be inserting a Tab Panel in the left sidebar, just below the navigation bar.
Click the Split button along the top of your page to select Split View Mode. Alternatively you can
choose View - Code and Design.
Establishing an insertion point

Since we want to insert our Tab Panel in the left sidebar, just below the navigation bar, we need to
make sure our cursor is in the right position for a proper insertion.

Place your cursor inside the text Link 5.
Click the ul#navbar entry on Dreamweaver's Tag Selector bar.
When you select the ul#navbar tag, all links in the navbar will highlight and the entire UL will
highlight in your code pane.
Press your keyboard's right arrow key once to move your insertion point outside the UL.

Your insertion point is now outside the navbar UL and is represented by a flashing vertical line just to
the right of the closing </ul> tag.
Now you have a good insertion point for your Tab Panel. It will be inside the sidebar DIV, just after
the navbar.

Inserting a Tab Panel

Your insertion point is established. Now it's time to insert your Tab Panel.
With your cursor still positioned to the right of the closing </ul> tag, click the Tab Panel Magic icon in
the Common Section of Dreamweaver's Insert Bar.
Tip: In addition to using the Insert Bar icon, you can open the Tab Panel Magic interface by choosing Insert - Studio VII -
Tab Bar Magic by PVII...
The Tab Panel Magic interface will open.

Setting Tab Panel Options

In the Panel Title field, type Featured Items:
Leave the Display Panel Title box checked.
In the Tab Buttons pane, select the lone entry Tab.
In the Button Text field, change the label to Books.
Click the Add button to add a second tab.
Select the new entry in the Tab Buttons pane and change its label to Software in the Button Text
field.
For Style Theme, select 02-WinXP - No Box.
For Animation, select 1 - Fade In.
Click OK.

You're Tab Panel is inserted.
When you insert a Tab Panel on your page, the tabs are hidden. You see the title (if you've opted to
have one) and the content panels, displayed linearly. This permits you easy access to edit the
contents of each panel.
Note: The view you see in Dreamweaver is just what a user with JavaScript disabled (or a search engine) would see. Your
content is always accessible.

Preview your page.
You have a working Tab Panel. Keep this page open. We will continue working with it. Note how the
Tab Panel fills the width of the sidebar. Tab Panels do not, by default, have a width assigned. They
are designed to fit inside any containing element - be it a sidebar, a main content area, or a table.

Changing the Style Theme

Let's use the Tab Panel Magic system to modify our Tab Panel. We'll change the Style Theme.
Place your cursor anywhere inside the Tab Panel content area.
Click the Tab Panel Magic icon.
The Tab Panel Magic interface opens in Modify Mode... The Mode description at the top of the
interface describes the active mode (Create or Modify) and the particular Tab Panel you are
editing... in this case: p7TP1.
Note: If the interface opens in Create Mode, that means that your insertion point was not inside an existing Tab Panel when
you opened the interface. In that case, click the Cancel button and reposition your cursor inside the Tab Panel you wish to
modify.
For Style Theme, select 01 - WinXP.

For Animation, select 2 - Gradient Wipe.
Note: Animations from 2-28 utilize Direct X and only work in IE5, IE5.5, IE6, IE7 (and up) on Windows. All other browsers
will default to the DOM-Scripted Fade-In animation.
Click OK.

Preview your page.
Your content and tabs, and even your title, are all preserved, but the style has changed to a more
finished look. Keep this page open - we'll be using it for the next exercise.

Tab Panel Assets Created

If you look at your Files panel, inside the tutorials folder, you'll see that a new folder has been
created: p7tp, which contains all the necessary Tab Panel assets:
• CSS file(s)
• JavaScript file
• Images
When you publish your site, make sure you upload the p7tp folder, in addition to your pages. This
folder will be created by the system inside any folder in which there is a page on which you have
created a Tab Panel.

Editing Tab Panel Styles

We'll edit the style sheet for your Tab Panel to make the title a little larger and bold, make the tab
text smaller, and to change the color of the text in the content panels.
With page1.htm still open, open Dreamweaver's CSS panel (Window - CSS Styles or Shift + F11).
Select and expand the p7tp_01.css style sheet.
Tip: Depending on your Dreamweaver version and your user preference settings, your CSS Panel might look a bit different
so please follow along as closely as you can.
Find the rule named .p7TPheader h2, .p7TPheader h3 in the CSS panel.
Right-Click the rule (Command-Click on Macs) and choose Edit...
The CSS editor window will open.
In the Type Category, change Size to 1.1 ems.

In the Weight box, clear the normal entry. Since headings are bold by default, simply removing the
normal value will make our title bold.
Click OK.
The title is now slightly larger and bold.
Back in your CSS panel, find the rule named: .p7TP_tabs
Right-click it to open the editor.

In the Type category, change the Size value to .95 ems.
Click OK.
Tip: Proportional font sizes (like ems) are relative to the size assigned to a parent element. In page1.htm, the sidebar DIV is
assigned a font-size of .75em. Since the Tab Panel is inside the sidebar DIV, then any font-sizes assigned to any part of the
Tab Panel, is relative to .75em. When we set the tabs to .95em it is actually .95 x .75 = 0.7125em.
Back in your CSS panel, find the rule named: .p7TPcontent
Right-click it to open the editor.

In the Type category, change the Color value to 90% black: #333333.
Click OK.
Save the page.

Creating a Floating Tab Panel

Our first exercise dealt with creating a sidebar Tab Panel. We'll add to that page by inserting a Tab
Panel in the main content area that is floated so that text wraps around it.
Open page1.htm.
Place your cursor just to the left of the first word "A" in the first paragraph of main content area.
Press your keyboard's left arrow key once to ensure your insertion point is outside the opening
paragraph tag.
Click the Tab Panel Magic icon.
Set Panel Title to Books:
Leave Display Panel Title checked.
Change the Button Text of the first Tab to Fiction.

Add a second Tab and set its Button Text to Nonfiction.
Leave the Global Panel Options unchanged. They apply to both Tab Panels on your page.
Click OK.
We have a new Tab Panel - and it spans the entire width of the main content area. Now we'll assign
it a width and float it so that text wraps around it.

Floating the Tab Panel

If you examine the source code for each of the two Tab Panels on your page, you'll see that the
outermost DIVs look like this:
1. The first: <div id="p7TP1" class="p7TPpanel">

2. The second: <div id="p7TP2" class="p7TPpanel">
Everything is the same, except for the ID. As you add Tab Panels to a page, the ID for outer
container is incremented. This allows us to target specific Tab Panels and to give them unique
styles.
Creating a new CSS Style Selector

To float our new Tab Panel, we'll need to create a new CSS rule, using the Panel's unique ID as the
selector name.
Right-Click (Command-Click Mac) anywhere on the page and choose CSS Styles - New...

The New CSS Rule dialog will open.
For Selector Type, choose Advanced.
For Selector, type in #p7TP2.
For Define in, select This document only .
Click OK.
The CSS Editor will open.
In the Type category, set Size to 0.8em.
Switch to the Box category.

Set Width to 220 pixels.
Set Float to left.
For Margin, deselect Same for all and set top: 1.5 ems, Right: 0.5 ems, Bottom: 0 ems, and Left: 0
ems.
Click OK.

Preview your page.
The second Tab Panel is floating to the left of the main content area and text is wrapping around it.
Tip: Depending on your particular site structure and needs, the custom style rule you created, #p7TP2, can be moved to an
external CSS file. Just be aware that if you move this rule to your TPM style sheet, and later change Style Themes, you will
need to recreate the rule.
Save the page but keep it open.

Triggering a Tab Panel externally

The Tab Panel Magic system comes with a special behavior that allows you to set a link on your
page that will trigger a specific tab on any Tab Panel on your page.
Add the following sentence to the first content panel in the sidebar Tab Panel:
We carry a wide variety of fiction and nonfiction titles.
Select the word fiction and enter the following link into the Link box on your property inspector:
javascript:;
Select the text nonfiction and assign the same javascript:; link.
Click inside the word fiction - anywhere between the first and last letters.
Open your Behaviors panel (Window - Behaviors or Shift + F4)

Click the plus ( + ) symbol to open the Behaviors menu.
Choose Studio VII - Tab panel Magic -Panel Trigger.
The Tab panel Magic Panel Trigger dialog will open.

For the Tab Panel to Trigger, select p7tpc2_1 (the first content panel in the second Tab Panel)
Click OK.
Your Behaviors panel will show the assigned behavior and the event (onClick) that triggers it.
Now we'll assign a trigger behavior to the non-fiction link:
Click inside the word nonfiction - anywhere between the first and last letters.
Open your Behaviors panel menu and choose the Studio VII - Tab panel Magic -Panel Trigger
again.
For the Tab Panel to Trigger, select p7tpc2_2 (the second content panel in the second Tab Panel)
Click OK.

Preview your page.
Click the non-fiction link. The Nonfiction tab and its associated content panel in the second Tab
Panel are triggered.

Switching to and editing a Basic Style Theme

The Win XP style theme uses background images for the Tab Buttons - as do every other Theme,
except for the 2 Basic Themes: 11-Basic and 12-Basic No-Box. The Basic Themes should be used
if you want a flexible style that allows you to quickly change the color of the Tab Buttons using
simple CSS edits. For this exercise, we'll change our global Tab Panel Theme to 11-Basic and
change the Tab Button colors.
Insert your cursor anywhere within either of the two Tab Panels on your page. It doesn't matter
which because we are going to be changing global settings.
Click the TPM icon.
The TPM UI will open in Modify Mode.
Change the Style Theme to 11-Basic Style.
Click OK.

Your Tab Panels are transformed. Our floated Panel is maintained because the rule we created to
govern the float is in the page, not in the WinXP style sheet. Let's modify the colors of the Tab
Buttons and the Title.

Modifying Tab Button Colors

Open Dreamweaver's CSS panel (Window - CSS Styles or Shift + F11).
Select and expand the p7tp_11.css style sheet.
Locate the rule named: .p7TPheader and open it in Dreamweaver's CSS Editor.
In the Background category, set Background color to #996699.

Switch to the Border category and set the Bottom Color to #333333.
Click OK.
Now locate the rule named: #p7TP1 .p7TP_tabs a, #p7TP2 .p7TP_tabs a,

#p7TP3 .p7TP_tabs a, #p7TP4 .p7TP_tabs a, #p7TP5 .p7TP_tabs a
Open it in Dreamweaver's CSS Editor.

In the Background category, set Background color to #996699.
Click OK.
Now locate the rule named: #p7TP1 .p7TP_tabs a:hover, #p7TP2 .p7TP_tabs a:hover,
#p7TP3 .p7TP_tabs a:hover, #p7TP4 .p7TP_tabs a:hover,
#p7TP5 .p7TP_tabs a:hover, #p7TP1 .p7TP_tabs a:active,
#p7TP2 .p7TP_tabs a:active, #p7TP3 .p7TP_tabs a:active,
#p7TP4 .p7TP_tabs a:active,
#p7TP5 .p7TP_tabs a:active
Open it in Dreamweaver's CSS Editor.

In the Background category, set Background color to #4A4A4A.
Click OK.

Preview the page.
That's it. Save your page.

Reverting to default Style Themes

Like all PVII products, TPM is designed to be resilient. When you create a Tab Panel, the system
writes a folder named p7tp in the folder that contains the page you are working on - and uses that
folder to store style sheets, scripts, and images. This allows for easy and safe prototyping. If you
create a Tab Panel on page1.htm, in a folder named tutorials, and edit the CSS for that Tab Panel,
your changes are restricted to that folder. Make another page in that folder and create a Tab Panel
using the same Style Theme and it will use the same style sheet you edited while working on page1.
If you create a Tab Panel on a page in a new folder, the system will create a p7tp folder and
populate it with default style sheets, images, and scripts. This allows you to test and prototype with
complete freedom - without affecting finalized Tab Panels in other folders.
Should you ever make a large error and need to revert back to a default and working CSS file, do
this:
1. Delete the bad CSS file from your p7tp folder.

2. Open a page in that folder that contains a Tab Panel that uses that bad style sheet.
The Tab Panel will appear unstyled. Don't worry, that's expected, given the
circumstances.
3. Place your cursor inside the Tab Panel content.
4. Click the TPM icon to open the TPM UI in Modify Mode.
5. Make no changes in the UI - simply click the OK button.
The TPM system will create a new version of your CSS file. Depending on your DW version, you
might not see the changes at first. If that be the case, save and close the file, then re-open it.

CSS Analysis
The CSS that governs Tab Panel Magic is straightforward and easy to follow. This chapter will cover
each CSS rule and conclude with a question and answer section.
Tab Panel Magic CSS for multiple Tab Panels

TPM CSS is global per page. That is, all Tab Panels on your page use the same style sheet. We
have, however, built in a way for you to make custom styles for a specific Tab Panel on a page that
contains multiple Tab Panels. When you create a Tab Panel, the system assigns an ID to the panel
root element. The first Panel created on a page will begin like this:
<div id="p7TP1" class="p7TPpanel">
The assigned IDs are incremented for every Tab Panel you create on a page. If your page ultimately
contains 4 Tab Panels, they will each be assigned contiguous IDs:
1. p7TP1
2. p7TP2
3. p7TP3
4. p7TP4
If you wanted each one of your 4 Tab Panels to have different colored text in their content panels,
you would need to target the .p7TPcontent class separately for each Tab Panel. To do that, you
would create 4 new style rules, each one prefaced with a different ID:
1. #p7TP1 .p7TPcontent {color: red;}

2. #p7TP2 .p7TPcontent {color: blue;}
3. #p7TP3 .p7TPcontent {color: green;}
4. #p7TP4 .p7TPcontent {color: brown;}
Keep this technique in mind as you read through the rule-by-rule analysis that follows. You can use
this method to customize any rule for a specific Tab Panel when you have more than one Tab Panel
on a page.

Tab Panel Magic CSS Rules

The following rules are included in all TPM Style Theme style sheets.
.p7TPpanel {
background-color: #ECE9D8;
border: 2px groove #fff;
}
This class is defines the outer wrapper of a Tab Panel. For the No-Box Themes, background color
and borders are not assigned.
.p7TPwrapper {
padding: 8px 8px 7px 8px;
}
This class defines the inner wrapper for a Tab Panel. Its padding makes room for the background
color of the outer wrapper to show. The bottom padding is 1px less to accommodate a 1px shift in
the content panels, which is explained below. For No-Box Themes, padding is set to zero.
.p7TPheader {
background-image: url(img/tabs01header.jpg);
background-repeat: repeat-x;
padding: 3px 6px;
border-bottom: 1px solid #666666;
background-color: #E1E3DC;
}
This class defines the container for the optional Tab Panel title.
Tip: Background images can be edited. You can edit the actual JPG file using bitmap editing tools or you can use the
editable Fireworks PNG. The Fireworks files are inside the tutorials folder. Images are covered more fully in a later section.
Note that the 2 Basic Style Themes do not use a background image. They use only a background-color.
.p7TPheader h2, .p7TPheader h3 {

margin: 0;
font-size: 1.1em;
}
These classes define the text of the Tab Panel title. By default, the title is an H2 element, but you
can change it, manually to an H2 if you'd like.
Note: If you have styles on your page that conflict with this rule, use !important notations to override. For example: margin: 0
!important;

.p7TP_tabs {
padding: 0;
font-size: .95em;
}
This class defines the container for the Tab buttons.
#p7TP1 .p7TP_tabs a, #p7TP2 .p7TP_tabs a,

#p7TP3 .p7TP_tabs a, #p7TP4 .p7TP_tabs a,
#p7TP5 .p7TP_tabs a {
padding: 8px 8px 4px 6px;
display: block;
float: left;
color: #333333;
text-decoration: none;
background-image: url(img/tabs01_up2.gif);
background-repeat: no-repeat;
background-position: right top;
background-color: transparent;
}
This class defines the default link state for the tab buttons. We use multiple descendant selectors
covering up to 5 unique Tab Panels. This technique adds specificity to the rule so that it will override
any conflicting link style on your page.
Do not edit the float or display properties.
Note: The 2 Basic Style Themes do not use a background image. They use only a background-color.
#p7TP1 .p7TP_tabs a:focus, #p7TP2 .p7TP_tabs a:focus,

#p7TP3 .p7TP_tabs a:focus, #p7TP4 .p7TP_tabs a:focus,
#p7TP5 .p7TP_tabs a:focus {
outline: 1px dotted;
outline-color: #CCCCCC;
}
This class sets the focus rectangle around Tab Buttons - making it a bit more subtle than the
browser default. Focus rectangles are usually dotted borders that surround a link when you click it or
tab into it, making the link easy to identify for keyboard and/or vision-impaired surfers. The CSS
outline properties are supported by modern browsers such as Firefox, Opera 9, and IE7. Other
browsers will display their default focus rectangles.

#p7TP5 .p7TP_tabs a:hover, #p7TP1 .p7TP_tabs a:active,
#p7TP2 .p7TP_tabs a:active, #p7TP3 .p7TP_tabs a:active,
#p7TP4 .p7TP_tabs a:active,
#p7TP5 .p7TP_tabs a:active {
color: #E39658;
background-color: transparent;
}
This class defines the hover and active link states for the tab buttons.

.p7TP_tabs div {
display: block;
float: left;
background-image: url(img/tabs01_up.gif);
margin: 0 -2px 0 0;
}
This class defines the containing DIV for each individual Tab Button. Only the 01-WinXP style theme
uses a background image for this rule. Why? It works in concert with the background image on the
#p7TP1 .p7TP_tabs a rule to create the rounded and raised effects on the Tabs.
Do not edit the display, float, or margin properties.
Note: The 2 Basic Style Themes do not use a background image on this selector.
.p7TPclear {
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
This class defines a clearing element used in the Tab Panel markup to clear the floated Tabs.
Do not edit any part of this rule.
.p7TPcontent {
padding: 10px;
background-color: #FFFFFF;
font-size: 1em;
line-height: 1.5em;
position: relative;
z-index: 1;
top: -1px;
left: 0;
border: 1px solid #CCCCCC;
color: #333333;
}
This class defines the outer container for all content panels.
Do not edit, remove, or in any way change the position, z-index, or top properties.

.p7TPcontent h2, .p7TPcontent h3,

.p7TPcontent h4 {
font-size: 1.1em;
color: #444444;
margin: 0;
line-height: normal;
}
This class defines headings you can use inside the content panels.
Note: If you have styles on your page that conflict with this rule, use !important notations to override. For example: margin: 0
!important; color: #444444 !important;
.p7TPcontent p {
margin: 6px 0 12px 0;
}
This class defines all paragraphs in all content panels.
Note: If you have styles on your page that conflict with this rule, use !important notations to override. For example: margin:
6px 0 12px 0 !important;
#p7TP1 .p7TP_tabs div.down, #p7TP2 .p7TP_tabs div.down,

#p7TP3 .p7TP_tabs div.down, #p7TP4 .p7TP_tabs div.down,
#p7TP5 .p7TP_tabs div.down {
padding: 0;
position: relative;
z-index: 2;
background-image: url(img/tabs01_down.gif);
}
This class defines the container for each Tab Button when the associated button is in the down or
selected state.
Do not edit, remove, or in any way change the padding, position, or the z-index properties.
#p7TP1 .p7TP_tabs div.down a, #p7TP2 .p7TP_tabs div.down a,

#p7TP3 .p7TP_tabs div.down a, #p7TP4 .p7TP_tabs div.down a,
#p7TP5 .p7TP_tabs div.down a {
background-image: url(img/tabs01_down2.gif);
background-position: right top;
}
This class defines the Tab Buttons when they are in the down or selected state. If you are using a
Basic Theme, the background image will be replaced by background-color.
Do not edit, remove, or change any property in this rule.

.p7TP_tabs {
display: none;
}
This class hides the Tab Buttons in Dreamweaver Design View - and also in browsers that are
running with JavaScript disabled. The TPM scripts take care of showing the Tab Buttons when and
where appropriate.
Do not edit this rule.

TPM Images
TPM includes 5 background-image-based Style Themes and a Basic Theme that uses no images. If
you are not proficient with image or graphic design, we recommend that you either use an image-
based Theme as it is, or that you use one of the Basic Themes.
There are two ways to edit the TPM background images: Bitmap editing and live editing of the
included Fireworks PNGs.
Bitmap editing
When you choose a Theme that uses images, the system adds those images to the p7tp/img folder.
The image name is always prefaced with its related Style Theme number. For example:
tabs01_down.gif relates to Style Theme 01-WinXP. You can open these images in any image editor
and use its bitmap tools to change hue, shading, or eve give them texture. Be aware that there are
other CSS dependencies involved when you do this. For example, the selected state of a Tab Button
has a bottom that blends into the background of its related content panel. So if you change the color
of the selected tab, you need to make a corresponding change to the CSS background-color of the
content panels.
Fireworks editing
As a courtesy, we've provided editable Fireworks PNGs for each Theme. You can find these PNGs
inside the included tutorials folder - in a sub-folder named fireworks. The included PNGs are:
1. tabs01.png - the images for Themes 1 and 2

Before editing one of these PNGs, make a backup to edit. For example:
1. Open tabs01.png
2. Choose File - Save As
3. Name the copy distinctively and save it in a folder inside the defined Dreamweaver
site you are working in.
Unless you are proficient in both image editing and CSS, we suggest that you do not change the
size of any of the slices in these PNGs. Work within the default sizes.
When finished editing, export the slices to the p7tp/img folder inside the defined Dreamweaver site
you are working in. If you have multiple p7tp folders, make sure you choose the relevant one.
If you get lost or need help, log on to our Fireworks newsgroup. The server name and instructions
can be found in the next section.

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the
business.
PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech
Notes, tips, and techniques relating to our products, as well as to general web development issues.
Open the Knowledge Base | View the 10 Most Recent Additions
Newsgroup forum communities

The Project VII Newsgroup community is our primary support vehicle and is available 24 hours a
day. Choose from the following newsgroups:
1. The PVII Webdev Newsgroup

2. The PVII Dreamweaver Newsgroup
3. The PVII Fireworks Newsgroup
4. The PVII CSS Newsgroup
If you have trouble linking directly to news servers, use your default newsreader's program options to
set up a new account and point it at the following server:
forums.projectseven.com
If you don't know how to set up a news account in Outlook Express or Entourage, Microsoft has
dedicated instructions pages:
Mac Users Read more | PC Users Read more
Mac Users: As of this writing the latest versions of OSX install neither Outlook Express nor any other news reader software.
If you need a newsreader you will have to purchase one or download a free one from, for example, Mozilla.

E-Mail:
support@projectseven.com
Support e-mails are typically answered the same day - except for weekends and U.S. holidays.
Please include your product order number when corresponding so we can verify your support status.
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.
RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you
are not sure how to subscribe, please check this page:
PVII RSS Info
Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with
your product. Please include your Dreamweaver version, as well as your computer operating system
type in all support correspondence.
Snail mail
Project Seven Development
2684 Rockford Road
Dobson, NC 27017-8376

Appendix 1:
Using PVII Tab Panel Magic
Overview
Tab Panel Magic automates the process of building tabbed user interfaces (UIs) - interface elements
that allow you to display multiple panels of content whose access is controlled by clicking CSS-
styled tabs. You can insert as many Tab Panel elements per page as you want, although the system
has built-in CSS support for up to five Tab Panel elements per page. Each Tab Panel element can
contain as many individual tabs (and associated content panels) as you need.
Tip: While a Tab Panel element can have as many tabs as you want, we recommend limiting them to as many as will
comfortably fit within the overall width of your particular Tab Panel element(s).
The Tab Panel User interface is deigned to automatically open to the correct mode based on your
current insertion point in the document. If your insertion point is inside an existing Tab panel system
then the user interface will automatically open in the Modify mode for that Tab panel. If your insertion
point is not within an existing Tab panel system then the user interface will automatically open in the
Create mode.
Inserting a New Tab panel

-Establish the insertion point for your new Tab panel by clicking in the area of the page where you
would like the Tab panel to be created.
-Click the Tab Panel Magic icon in the Common Section of Dreamweaver's Insert Bar.

The Tab panel Magic User Interface will open in the Create New Panel mode.
Tip: In addition to using the Insert Bar icon, you can open the Tab Panel Magic interface by choosing Insert - Studio VII -
Tab Bar Magic by PVII...
You can create as many Tab panel systems on your page as you like.

Modifying an Existing Tab panel

You can modify any of the existing Tab panel system on your page at any time.
-Click inside the tab panel system that you wish to modify.
-Click the Tab Panel Magic icon in the Common Section of Dreamweaver's Insert Bar.
The Tab panel Magic User Interface will open in the Modify Existing Panel mode.

Managing the User Interface Items
Mode
This displays the current operational Mode for the user interface, either Create or Modify. When in
Modify mode, this will also display the "id" of the Tab panel system being modified.
Panel Title
The Title Panel displays descriptive text above the Tab panel buttons. Enter any text that you like.
This box may be left blank if you have the Display Title Panel box un-checked.
Display Title Panel

You can choose whether to have the Tab panel system display the Panel Title. Un-check this box to
display the Tab panel without a title bar.
Tab Buttons
This box displays the text for each tab in the Tab Panel, one line for each Tab. Select (click) the line
which you wish to act on with the other control buttons.
Add
Click the Add button to add a new Tab. A new line will be created, with the default text of "Tab". The
new line will be created immediately after the currently selected line.
Delete
Click the Delete button to remove the currently selected line from the Tab panel.
Up
The Up button will move the selected line in the Tab Buttons list up one row. Successive clicks will
keep moving the line up one row per click until the line is at the top of the list.
Down
The Down button will move the selected line in the Tab Buttons list down one row. Successive clicks
will keep moving the line down one row per click until the line is at the bottom of the list.
Button text
The button text box will always display the text of the currently selected line in the Tab Buttons list.
Enter or edit the text that you wish to display for this Tab Button. The box cannot be left blank.

Global Options
All Tab Panels on the same page will share the same Style Theme and Animation settings.
Changing these settings will affect all Tab Panel systems on the page.
Style Theme
Select the Style Theme to use for all of the Tab panel systems on your page. The Tab panel Magic
system comes with 12 pre-defined style themes to choose from. Choose a theme that best
approximates the desired look; this will act a starting point from which you can later make edits to
the style sheet to fully customize the look and feel as desired.
The box to the right provides a preview of the selected Style Theme. This Preview will change
whenever you select a different Style Theme.
Animation
The iGM system allows you to select from one of 28 different transition effects that run when the Tab
Button is clicked and act on the new content panel being displayed. Select 0-No Animation if you
want to turn this feature off. The animations use the modern IE DirectX Image Transformations to
provide the effect, and will be seen only in IE browsers version 5.5 and up. The system will
automatically provide a scripted "fade-in" transition in all none IE browsers.
The Interface Control Buttons
OK
When you are done adding Tab Buttons and setting your desired options click the OK button to build
the Tab panel. The system will verify your selections and alert you to any problems that need your
attention. If there are no problems the interface will close and the gallery will be added to your page
at the current insertion point if in Create mode, or update your changes to the currently selected Tab
panel if in Modify mode. You can preview in a browser to operate the Tab panel and check its
functionality. To make further changes, you simply click inside the Tab panel and open the Tab
panel Magic interface and begin your modifications.
Cancel
Click the Cancel button to completely abort the current Tab panel Magic operation. This will close
the interface and no changes will be made to your page.
Help
Click the Help button to open the associated Help File in your browser. This page can remain open
for easy reference while you continue working with the Tab panel Magic interface.

Appendix
Removing a Tab Panel
Overview
The Tab panel Magic system includes a Remove feature that allows you to quickly remove an
existing Tab panel Magic system from your page. This feature allows for easy removal when simply
prototyping pages or when a total redesign is necessary.
Open the Remove PVII Tab panel Magic interface

-Open a page that contains one or more Tab panel Magic systems.
-Choose Commands > Studio VII > Remove Tab panel Magic... to open the Remove interface.
The Remove option will be unavailable (grayed out) in the menu if there is no Tab panel Magic system on the page.
The Remove Tab panel Magic interface will open.
The interface will provide a listing of all of the Tab panels on your page; the list will display the ID of
each Tab panel.
-Select the Tab panel that you wish to remove from the listing. You can only remove one Tab panel
at a time.
What will be Removed

The system will completely remove the html markup for the selected Tab panel from your page. If
there are other Tab panels on the page they will not be affected.
If after removal there are no other Tab panel systems on your page then the system will also remove
the related Tab panel markup from your page:

1. The link to the Tab panel Magic JavaScript file will be removed.
2. The link to the Tab panel Magic theme style sheet will be removed.
3. The Tab panel Magic <body> onLoad events (or any in-line initializing scripts) will be
removed.
Note: Only the links to the external files will be removed. The actual JavaScript and CSS files will remain untouched.
What will Not be Removed

The system will not remove the p7tp folder, which contains the Tab panel-related assets (images,
JavaScript file, and CSS files). This ensures that you will not lose any assets you may have modified
and any other pages that depend on those modified assets will continue to look and behave as
expected.
Remove
Click the Remove button. The selected Tab panel Magic system will be removed from the page
Cancel
Click the Cancel button to completely abort the current Remove Tab panel Magic operation. This will
close the interface and no changes will be made to your page.
Help

Appendix: Trigger Panel Behavior

The Tab Panel Magic system comes with a special behavior that allows you to set a link on your
page that will trigger a specific tab on any Tab Panel on your page.
Creating a new Trigger Panel behavior

1. Select (click) an element to act as the behavior trigger, a text link or image.
2. Click the plus sign (+) on the Behaviors panel.
3. Choose Studio VII > Tab panel Magic- Trigger Panel to open the interface.
4. Select the panel that you wish to trigger.
5. Click OK to apply the behavior.
Modifying an existing Trigger Panel behavior

1. Select the element that contains an existing Trigger behavior.
2. Double-click the Tab panel Magic- Trigger Panel behavior in the Behaviors panel to
open the interface.
3. Select the panel that you wish to trigger.
4. Click OK to apply the revised behavior.
The Interface
The Tab Panel Magic Panel Trigger interface allows you to select which panel to trigger.
The interface contains a listing of all of the content panels in all of the tab panel systems on the
page. Select the content panel which you want to trigger.
The content panels are listed by their ID, which follow a unique naming convention, beginning width
"p7tpc" followed by the Tab panel number, and underscore, and then the content panel number. For
example, "p7tpc1_1" would be the first content panel in the first tab panel system on the page, while
"p7tpc3_2" would be the second content panel in the third Tab panel system on the page.
OK

When you have made your selection, click the OK button to apply the behavior. By default the
behavior will be applied to the "onClick" event of the text link or image. You can change the event by
selecting the desired event in the Behaviors panel, for example, the behavior can be applied to the
<body> onLoad event if you wish to trigger a particular content panel (other than the default first
panel) when the page first loads.
Cancel
Click the Cancel button to completely abort the current operation. This will close the interface and no
changes will be made to your page.
Help

PVII Tab Panel Magic PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

PVII Tab Panel Magic PDF

Hochgeladen von

Copyright:

Verfügbare Formate

PVII Tab Panel Magic

PVII Tab Panel Magic ................................................................................................................ 1

© 2006 Project Seven Development 2 of 56

© 2006 Project Seven Development 3 of 56

Before you begin

Move your Tab Panel Magic files to a Defined Dreamweaver site

Included folders and files

Install the Tab Panel Magic Extension

© 2006 Project Seven Development 4 of 56

Covered in this Guide

1. How to insert a Tab Panel into a page

The User Guide also contains:

© 2006 Project Seven Development 5 of 56

Creating your first Tab Panel

Open page1.htm - we'll be using it for this first exercise.

Establishing an insertion point

© 2006 Project Seven Development 6 of 56

Place your cursor inside the text Link 5.

Click the ul#navbar entry on Dreamweaver's Tag Selector bar.

© 2006 Project Seven Development 7 of 56

© 2006 Project Seven Development 8 of 56

Inserting a Tab Panel

The Tab Panel Magic interface will open.

© 2006 Project Seven Development 9 of 56

Setting Tab Panel Options

Leave the Display Panel Title box checked.

In the Tab Buttons pane, select the lone entry Tab.

In the Button Text field, change the label to Books.

Click the Add button to add a second tab.

For Style Theme, select 02-WinXP - No Box.

For Animation, select 1 - Fade In.

© 2006 Project Seven Development 10 of 56

You're Tab Panel is inserted.

© 2006 Project Seven Development 11 of 56

Preview your page.

© 2006 Project Seven Development 12 of 56

Changing the Style Theme

Click the Tab Panel Magic icon.

For Style Theme, select 01 - WinXP.

© 2006 Project Seven Development 13 of 56

For Animation, select 2 - Gradient Wipe.

© 2006 Project Seven Development 14 of 56

Preview your page.

© 2006 Project Seven Development 15 of 56

Tab Panel Assets Created

© 2006 Project Seven Development 16 of 56

Editing Tab Panel Styles

Select and expand the p7tp_01.css style sheet.

Right-Click the rule (Command-Click on Macs) and choose Edit...

The CSS editor window will open.

In the Type Category, change Size to 1.1 ems.

© 2006 Project Seven Development 17 of 56

The title is now slightly larger and bold.

Back in your CSS panel, find the rule named: .p7TP_tabs

Right-click it to open the editor.

© 2006 Project Seven Development 18 of 56

In the Type category, change the Size value to .95 ems.

Back in your CSS panel, find the rule named: .p7TPcontent

Right-click it to open the editor.

© 2006 Project Seven Development 19 of 56

Save the page.

© 2006 Project Seven Development 20 of 56

Creating a Floating Tab Panel