CURVITUDE

A PVII Page Pack

Your Page Pack page is automatically built with a couple of mouse clicks in a special Page Pack window inside
Dreamweaver. Choose your layout options, click OK, and your page is built INSTANTLY.

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

Al Sparber & Gerry Jacobsen PVII

 Curvitude 2

CONTENTS

Curvitude ............................................................................................................................................................................................................ 1

Inside the Zip File ............................................................................................................................................................................................ 4

Install the extension ....................................................................................................................................................................................... 4

Work in a Defined Dreamweaver Web Site ......................................................................................................................................... 4

Page Design Choices ....................................................................................................................................................................................... 5

Creating Curvitude Pages ............................................................................................................................................................................ 5

Assets Folders .............................................................................................................................................................................................. 7

Curvitude CSS Files .................................................................................................................................................................................... 8

JavaScript ....................................................................................................................................................................................................... 8

Site Management and Dreamweaver Templates.......................................................................................................................... 9

Site Management ................................................................................................................................................................................... 9

Questions and Answers ..............................................................................................................................................................................10

Why are the Pop Menu Magic sub-menus not curved in IE6? ..............................................................................................10

Why do the arrows indicating sub-menus not appear in IE6? ........................................................................................10

How do I change the font style for my page? ...............................................................................................................................11

How do I change font sizes for my page? ..................................................................................................................................12

How do I change the nav bar styles when using the basic (non-PMM) CSS menu? ....................................................12

How do I edit the link styles for regular text links in my page? ..........................................................................................13

How do I edit the look of my columns?...........................................................................................................................................14

How do I change the logo?....................................................................................................................................................................15

Can I edit the background images for the Pop Menu Magic sub-menus or horizontal container? ......................16

Can I edit the background images that comprise the optional rounded section boxes? ..........................................17

How do I add Rounded Section Boxes to my page?...................................................................................................................18

Can the middle box be an alternate color? ...............................................................................................................................25

Can I make section boxes in the sidebars? ...............................................................................................................................26

What if I mess up my style sheet? .....................................................................................................................................................27

2 © 2008 Project Seven Development

 Curvitude 3

Support and Contact info ...........................................................................................................................................................................28

PVII Knowledge Base ..............................................................................................................................................................................28

Newsgroup forum communities ...................................................................................................................................................28

RSS News Feeds ...................................................................................................................................................................................29

Before you Contact us ........................................................................................................................................................................29

Snail mail .................................................................................................................................................................................................29

3 © 2008 Project Seven Development

 Inside the Zip File 4

INSIDE THE ZIP FILE

The zip file you downloaded when you purchased Curvitude contains the following files and folders:

 p7Curvitude185.mxp: The extension installer file (columns the version number might be higher if we updated
the extension after initial shipping)
 The Curvitude User Guide
 readme_first.htm: A file containing basic instructions and installation notes
 license.htm: The product license agreement
 Fireworks: a folder containing editable Fireworks documents that can be used to customize the Curvitude and
graphics

Note: Fireworks is Adobe's default web image editor. If you do not own a copy, you can download a 30-day
trial version.

INSTALL THE EXTENSION

Look for the extension installer file p7Curvitude185.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. If you have other Page Packs installed, or if you have Pop
Menu Magic installed, the Page Pack installer will need to update your configuration files and you will get a
prompt to overwrite existing files. Accept all overwrites by clicking YES or YES TO ALL when prompted.

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

4 © 2008 Project Seven Development

 Page Design Choices 5

PAGE DESIGN CHOICES

Curvitude comes with 6 basic layouts, which can be expanded to 12 if you own Pop Menu Magic.

There are 6 basic column arrangements and each one can be created with a default CSS nav bar or a Pop
Menu Magic menu - for a total of 12 possible layouts.

Note: If you purchase Pop Menu Magic after installing Curvitude, you must re-install the Curvitude Page Pack.

CREATING CURVITUDE PAGES

To create a Curvitude page:

 Open Dreamweaver if it isn't already open and make sure you have selected a defined web site.
 Choose File :: New PVII Page Pack :: Page Packs

5 © 2008 Project Seven Development

 Creating Curvitude Pages 6

The Page Pack interface will open.

Note: The screen capture above depicts how the Curvitude interface looks when Pop Menu Magic is installed. If PMM is not installed, you will see 6 choices in
the Page Design column.

 Select Curvitude in the Page Pack SET column

 In the PAGE DESIGN panel, select a design. As you select PAGE DESIGNS in the center column you will see a
preview of the page in the right column.

The SAVE AS dialog window will open

Browse to a folder in your defined site. You can also use this dialog to create a new folder if you like.

 Enter a file name, such as mypage.htm, in the FILE NAME box.

 Click the Save button.

6 © 2008 Project Seven Development

 Creating Curvitude Pages 7

Your page is created. IT'S REALLY THAT EASY!

ASSETS FOLDERS

To support your pages, the Page Pack system creates folders that contain the assets used by your pages. The
Curvitude assets folders are created inside the folder that your page was saved in — when you first created it.
This feature allows advanced users to create prototype pages, in various folders, with their own folder-
specific assets. The assets folders are:

 demo_images: This folder contains the sample images inserted inside the columns of your pages.
 p7curvitude: This folder contains all of the style sheets and images necessary to support your page(s).
 p7pm: This folder contains all of the assets necessary to support pages created with an optional Pop Menu
Magic nav bar.

Note: When you publish your site, each of these folders must be uploaded to your web server.

7 © 2008 Project Seven Development

 Creating Curvitude Pages 8

CURVITUDE CSS FILES

Each Curvitude page can have up to 4 style sheets attached to it. For example, if you create the second layout
listed in the Curvitude interface (3 Col Vert Nav 982px + PMM) these style sheets are attached:

 p7curvitude/p7CRV01.css: The main layout style sheet.

 p7curvitude/p7CRVboxes982_3col.css: A special style sheet containing the styles that govern the optional
curved section boxes.
 p7curvitude/p7CRV_PMMvert.css: If your layout contains a Pop Menu Magic menu, this style sheet controls its
styles over and beyond the default PMM style sheet.

And since this layout contains a Pop Menu Magic menu, the core PMM style sheet from your P7PM folder will
also be attached:

 p7pm/p7pmv0.css

JAVASCRIPT

If you choose a layout containing a Pop Menu Magic navigation bar, a JavaScript file will be linked to your
page:

 p7pm/p7popmenu_crv.js

This is a special version of the PMM script that contains special code for your Curvitude menu.

Note: The first time you use the PMM interface to edit the menu on your page, the PMM system will write a default PMM JavaScript file inside your p7pm
folder. This script will not affect the special custom script file and its link to your page.

8 © 2008 Project Seven Development

 Creating Curvitude Pages 9

SITE MANAGEMENT AND DREAMWEAVER TEMPLATES

If you are new to Dreamweaver, or to web development, the following topics will help you to set up your site
efficiently and to identify the files that must be uploaded to your web server.

SITE MANAGEMENT

For the typical user, it is recommended that you use a site management technique, such as Dreamweaver
Templates, to centralize repeating content such as headers, footers, and navigation bars. By attaching all
pages to your Dreamweaver Template, you assure that all pages are linked to the same assets. When you
make a change to a repeating element in your master Template, Dreamweaver will update all pages that are
linked to that Template — no matter where in your site those pages are.

Tip: If you decide to use a 3-column page for your home page and 2-column pages for all inside pages, you would only need to make a Template for the
inside pages.

If you've never employed a site management technique, we suggest that you read the Templates topics in
Dreamweaver's help system.

Note: Advanced users can also use Server Includes to manage repeating content.

9 © 2008 Project Seven Development

 Questions and Answers 10

QUESTIONS AND ANSWERS

This section covers various modifications you can employ to alter your page's appearance or functionality.

WHY ARE THE POP MENU MAGIC SUB-MENUS NOT CURVED IN IE6?

For the curved sub-menu boxes to work, transparent PNG images are required. IE6 does not support
transparent PNGs. While there are hacks that can force IE6 to render transparent images, those hacks only
work in simple, static environments and are not viable for hierarchical menus. IE6 is, therefore, fed a different
set of styles, via a conditional comment, so that it displays rectangular sub-menu boxes. The conditional
comment appears in the head of your page:

<!--[if lte IE 6]>

<style>
#p7PMnav a {background-image: none !important; padding: 6px 10px !important;}
#p7PMnav a:hover, #p7PMnav .p7PMon {background-color: #010101 !important;}
#p7PMnav ul {border: 1px solid #FFF;}
#p7PMnav ul li {filter: alpha(opacity=90);background-color: #FF9900;}
#p7PMnav .p7PMtrg, #p7PMnav .p7PMon {background-image: url(p7pm/img/p7PM_light_east.gif) !important;
background-repeat: no-repeat;background-position: right center !important;}
</style>
<![endif]-->

WHY DO THE ARROWS INDICATING SUB-MENUS NOT APPEAR IN IE6?

The CSS rule that carries the arrow for IE6 is inside a conditional comment. Dreamweaver does not manage
paths inside these structures, so if you move a page to a folder other than the one that contains your default
assets folders, the path to the arrow image will break. The easiest way to fix that is to make the path root
relative. If you are unsure how to do that, here is a little tip:

Use Dreamweaver's Insert > Image feature to insert the arrow image in the content area of your page. When
the browse for image dialog opens, select RELATIVE TO: Site Root. Copy the image "src" path and replace the
one inside the conditional comment.

Alternatively, you can make the image path root relative, and then you can move all the style rules that are
contained inside the conditional comment to an external style sheet. Leave the comment markers in place, but
replace the style rules with a link to the external style sheet. Make the path to the external style sheet root
relative. Assuming you placed the external style sheet in the root of your defined site, it would look like this:

<!--[if lte IE 6]>

<link href="/ie6-fixes.css" rel="stylesheet" type="text/css" />
<![endif]-->

10 © 2008 Project Seven Development

 Questions and Answers 11

HOW DO I CHANGE THE FONT STYLE FOR MY PAGE?

With your page open, look in your CSS Styles panel for p7curvitude/p7CRV0X.css, where X is a number
between 1 and 12, designating the Curvitude layout you are using.

Set panel mode to All and then select the BODY rule. You will see its properties listed in the lower section of
the panel.

Change the font-family value to suit. This will control the font-family throughout your page. If you'd like to
set different FONT-FAMILIES for different elements, locate the element in the list of rules and add a FONT-
FAMILY property and value.

11 © 2008 Project Seven Development

 Questions and Answers 12

HOW DO I CHANGE FONT SIZES FOR MY PAGE?

Font-size is carried in style rules for the specific elements on your page. Locate these rules in your page style
sheet:

 #pmm_wrapper: set font-size for the Pop Menu Magic vertical menu
 #navbar: set font-size for the Pop Menu Magic horizontal menu
 #c1 .content: set font size for the first column
 #c2 .content: set font size for the second column
 #c3 .content: set font size for the third column
 #footer: set font size for the footer

HOW DO I CHANGE THE NAV BAR STYLES WHEN USING THE BASIC (NON-PMM) CSS
MENU?

With your page open, look in your CSS Styles panel for p7curvitude/p7CRV0X.css, where X is a number
between 1 and 12, designating the Curvitude layout you are using.

The relevant rules have been highlighted in the screen capture below. These are the rules you edit to change
the appearance of your CSS nav bar.

12 © 2008 Project Seven Development

 Questions and Answers 13

HOW DO I EDIT THE LINK STYLES FOR REGULAR TEXT LINKS IN MY PAGE?

With your page open, look in your CSS Styles panel for p7curvitude/p7CRV0X.css, where X is a number between 1 and
12, designating the Curvitude layout you are using. The relevant rules have been highlighted in the screen capture below.
These are the rules you edit to change the appearance of the regular text links on your page.

The first 3 rules affect all links—except for the links inside your main navigation bar. Use these rules to style the links in
your main column:

 .content a:link
 .content a:visited
 .content a:hover, .content a:focus, .content a:active

The next 3 rules are prefaced with the ID #c1 and thus affect only links in the first column:

 #c1 .content a:link

 #c1 .content a:visited
 #c1 .content a:hover, #c1 .content a:focus, #c1 .content a:active

The next 3 rules are prefaced with the ID #c3 and thus affect only links in the third column. Of course, these 3 rules are
only present if you are using a 3-column layout:

 #c3 a:link
 #c3 a:visited
 #c3 a:hover, #c3 a:focus, #c3 a:active

The next 3 rules are prefaced with the ID #footer and thus affect only links in the footer:

 #footer a:link
 #footer a:visited
 #footer a:hover, #footer a:focus, #footer a:active

13 © 2008 Project Seven Development

 Questions and Answers 14

HOW DO I EDIT THE LOOK OF MY COLUMNS?

You edit the appropriate Fireworks document and export revised backgrounds back to your Dreamweaver
site, then you edit your page-specific CSS file in Dreamweaver. Each layout has a corresponding Fireworks
editable image document, which contains instructions for basic editing tasks.

These are the included Fireworks documents:

 curvitude_982.png—used for all of the 982 pixel-wide 3-colum layouts

 curvitude_982_2column.png—used for all of the 982 pixel-wide 2-colum layouts
 curvitude_760_2column.png—used for all of the 760 pixel-wide layouts
 curvitude_logo.png—The logo for all layouts
 curvitude_Menu_Backgrounds.png—Backgrounds for the Pop Menu Magic sub-menus and for the
horizontal navigation bar container

14 © 2008 Project Seven Development

 Questions and Answers 15

HOW DO I CHANGE THE LOGO?

To edit the logo, open the curvitude_logo.png Fireworks document in the Fireworks folder that came with
this product. The Fireworks document contains basic instructions for editing and exporting the logo and
masthead images.

15 © 2008 Project Seven Development

 Questions and Answers 16

CAN I EDIT THE BACKGROUND IMAGES FOR THE POP MENU MAGIC SUB-MENUS OR
HORIZONTAL CONTAINER?

Yes. You'll find the editable images inside the curvitude_Menu_Backgrounds.png Fireworks editable image
document that came with this product.

16 © 2008 Project Seven Development

 Questions and Answers 17

CAN I EDIT THE BACKGROUND IMAGES THAT COMPRISE THE OPTIONAL ROUNDED
SECTION BOXES?

Yes. You'll find the editable images inside the relevant layout PNG. Either curvitude_982.png,
curvitude_982_2column.png, or curvitude_760_2column.png.

17 © 2008 Project Seven Development

 Questions and Answers 18

HOW DO I ADD ROUNDED SECTION BOXES TO MY PAGE?

You can spice up your Curvitude layout by adding rounded section boxes to any column. Each Curvitude page
is linked to a special style sheet that contains special section box style rules appropriate for that particular
layout. Let's make some section boxes.

Create a new Curvitude Page. For the purposes of this exercise, select the Page Design in the Curvitude Page
Pack window.

Note: The techniques that follow will work for all Curvitude layouts

Place your cursor at the end of the first paragraph in the main column and drag to select all the text from that
point to the end of the column.

18 © 2008 Project Seven Development

 Questions and Answers 19

Press your Delete or Backspace key to delete the text.

Place your cursor inside the remaining paragraph in the main column and click <div.content> on the TAG
SELECTOR bar (just above your Property inspector).

The entire content DIV will highlight.

19 © 2008 Project Seven Development

 Questions and Answers 20

Switch to Code View.

Locate the opening content DIV tag (<div class="content"> and place your cursor just inside the ending
double quote.

Press your spacebar once.

A popup box will open.

Select section_boxbottom from the list and double-click it to assign a second class to the DIV.

20 © 2008 Project Seven Development

 Questions and Answers 21

Switch to Design View

Now that we have a bottom curve we'll need to create a second box. We'll begin by creating a new content
DIV.

Switch back to Code View.

21 © 2008 Project Seven Development

 Questions and Answers 22

Place your cursor anywhere inside the <div class="content section_boxbottom"> DIV.

Click <div.content section_boxbottom> on your Tag Selector bar to highlight the entire DIV.

Place your cursor just to the right of the ending </div> tag (where the highlighting ends).

Press your Enter (Return) key once to create a new line.

Create a new DIV, assign it a class of "content section_boxtop" and place a level 2 heading tag inside just like
this:

<div class="content section_boxtop"><h2>Additional Content</h2></div>

Switch to Design View

We have a completed section box.

22 © 2008 Project Seven Development

 Questions and Answers 23

Let's insert another section box between the first and second ones. THIS IS A GOOD EXERCISE AS THIS
TASK REQUIRES AN ADDITIONAL STEP.

Switch to Code View.

Select the new DIV you created in the previous step:

<div class="content section_boxtop"><h2>Additional Content</h2></div>

Choose Edit > Copy

Place your cursor at the beginning of the line and press Enter (Return) to create a new line.

Place your cursor on the new line and choose Edit > Paste to paste a copy of the DIV.

Switch to Design View

We have a new section box, but it's lacking a bottom curve. Let's fix that.

Switch back to Code View.

23 © 2008 Project Seven Development

 Questions and Answers 24

Make a new line between the 2 copies of the ADDITIONAL CONTENT DIV and add a new DIV. Assign it a class
of "section_boxbottom" and place a non-breaking space ( ) inside of it:

<div class="section_boxbottom">&nbsp;</div>

Switch to Design View

24 © 2008 Project Seven Development

 Questions and Answers 25

CAN THE MIDDLE BOX BE AN ALTERNATE COLOR?

Sure. We've included a red section box style and related images.

Select the first Additional Content DIV and switch to Code View

Make a new line above this DIV and create a new DIV with a class of "section_boxtop2" and place a non-
breaking space ( ) inside of it:

<div class="section_boxtop2">&nbsp;</div>

Change the second class on the "CONTENT" DIV from "SECTION_BOXTOP" to "section_box2"

Change the class on the next DIV from "SECTION_BOXBOTTOM" to "section_boxbottom2"

Switch to Design View

25 © 2008 Project Seven Development

 Questions and Answers 26

Let's assign a special class to the heading in the red box to zero its top margin.

Place your cursor inside the heading text and select the <h2> tag on your Tag Selector bar.

Open the Style list on your Property inspector and select topZero

CAN I MAKE SECTION BOXES IN THE SIDEBARS?

Yes. The same techniques and class names you used to make section boxes in the main column also work for
either sidebar.

26 © 2008 Project Seven Development

 Questions and Answers 27

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 p7curvitude folder. DELETE THE CSS FILE.

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

OPEN THE 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.

27 © 2008 Project Seven Development

 Support and Contact info 28

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

Note: 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

Setting up a new newsgroup account in Windows Mail (Vista)

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.

28 © 2008 Project Seven Development

 Support and Contact info 29

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.

E-Mail: [email protected]

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

29 © 2008 Project Seven Development