Mirage

By Project Seven Development

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

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

Al Sparber & Gerry Jacobsen PVII

 Mirage 2

Table of Contents
Mirage ........................................................................................................................................................... 1
Install the extension .................................................................................................................................. 4
Work in a Defined Dreamweaver Web Site .............................................................................................. 4
Creating a Mirage page ............................................................................................................................. 4
Assets folders ........................................................................................................................................ 7
Accessibility ............................................................................................................................................... 7
Images ........................................................................................................................................................... 8
All Layouts ................................................................................................................................................. 8
Layout 1 4 Column Portal.......................................................................................................................... 9
Layout 2 3 Column Portal........................................................................................................................ 10
Layout 3 3 Column Interior ..................................................................................................................... 11
Layout 4 2 Column Sidebar Left .............................................................................................................. 12
Layout 5 2 Column Sidebar Right ............................................................................................................ 13
Layouts 6 and 7 2 Column Flexible Sidebar Left 2 Column Flexible Sidebar Right ................................. 14
Layouts 8 and 9 1 Column 1 Column plus ............................................................................................... 15
Pop Menu Magic ..................................................................................................................................... 15
Exporting edited web images from Fireworks ........................................................................................ 16
If you use Fireworks CS5 ..................................................................................................................... 16
Export your images ............................................................................................................................. 17
Photoshop User Note.......................................................................................................................... 18
CSS............................................................................................................................................................... 18
Pop Menu Magic CSS Glossary ................................................................................................................ 18

2
 Mirage 3

Questions and Answers .............................................................................................................................. 19

Can I use a PVII menu system or widget on my page? ........................................................................... 19
What are the cool black or gray boxes on my pages? ............................................................................ 19
Border-radius value syntax ................................................................................................................. 20
Can I add more popper boxes to my page? ............................................................................................ 21
Why doesn't border radius or box shadow work in some browsers? .................................................... 21
What is the iphone.css file for? .............................................................................................................. 21
Can I use the PMM Mirage Style Theme on non-Mirage pages, positioned at the top? ....................... 21
What if I mess up my style sheet or images?.......................................................................................... 22
Support and Contact info ........................................................................................................................ 23
PVII Knowledge Base ........................................................................................................................... 23

3
 Mirage 4

Install the extension

Look for the extension installer file p7_Mirage_106.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. Restart Dreamweaver once the installation is
complete.

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.

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.

Creating a Mirage page

Let's see how easy it is to create a page. To create a page, choose:

File > New PVII PagePack > Mirage

Note: If you have older Page Packs installed, as the above image depicts, you'll notice that Mirage appears as a dedicated entry on the menu fly out. This is normal
and all recent and future Page Packs are listed this way.

4
 Mirage 5

The Mirage interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice.
There are 9 layouts—each is offered with the option of a Pop Menu Magic menu or a basic CSS menu.
You must have Pop Menu Magic 2 installed to use the Pop Menu Magic 2 System Menu Type option.

Click the Create button.

5
 Mirage 6

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.

6
 Mirage 7

Assets folders
When your page is created, the Page Pack system generates several new folders

1. Fireworks
This folder contains editable Fireworks images for your Mirage layouts and for Pop Menu Magic
2 (if you have it).
2. p7mirage
This folder contains your Mirage CSS files and images
3. p7pmm
This folder is created if you chose a layout containing a Pop Menu Magic 2 menu. It contains
your PMM2 script, CSS, and images.

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.

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.

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.

7
 Images 8

Images
The Mirage layouts utilize background images to render equal height curved columns. We provide
editable Fireworks documents that you can use to edit the images. Please refer to the following section
to identify the Fireworks file that corresponds to the layout you wish to edit.

Note: The Fireworks image documents will be added to the Fireworks folder only when you create the related Mirage page. The Fireworks folder will also contain a
Pop Menu Magic image document if you have selected the Pop Menu Magic menu option for your layout.

The images are very simple and should pose no problem so long as you understand image editing basics.
The image slices (represented by green overlays) are already set up for export so it is recommended that
you not change the dimensions of the images. Simply edit colors and textures.

All Layouts
MIRAGE-MAIN.PNG

This file contains 7 web images (slices):

1. Logo
2. Masthead horizontal tile
3. Tagline
4. Header left curve
5. Header middle tile
6. Header right curve
7. Bottom menu bar tile

The font used for the logo is Century Gothic. If you do not have it installed, you can purchase it from a
foundry or substitute a font of your choice.

8
 Images 9

Layout 1
4 Column Portal
MIRAGE-COLUMN-4.PNG

This file contains 6 web images (slices):

1. Column 1 top image

2. Column 2 top image
3. Column 3 top image
4. Column 4 top image
5. Tiling middle section of the columns layout
6. Bottom columns curve

9
 Images 10

Layout 2
3 Column Portal
MIRAGE-COLUMN-3-PORTAL.PNG

This file contains 5 web images:

1. Column 1 top image

2. Column 2 top image
3. Column 3 top image
4. Tiling middle section of the columns layout
5. Bottom columns curve

10
 Images 11

Layout 3
3 Column Interior
MIRAGE-COLUMN-3.PNG

This file contains 2 web images:

1. Tiling middle section of the columns layout

2. Bottom columns curve

11
 Images 12

Layout 4
2 Column Sidebar Left
MIRAGE-COLUMN-2.PNG

This file contains 2 web images:

1. Tiling middle section of the columns layout

2. Bottom columns curve

12
 Images 13

Layout 5
2 Column Sidebar Right
MIRAGE-COLUMN-2-SBR.PNG

This file contains 2 web images:

1. Tiling middle section of the columns layout

2. Bottom columns curve

13
 Images 14

Layouts 6 and 7
2 Column Flexible Sidebar Left
2 Column Flexible Sidebar Right
MIRAGE-COLUMN-2-FLEX.PNG

This file contains 8 web images:

1. Tiling middle section of the columns for the sidebar left layout
2. Tiling right edge for the sidebar left layout
3. Bottom left corner for the sidebar left layout
4. Bottom right corner for the sidebar left layout
5. Tiling left edge for the sidebar right layout
6. Tiling middle section of the columns for the sidebar right layout
7. Bottom left corner for the sidebar right layout
8. Bottom right corner for the sidebar right layout

14
 Images 15

Layouts 8 and 9
1 Column
1 Column plus
MIRAGE-COLUMN-1.PNG

This file contains 3 web images (slices)

1. Vertical rule
2. Tiling middle section of the layout
3. Bottom curve

Pop Menu Magic

PMM-MIRAGE-MENU.PNG

This file contains a single element (no slices) that is the tiling semi-transparent background used for the
PMM Mirage Theme's sub-menus. It is optimized as a PNG 32 for alpha transparency.

15
 Images 16

Exporting edited web images from Fireworks

After making your edits, export the web slices from Fireworks back to your p7mirage/images web
folder.

If you use Fireworks CS5

Changes in Fireworks CS5 could cause it to append the image file names with "_s1". To prevent that,
you'll need to reset Fireworks HTML options. To do so:

Choose File > HTML Setup

Switch to the Document Specific tab and reset all options as depicted in the screen capture below:

Click OK

16
 Images 17

Export your images

Choose File > Export

For Save in browse to your p7mirage/images folder

Since you are exporting slices, the File name is irrelevant.

Make sure Export is set to Images Only (HTML will be set to None and grayed out)

Set Slices to Export Slices

Check the Current page only box

Click Save

17
 CSS 18

Fireworks will ask if you'd like to replace the existing file.

Click OK

Photoshop User Note

If you use Photoshop you must create your own background images to replace the default ones. Adobe
Fireworks is Adobe's default web image editor and is designed to most efficiently handle the editing
and optimization of web images.

CSS
Mirage pages are CSS-based, making customizations easy to accomplish using Dreamweaver's built-in
CSS editing features. The CSS files are extremely simple, consisting of a minimum of rules and even an
intermediate level understanding of CSS should allow you to locate and edit what you need to achieve
your goals. If you do not understand the basics of CSS you should use one of our support venues before
you get frustrated. See the support section at the end of this user guide.

Pop Menu Magic CSS Glossary

Mirage includes a new set of Themes for Pop Menu Magic. They will appear in the Themes list of your
Pop Menu Magic 2 interface, which means you can use them not only on Mirage pages, but on any page
you create. See the online PMM2 CSS glossary for tips on how to edit typical PMM2 CSS styles.

18
 Questions and Answers 19

Questions and Answers

Can I use a PVII menu system or widget on my page?

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

What are the cool black or gray boxes on my pages?

They are called Page Poppers. They are simply DIVs which have been assigned one of 2 CSS classes
included in the Mirage style sheets: page-popper or page-popper-gray. Here's what they look like:

.page-popper {
background-color: #101010;
color: #CCC;
padding: 20px 20px 12px 20px;
font-size: 12px;
border: 2px solid #101010;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 20px #000;
-moz-box-shadow: 5px 5px 20px #000;
-webkit-box-shadow: 5px 5px 20px #000;
margin-bottom: 16px;
}

.page-popper-gray {
background-color: #8A8A8A;
color: #FFF;
padding: 20px 20px 12px 20px;
font-size: 12px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 20px #000;
-moz-box-shadow: 5px 5px 20px #000;
-webkit-box-shadow: 5px 5px 20px #000;
margin-bottom: 16px;
}

Background-color, color, padding, font-size, and border are very obvious. So let's move on to "Border-
radius", "-moz-border-radius", and "-webkit-border-radius", which all do the same thing (rounded
corners)—but each does it for specific browsers...

19
 Questions and Answers 20

border-radius
This is the standard CSS property name and is supported by Opera 10 and Internet Explorer 9.

-moz-border-radius
This is a proprietary CSS property name and is supported by Firefox browsers.

-webkit-border-radius
This is a proprietary CSS property name and is supported by Webkit browsers, which include Google
Chrome and apple Safari.

Border-radius value syntax

The radius is set to 5px, creating nice and subtle rounded corners. If you increase or decrease the radius
value, make sure you do it for all 3 properties (border-radius, -moz-border-radius, and -webkit-border-
radius). This property supports shorthand syntax which means that a single value (which we have used
here) applies the radius to all 4 corners. You can also assign specific radii to each corner or to pairs of
corners. For instance, "border-radius: 5px 5px 0px 0px" would assign 5px to both the top left and top
right corners and 0px to the bottom corners.

The next property also comes in a threesome: "box-shadow", "-moz-box-shadow", and "-webkit-box-
shadow":

box-shadow
This is the standard CSS property name and is supported by Opera 10 and Internet Explorer 9.

-moz-box-shadow
This is a proprietary CSS property name and is supported by Firefox browsers.

-webkit-box-shadow
This is a proprietary CSS property name and is supported by Webkit browsers, which include Google
Chrome and apple Safari.

Box-shadow value syntax

Box-shadow syntax is more complex than radius. The syntax and values we used can be translated
thusly:

box-shadow: 5px (horizontal offset) 5px (vertical offset) 20px (blur) #000 (color)

For a complete perspective on this property, see the W3C specification.

Note: The PMM2 Mirage style theme also uses border-radius and box-shadow effects.

20
 Questions and Answers 21

Can I add more popper boxes to my page?

Sure. All you need to do is assign one of the popper classes to an element on your page, such as a DIV or
paragraph. For example:

<div class="page-popper">
<p>Contents in here</p>
</div

Why doesn't border radius or box shadow work in some browsers?

These properties are CSS level 3 properties and work in the majority of modern browsers, including
Firefox, Opera, Chrome, Safari, and IE9. Older browsers, such as IE8, simply ignore the properties. The
practice of using modern methods that work in modern browsers, while allowing older browsers to
ignore them, is called progressive enhancement. The core concept in this case is simple: make a page
that works in all browsers and then add cosmetic enhancements for modern browsers, while preserving
the base design and content accessibility for old browsers.

What is the iphone.css file for?

The iphone.css file is read by Apple touch devices (iPhones, iPods, iPads) and sets the bottom navigation
bar to a static element. We do this because Apple touch devices do not support fixed positioning.

Can I use the PMM Mirage Style Theme on non-Mirage pages, positioned at the top?
Yes. You can insert a horizontal Mirage menu at the top of any page and its sub-menus will open down.
What makes the Mirage menu fixed is the container in which it is placed, along with the fact that it is set
in the PMM interface to open upwards.

21
 Questions and Answers 22

What if I mess up my style sheet or images?

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 p7mirage folder. Delete the CSS file.

Your page will now appear as un-styled text and images. Don't worry.

Open the Mirage 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.

You can also delete images in the p7mirage/images folder and create a new page, as above. When the
new page is created, the system will re-populate the images folder with default images for any image
that you deleted.

22
 Questions and Answers 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.

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

23
 Questions and Answers 24

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