LUNA BY PVII

Luna is a single-page Web site, a design approach that works very well for sites that would, in
conventional terms, comprise three to six pages of closely related content. Single-page sites are
becoming quite popular among Web designers—for their own sites as well as their clients'. A brochure
site for an artist, an author, or a typical restaurant, would work very well. On the other hand, the
Harvard University or Library of Congress sites would not be good candidates. Single-page sites can be
a good solution if there isn’t a tremendous amount of content, if all the content is closely related or in
cases where a particular design approach simply works best on a single page. In any case, single-page
sites are cropping up all over the place. They are trendy and they can be very engaging—especially
when combined with PVII smooth page scrolling and some cutting edge CSS.

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

Al Sparber & Gerry Jacobsen PVII

 Luna by PVII 2

CONTENTS
Luna by PVII .................................................................................................................................................................................................... 1
Install the extension ..................................................................................................................................................................................... 5
Work in a defined Dreamweaver site..................................................................................................................................................... 5
Creating a Luna page ................................................................................................................................................................................... 6
Assets folders ................................................................................................................................................................................................. 7
Uploading to your server ....................................................................................................................................................................... 7
Modifying a Luna page ................................................................................................................................................................................ 8
Menu items ................................................................................................................................................................................................ 8
Item link text.............................................................................................................................................................................................. 9
Link only - no associated content ....................................................................................................................................................... 9
Option: animation duration .................................................................................................................................................................. 9
Option: show anchor in page address ............................................................................................................................................... 9
Command Buttons ................................................................................................................................................................................... 9
From the top down: how Luna pages work ....................................................................................................................................... 10
Luna on mobile devices ....................................................................................................................................................................... 10
Luna with JavaScript disabled ........................................................................................................................................................... 10
Luna is about forward thinking.............................................................................................................................................................. 11
Advanced techniques you'll learn......................................................................................................................................................... 11
Font Embedding .................................................................................................................................................................................... 12
Font files and licensing ................................................................................................................................................................... 12
Setting @font-face source CSS .................................................................................................................................................... 13
Setting @font-face page CSS ........................................................................................................................................................ 15
Previewing in Dreamweaver ......................................................................................................................................................... 16
Browser issues with embedded fonts ....................................................................................................................................... 16
Where can I find more custom fonts? ....................................................................................................................................... 16
CSS rounded corners ............................................................................................................................................................................ 16
border-radius syntax ....................................................................................................................................................................... 17

2
 Luna by PVII 3

CSS shadows ........................................................................................................................................................................................... 18

box-shadow syntax .......................................................................................................................................................................... 18
Luna menu shadows ........................................................................................................................................................................ 19
CSS linear gradients .............................................................................................................................................................................. 21
Combining CSS 3 properties to create image-like effects ........................................................................................................ 22
Editing and determining RGBA colors ............................................................................................................................................ 24
CSS Columns ................................................................................................................................................................................................ 26
first and last section CSS classes ........................................................................................................................................................... 28
How we use the "last" class in default Luna pages .................................................................................................................... 28
The data table styles ................................................................................................................................................................................. 29
Luna CSS fundamentals ............................................................................................................................................................................ 30
body ...................................................................................................................................................................................................... 30
ul.p7Luna-menu................................................................................................................................................................................ 30
.p7Luna-menu a ................................................................................................................................................................................ 30
.p7Luna-menu a:hover, .p7Luna-menu a:focus ..................................................................................................................... 30
.p7Luna-menu a.down.................................................................................................................................................................... 30
h1, h2, h3, h4 ..................................................................................................................................................................................... 30
h1 ........................................................................................................................................................................................................... 30
h2, h3, h4 ............................................................................................................................................................................................ 30
h3 ........................................................................................................................................................................................................... 30
h4 ........................................................................................................................................................................................................... 30
span.subheading, p.subheading .................................................................................................................................................. 31
div.section-content .......................................................................................................................................................................... 31
.section-content strong .................................................................................................................................................................. 31
.section-content em ........................................................................................................................................................................ 31
.section-content a, .section-content a:visited ........................................................................................................................ 31
.section-content a:hover, .section-content a:focus .............................................................................................................. 31
#footer .footer-content .................................................................................................................................................................. 32
.shadow-box....................................................................................................................................................................................... 32
.shadow-box a, .shadow-box a:visited, #footer a, #footer a:visited ............................................................................... 32
.shadow-box a:hover, .shadow-box a:focus, #footer a:hover, #footer a:focus ........................................................... 32

3
 Luna by PVII 4

Support and Contact info ........................................................................................................................................................................ 33

PVII Knowledge Base ............................................................................................................................................................................ 33
Newsgroup forum communities.................................................................................................................................................. 33
RSS News Feeds ................................................................................................................................................................................ 34
Before you Contact us .................................................................................................................................................................... 34
Snail mail ............................................................................................................................................................................................. 34

4
 Install the extension 5

INSTALL THE EXTENSION

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

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, 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 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.

5
 Creating a Luna page 6

CREATING A LUNA PAGE

Let's see how easy it is to create a page. To create a page, choose: File > New PVII PagePack > Luna

The interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice.
Click the Create button. 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 and click Save.

6
 Assets folders 7

ASSETS FOLDERS
When your page is created, the Page Pack system generates the following folders

 Fireworks
This folder contains an editable Fireworks image for your Luna logo. In all likelihood, you will
not be using it as you will instead be substituting your own logo. Luna is otherwise totally
image-free. All effects are accomplished using advanced CSS.
 p7luna
This folder contains your Luna CSS files and scripts
a. fonts
This sub-folder contains the embedded fonts used on your page and the CSS to declare
the font file sources.
b. images
This sub-folder contains the Luna logo.

The Page Pack system will create these folders in the same folder where you save your Page Pack page.
This is a workflow feature 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.

UPLOADING TO YOUR SERVER

When you publish your page, you need to upload the entire p7luna folder.

Upload the entire p7luna folder to your Web server

7
 Modifying a Luna page 8

MODIFYING A LUNA PAGE

Luna comes with an automated Modify interface that allows you to add, remove, and re-order page
sections. To access the Modify interface choose Modify > Studio VII > Modify Luna Page Scroll by PVII

The PVII Page Scroll Magic interface will open

MENU ITEMS
The Menu Items list displays each of the default menu item links on your page. A row of command
buttons above the menu items list allows you to Add new menu items, Delete existing ones, or move
items Up or Down.

Add: Clicking the Add button adds a new menu item below the currently selected one, with the
default Item Link Text value of "Menu Item".

Delete: Click the Delete button to delete a menu item. The associated page content section will also
be removed.

Note: Before you delete a menu item remember that its related content section will also be removed.

8
 Modifying a Luna page 9

Up: To move a menu item higher in the list, select the menu item and click the Up button one or more
times.

Down: To move a menu item lower in the list, select the menu item and click the Down button one or
more times.

ITEM LINK TEXT

The Item Link Text box contains the link text for the link currently selected in the Menu Items list.

LINK ONLY - NO ASSOCIATED CONTENT

Enable this option if you want to have a link that loads another page. If you select an existing menu
item and enable this option, that menu item's associated page content section will be removed.

Link Path: The Link Path box is activated whenever the Link Only box is checked. Enter the path to
the destination page or use the Browse button to open the Select File to Link dialog box. If no entry
is made, the system will automatically supply a null "javascript:;" link.

OPTION: ANIMATION DURATION

By default, we set the animation duration to 600 milliseconds. This means the animation will last 600
milliseconds no matter how long a section is. Increase the number to lengthen the duration and
decrease it to shorten it.

OPTION: SHOW ANCHOR IN PAGE ADDRESS

This option is unchecked by default. When this option is checked, the system will append the page URL
with the target anchor, which will enable your browser's back and forward buttons synch up with your
page's sections. When using the browser's back and forward controls, the relevant page sections will
snap into place without animation. Animation will still work when using the menu buttons.

COMMAND BUTTONS
The following command buttons are available.

OK: When you are done, click the OK button. The system will verify your changes and alert you to any
problems that need your attention. If there are no problems, the interface will close and your page will
be updated.

Cancel: Click the Cancel button to completely abort the current session. This will close the interface
and no changes will be made to your page.

9
 From the top down: how Luna pages work 10

Help: Click the Help button to open the relevant help file in your browser. The help page can remain
open for easy reference while you continue working in the interface.

FROM THE TOP DOWN: HOW LUNA PAGES WORK

The first thing you'll notice about Luna pages is the fixed-position menu, which can be either horizontal
or vertical. When you click a menu item, the page scrolls up to a section (or page) that is associated
with the link you clicked. Depending on your browser window size, and your personal preferences, you
can either click menu items or scroll the page using the browser's scroll bar, your mouse wheel, or any
other scrolling mechanism at your disposal. All of the content is always fully accessible—and the
navigation bar and footer are always in view in conventional browsers.

LUNA ON MOBILE DEVICES

Modern mobile devices such as iPads, iPhones, and Androids, work by touch and do not support fixed
positioning. For those devices, all content is fully accessible, but the navigation bar and footer move
with the page in the traditional way. By default, Luna pages are very well-suited to mobile devices.
Luna automatically detects mobile devices and uses special CSS rules to address mobile browser issues
and workarounds. These special CSS rules each prefaced with the name “.p7PGS_mobile”.

You’ll find these rules at the bottom of each Luna style sheet. For Layout 01, the rules would be:

.p7PGS_mobile .navigation, .p7PGS_mobile #logo, .p7PGS_mobile #footer {

position: static !important;
width: auto !important;
}
.p7PGS_mobile div.section {
padding: 30px 0 !important;
}

Conventional desktop and laptop browsers ignore these files.

LUNA WITH JAVASCRIPT DISABLED

Luna pages work with script disabled. The navigation links are actually page anchors so when script is
disabled they work like normal same-page named anchors. The script is an enhancement to the default
page behavior, adding animation and state management. The page is totally accessible without script.

10
 Luna is about forward thinking 11

LUNA IS ABOUT FORWARD THINKING

Luna uses modern CSS such as fixed positioning, embedded fonts, column layout, rounded corners, CSS
gradients, and shadows—but not a single background image is used. This makes it extremely easy for
you to maintain and customize your site.

The advanced CSS we use is deployed in ways that enhance modern browsers while assuring an
attractive and accessible presentation in older ones. The idea is to start with a solid foundation that is
accessible to all browsers and devices and then enhance it for those that support advanced CSS. The
result is that your page is accessible to all, attractively designed for all, and absolutely gorgeous for
many. Some techniques, such as the embedded fonts used for section headings, work in almost all
browsers—even back to Internet Explorer version 5.

ADVANCED TECHNIQUES YOU'LL LEARN

The Luna user guide will teach you how to use these CSS 2 and CSS 3 techniques:

 Font Embedding
 Rounded Corners
 Box Shadows
 Linear Gradients
 RGBA colors
 CSS Columns

11
 Advanced techniques you'll learn 12

FONT EMBEDDING
Font embedding allows the fonts used in the creation of a document to travel with that document,
ensuring that a user sees documents exactly as the designer intended them. Font embedding
technology was built into Microsoft Internet Explorer version 4, bringing embedded fonts to the Web.
It is now supported by all current modern browsers. Of the many techniques used, @font-face is the
easiest to deploy, the most accessible and it's the one we use in Luna.

Tip: Using custom fonts for headings or call-out type boxes (as we do in Luna) works really well. Using custom fonts for general content text
will look good on modern browsers running on newer computers, but could make your page hard to read on older computers.

FONT FILES AND LICENSING

In the past, font licensing has presented a major stumbling block to using embedded fonts on the web.
Naturally, the major font foundries want to be paid for their work and so font use is restricted. You
can't just buy a font and use it on the Web unless the license grants you that right. Because of this,
some sites now offer free fonts with licensing appropriate to use on the Web. For Luna, we are using
Font Squirrel. Font Squirrel offers free fonts for the Web with appropriate licenses.

When you create a Luna page, the system creates a folder named p7luna. Inside this folder is a folder
named fonts, which contains all of the font files and assets necessary to embed them in your Luna
page. The entire p7luna folder must be uploaded to your Web server.

12
 Advanced techniques you'll learn 13

Each of the 2 fonts used in Luna requires 4 file formats for cross-browser compatibility:

 TTF for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4+

 EOT for Internet Explorer 4+
 WOFF for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
 SVG for iPad and iPhone

SETTING @FONT-FACE SOURCE CSS

The CSS to deploy embedded fonts using @font-face is a 2-step process:

1. @font-face rules to declare the font source files and the font-family name
2. Normal font-family property to assign the font to a particular element on your page

Your Luna fonts folder contains a CSS file named p7luna_fonts.css in which we define the font-family
name and the URLs to the source files. This is what's in that CSS file:

@font-face {
font-family: 'MatchbookMatchbook';
src: url('Matchbook-webfont.eot?') format('eot'),
url('Matchbook-webfont.woff') format('woff'),
url('Matchbook-webfont.ttf') format('truetype'),
url('Matchbook-webfont.svg#webfontjUliH6GT') format('svg');
}

Note: While the CSS file and the fonts do not need to be in the same folder, this makes it easier to manage the source path. If you move the
CSS file, you are responsible for adjusting the paths to the source font files. We recommend that you do not move the CSS file.

13
 Advanced techniques you'll learn 14

@font-face {
font-family: 'ArchitectsDaughterRegular';
src: url('ArchitectsDaughter-webfont.eot?') format('eot'),
url('ArchitectsDaughter-webfont.woff') format('woff'),
url('ArchitectsDaughter-webfont.ttf') format('truetype'),
url('ArchitectsDaughter-webfont.svg#webfontRPduMdrp') format('svg');
}

The font-family value contains the font's semantic name, which is what we'll use in our normal page
style sheet. The Microsoft EOT format is declared first with a question mark after the EOT file name.
This prevents MSIE from attempting to load the remaining declared font files, which would cause an
error.

h1, h2, h3, h4 {

font-weight: normal !important;
font-style: normal !important;
}

If we were to use CSS to set a custom font to be bold or italicized, the results might be bad—
especially on Macs. So we set the elements that will be using the custom fonts to render normal
weight and style—with an important notation to ensure you don't accidentally override it. Do not edit
this rule.

Tip: If you decide you want to use an embedded font for your main body text, then make sure you choose a font that comes with separate
regular, bold, and italics versions. You would then need to ensure that you create rules for em and strong that call the appropriate version of
the font.

14
 Advanced techniques you'll learn 15

SETTING @FONT-FACE PAGE CSS

Luna comes with 2 designs called Type Maestro and Citrus. The 2 Type Maestro layouts use the
MatchbookMatchbook font for all heading (levels 1-4)—set by this rule in the p7luna01 and p7luna02
CSS files:

h1, h2, h3, h4 {

font-family: 'MatchbookMatchbook', Calibri, Geneva, Helvetica, sans-serif;
line-height: normal;
}

The 2 Citrus layouts use the ArchitectsDaughterRegular font for the shadow-box element—set by
this rule in the p7luna03 and p7luna04 CSS files:

.shadow-box {
margin: 20px 0;
padding: 28px 32px;
background-color: #151515;
color: #CCC;
line-height: 1.35;
font-family: 'ArchitectsDaughterRegular', Calibri, Geneva, Helvetica, sans-serif;
font-size: 15px;
}

You can assign your embedded fonts to any element you wish simply by setting that element's CSS
font-family to one of these:

 font-family: 'MatchbookMatchbook', Calibri, Geneva, Helvetica, sans-serif;

 font-family: 'ArchitectsDaughterRegular', Calibri, Geneva, Helvetica, sans-serif;

The font-family property uses a font stack as its values. That is, a comma-separated list of fonts
beginning with the primary one. An old browser that does not support embedded fonts will look at the
list and use the first one it finds that is available on the user's computer.

Note: This fallback technique is important for old browser support, as well as for times when a visitor's connection fails before the font files
are loaded.

15
 Advanced techniques you'll learn 16

PREVIEWING IN DREAMWEAVER
Neither Dreamweaver Design View nor Live View will display your embedded fonts. Instead, it will use
the first fallback font in the stack that it finds. To preview locally, you must use Preview in Browser
with the Preview using Temporary File option turned off in Dreamweaver preferences. A local
testing server will also work.

BROWSER ISSUES WITH EMBEDDED FONTS

There are no major issues. This is a very stable and reliable technique. For a split second, Firefox and
Opera will display the first alternate font, while MSIE and Webkit (Safari and Chrome) will simply
reserve a space before the embedded font is loaded. Because of the way MSIE processes the source
font directive, the link to the p7luna_fonts.css file should always be listed above any script tags in the
head. Luna pages are created this way by default.

WHERE CAN I FIND MORE CUSTOM FONTS?

Font Squirrel offers hundreds of free @font-face kits. Each kit contains all the necessary font files and
even an example CSS file.

CSS ROUNDED CORNERS

We use CSS border-radius to round corners on certain Luna elements such as menu links (Citrus
Vertical), the shadow-box, and the data table. Border radius is expressed using 3 properties. The first 2
are proprietary browser-specific names and the third one is the actual W3C specified CSS3 name:

1. -moz-border-radius — Firefox
2. -webkit-border-radius — Safari and Chrome
3. border-radius — Opera and IE9

Note: CSS3 border-radius is supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9. Older browsers default to
rectangular corners

16
 Advanced techniques you'll learn 17

BORDER -RADIUS SYNTAX

Consider the shadow-box rule for the Citrus design:

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;

We use the 2 browser-specific property names and the W3C specified one. In the case of shadow-box,
it's quite simply a 6px radius curve at all 4 corners, which is expressed with a single value.

Tip: To increase the amount of curve, increase the radius value. To decrease the curve, reduce it.

You can also set a unique radius for each corner of an element. The border-radius property allows for 4
separate values, one for each corner. The values are expressed starting with the top-left and moving
clockwise to the top-right, the bottom-right, and the bottom-left. While we don't use this technique in
Luna, it can come in handy.

-moz-border-radius: 10px 20px 0px 40px;

-webkit-border-radius: 10px 20px 0px 40px;
border-radius: 10px 20px 0px 40px;

-moz-border-radius: 10px 10px 0px 0px;

-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;

-moz-border-radius: 30px 0 0 30px;

-webkit-border-radius: 30px 0 0 30px;
border-radius: 30px 0 0 30px;

17
 Advanced techniques you'll learn 18

CSS SHADOWS
The CSS box-shadow property is expressed using 3 properties. The first 2 are proprietary browser-
specific names and the third one is the actual W3C specified CSS3 name:

1. -moz-box-shadow — Firefox
2. -webkit-box-shadow — Safari and Chrome
3. box-shadow — Opera and IE9

Note: CSS3 box-shadow is supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9.

BOX-SHADOW SYNTAX
The box-shadow property is extremely powerful and far more nuanced than border-radius. We'll cover
some basics and how it's used in Luna. For additional insight, we recommend reading the W3C
specification.

Consider this simple rule:

.theDIV {
box-shadow: 10px 10px 20px #000;
}

The values represent:

box-shadow {
horizontal offset | vertical offset | blur | color
}

Don't forget the browser-specific property names for moz and webkit browsers.

We are using basic shadows in Luna. You can get really fancy—like using nested shadows, which allow
for the creation of complex designs such as the Glass Tabs or iTabs themes from Tab Panel Magic 2.

18
 Advanced techniques you'll learn 19

LUNA MENU SHADOWS

Consider the menu link rules for the Luna Type Maestro horizontal menu. There are 2 rules per state.
The first rule sets basic properties for all browsers and the second rule sets CSS 3 properties.

The default link state basic properties

.p7Luna-menu a {
text-decoration: none;
color: #CCC;
padding: 10px;
background-color: #000;
border-top: 1px solid #666;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #666;
}

The default link state CSS 3 properties

.p7Luna-menu a {
-moz-box-shadow: 3px 3px 10px #666;
-webkit-box-shadow: 3px 3px 10px #666;
box-shadow: 3px 3px 10px #666;
}

The hover state basic properties

.p7Luna-menu a:hover, .p7Luna-menu a:focus {
color: #EEE;
background-color: #222;
border-color: #333 #000 #000 #333;
outline: 0;
}

19
 Advanced techniques you'll learn 20

The hover state CSS 3 properties

.p7Luna-menu a:hover, .p7Luna-menu a:focus {
-moz-box-shadow: 5px 5px 30px #222;
-webkit-box-shadow: 5px 5px 30px #222;
box-shadow: 5px 5px 30px #222;
}

For the hover, we are increasing the offsets, tripling the blur and darkening the shadow. This makes
the hovered link appear to pop up.
The down state basic properties
.p7Luna-menu a.down {
background-color: #C30;
border-color: #F03D00 #9D2700 #9D2700 #F03D00;
color: #FFF;
}

The down state CSS 3 properties

.p7Luna-menu a.down {
-moz-box-shadow: 3px 3px 10px #666;
-webkit-box-shadow: 3px 3px 10px #666;
box-shadow: 3px 3px 10px #666;
}

For the down state we are reverting to the same shadow used for the default state.

20
 Advanced techniques you'll learn 21

CSS LINEAR GRADIENTS

With CSS linear gradients, we are able to accomplish with a couple of lines of simple code what would
typically require complex and hard-to-edit background images. As with border-radius and box-shadow,
linear-gradient is expressed using 3 property names. The first 2 are proprietary browser-specific names
and the third one is the actual W3C specified CSS3 name:

1. -moz-linear-gradient — Firefox
2. -webkit-linear-gradient — Safari and Chrome
3. linear-gradient— IE9

Note: CSS3 linear-gradient is supported by modern browsers including Firefox, Safari, Chrome, and IE9. Older browsers default to rectangular
corners. As of this writing, Opera 10 did not support it but plans to in version 11.

Consider the navigation bar rule for the Citrus layout with horizontal menu (we've grayed out the
other properties, which we will discuss later):

.navigation {
background: -moz-linear-gradient(top, #FFD680, #FFC140);
background: -webkit-gradient(linear, left top, left bottom, from(#FFD680), to(#FFC140));
background: linear-gradient(#FFD680, #FFC140);
border-top: 1px solid rgba(255,255,255,1);
border-bottom: 1px solid rgba(255,255,255,1);
-moz-box-shadow: 3px 3px 20px #CCC;
-webkit-box-shadow: 3px 3px 20px #CCC;
box-shadow: 3px 3px 20px #CCC;
}

It's really quite simple and all you need to be concerned with are the starting and ending colors in each
version of the property.

Note: To read more about CSS3 linear gradients, see the actual W3C specification

21
 Advanced techniques you'll learn 22

COMBINING CSS 3 PROPERTIES TO CREATE IMAGE-LIKE EFFECTS

The horizontal navigation bar in the Citrus layout, as rendered by modern browsers, is a great example
of putting multiple CSS 3 techniques to work.

Let's examine the CSS rules for the navigation bar in their entirety. There are 3 rules:

Basic properties and Fallbacks for older browsers

In the basic rule, we define typical CSS properties that are supported in all browsers. The last 2
properties set dark borders for old browsers. You'll see why in a moment.

.navigation {
padding: 10px 0;
position: fixed;
left: 0;
top: 62px;
width: 100%;
z-index: 100;
background-color: #FFC140;
border-top: 1px solid #FFDA8C;
border-bottom: 1px solid #F9A800;
}

22
 Advanced techniques you'll learn 23

CSS3 properties for modern browsers

In the CSS 3 rule, we assign a linear gradient, shadow, and borders that are set to RGBA colors. The
shadow has minimal offsets (3px), a wide blur (20px), and a light gray color. When combined with
white borders, this creates a very neat bevel effect. The white borders would be useless to any
browser that does not support shadows, which is why we set dark border colors in the basic rule.
Browsers that do not support shadows also lack support for RGBA colors. When they encounter the
RGBA declaration, they ignore it and use the colors declared in the first rule.

.navigation {
background: -webkit-gradient(linear, left top, left bottom, from(#FFD680), to(#FFC140));
background: -moz-linear-gradient(top, #FFD680, #FFC140);
background: linear-gradient(#FFD680, #FFC140);
-moz-box-shadow: 3px 3px 20px #CCC;
-webkit-box-shadow: 3px 3px 20px #CCC;
box-shadow: 3px 3px 20px #CCC;
border-top: 1px solid rgba(255,255,255,1);
border-bottom: 1px solid rgba(255,255,255,1);
}

Microsoft Filter
IE8 and under do not support CSS 3 linear gradients, but they do support Microsoft's proprietary Direct
X filters, which happen to have gradient capabilities. While the syntax is much different, the concept of
a starting and ending color are quite straightforward.

.navigation {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD680', endColorstr='#FFC140');
}

23
 Advanced techniques you'll learn 24

EDITING AND DETERMINING RGBA COLORS

RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows
you to set a transparency level for the element being colored—be it a background color, a text color,
or a border color. White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to
determine the RGB values using its standard color picker tool.

In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6.
Open the color picker. Then click the System Color Picker icon:

The System Color Picker will open:

24
 Advanced techniques you'll learn 25

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value
to:

rgba(102,204,102,1);

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no
transparency). To set transparency, choose a decimal value between 1 and 0. For example, to set 50%
transparency, your values would be:

rgba(102,204,102,.5);

25
 CSS Columns 26

CSS COLUMNS
The Forward Thinking section of the Luna page is set to 2 columns.

Instead of using the float property, we use the display property to render 2 DIVs side-by-side as if they
were table columns. Here is the markup, with minimal content:

<div class="css-column-60percent">
<p>Left column content</p>
</div>
<div class="css-column-40percent">
<p>Right column content</p>
</div>

To display 2 columns we use 2 DIVs set to display: table-cell. This technique is supported by all modern
browsers, including IE8. Older browsers will display the DIVs linearly. One important benefit of this
technique is that the columns behave like table cells and both columns will always be the same height.
Here is the CSS:

The left column

div.css-column-60percent {
display: table-cell;
padding: 0 20px 0 0;
width: 60%;
vertical-align: top;
}

The left column's width is 60%

26
 CSS Columns 27

The right column

div.css-column-40percent {
display: table-cell;
padding: 12px 20px;
width: 40%;
border-left: 1px dotted #000;
vertical-align: top;
font-size: 13px;
line-height: 1.3;
}

The right column's width is 40%. If you customize, remember that the column widths must add up to
100%.

Tip: Alternatively, you can also use pixel widths if you prefer a bit more control. If you use pixels for one column you must use pixels for the
other—and you would then need to calculate aggregate width based on the CSS box model, which means: assigned width + padding +
borders = rendered width.

Your Luna style sheet contains several alternate column rules of varying width that you can use:

div.css-column-50percent {
display: table-cell;
padding: 0 20px;
width: 50%;
vertical-align: top;
}

div.css-column-70percent {
display: table-cell;
padding: 0 20px 0 0;
width: 70%;
vertical-align: top;
}

div.css-column-30percent {
display: table-cell;
padding: 12px 20px;
width: 30%;
border-left: 1px dotted #000;
vertical-align: top;
font-size: 13px;
line-height: 1.3;
}

27
 first and last section CSS classes 28

FIRST AND LAST SECTION CSS CLASSES

When you create a Luna page, the system assigns a special class to both the first and the last section
containers. These special classes allow you to create specific CSS rules that target only the first or last
sections. The first section's container tag looks like this:

<div class="section first" id="section-1">

To create a class for the first section, use this syntax:

div.section.first {property: value;}

The last section's container tag looks like this:

<div class="section last" id="section-[num]">

Whenever you use the modify interface to add a section, remove a section, or move a section, the
system will ensure that the last class is properly assigned to only the last section container.

To create a class for the first section, use this syntax:

div.section.last {property: value;}

HOW WE USE THE "LAST" CLASS IN DEFAULT LUNA PAGES

In the default Luna style sheets, we set bottom padding, or min-height in the flexible designs, to a
substantially higher value than the default section containers to ensure that the overall height of the
last container is sufficient to allow its heading to scroll to the top of the viewport. This is the rule you'll
find in each Luna style sheet:

Fixed layouts

/*Bottom padding is assigned to the last section on the page. Adjust as necessary.*/
div.section.last {
padding-bottom: 600px;
}

Flexible layouts

/*min-height is assigned to the last section on the page. Adjust as necessary.*/

div.section.last {
min-height: 1200px;
}

28
 The data table styles 29

THE DATA TABLE STYLES

The CSS 3 Browser Support section of a default Luna page contains a data table, nicely styled—
including CSS 3 corners and shadows. You'll find the rules toward the bottom of each style sheet:

table.data-table {
width: 95%;
background-color: #000;
font-size: 12px;
color: #CCC;
margin: 12px 0;
padding: 20px;
}

/*Data Table CSS3 Properties*/

table.data-table {
-moz-box-shadow: 10px 10px 20px #666;
-webkit-box-shadow: 10px 10px 20px #666;
box-shadow: 10px 10px 20px #666;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

table.data-table th {
font-weight: normal;
text-align: left;
padding: 0;
background-color: #000;
}

table.data-table td {
border: 1px solid #000;
text-align: center;
padding: 2px;
background-color: #666;
}

table.data-table .no {
background-color: #151515;
color: #CCC;
border-color: #666;
}

To use these styles on another table, simply assign the data-table class to the table tag.

29
 Luna CSS fundamentals 30

LUNA CSS FUNDAMENTALS

If your CSS skills are intermediate or advanced you will find it very easy to customize your Luna pages.
If you are a beginner, you should be able to undertake some basic customizations by opening the CSS
files and reading them. The key rules contain comments.

Here are some rules to use when wanting to customize basics such as text size and colors:

BODY
Change the font-family for general content. Change the page background color.

UL.P7LUNA-MENU
Set the text size for the main menu

.P7LUNA-MENU A
Change the menu link color, border colors, or padding. Padding controls the perceived height and
width of the link box.

.P7LUNA-MENU A:HOVER, .P7LUNA-MENU A:FOCUS

Edit the hover state properties for menu links. The focus state is an accessibility aid for keyboard users.
As they tab, or otherwise put focus on a link, the link behaves as it would when hovered with a mouse.

.P7LUNA-MENU A.DOWN
This rule controls the properties of the menu links when they are in the selected state—that is, when
they have been clicked.

H1, H2, H3, H4

Use this rule for properties common to all heading levels, such as font-family.

H1
Set specific properties for just level 1 headings.

H2, H3, H4
Use this rule for properties common to all heading levels 2, 3, and 4.

H3
Set specific properties for just level 3 headings.

H4
Set specific properties for just level 4 headings.

30
 Luna CSS fundamentals 31

SPAN.SUBHEADING , P.SUBHEADING
This class can be assigned to some of the text at the end of a heading to create a sub-heading type of
effect. Consider this heading from a default Luna page:

<h1 class="section-header">
What is Luna? <span class="subheading"> Luna is more than meets the eye. Read this page and be
amazed</span>
</h1>

This is how it looks:

DIV.SECTION -CONTENT
Edit text size and padding for the main content sections.

.SECTION-CONTENT STRONG
Define how strong text should look. Strong is a tag that Dreamweaver wraps around text when you
use the Bold button on the property inspector.

.SECTION-CONTENT EM
Define how emphatic text should look. EM is a tag that Dreamweaver wraps around text when you use
the Italics button on the property inspector.

.SECTION-CONTENT A, .SECTION-CONTENT A:VISITED

Style links inside the main content sections.

.SECTION-CONTENT A:HOVER, .SECTION-CONTENT A:FOCUS

Style hovered links inside the main content sections.

31
 Luna CSS fundamentals 32

#FOOTER .FOOTER-CONTENT
Style the content inside the footer.

.SHADOW-BOX
Set text and box properties for content inside the shadow box elements.

.SHADOW-BOX A, .SHADOW-BOX A:VISITED,

#FOOTER A, #FOOTER A:VISITED
Set link attributes for links inside the shadow boxes and the footer.

.SHADOW-BOX A:HOVER, .SHADOW-BOX A:FOCUS,

#FOOTER A:HOVER, #FOOTER A:FOCUS
Style hover and focus links for the shadow box and footer elements.

32
 Support and Contact info 33

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

33
 Support and Contact info 34

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

34