Key Lime

Key Lime Page Pack by PVII 1 of 38
Key Lime
A PVII CSS Page Pack
PVII Page Packs are automated page tools that enable you to create a professionally styled
web page with a single click. Once your page is created, you can customize it by editing styles
with Dreamweaver's CSS editor and by editing images with Fireworks. Everything you need is
included.
We hope you enjoy using this product as much as we did making it.
Al Sparber & Gerry Jacobsen

PVII
©2006 Project Seven Development. All Rights Reserved 1 of 38

Key Lime A PVII CSS Page Pack.............................................................................................. 1

Install the Key Lime extension ............................................................................................... 3
Before you begin ...................................................................................................................... 3
Creating a Page Pack page.................................................................................................... 4
Customizing your page............................................................................................................ 7
Fonts used..........................................................................................................................................................7
Customizing the masthead ..............................................................................................................................7
Change the logo type......................................................................................................................................10
Exporting the masthead web images ...........................................................................................................14
Customizing the menu bar root links ............................................................................................................16
Editing the root menu link background.........................................................................................................17
Editing the menu bar background tile...........................................................................................................19
Exporting the menu bar web images............................................................................................................19
Editing CSS properties in Dreamweaver............................................................................ 22
Editing Menu Links CSS.................................................................................................................................22
Additional CSS Editing Tips.................................................................................................. 26
How do I change the menu font? ..................................................................................................................26
How do I edit the properties of my root (top-level) menu links? ...............................................................26
How do I edit the properties of my sub-menu links? ..................................................................................27
How do I edit the font-family for my page? ..................................................................................................27
How do I edit the heading properties............................................................................................................27
How do I edit properties for my main content and sidebar columns?......................................................28
How do I edit the link styles for links in the main content, sidebar, and footer areas? .........................28
How do I edit the callout boxes that appear in the main content column of some layouts?.................28
The Fireworks images ........................................................................................................... 29
p7kl_elements.png ..........................................................................................................................................30
p7kl_integrated.png.........................................................................................................................................31
Important notes!...................................................................................................................... 32
Managing a site ...................................................................................................................... 32
Product Support...................................................................................................................... 32
Appendix: Interface Help Files ............................................................................................. 33
Before you begin .............................................................................................................................................33
Creating a Page Pack page...........................................................................................................................33
Open the PMM Page Pack Interface............................................................................................................33
Navigation Options:.........................................................................................................................................35

Install the Key Lime extension

Look for the extension installer file p7_keylime_104.mxp 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.
Note: If the installer file name ends with a different number then 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.
Before you begin

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is
necessary so that Dreamweaver knows how to link your page's assets. 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 Page Pack page

Let's use the Page Pack interface to create a new page - instantly.
Choose File - New PVII Page Pack - Tab Bar Magic Page Packs.
The Page Pack window will open.
Click Key Lime in the Set panel.

Click Centered -Left Sidebar in the Design panel.
If you own Tab Bar Magic, leave the first Navigation Option selected. Otherwise, leave the
second Option selected.
Click the Create button.

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 in the File name box.
Click the Save button.

Your page is created.
It's really that easy.

Customizing your page

Your Key Lime page is designed with CSS. Even the menu bar is CSS-based. The look and feel
of our page is achieved with images deployed as backgrounds on the various elements that
comprise the page. Let's change the feel of our page from Lime to Lemon by editing the
included Fireworks graphics file.
Fonts used
Before you edit the graphics, please be sure you have all of the fonts you need. The fonts used
in our graphics are:
Arial
A default font on both Windows and OS X.
Silkscreen
A free pixel font available at Kottke.org.
Juice ITC
This font is included on the Microsoft Office CD. If you do not have Office, you can purchase a
copy from MyFonts.com or you can choose a decorative font from your own collection.
Customizing the masthead

We'll be working in Fireworks to edit the page graphics. If you do not have Fireworks, there is a
free 30-day trial available.
When you created your page, the Page Pack system generated an editable Fireworks
document and placed it inside a new folder called Fireworks. Locate that folder and inside you'll
find 4 files:
1. p7kl_elements.png
2. p7kl_integrated.png
3. p7kl_menubar.png
4. p7kl_wide.png
These files contain all of the graphical elements you'll need.

Launch Fireworks and open p7kl_wide.png
The web layer will be visible - showing green overlays that mark the document's slices. These
slices define the boundaries of the individual web graphics (GIFs and JPGs) that your Key Lime
page uses.

Open the Layers panel by choosing Windows - Layers (or F2).

Hide the Web Layer by clicking the "eye" icon to the left of its name.
The green overlays are now hidden and you're ready to edit the elements on your canvas.

Change the logo type

Double-click the word Key Lime in the masthead.
When your cursor changes to a text-editing cursor, select all of the text and then type the word
lemons.
Click on a blank part of your canvas to deselect the text, then click once on the word lemons to
select its box.

Press the right arrow key on your keyboard 16 times to move the word to the right.
Click the color fill chip on your property inspector.
Type #333333 into the color code box.

Press Enter on your keyboard to close the color selector.
Click the large green gradient rectangle to select it.

Click the color fill chip on your property inspector.

The color gradient editor will open.
Click the left gradient chip. The color selector will open.
Type #E6DC22 into the color box.
Press Enter to close the color selector.

Click the right gradient chip. The color selector will open.
Type #FFFFFF into the color box.
Press Enter to close the color selector.
Select the tagline text KEY LIME GROWERS CONSORTIUM and edit it to read LEMON
GROWERS CONSORTIUM.
We have a lemony gradient.

Save your file - but don't close it.

Exporting the masthead web images

To update the existing web images on your page, you'll export the images defined on the
Fireworks web layer to your web site.
Choose File - Export.
The Export window will open.
Browse to your Dreamweaver site and locate the images folder that is in the same folder as
your Page Pack page.
Leave the File name set to keylime.jpg (it's actually irrelevant since you will be exporting
slices).
Set the Export option to Images Only ( HTML will become disabled or grayed out).
Set the Slices option to Export Slices.
Make sure Include areas without slices is unchecked.
Click Export.

Since you are overwriting the existing images, Fireworks will ask you to confirm that this is what
you want to do:
Click OK.
Switch back to Dreamweaver and your page will reflect the changes.
Note: If you do not see the revised images, save and close the page, then reopen it.
Your page reflects your image edits.

Save your Fireworks document.

Customizing the menu bar root links

The menu bar root link background image is contained in the Fireworks file p7kl_menubar.png
- go ahead and open it now.
Hide the web layer to prepare for editing.
The three-tiered graphic is the background image for the top-level (root) menu bar links. The
background is repositioned with CSS to create three distinct states: Default, Over, and Down.
The numbers on the left correspond to the CSS top position value that sets the appropriate
state. The entire image is 300px high and is divided into 3 segments or rows - each row being
100px high.
The CSS rule for the default link state, sets the background top position to 0 - so only the top
row of the image shows. The 100px height ensures that even if text is made larger, only the top
row will be visible.
The CSS rule for the over (hover) state sets the background top position to -100px. This pulls
the entire image up by 100px, moving the second row to the top.
The CSS rule for the down state sets the background top position to -200px. This pulls the
entire image up by 200px and moves the third row to the top.

Editing the root menu link background

The three-tiered graphic is actually 3 separate elements. We'll change each one to change the
look of the root menu links.
Click to select the large green rectangle in the first tier.
Change its fill color to #E6DC22.
Click the rectangle in the middle tier to select it.
Change its fill type from Linear gradient to Solid.
Then change the solid fill color to #999999.

Select the rectangle in the third tier and change its fill type to Solid.
Then set its fill color to #666666.

Your image should like this:
Our next task is to change the menu bar background tile.

Editing the menu bar background tile

The menu bar background tile is a background image assigned to the menu bar container. It
tiles left to right, along the x-axis, creating the page-spanning bar that the menu sits in. This
element is a green rectangle positioned towards the top right edge of your Fireworks canvas.
Click to select the menu bar graphic.
Change its fill color to #333333.
The other element in this Fireworks document is the beveled bottom graphic that spans the
bottom of the menu bar. This graphic is a flattened bitmap, designed to work on any color
background, and does not need to be edited.
Exporting the menu bar web images

We have a decision to make before we proceed. Your menu bar images need to be exported to
one of two Dreamweaver folders, depending on the Navigation option you selected when you
created your Page Pack page. Choose one of the following two browse destinations:
1. If you are using the Tab Bar Magic Navigation Option, then browse to the p7tbm/img folder.
2. If you are using the Single Level CSS Buttons Option, then browse the images folder.

The screen capture below assumes you are using the Tab Bar Magic Navigation Option.
Choose File - Export to open the Export window.
Click Export.
Click OK when asked if you'd like to overwrite existing files.
Save and close your Fireworks document.

Preview the page in Dreamweaver

Switch to Dreamweaver.
Preview the page in a browser.
Click the first menu button to set its down state.

Editing CSS properties in Dreamweaver

Editing the background images in Fireworks has taken you most of the way to the goal of
transforming the page. The remaining tasks are all CSS-based.
Open test1.htm in Dreamweaver.
We'll change the background and text colors to match our customized images. The CSS file you
edit will depend on whether your page is using the Tab Bar Magic or Single Level CSS
Buttons Navigation Option.
• Tab Bar Magic - use: p7tbm_keylime_10.css in the p7tbm folder.
• Single Level CSS Buttons - use: p7keylime02b.css in the keylime_styles folder.
We'll assume, for this exercise, that you are using the Tab Bar Magic Option.
Editing Menu Links CSS

The first thing you'll notice in Dreamweaver is that the background color of the root links is still
green.
We set the background color because it can sometimes take a second or two for the
background images to load. For that interim, only the background color will be visible. If the
color is not similar to the background image color, there will be a sharp transition when the
image loads.

Open your CSS panel (Window - CSS Styles).

Locate the rule: #p7TBMroot .p7TBMtext li a.
Right-click the rule and choose Edit.
Change the Background color to #E6DC22.

Click OK.
Note: Single-Level menu users, edit the rule: #p7TBMroot li a
The over (hover) state background image is set to #999999. The CSS rule for that style should
be changed to match - and the text color is now too dark, so we'll edit that, too.
In your CSS panel, right-click the rule:
.p7ie6Fix:active,
#p7TBMroot .p7TBMtext .p7TBMon,
#p7TBMroot .p7TBMtext li a:focus,
#p7TBMroot .p7TBMtext li a:active
Choose Edit.

Change the Background color to #999999.
Switch to the Type Category.

Set Color to #FFFFFF.
Click OK.
Note: Single-Level menu users, edit the rule: #p7TBMroot li a:hover, #p7TBMroot li a:focus, #p7TBMroot li a:active.
The down state background image was changed to #666666, so let's change the corresponding
CSS style.
In your CSS panel, right-click the rule:
#p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover
Choose Edit.
Change the Background color to #666666.
Switch to the Type Category and change Color to: #FFFFFF.
Note: Single-Level menu users, edit the rule: #p7TBMrootuberlink. To use this rule, you must assign the
#p7TBMrootuberlink ID to the root link that corresponds to your current page. For Tab Bar Magic users, this feature is
automated.

Additional CSS Editing Tips

If you're new to CSS, we recommend that you work within the general layout structure of a
page. If you wish to make a change that is beyond your present capabilities, we urge you to log
on to our support newsgroup or email our support center and ask for assistance.
How do I change the menu font?

The menu font is assigned in the #menubar CSS rule. Edit this rule to change only the font-
family and font size for your menu. If you want to edit the font color, please see the next tip.
How do I edit the properties of my root (top-level) menu links?

Root menu link colors are assigned in the following rules:
Default link state

• #p7TBMroot .p7TBMtext li a
• #p7TBMroot li a (Single-level CSS Button Option)
Over (Hover) state

• .p7ie6Fix:active,
#p7TBMroot .p7TBMtext .p7TBMon,
#p7TBMroot .p7TBMtext li a:focus,
#p7TBMroot .p7TBMtext li a:active
• #p7TBMroot li a:hover,
#p7TBMroot li a:focus,
#p7TBMroot li a:active (Single-level CSS Button Option)
Down State (also marks current page)

• #p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover
• #p7TBMrootuberlink (Single-level CSS Button Option)
To use this rule, you must assign the #p7TBMrootuberlink ID to the root link that corresponds to
your current page. For Tab Bar Magic users, this feature is automated.

How do I edit the properties of my sub-menu links?

Sub-menus are only available with the Tab Bar Magic Navigation Option.
Default link state

• .p7TBMsub li a
Over (Hover) state

• .p7TBMsub li a:hover,
.p7TBMsub li a:active,
.p7TBMsub li a:focus
Current Page Marker (You are Here!)

• .p7TBMsub .p7TBMmark,
.p7TBMsub .p7TBMmark:hover,
.p7TBMsub .p7TBMmark:active,
.p7TBMsub .p7TBMmark:focus
How do I edit the font-family for my page?

The font-family is assigned on the body selector. It governs the font for all parts of the page
except for the menu and the headings.
How do I edit the heading properties

The heading properties are assigned via these selectors:
• h1
• h1, h2, h3, h4
• h2
• h3
• #sidecontent .topheading

How do I edit properties for my main content and sidebar columns?

The main content and sidebar rules that can safely be edited are all prefaced with:
• #maincontent
• #sidecontent
How do I edit the link styles for links in the main content, sidebar, and
footer areas?
For all links (except for the main menu bar) we allow the browser's default link and visited states
to render and set only the hover, focus, and active states, via this rule:
Page link styles

• #layout a:hover, #layout a:active, #layout a:focus,
#footer a:hover, #footer a:active, #footer a:focus
How do I edit the callout boxes that appear in the main content column of
some layouts?
The callout boxes are floated boxes within the main content columns of the Fluid and
Shadowbox layouts. Use this rule to edit:
• .callout

The Fireworks images

There are four Fireworks image documents that are generated when you create a Page Pack
page:
1. p7kl_menubar.png
2. p7kl_wide.png
3. p7kl_elements.png
4. p7kl_integrated.png
We've already covered p7kl_menubar.png and parts of the p7kl_wide.png document. Let's
examine the rest of p7kl_wide.png:
The web layer is visible so you can see the boundaries of the web images involved. There are
two web images generated from this document - the logo and the page background. We urge
you to work within the assigned widths of these elements. If you would like to change the height
of the slices, make sure that you keep both slices the same height. You will also need to change
the height property in a dependent CSS rule:
#masthead {
background-image: url(../images/klm_logo.jpg);
background-repeat: no-repeat;
height: 180px;
}
The logo slice, the page background slice, and the height property in the #masthead CSS rule
must always be the same.
Let's look at the two remaining Fireworks documents.

p7kl_elements.png
The vertical rule is used in the following rules, in all but the shadowbox style sheet, to set a
dashed vertical border between columns:
• #mainbox
• #maincontent
The heading background governs the gradient behind the level 1 heading in 3 of the 4 layouts.
The gradient background is used in the sidebar column of the shadowbox layout and also in the
flexible layout's footer.

p7kl_integrated.png
This document contains images specific to the Shadowbox layout. Do not change the width of
any slice or the layout will break. You can change colors and the height of the masthead. If you
do change the masthead height, you must also edit the height property in this CSS rule:
#masthead {
background-image: url(../images/kl-masthead.jpg);
background-repeat: no-repeat;
height: 162px;
}

Important notes!
Dreamweaver's CSS panel gives you direct access to all style rules that govern how your page
looks. If you do not understand what a rule does, you should avoid editing it. The following
points are important and should be followed. If there are changes you'd like to make that you
don't know how to make, you should utilize our support options for assistance.
Do not change the names of any CSS rules or the IDs of any elements on the page unless you
know exactly what you are doing.
Do not change the widths of any elements on the page unless you understand the CSS box
model. There are dependencies that could be broken.
Do not delete or modify any of the MSIE Conditional Comments. They are included to fix
specific CSS issues in IE Windows. Conditional Comments always begin with an IE version
vector, such as:
<!--[if IE 5]>
<!--[if lte IE 6]>
<!--[if IE 7.0b]>
Do not edit the Skip Link styles:
#skips
#skips a, #skips a:visited, #skips a:hover
.p7fix a:active, #skips a:active, #skips a:focus
It is an accessibility feature that does not affect your visual page layout.
If you own Tab Bar Magic, the CSS sections in the Tab Bar Magic user guide are an excellent
resource for advanced CSS editing tips and techniques.
Managing a site
The Page Pack system will create assets folders inside each folder in which you create a Page
Pack page. That means that if you'd like to experiment with several different looks, simply create
a new folder for each test page you need. Your Page Pack page will only use the assets that it
finds within its own folder. When you are ready to publish a site, you should create your index
page in the root of the site and use the Page Pack assets folders that are generated in the root.
To create additional pages, use a site-wide management technology such as Dreamweaver
Templates or Server Side Includes.
Product Support
For all of your support concerns, please refer to the main Support Page at ProjectSeven.com for
options.

Appendix: Interface Help Files

The following pages are copies of the help files that you can also access by clicking the help
button in the Page Pack interface. They are copied here to give you a convenient way of printing
them.
Before you begin

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is
necessary so that Dreamweaver knows how to link your page's assets. 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 Page Pack page

This exercise will use the Key Lime Page Pack as an example, your actual Page Pack Sets and
Page Designs will be different depending on the Page Pack you are working but all of the steps
will work with actual Page Pack.
Open the PMM Page Pack Interface

-Choose File > New PVII Page Pack > Tab Bar Magic Page Packs from the main
Dreamweaver menu.
Note: You do not need to have a page open in Dreamweaver. The Page Pack will create and open the new page
automatically.

The Page Pack Interface will open.
Select the Page Pack Set

The Page Pack Set panel will list all of your installed Tab Bar Magic Page Packs.
Note: The first listed pack will automatically be selected when the interface first opens.
-Select a Page Pack Set in the left panel.
Select a Page Design

The center panel lists all of the page designs available for the selected Page Pack Set. Each
Page Pack is usually shipped with a variety of layout approaches, based on a central theme, to
allow you to pick a layout that best approximates your needs.
-Select a Page Design from the list in the center panel.

Page Preview
The third panel provides a preview of the selected Page Design. This Preview will change
whenever you select a different Page Design.
Navigation Options:
Include Tab Bar Magic Menu

If you've already purchased and installed the Tab Bar Magic menu system, the Include Tab Bar
Magic Menu option will be checked by default and a TBM menu will automatically be inserted
on your Page Pack page. The menu will be color-coordinated with your Page Pack.
Note: This option will be un-checked and grayed out if the Tab Bar Magic system is not installed.
Use Single Level CSS Buttons

This box will be checked by default if you do not have a Tab Bar Magic system installed. The
system will create a static (no pop-ups) CSS-styled list menu that is color-coordinated with your
Page Pack.
No Menu (Placeholder Text Only)

Choose this option of you wish to add your own menu system to the page. The system will
create the page with simple "place holder" text where the custom menu should be inserted.
Simply replace this text with your custom navigation system.
-Choose the Navigation Option.

Create the New Page

-Click the Create button to create your Page Pack page.
The Save As dialog box will open.
-Use the navigation controls to navigate to an existing folder - or create a new folder - in which
to save your new Page Pack page. For this example we created a new folder named
KeyLime_tests. All of the related page assets (images, styles, scripts, as well as an editable
Fireworks document) will also be created in this folder.
-Enter a file name for the new page. In this example we entered myPage.htm as the file name.
Note: Be sure to enter a valid file extension (usually .htm or .html) for this page. If you do not enter a file extension
then the system will automatically assign .htm as the extension. You can enter any file extension you like (.asp, .cfm,
.php, .shtm, etc) - just be sure that it is valid web page file extension.

-Click the Save button to create the new page.
The Finished New Page

A new Page Pack page will be created using the filename that you entered. The page will then
open directly in Dreamweaver - ready for you to preview or edit. The page has already been
saved so you can go ahead and Preview or Modify right away.

The Page Assets

The system has also created several sub-folders that contains the related page assets.
Note: Your actual file listing will be different depending on the Page Pack you are working on and the navigation
choice made in the interface.
We're Done!
With just a few clicks we created a beautiful and functional new page based on the design that
we selected.

Key Lime

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Key Lime

Hochgeladen von

Copyright:

Verfügbare Formate

Key Lime Page Pack by PVII 1 of 38

Al Sparber & Gerry Jacobsen

©2006 Project Seven Development. All Rights Reserved 1 of 38

Key Lime A PVII CSS Page Pack.............................................................................................. 1

©2006 Project Seven Development. All Rights Reserved 2 of 38

Install the Key Lime extension

Before you begin

©2006 Project Seven Development. All Rights Reserved 3 of 38

Creating a Page Pack page

Click Key Lime in the Set panel.

©2006 Project Seven Development. All Rights Reserved 4 of 38

The Save As dialog window will open.

©2006 Project Seven Development. All Rights Reserved 5 of 38

Your page is created.

It's really that easy.

©2006 Project Seven Development. All Rights Reserved 6 of 38

Customizing your page

Customizing the masthead

©2006 Project Seven Development. All Rights Reserved 7 of 38

Launch Fireworks and open p7kl_wide.png

©2006 Project Seven Development. All Rights Reserved 8 of 38

Open the Layers panel by choosing Windows - Layers (or F2).

©2006 Project Seven Development. All Rights Reserved 9 of 38

Change the logo type

©2006 Project Seven Development. All Rights Reserved 10 of 38

Type #333333 into the color code box.

Click the large green gradient rectangle to select it.

©2006 Project Seven Development. All Rights Reserved 11 of 38

The color gradient editor will open.

Press Enter to close the color selector.

©2006 Project Seven Development. All Rights Reserved 12 of 38

We have a lemony gradient.

©2006 Project Seven Development. All Rights Reserved 13 of 38

Exporting the masthead web images

©2006 Project Seven Development. All Rights Reserved 14 of 38

Your page reflects your image edits.

©2006 Project Seven Development. All Rights Reserved 15 of 38

Customizing the menu bar root links

©2006 Project Seven Development. All Rights Reserved 16 of 38

Editing the root menu link background

Then change the solid fill color to #999999.

©2006 Project Seven Development. All Rights Reserved 17 of 38

Your image should like this:

Our next task is to change the menu bar background tile.

©2006 Project Seven Development. All Rights Reserved 18 of 38

Editing the menu bar background tile

Exporting the menu bar web images

©2006 Project Seven Development. All Rights Reserved 19 of 38

©2006 Project Seven Development. All Rights Reserved 20 of 38

Preview the page in Dreamweaver

©2006 Project Seven Development. All Rights Reserved 21 of 38

Editing CSS properties in Dreamweaver

Editing Menu Links CSS

©2006 Project Seven Development. All Rights Reserved 22 of 38

Open your CSS panel (Window - CSS Styles).

Change the Background color to #E6DC22.

Note: Single-Level menu users, edit the rule: #p7TBMroot li a

©2006 Project Seven Development. All Rights Reserved 23 of 38

Change the Background color to #999999.

Switch to the Type Category.

©2006 Project Seven Development. All Rights Reserved 24 of 38

Set Color to #FFFFFF.

©2006 Project Seven Development. All Rights Reserved 25 of 38

Additional CSS Editing Tips