PVII Tab Panel Magic
PVII Tab Panel Magic
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
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
The Interface Control Buttons ............................................................................................................ 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
The Interface Control Buttons ............................................................................................................ 55
OK .................................................................................................................................................. 55
Cancel ............................................................................................................................................ 56
Help ................................................................................................................................................ 56
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.
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).
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).
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.
1. page1.htm
2. page2.htm
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.
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.
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...
Select the new entry in the Tab Buttons pane and change its label to Software in the Button Text
field.
Click OK.
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.
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.
Place your cursor anywhere inside the Tab Panel content area.
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.
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.
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.
• 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.
With page1.htm still open, open Dreamweaver's CSS panel (Window - CSS Styles or Shift + F11).
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.
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.
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.
In the Type category, change the Color value to 90% black: #333333.
Click OK.
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.
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.
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.
Right-Click (Command-Click Mac) anywhere on the page and choose CSS Styles - New...
Click OK.
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.
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.
Add the following sentence to the first content panel in the sidebar Tab Panel:
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.
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.
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.
Click the non-fiction link. The Nonfiction tab and its associated content panel in the second Tab
Panel are triggered.
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 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.
Locate the rule named: .p7TPheader and open it in Dreamweaver's CSS Editor.
Switch to the Border category and set the Bottom Color to #333333.
Click OK.
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
Click OK.
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:
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.
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:
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.
.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.
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.
Note: The 2 Basic Style Themes do not use a background image. They use only a background-color.
.p7TP_tabs div {
display: block;
float: left;
background-image: url(img/tabs01_up.gif);
background-repeat: no-repeat;
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.
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.
.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.
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;
Do not edit, remove, or in any way change the padding, position, or the z-index properties.
.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.
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:
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.
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: 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:
[email protected]
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
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.
-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.
-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.
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.
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.
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.
-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 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.
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.
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
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.
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
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.