Il Libro Page Pack by PVII 1 of 29

Il Libro Page Pack by PVII 1 of 29
Il Libro
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 29

Il Libro A PVII CSS Page Pack .................................................................................................. 1

Install the il Libro extension .................................................................................................... 3
Before you begin ...................................................................................................................... 3
Creating a Page Pack page.................................................................................................... 4
Customizing your page graphics ........................................................................................... 7
Special fonts used .............................................................................................................................................7
Customizing the masthead ..............................................................................................................................7
Change the Masthead Background ..............................................................................................................10
Edit the Orb graphic ........................................................................................................................................12
Editing the page Texture ................................................................................................................................13
Exporting edited images.................................................................................................................................14
Edit the Page Texture background image ...................................................................................................15
Customizing the menu bar link colors ................................................................................. 18
Additional CSS Editing Tips.................................................................................................. 19
How do I change the menu font? ..................................................................................................................19
How do I edit the properties of my root (top-level) menu links? ...............................................................19
How do I edit the font-family for my page? ..................................................................................................20
How do I edit the heading properties............................................................................................................20
How do I edit properties for my main content and sidebar columns?......................................................21
How do I edit the link styles for links in the main content, sidebar, and footer areas? .........................21
Footers ..............................................................................................................................................................22
Important notes!...................................................................................................................... 23
Managing a site ...................................................................................................................... 23
Product Support...................................................................................................................... 23
Appendix: Interface Help Files ............................................................................................. 24
Before you begin .............................................................................................................................................24
Creating a Page Pack page...........................................................................................................................24
Open the PMM Page Pack Interface............................................................................................................24
Navigation Options:.........................................................................................................................................26

Install the il Libro extension

Look for the extension installer file p7_Libro_102.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 than listed above, don't panic. It simply means that there
was a revision to the extension that occurred after this user guide was written.
OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file
association issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.
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.
Choose File - New PVII Page Pack – Pop Menu Magic Page Packs.
The Page Pack window will open.
Select il Libro in the Set panel.

Click Layout 01 in the Page Design panel.
If you own Pop Menu 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. You’ve got a fully-functioning page that is ready for previewing – and
customization.

Customizing your page graphics

Your il Libro 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 by editing the included Fireworks graphics
file for Layout 01.
Note: Each of the six il Libro layouts have a corresponding Fireworks document, b1.png – b6.png. For this exercise,
we’ll be working with b1.png.
Special fonts used
Century Gothic
Century Gothic comes with Microsoft Office. If it was not installed by default, you can find it on
the Office installation CD or DVD. If you don’t have MS Office, substitute a font of your choice
when opening the Fireworks document.
Silkscreen
A free pixel font available at Kottke.org
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 editable Fireworks documents
and placed them inside a new folder called Fireworks. Locate that folder, expand it, and then
open the file b1.png in Fireworks.

b1.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 or JPGs) that your il Libro
page uses.

If your Layers panel is not accessible, open it 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 Masthead Background

The brownish Il Libro background image can be easily edited using Fireworks.
Select the background image object by clicking it.
On your Property Inspector, click the + symbol to open the Filters menu.
Choose Adjust Color – Hue/Saturation…

Make sure the Colorize box is unchecked.

Set Hue to -36, Saturation to -36, and Lightness to 0.
Click OK.
You now have a pale rose background texture – and the book graphic has also changed
because it is a part of the background element.
Tip: If you want to replace the book graphic with your own image, select the background element (Book Graphic in
your Layers panel) and choose Modify – Un group. Delete the Book image, edit the background element to suit, then
import your own graphic. Position your graphic over the background element. Choose Edit – Cut. Select the
background element again and choose Edit – Paste Inside.

Edit the Orb graphic

Let’s make a corresponding change to the orb graphic.
Select the Orb Group.
The Orb Group already has a Hue/Saturation effect. Let’s edit it to match the masthead graphic.
Click the ! symbol to edit the Hue/Saturation settings.
Click OK.

Editing the page Texture

The page texture’s hue should match the changes made to the other elements.
Select the Page Texture element.
The Page Texture already has a Hue/Saturation effect. Let’s edit it.
Click the ! symbol to edit the Hue/Saturation settings.
Click OK.
We’re ready to Export the edited images back to our Dreamweaver site.

Exporting edited images

To update our Dreamweaver page, you’ll need to export the b1.png web images to the images
folder your Page Pack created in your Dreamweaver site.
Choose File – Export. The Export dialog will open.
In the Save in box, browse to and select the images folder that the il Libro Page Pack created in
your Dreamweaver site (it will be in the same folder as the test page you created).
Make sure Export is set to Images Only and Slices are set to Export Slices.
Include areas without slices should be unchecked.
Click Export.
Save b1.png with a new name: b1_testedit.png, for example. Close the file and switch back to
Dreamweaver.

Your changes are now apparent in your Dreamweaver document. If you don’t see the changes,
save, close, and reopen the page.
The last edit, to the Page Texture, does not seem to have taken – except for a small band of
color around the edge of the masthead. This is because the actually tiling background image
needs to be edited too.
Edit the Page Texture background image

Let’s make a corresponding change to the actual page texture background image. For this edit,
we’ll need to open the background JPG file directly.
In the images folder that your Page Pack created, look for the file bk1_woodgrain.jpg and
double-click it to open it in Fireworks.
Note: If Fireworks is not set as your default image editor, you’ll need to open this file from Fireworks.
The image will open.

Select the graphic and open the Hue/Saturation live effect dialog from the Filters section of your
Property Inspector.
Click OK.

Choose File – Save to save this image and overwrite the original.
Fireworks may present you with a warning:
Click Save JPEG.

Close the bk1_woodgrain.jpg file. If Fireworks asks if you’d like to save a PNG format, click No.
Switch back to Dreamweaver. Your colors are now coordinated.
Save your page.

Customizing the menu bar link colors

The menu bar links have a dark gray background color. When moused over, the background
changes to a darker gray – almost black. Let’s change the mouse over (hover) color to a wine
red, to match the other changes made.
In the p7pm folder, locate and open the p7pmv20.css file.
Locate the rule:
#p7PMnav a:hover, #p7PMnav a:active,
#p7PMnav a:focus, #p7PMnav .p7PMon {
background-color: #714751;
color: #CCCCCC;
letter-spacing: 0.01px;
}
Change the background-color value to #714751.
Save and close the CSS file.
Preview your page…
That’s better.

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. Your Page
Pack pages use two CSS files. One is for the menu, the other is for the page-specific styles.
The menu style sheet is in the p7pm folder and is named p7pmv20.css; the page style sheet is
in the libro_styles folder and is named according to the page layout you have chosen –
libro1.css through libro6.css. For this exercise, we are using the libro1.css file.
How do I change the menu font?

The menu font is assigned in the #p7navbar CSS rule in libro1.css. 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

• #p7PMnav a
Over (Hover) state

• #p7PMnav a:hover, #p7PMnav a:active,
#p7PMnav a:focus, #p7PMnav .p7PMon
Down State (marks current page)

• #p7PMnav .p7PMmark
This rule only works if you are using the Pop Menu Magic navigation option.

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
• h2, h3
• #leftcontent h3

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
• #leftcontent
How do I edit the link styles for links in the main content, sidebar, and
footer areas?
To edit all page links, except for the main menu bar, use these rules:
Page link styles

• #leftcontent a:hover, #maincontent a:hover,
#leftcontent a:active, #maincontent a:active,
#leftcontent a:focus, #maincontent a:focus

Footers
The footers in the Libro1, Libro3, and Libro5 layouts are actually background images. To
change the copyright notice, do so in the associated Fireworks PNG file. If you wish to have
additional content or links in your footer, we have provided an extra footer style rule in your
page style sheet named: #footer2. You’ll also find link styles that you can use to style the extra
footer in your Libro CSS file:
• #footer2 a
• #footer2 a:hover, #footer2 a:active,
#footer2 a:focus
We’ve also included an empty DIV in your page, so that you can readily enter content. To add
content to this DIV, look in the source code for your page, at the bottom, for this element:
<div id="footer2"> </div>
Replace the with your own content. If you are not going to use this extra footer, simply
delete the DIV tag.
The even-numbered Libro layouts contain conventional footers. And footer links in those layouts
are:
• #footer a
• #footer a:hover, #footer a:active,
#footer a:focus

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]>
If you own Pop Menu Magic, the CSS sections in the online 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 Il Libro 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 > Pop Menu 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 Pop Menu 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 Pop Menu Magic Menu

If you've already purchased and installed the Pop Menu Magic menu system, the Include Pop
Menu Magic Menu option will be checked by default and a PMM 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 Pop Menu Magic system is not installed.
Use Single Level CSS Buttons

This box will be checked by default if you do not have a Pop Menu 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
Libro_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 test1.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.

Il Libro Page Pack by PVII 1 of 29

Hochgeladen von

Dokumentinformationen

Originaltitel

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

Il Libro Page Pack by PVII 1 of 29

Hochgeladen von

Copyright:

Verfügbare Formate

Il Libro Page Pack by PVII 1 of 29

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

Il Libro A PVII CSS Page Pack .................................................................................................. 1

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

Install the il Libro extension

Before you begin

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

Creating a Page Pack page

Select il Libro in the Set panel.

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

The Save As dialog window will open.

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

Your page is created.

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

Customizing your page graphics

Special fonts used

Customizing the masthead

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

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

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

Change the Masthead Background

Choose Adjust Color – Hue/Saturation…

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

Make sure the Colorize box is unchecked.

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

Edit the Orb graphic

Set Hue to -36, Saturation to -10, and Lightness to 0.

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

Editing the page Texture

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

Exporting edited images

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

Edit the Page Texture background image

The image will open.

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

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

Click Save JPEG.

Save your page.

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

Customizing the menu bar link colors

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

Additional CSS Editing Tips

How do I change the menu font?

How do I edit the properties of my root (top-level) menu links?

Default link state

Over (Hover) state

Down State (marks current page)

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

How do I edit the font-family for my page?

How do I edit the heading properties

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

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

Page link styles

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

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

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

Appendix: Interface Help Files

Before you begin

Creating a Page Pack page

Open the PMM Page Pack Interface

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

The Page Pack Interface will open.

Select the Page Pack Set