ABSTRACTIONS

by Project Seven Development

Abstractions is a PVII CSS Page Pack that allows you to instantly create stable, standards-based CSS
pages that will perform as expected in all major browsers. The Abstractions page pack requires Elevator
Panel Magic (version 2.1.0 or later).

We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen, PVII

 Abstractions 2

CONTENTS
Abstractions ................................................................................................................................................................................ 1
Install the Abstractions extension and the Elevator Panel Magic extension (if applicable) ......................... 3
Work in a Defined Dreamweaver Web Site ................................................................................................................. 3
Creating an Abstractions page ......................................................................................................................................... 4
Accessibility ............................................................................................................................................................................ 7
Editing and Customizing ..................................................................................................................................................... 7
Background Images and Column Widths ................................................................................................................. 8
The Footer ........................................................................................................................................................................ 10
The Banner Image............................................................................................................................................................... 10
Editing Font Styles .............................................................................................................................................................. 11
Link Styles ......................................................................................................................................................................... 12
Editing The Megavator Menu ......................................................................................................................................... 13
Editing Megavator Root (Trigger) Links .................................................................................................................. 13
Editing the Megavator Sub-Menus .......................................................................................................................... 13
Editing the Megavator Link Styles ................................................................................................................................. 16
Megavator Root Trigger Styles .................................................................................................................................. 16
Megavator Sub-Menu Styles ...................................................................................................................................... 16
Editing Styles for Content in Megavator Sub-Menus .............................................................................................. 18
Editing the Megavator Popup Widget ......................................................................................................................... 18
Can I use a PVII widget on my page? ............................................................................................................................ 22
What if I mess up my style sheet?................................................................................................................................. 22
Support and Contact info ................................................................................................................................................. 23
PVII Knowledge Base .................................................................................................................................................... 23

2
 Abstractions 3

INSTALL THE ABSTRACTIONS EXTENSION

AND THE ELEVATOR PANEL MAGIC EXTENSION (IF APPLICABLE)

Look for the extension installer file p7Abs104.mxp (or higher) in the root of the zip archive you
downloaded. Double-click the file to install the extension. Dreamweaver's Extension Manager will open
and you will be prompted to complete the installation. Once the installation is complete, restart
Dreamweaver.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, then you have a file association issue. To remedy
the problem locate the installer file from inside a Finder window and double-click it.

If you purchased the Abstractions-Elevator bundle, make sure you also install Elevator Panel Magic
following the instructions in your Elevator Panel Magic User Guide. Abstractions will not work unless
you do so.

WORK IN A DEFINED DREAMWEAVER WEB SITE

Before you begin, make sure you are working inside a defined Dreamweaver web site - on a page that is
saved within that site. This is necessary so that Dreamweaver knows how to link required assets to your
page. If you are new to Dreamweaver or need to learn how to define a web site, please see this tutorial:
Defining a Dreamweaver Web Site.

3
 Abstractions 4

CREATING AN ABSTRACTIONS PAGE

Viewed from any angle, Abstractions is all about design that is clean and professional. Now let's see
how easy it is to create a page. To create a page, choose:

File > New PVII PagePack > Abstractions

Note: If you have older Page Packs installed, as the above image depicts, you'll notice that Abstractions appears as a dedicated entry on the
menu flyout. This is normal and all future Page Packs will be listed this way.

The Abstractions interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice.
There are 6 layouts. You must have Elevator Panel Magic installed.

Click the Create button.

4
 Abstractions 5

The Save As dialog will open.

Browse to a folder within your current Dreamweaver-defined site so that it appears in the Save in box.

Enter a File name.

Click Save.

When your page is created, the system also creates several folders that contain related page assets.

1. p7epm
This folder is created for the Elevator widgets on your page. It contains your Elevator script, CSS,
and images.
2. p7Abstractions
This folder contains your Abstractions CSS files
3. p7Abstractions/img
This folder contains your Abstractions images
4. Fireworks
This folder contains editable Fireworks images

Note: The Page Pack system will create these folders in the same folder where you save your Page Pack page. Keep that in mind as it is a
powerful tool that enables you to create multiple testing folders in which to play, but you must be mindful of where your relevant assets
folders are when you ultimately publish your page or when you edit assets.

5
 Abstractions 6

The assets folder structure will look like this:

Note: Your actual file listing will be different depending on the Page Design you chose.

Do I need to upload these folders to my web server?

When you publish your page, you need to make sure that all assets folders are uploaded—except for
the Fireworks folder.

6
 Abstractions 7

ACCESSIBILITY

What's a web page if it's not accessible and usable? Section 508 guidelines are adhered to, giving you a
solid base on which you can build in the accessibility features you require, right on up to the highest
WAI checkpoints. All content is, of course, always accessible to search engine spiders and the adaptable
columns provide a unique level of usability on a wide range of large and small devices.

EDITING AND CUSTOMIZING

Abstractions pages are CSS-based, making customizations easy to accomplish using Dreamweaver's
built-in CSS editing features.

Each layout has a corresponding CSS file it uses, which is stored in the p7Abstractions folder:

 Layout 01 - 3 Column: Main Column Left uses p7abstractions01.css

 Layout 02 - 3 Column: Main Column Center uses p7abstractions02.css
 Layout 03 - 2 Column: Sidebar Left uses p7abstractions03.css
 Layout 04 - 2 Column: Sidebar Right uses p7abstractions04.css
 Layout 05 - 1 Column uses p7abstractions05.css
 Layout 06 - 3 Column: Equal Widths uses p7abstractions06.css

All layouts use 2 additional CSS files for the Megavator Menu and the Megavator Popup. These files are
located inside the p7epm folder:

 epm55/p7EPM55.css, is for the menu

 epm56/p7EPM56.css, is for the popup

Note: Advanced CSS coders can edit the CSS directly or with a dedicated editor.

7
 Abstractions 8

BACKGROUND IMAGES AND COLUMN WIDTHS

Abstractions uses a background image assigned to the columnwrapper DIV in each of the multi-column
layouts. This background is what renders the column colors and borders—while making all columns
equally tall. Each Abstractions layout has a corresponding editable Fireworks file, in which you can edit
the layout colors:

 p7abs3col_mainFirst.png (Layout 01 - 3 Column: Main Column Left)

 p7abs3col_mainCenter.png (Layout 02 - 3 Column: Main Column Center)
 p7abs2col_sidebarLeft.png (Layout 03 - 2 Column: Sidebar Left)
 p7abs2col_sidebarRight.png (Layout 04 - 2 Column: Sidebar Right)
 p7abs1col.png (Layout 05 - 1 Column)
 p7abs3col_EqualWidths.png (Layout 06 - 3 Column: Equal Widths)

Pictured below is p7abs3col_mainFirst.png:

The yellow, orange, red, and blue bars represent the structural DIV elements used in the layout along
with their widths and margin values. The green overlays are Web slices, which represent the individual
web images in the p7Abstractions/img folder.

Note: If you change the width of your columns you must change the width of your Web slices to match—and you must also change the width
values for your column DIVs in your layout's style sheet.

8
 Abstractions 9

If you edit the Fireworks image you need to export the slices to your p7Abstractions/img folder. You do
that from Fireworks by choosing:

File > Export

Browse to your p7Abstractions/img folder

Make sure your Export settings are the same as those pictured in the above screen capture:

 Export: Images only

 HTML: None
 Slices: Export Slices
 Current page only: Checked

Click Save

9
 Abstractions 10

You will get an overwrite prompt:

Click OK

Your Web page in Dreamweaver will reflect your changes.

THE FOOTER

The footer DIV has a simple background image that is used to render the dotted rule between its 2
columns.

THE BANNER IMAGE

The Abstractions banner image is a piece of art made by us and is meant to be replaced with an image
pertinent to your Web page. If you want to use our art, you can download a clean copy (without the
Abstractions text) here:

Download the Abstractions banner

10
 Abstractions 11

EDITING FONT STYLES

The CSS examples listed below are all based on Layout 01. The CSS for other layouts will be slightly
different.

The main page font family is declared on the page's body selector, which is the first style rule in your
page style sheet:

body {
font-family: Calibri, Arial, sans-serif;
margin: 0 0 30px 0;
padding: 0px;
color: #000;
background-color: #FFF;
font-size: 100%;
min-width: 940px;
}

Font-sizes for the individual areas of the page are set on the relevant CSS rule:

.maincolumn {
width: 548px;
font-size: .85em;
margin-right: 8px;
}

.sidebar1 {
width: 180px;
color: #CCC;
font-size: 0.75em;
margin-right: 8px;
background-image: url(img/accent4.jpg);
background-repeat: no-repeat;
background-position: center top;
}

11
 Abstractions 12

.sidebar2 {
width: 180px;
font-size: .75em;
}

.footer {
background-image: url(img/abs_vertRule.gif);
background-repeat: repeat-y;
padding: 20px 32px;
color: #CCC;
font-size: 0.7em;
overflow: hidden;
zoom: 1;
background-position: 548px 0px;
}

Tip: Font sizes are set in em units, but feel free to use pixels if you want to.

LINK STYLES

Text link styles in the content areas are left to browser defaults except for layouts in which one of the
columns is black and the footer (which is black in all layouts). These link styles are combined into a single
set of selectors for both the footer link styles and the link styles for a black sidebar (if applicable). Here
are the relevant style rules for Layout 01:

.footer a, .sidebar1 .content a {

color: #CCC;
}
.footer a:hover, .sidebar1 .content a:hover {
color: #4882D9;
}

12
 Abstractions 13

EDITING THE MEGAVATOR MENU

The Megavator menu at the top of your page can be easily edited using a combination of the Elevator
Panel Magic interface for root (trigger) links and Dreamweaver Design View for your sub-menus.

EDITING MEGAVATOR ROOT (TRIGGER) LINKS

Megavator root (trigger) links can be edited using the Elevator Panel Magic interface to add, remove, or
re-order your links. To launch the interface, place your cursor inside one of the sub-menus and click the
Elevator Panel Magic icon on your Insert Bar or Insert Panel or choose:

Modify > Studio VI > Modify Elevator Panel Magic by PVII

See your Elevator Panel Magic User Guide for detailed instructions or access the following online
tutorials to help you customize and edit your Megavator menu:

Megavator online Tutorials

EDITING THE MEGAVATOR SUB-MENUS

Megavator sub-menus are ordinary DIV elements that are completely editable inside Dreamweaver
Design View. You can add any type of content you want to, including images, lists, paragraphs, tables,
and even forms.

The default menu inserted on your page by the Abstractions interface contains 4 root links, with sub-
menus for the second and third root links. The content of your sub-menus is edited as you would any
ordinary content in Dreamweaver.

13
 Abstractions 14

The links inside panels 2 and 3 are inside unordered lists. If you are familiar with markup you will be able
to easily edit, add, or delete links. If you are not proficient with code we recommend toggling CSS
rendering so you can see the base lists, making them easier to edit. To do so, make sure your Style
Rendering toolbar is enabled in Dreamweaver:

Choose View > Toolbars > Style Rendering

The Style Rendering toolbar will appear in an available space along the top of your application window
(shown under a green overlay we added):

To toggle CSS style rendering, click the next-to-last icon on the toolbar

14
 Abstractions 15

With CSS rendering toggled off, your sub-menus will look like this:

Now you can edit the sub-menu links as you would a simple bulleted list and the content as you would
any ordinary content.

Note: Do not edit the root trigger links in Design View. You must use only the Elevator Panel Magic interface.

Click the icon on your Style Rendering toolbar to turn CSS rendering back on after you are
finished editing.

15
 Abstractions 16

EDITING THE MEGAVATOR LINK STYLES

The Megavator link styles, including the root trigger links and sub-menu links are controlled via style
rules in your Megavator CSS file, located here:

p7epm/epm55/p7EPM55.css

The styles can be edited directly from within the CSS file or through Dreamweaver's CSS Styles Panel in
Design View.

MEGAVATOR ROOT TRIGGER STYLES

Please see your Elevator Panel Magic User Guide or this online tutorial:

Megavator Online Tutorial

MEGAVATOR SUB-MENU STYLES

The Megavator sub-menu link styles are controlled via style rules in your Megavator CSS file, located
here:

p7epm/epm55/p7EPM55.css

The CSS can be edited directly from within the file or through Dreamweaver's CSS Styles Panel.

The sub-menu links are inside a horizontally positioned unordered list. Here are the rules that govern
the sub-menu links:

The linklist class is assigned to the menu list's UL tag. Edit only the font-size.

.p7EPM55 .linklist {
margin: 0;
padding: 0;
list-style-type: none;
width: auto;
font-size: 0.9em;
}

16
 Abstractions 17

The following rule applies to the individual list items within the menu list. Do not edit this rule.

.p7EPM55 .linklist li {
margin: 10px 6px 10px 0;
float: left;
}

The following rule applies to the links in their default state. To make your links taller or shorter edit the
first padding value. To make your links wider or narrower edit the second padding value. Edit color or
background-color to suit. Edit the border to suit. Do not edit the display or zoom values.

.p7EPM55 .linklist a {
display: block;
padding: 3px 12px;
zoom: 1;
text-decoration: none;
background-color: #000;
color: #CCC;
border: 1px solid #666;
}

The following rule applies to the links in their hovered state. Any of the values can be edited to suit.

.p7EPM55 .linklist a:hover {

text-decoration: none;
background-color: #000;
color: #FFF;
border-color: #A2A2A2;
}

17
 Abstractions 18

EDITING STYLES FOR CONTENT IN MEGAVATOR SUB-MENUS

General styles for content in your sub-menus can be changed by editing all rules in your p7EPM55.css
file that begin with .p7EPM55 .p7epm_content.

EDITING THE MEGAVATOR POPUP WIDGET

Each Abstractions page contains a popup widget.

This widget uses Megavator style theme 56 that is set to open its panels upwards. When you create your
Abstractions page, the widget is automatically configured with its trigger links below the panels. The
styles for this widget are located in p7epm/epm56/p7EPM56.css

If you want to add a second popup widget to your page you will need to reposition the triggers yourself.
Let's cover the steps necessary to acheive this.

18
 Abstractions 19

To add an additional popup widget to your page, insert an Elevator Panel Magic widget and set your
options as depicted below:

Make sure your settings are precisely the same as those depicted in the above illustration and that you
have chosen the 56-Abstractions PopUp Style Theme.

19
 Abstractions 20

Your markup will look like this:

Select the entire trigger DIV

Choose Edit > Cut

20
 Abstractions 21

Now make a new line just below the ending </div> tag of the widget (which comes right after the closing
</script> tag)

Place your cursor on the new line and create a new DIV tag with a blank line between the opening <div>
tag and the closing </div> tag.

Assign a class of p7EPM56 to the tag:

<div class="p7EPM56">

</div>

Your code should look like this:

Place your cursor on the blank line between the opening and closing DIV tag and choose Edit > Paste to
paste in the trigger DIV. Your code should now look like this:

21
 Abstractions 22

CAN I USE A PVII WIDGET ON MY PAGE?

Yes. You can insert any of our Web Page Components, or Image Gallery Tools in your Abstractions
pages.

WHAT IF I MESS UP MY STYLE SHEET?

In the event that you break your style sheets beyond repair, you can revert back to a default style sheet
by deleting the broken one. To do so, find the broken style sheet that is linked to the page you are
working on. It will be inside the p7Abstractions folder. Delete the CSS file.

Your page will now appear as unstyled text and images. Don't worry.

Open the Abstractions Page Pack interface and create a new page with the same layout as
your original. Save the page in the same folder as your original page.

The system will generate a fresh style sheet.

You can delete the new page if you want.

Depending on the version of Dreamweaver you are running, you might have to save, close, and then re-
open the page to see your styles restored.

22
 Abstractions 23

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

Use a news reader program such as Outlook Express, Windows Mail, Thunderbird, or Entourage to set
up a new news account pointing to our news server:

forums.projectseven.com

If you are not sure how to do this, the following links will help you:

 Setting up a new newsgroup account in Outlook Express

 Setting up a new newsgroup account in Mozilla Thunderbird
 Setting up a new newsgroup account in Entourage

If you have another newsgroup-capable program that you are using, please see its documentation to
learn how to add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with Usenet feeds that may be provided by your ISP. That is, you will not find our
newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our news server as a new account.

23
 Abstractions 24

RSSNews 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.

E-Mail: support@projectseven.com

Phones: 330-650-3675 | 336-374-4611

Phone hours are 9:00am - 5:00pm Eastern Time U.S.

Snail mail

Project Seven Development

339 Cristi Lane
Dobson, NC 27017

24