Fabrizio by PVII Page 1 of 43

Table of Contents
Table of Contents ........................................................................................................................... 2
Before you begin ............................................................................................................................ 3
What's included.............................................................................................................................. 3
Extensions .................................................................................................................................. 3
Starter Page ............................................................................................................................... 4
Bonus Folder ............................................................................................................................. 4
Editable Fireworks Images ...................................................................................................... 4
CSS Files .................................................................................................................................... 4
JavaScript File........................................................................................................................... 4
Overview: How Fabrizio works ..................................................................................................... 5
The masthead ............................................................................................................................ 5
The contentwrapper ................................................................................................................. 5
The tagline ................................................................................................................................. 6
CSS Strategy.............................................................................................................................. 6
Editing and Customizing ............................................................................................................... 7
The Masthead and Tagline DIVs............................................................................................. 7
The intro section........................................................................................................................ 9
Navigation................................................................................................................................ 12
Adding Content ....................................................................................................................... 12
Image editing tips ......................................................................................................................... 13
Logo.......................................................................................................................................... 13
The Masthead Curved Graphic............................................................................................. 13
General Editing Tips .............................................................................................................. 14
Exporting Images.................................................................................................................... 15
CSS Guide .................................................................................................................................... 17
Importing CSS to hide from older browsers ........................................................................ 17
The main CSS File Analysis................................................................................................... 18
IE PC Conditional Comments ............................................................................................... 26
Style Sheet for Printing .......................................................................................................... 27
Version 4 browser CSS........................................................................................................... 29
The version 4 CSS analysis .................................................................................................... 31
Netscape Resize Fix................................................................................................................. 34
PVII Extension Help.................................................................................................................... 34
Swap Class by PVII ................................................................................................................ 34
Write V4 StyleSheet by PVII ................................................................................................. 38
Support Options ........................................................................................................................... 43

Fabrizio by PVII Page 2 of 43

Thank you for purchasing Fabrizio - a PVII CSS FastPack™.
Fabrizio is a two-column layout that incorporates rounded corners and drop shadows to achieve
a very engaging visual presentation. As with all PVII FastPacks markup is efficient and
standards-conformant.
On behalf of the entire PVII Team, we hope you enjoy working with it as much as we enjoyed
making it.
Al Sparber and Gerry Jacobsen - PVII

Before you begin

Before you begin to work with your FastPack™ move the unzipped folders into a defined
Dreamweaver web site. We recommend that you backup the original zip file for safekeeping. We
also recommend that you print out this User Guide and keep it handy on your desktop as you
work.

What's included
Everything you need is included. Extensions, editable Fireworks images, starter pages, CSS
files, and this User Guide (in both HTML and PDF formats).

Extensions
The following extensions can be found in the Fabrizio local files folder:

1. P7_swapClass_140.mxp
2. P7_v4StyleSheet_11.mxp

Install them before you begin working on your page. If you are not sure how to install an
extension, choose:

• Commands - Manage Extensions - The Extension Manager will open

• In Extension Manager, press F1 to launch its Help System

Note: After installing your extensions, be sure to close and restart Dreamweaver.

Fabrizio by PVII Page 3 of 43

Starter Page
To make your job a bit easier, we've included a starter page for you: fabrizio.htm

Bonus Folder
The Fabrizio design has its sidebar on the right. While we think this is very cool, you (or your
client) might prefer that the sidebar be on the left. The bonus folder contains a mirror image of
the Fabrizio design with the sidebar on the left. You'll also find a specific set of style sheets in
this folder - which is aptly named Lefty.

Editable Fireworks Images

We've included editable Fireworks documents named fabrizio.png and
fabrizio_leftsidebar.png - located in the root of the local files folder. Use these files to edit the
web images on your Fabrizio page or on the bonus page contained in the Lefty folder.

CSS Files
There are four included CSS files:

1. fab.css – The main style sheet used by version 5 and higher browsers
2. fab_v4.css - Used by version 4 browsers only
3. fab_print.css - Used for printing only
4. fab_ie5fixes.css - contains IE5.x (Windows only) fixes

JavaScript File
The PVII SwapClass script is contained in an external script file named fab.js that is linked to
your starter page.

Fabrizio by PVII Page 4 of 43

Overview: How Fabrizio works
Fabrizio uses CSS to center a two-column layout in your browser window. The round corners
and drop shadow effects are accomplished using CSS to position background images that
create the curves and the shadow. No spacers, table cells, or tiny image slices are used. There
are three background images involved in creating the curves and shadow. They are assigned,
via CSS rules, to the masthead, contentwrapper, and tagline DIVs.

The masthead
The masthead DIV that spans the layout's top is rather ingeniously designed. It contains the
page's level 1 heading and a special printer-optimized logo that are pushed off-screen by CSS
rules so that what you see in your browser is a background image that carries the top curve,
drop shadow, and a logo optimized for the screen. When you print the page, the background
image does not print - but the level 1 heading and the printer-optimized logo do. A special print
media style sheet moves those elements back from their off-screen resting places. As you read
through the Fabrizio CSS Guide, you'll learn exactly how this is done.

Note: A web page should logically contain a single level 1 heading inside <h1> tags. For this reason, the screen-
visible headings on your Fabrizio page are level 2 (and deeper) headings.

The contentwrapper
The layout-enveloping contentwrapper DIV is assigned a background image that serves two
purposes:
1. It carries the center portion of the shadow - the part that lies between the top curve and
bottom curve. This part of the shadow must expand and contract vertically, according to
the amount of content on the page and the size of the browser window.
2. It establishes the background colors for the maincontent and sidebar DIVs. The boxes
are separated by a dashed line, which is also part of the background image.

Note: Because the maincontent and sidebar DIVs are nested inside the contentwrapper, the contentwrapper’s
background image spans them both. This is how one background image can provide a background for two
distinct areas.

Fabrizio by PVII Page 5 of 43

The tagline
The tagline DIV exists primarily to house the layout’s bottom curve and shadow – which is
accomplished via a CSS background image. The tagline DIV sits below the maincontent and
sidebar DIVs and spans the entire layout width. While the tagline DIV’s primary purpose is to
carry a background image critical to the completion of the visual layout, it also contains a text-
based tag line that is styled to be hidden in browsers but readable on printed pages.

CSS Strategy
Fabrizio employs a modern and practical CSS strategy to serve style sheets specifically
optimized for the screen - and also for printers.
A main style sheet is served to modern browsers, but hidden from Netscape 4 and IE4 - which
are instead served a special style sheet that contains only styles that they support. Modern
browsers get a richly styled page powered by advanced CSS techniques, while older browsers
get a smartly styled page kept a safe enough distance from the cutting edge to be stable.
Modern browsers also benefit from the inclusion of a special print media style sheet that provides
a page optimally styled for printers. When you print (or print preview) your Fabrizio page in a
modern browser, you will see a page that is logically set up for printing - including a version of
the logo optimized for the printed page.

Fabrizio by PVII Page 6 of 43

Editing and Customizing
The sections below will help you to understand and to customize your Fabrizio pages. Open the
included starter page (fabrizio.htm). Preview the page in all of your browsers. Test it out, kick the
tires, take it for a spin.

The Masthead and Tagline DIVs

Because they are either hidden or moved off-screen, the masthead and tagline DIVs must be
edited in Code View. This section will show you how to edit the link inside the masthead and the
text inside the tagline.

Editing the masthead link

The masthead DIV contains the page's level 1 <h1> heading, which is actually a logo that is
linked to the home page and appears only when the page is printed. The masthead is assigned
a page-spanning CSS background image that contains the screen logo, as well as the layout's
top curve and shadow.
<div id="masthead">
<h1><a href="fabrizio.htm" title="Go to the Fabrizio Home Page">
<img src="assets/fab_plogo.gif" alt="Fabrizio.com"
width="164" height="46"></a>
</h1>
</div>

The actual contents of the masthead are not seen because CSS is used to move them beyond
the left edge of the window. Visitors with CSS-enabled browsers instead see the engaging
curved background image that spans the masthead. This will be fully explained in the CSS
analysis. For now, the important thing you need to know about the masthead is how to change
its hyperlink and its title.

Fabrizio by PVII Page 7 of 43

To edit the masthead link, as well as its alt and title attributes, you will work in Code View.

• Switch to Code View (or Split View)

• Locate the masthead DIV
• Edit the title attribute inside the <a> tag to reflect your page

• Insert your cursor inside the masthead's image <img> tag and the Property Inspector will
change to reflect the tag

• Edit the Hyperlink using the Property Inspector's Link box

• Edit the Alt attribute

Editing the Tagline text

The main purpose of the Tagline DIV is to house the CSS background image that renders the
bottom layout curve and shadow. The tagline DIV also contains the following text in a paragraph:
Thank you for visiting Fabrizio.com - Come back again soon. This text is only visible to non-CSS
browsers and printers. Because search engines will read this text, it's a good place to include
something meaningful. To edit this paragraph, you'll need to use Code View:

• Switch to Code View

• Locate the tagline DIV

• Edit the text inside the paragraph

Fabrizio by PVII Page 8 of 43

The intro section
The intro section is a blockquote at the top of the main content area. Use it to house a customer
testimonial or, for example, a statement from the president of your company. Let it set the tone
for your site. Use it just on your home page or on multiple pages. The intro section has been set
up so that users can hide it and show it. The controls for hiding and showing are contained within
the introControls DIV and are powered by the PVII SwapClass behavior. Here is how it works:
When the page loads, a SwapClass behavior on the <body> makes the Hide Intro link visible.
When you click the Hide Intro link, here is what happens:
1. The blockquote containing the intro section is hidden
2. The Hide Intro link is hidden
3. The Show Intro link is made visible
If you click the Show Intro link, the process is reversed:
1. The blockquote is made visible
2. The Show Intro link is is hidden
3. The Hide Intro link is made visible

The body onLoad event

The SwapClass behavior that hides and shows the introSection DIV relies on JavaScript.
Because some users have JavaScript turned off, the Hide Intro link will be meaningless to them,
so we need a strategy to prevent them ever seing it. The noSeeUm class automatically hides the
link, but for the vast majority of users with JavaScript enabled, a SwapClass behavior on the
<body> onLoad event makes it visible and ready for action. The <body> onLoad event looks like
this:
onLoad="P7_swapClass(0,'none','noSeeUm','showit','li')"

This behavior tells SwapClass what to do by listing a set of comma separated arguments within
parentheses:

• 0 - turn off toggling

• 'none' - look at all elements, not just ones with a specific ID
• 'noSeeUm' - swap from the class noSeeUm
• 'showit' - swap to the class showit
• 'li' - act only upon <li> elements

Translated in into plain English: SwapClass is instructed to look for list items <li> that have a
class of noSeeUm and to swap the class from noSeeUm to showit.
When the page loads, a JavaScript capable browser will show the Hide Intro link.

Fabrizio by PVII Page 9 of 43

We've walked you through the logic of a particular set of SwapClass behaviors in Code View to
give you a different perspective on how the behavior works - and the underlying logic. Since you
have installed the SwapClass extension, you can also open the SwapClass user interface to see
how the behavior is visually applied. To inspect the <body> onLoad SwapClass behavior:

• Insert your cursor anywhere on the page

• Click to select the <body> element on the Tag Selector bar that runs along the bottom
edge of your Dreamweaver Design or Code window
• Open your Behaviors panel (Window - Behaviors)

• Double-click swapClass by PVII

The SwapClass UI will open:

Note how the interface choices mirror the body onLoad SwapClass event we described above.
Click Cancel to close the dialog without making any changes.

Fabrizio by PVII Page 10 of 43

The Hide and Show Intro Links
The Hide Intro link contains its own SwapClass behavior (onClick) that hides the intro blockquote
and shows the Show Intro link:
onClick="P7_swapClass(1,'none','showit','hideit','blockquote','li')"

• 1 - turn on toggling
• 'none' - do not look for a specific ID
• 'showit' - swap the class from showit
• 'hideit' - swap the class to hideit
• 'blockquote' - act on <blockquote> elements
• 'li' – and also act on <li> elements (which will hide and show the appropriate link)

Translated in into plain English: SwapClass is instructed to look for list items <li> and also
<blockquote> elements that have a class of showit and to swap the class from showit to hideit.
Since toggling is enabled, any <li> or <blockquote> elements that are assigned a class of
hideit will be swapped to showit.
This behavior hides the Hide Intro link, hides the intro blockquote, and shows the Show Intro link.
The Show Intro link has the same SwapClass behavior, which toggles all the settings back to
their original state - so clicking it hides the Show Intro link, shows the intro blockquote, and
shows the Hide Intro link.

Note: Because of a rendering bug in Dreamweaver, the Hide Intro link is visible in Design View. It should only
become visible in a browser as SwapClass is fired onLoad.

Fabrizio by PVII Page 11 of 43

Navigation
The menu in the sidebar is a nicely styled list menu in two parts:

1. Main Navigation: Should contain links to the main sections of your site.
2. Section Navigation: Should contain contextual links to pages within a main section of
your site.

The navigation sidebar is designed to be elegant and functional. Simply add your own links and
you've got a very usable menu.

A perfect spot for planting a Tree

Fabrizio would be a perfect match for a PVII Tree Menu Magic Menu. You simply position your
cursor in the sidebar and in a couple of mouse clicks you’ll have a working, interactive Tree
Menu. To learn more about the PVII Tree Menu Magic system Visit the Tree Menu Magic
information page.

Adding Content
Adding content is as simple as opening fabrizio.htm and replacing the filler content with your
own. Everything has been prepared for you!

Fabrizio by PVII Page 12 of 43

Image editing tips
If you are not familiar with the Fireworks program we suggest taking a few hours to go through its
Help System.

Fireworks Layers
We use Fireworks’ Layers panel to divide objects into logical groupings. All background objects
are in Layers that we’ve locked to prevent inadvertant re-positioning. To edit objects on a locked
Layer, open the Fireworks Layers panel and click the padlock icon. It will turn into a pencil and
you will be able to edit any object on that Layer.

Logo
The Fabrizio logo is done in Century Gothic. If you do not have that font installed, Fireworks will
present you with a Font Substitution dialog when you open the document. Simply choose a font
that is installed on your system. Futura or Lucida would be good choices.
The other font used in the images is Kroeger05_54. This font can be acquired at:
http://www.miniml.com

The Masthead Curved Graphic

To customize the masthead’s curved background image:
• Open the Fireworks Layers Panel
• Select and delete the Masthead Bitmap object
• Import a graphic of your choice into your Fireworks document. The graphic should be at
least 748 pixels wide to span the entire width of the masthead slice. The left and right
edges of your graphic should extend beyond the visible curve and align with the left and
right edges of the Fireworks slice that defines the masthead background image.
• With your graphic positioned, select it and choose Edit – Cut
• In your Layers Panel, select the Masthead Curve object
• Choose Edit - Paste Inside
Fireworks will turn the existing masthead curved image into a bitmap mask as it pours your
graphic inside it. Your image will perfectly conform to the original curves.

Fabrizio by PVII Page 13 of 43

General Editing Tips
All the web images that your Fireworks document will yield are represented by slices. To view
slices open your Fireworks Layers panel and select the Web Layer.
There are three background images that comprise the curves and shadow and a fourth that sets
the page background:
1. slice name fab_logobg: This is the masthead background and serves as the top curve
and shadow. It does not repeat. It renders as a sort of cap that tops the combined width
of the main content and sidebar.
2. slice name fab_shadow: This is the contentwrapper background and serves as the
middle shadow. It repeats along the y-axis (top to bottom) and is what allows the shadow
to expand and contract as the page grows taller or shorter. This background is designed
to appear as two distinct vertical sections to separate the main content area from the
sidebar.
3. slice name fab_bottom: This is the tagline background and serves as the bottom curve
and shadow. It does not repeat (tile). It always maintains its bottom position as its
markup comes after the maincontent and sidebar DIVs and just before the close of the
contentwrapper DIV.
4. slice name fab_pbg: This is the page background.

IMPORTANT: These three background images are each 748 pixels wide - the same width as the
contentwrapper. There is a relationship between these images and the widths assigned to the contentwrapper,
maincontent, and sidebar DIVs. If you are not yet proficient in CSS and Fireworks we recommend that you limit
your editing of these images to color and texture changes and do not attempt to alter the dimensions. For further
information and assistance in general Fireworks image editing, please feel free to log on to our Newsgroup. See
the support section of this User Guide or visit our main support page at: www.projectseven.com/support/.

Fabrizio by PVII Page 14 of 43

Exporting Images
After editing your Fireworks document, all you need to do to get your revised images into your
page is to run the Fireworks Export command. Follow these instructions from inside Fireworks:

• Choose File: Export

• In the Save in box, browse to the assets folder in the Fabrizio root
• Select and open the images folder by double-clicking it

• Enter fab in the File name box (if it's not already there)
• For Save as type, select Images Only
• HTML should be grayed out (unavailable) and None will be displayed
• For Slices, select Export Slices
• Selected slices only, Current frame only, and Include areas without slices should all
be unchecked
• Click the Save button

Fabrizio by PVII Page 15 of 43

A dialog will pop up warning you that you are about to overwrite (replace) existing image files.

-Click OK

All the images contained in your Fireworks document (including the ones you edited) will be
exported - overwriting your existing images and reflecting all of your changes.

Fabrizio by PVII Page 16 of 43

CSS Guide
Your PVII FastPack™ is powered by CSS. The CSS Guide will walk you through each of the
rules in each of the style sheets. Please do take the time to read it.

Importing CSS to hide from older browsers

To hide your main CSS file from older browsers, we use the @import directive with a media type
of screen:
<style type="text/css" media="screen";>
<!--
@import "fab.css";
-->
</style>

Setting media type to screen means that the style sheet is designed for browser screens only.
This technique also allows us to more easily deploy a special style sheet for printing (using the
print media type), which will be discussed later.
Dreamweaver MX2004 has a rather quirky behavior that prevents accurate previewing in older
browsers. When you preview in your browser using the Temporary file option, Dreamweaver
embeds the contents of imported and linked style sheets into the document's head, thereby
exposing it to all browsers and preventing a reliable local preview in Netscape 4. To preview
locally in Netscape 4:

1. Launch Netscape 4
2. Select File - Open Page
3. Browse to your saved page

Note: The default @import syntax used by Dreamweaver is a bit different:

@import url(../test.css);

The Dreamweaver syntax will hide CSS from all version 4 browsers except for some later versions of IE4 that
shipped with Windows 98. If you use Dreamweaver to Import your style sheet, you will need to edit the @import
directive manually to remove url and parentheses and to insert double quotes around the file path:

@import "../test.css";

If you subsequently move an HTML or CSS file using Dreamweaver's site or files panels, Dreamweaver will
overwrite your syntax and you'll need to edit it again.

Fabrizio by PVII Page 17 of 43

The main CSS File Analysis
Below is a rule-by-rule analysis of the main CSS file. To maintain the integrity of this file, we
recommend that your edits take place in the actual file. If you are using a version of
Dreamweaver older than MX, we recommend that you use a dedicated CSS Editor such as
TopStyle (PC) or StyleMaster (Mac) - or a simple text editor. Before you edit the CSS file, make
a backup copy of the original in case you need or want to revert back to it.

Body
Sets the page background image. Sets the page background color to match the textured
background image. Sets the global font family, base font size, and font color. Font-size of 101%
may seem odd, but it serves to address some cross-browser font rendering anomalies. Margin is
set to 24px top and bottom; and 0 left and right. Padding is set to zero to turn off the default
padding Opera browsers place on the body.
The min-width property is used to address a quirk in Mozilla browsers. When a fixed width
construct is centered with CSS (using left and right margins set to auto), there is an issue when
you resize the window narrower than the centered construct: it moves off the page to the left and
the browser does not spawn a horizontal scrollbar - the content is lost off-screen. Using the min-
width property with a value equal to the width of the construct solves the problem. In this case,
the min-width value is set to 748px, which is equal to the width of the contentwrapper DIV.
body {
background-image: url(assets/fab_pbg.jpg);
background-color: #B6A29B;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
margin: 24px 0;
min-width: 748px;
padding: 0;
}

Insight: CSS shorthand permits combining values. Properties that have possible top, bottom, left, and right
values can be shortened to a single line and the direction can be omitted. This saves many keystrokes. Instead
of having four separate properties: margin-top; margin-bottom; margin-left; and margin-right - we can distill to a
single declaration encompassing all 4 values. To keep track of which value relates to which side, CSS has a
default order: Top; Right; Bottom; Left. Values are always declared clockwise from the top. If you commit this
order to memory, you will always avoid TRouBLe. When a single value is declared (as in margin: 24px;) the
value relates to all four sides. When two values are declared (as in margin: 24px 12px;), the first value relates to
both the Top and the Bottom, while the second value relates to both the Right and the Left. If three values are
declared (as in margin: 24px 24px 12px;), it means that the first value relates only to the Top; the second value
relates to both the Right and the Left; and the third value relates to the Bottom. If the Right and Left values are
different or if all four values are different, then all four must be explicitly declared.

Fabrizio by PVII Page 18 of 43

#contentwrapper
This DIV establishes the main construct and is the container for the masthead, maincontent,
sidebar, and tagline DIVs - which are nested inside it. The background image and color assigned
to this DIV acts as the background for the maincontent and sidebar DIVs nested inside - creating
the illusion that they are the same height.
We set a background color, which is optional, so that a color other than the page background is
rendered because there may be a very slight delay when the page is loading until the
background images come in.
Margin is set to zero top and bottom, and auto left and right. By giving an element a fixed width
(in this case 748 pixels) and setting its left and right margins to auto, the contentwrapper (along
with all of the elements inside it) is centered in the browser window.
#contentwrapper {
background-color: #F8F9F1;
background-image: url(assets/fab_shadow.jpg);
background-repeat: repeat-y;
margin: 0 auto;
width: 748px;
}

#masthead
The masthead background spans 748 pixels and is 137 pixels high. It carries the top curve of the
layout, the top shadow, and the screen logo.
#masthead {
background-image: url(assets/fab_logobg.jpg);
background-repeat: no-repeat;
}

#masthead link styles

The masthead link styles are declared using a combined descendant selector. A descendant
selector describes an element contained inside another. In this case, we are describing only <a>
elements, as well as a:visited and a:active pseudo classes that are within the #masthead
element. When two selectors share the same properties and values, they can be combined into
a multiple selector separated by commas.
The masthead contains our print logo, which is also a hyperlink to the home page. We want the
logo to be hidden off-screen so we set the margin to minus 20,000 pixels. Setting the link to
display as a block and giving it a height of 137 pixels accomplishes two things:

1. It forces the masthead DIV to be tall enough to perfectly accommodate the

fab_logobg.jpg background image
2. It makes the hyperlink around the print logo accessible over the entire width and
height of the masthead DIV - even though the image is way off-screen to the left

#masthead a, #masthead a:visited, #masthead a:active {

display: block;
height: 137px;
margin-left: -20000px;
}

Fabrizio by PVII Page 19 of 43

h1
The print logo and its hyperlink are contained inside a level 1 heading. The margin is set to zero
to remove any offsets.
h1 {
margin: 0;
}

#maincontent
We set the maincontent DIV to float: left, which takes it out of the normal page flow and allows us
to position it as a "column". We set font size to .8em, which is calculated based upon the base
font size set in the body selector: .8em relative to 101% is the same as saying 80% of 101%. We
set line-height to 1.5em to provide a comfortable and more readable spacing between lines.
Padding is set to 0 top and bottom; and 24px left and right. We set text to align justified.
Width is set to 480px. Note the comment to the right of the declaration /*528 rendered*/. This is a
note to remind you how modern browsers render an element's box. The true rendered width of a
box is determined by adding its declared width plus its left and right padding and its left and right
borders. Here is the math:
480 (declared) + 24 (left padding) + 24 (right padding) = 528
#maincontent {
float: left;
font-size: 0.8em;
line-height: 1.5em;
padding: 0 24px;
width: 480px; /*528 rendered*/
text-align: justify;
}

#maincontent p
This descendant selector styles <p> elements within the maincontent DIV. Giving the paragraphs
16px left padding serves to indent all text 16 pixels in from all headings. If you do not want the
indentation, remove the padding property from the rule.
#maincontent p {
margin: 6px 0 12px 0;
padding: 0 0 0 16px;
}

#maincontent h2
This descendant selector applies to all <h2> elements within the maincontent DIV. H2 elements
are used for main links because the H1 element has been used in the masthead to describe the
page.
#maincontent h2 {
color: #9C8C85;
font-size: 2em;
font-weight: normal;
letter-spacing: 0.2em;
line-height: normal;
margin: 24px 0 0 0;
text-align: left;
}

Fabrizio by PVII Page 20 of 43

#maincontent Link Styles
These selectors style only the links inside the maincontent DIV.
#maincontent a:link {
color: #9C8C85;
}
#maincontent a:visited {
color: #B9A199;
}
#maincontent a:hover, #maincontent a:active, #maincontent a:focus {
color: #333333;
}

Note: Focus is used by modern browsers when a link is tabbed to using the keyboard.

intro controls
The following rules are used to orchestrate the hiding and showing of the intro section.

hideit
This class is assigned to the <li> element that contains the Show Intro link so that it is hidden
when the page loads. It is also one of the classes that SwapClass swaps to as the intro section
and its control links are hidden.
.hideit {display: none;}

noSeeUm
This class is assigned to the <li> element that contains the Hide Intro link so that it is hidden
when the page loads. We use the visibility property instead of the display property to keep the
page from jumping [see note below]. Once the page is loaded, and a user begins to operate the
Hide Intro and Show Intro links, SwapClass swaps from noSeeUm to showit only the first time
the Hide Intro link is clicked. Subsequent clicks swap from showit to hideit.
.noSeeUm {visibility: hidden;}

Note: When an element is set to display: none the element becomes hidden and the space it occupied is
collapsed - causing elements below to move up. When an element is set to visibility: hidden the element is
hidden but the space it occupied does not collapse. Elements below remain where they are.

showit
This class is assigned to the <blockquote> element that contains the Intro section so that it is
visible when the page loads. It is also one of the classes that SwapClass swaps to as the intro
section and its control links are shown.
.showit {display: block; visibility: visible;}

Note: The visibility property is necessary for some early builds of IE 5 (Windows) to counteract the noSeeUm
class the first time the Hide Intro link is clicked.

Fabrizio by PVII Page 21 of 43

#introControls
Turns off all margins for the <ul> element that contains the intro controls.
#introControls {margin: 0;}

#introControls li
Turns off the bullet character for the <li> elements that contain the Hide Intro and Show Intro
links.
#introControls li {list-style-type: none;}

#introSection
This is the blockquote element that contains the intro section. The background image sets a
decorative non-repeating quotation mark. Margin is set to 12 pixels top and bottom, and 0 left
and right. Line-height is set a bit tighter than the maincontent, and letter spacing is set to expand
by a small amount to make the intro text stand out. Padding is set to 40 pixels left so the text can
clear the background image. Text alignment is set to left to counteract the justified text set for the
maincontent DIV.
#introSection {
background-image: url(assets/fab_quote.gif);
background-repeat: no-repeat;
color: #95847B;
font-size: 0.9em;
letter-spacing: 0.1em;
line-height: 1.25em;
margin: 12px 0;
padding: 0 0 0 40px;
text-align: left;
}

#tagline
We set a non-repeating background to render the bottom curve and shadow. We also set tagline
to clear both sides - which allows it to display below the two floated DIVs (maincontent and
sidebar) - spanning their combined width. Height is set to 28 pixels - which is equal to the height
of the background image.
#tagline {
background-image: url(assets/fab_bottom.jpg);
background-repeat: no-repeat;
clear: both;
height: 28px;
}

#tagline p
This descendant selector applies to the paragraph inside the tagline DIV. We turn off margins
and set display to none, which hides the paragraph so that only the background image of the
tagline DIV is seen.
#tagline p {
margin:0;
display: none;
}

Fabrizio by PVII Page 22 of 43

.picture
This class is assigned to the little sample image in the maincontent area. By floating it right, we
position it at the right edge of the maincontent DIV and allow text to wrap around it to the left.
.picture {
float: right;
}

#sidebar
The sidebar is set to float left. Since the maincontent DIV is also set to float left, the DIV whose
markup comes first in the source code wins the left position. Since the sidebar markup comes
after maincontent's, the sidebar is rendered on the right side.
Font size is set smaller than the maincontent DIV.
Declared width is 164px and we add left and right padding (164 + 24 +24 = 212) to arrive at the
rendered width of 212px. This width, when added to the rendered width of the maincontent DIV
must be less than or equal to the declared width of the Wrapper DIV:
528 (maincontent rendered) + 212 (sidebar rendered) = 740. The contentwrapper is 748 pixels -
so we have 8 pixels to spare. Of course, there is a very good reason for this: the drop shadow.
The background image that spans the maincontent and sidebar DIVs is 748 pixels wide - with
the last 8 pixels being the drop shadow. If we added those 8 pixels to the width of the sidebar,
the sidebar DIV would extend into the shadow. This would cause the sidebar content to render
out of balance with the illusion that there was more padding on the left than on the right side.
#sidebar {
color: #866B64;
float: left;
font-size: 0.75em;
padding: 24px;
width: 164px; /*212 rendered*/
}

#sidebar h3
This descendant selector applies only to <h3> elements that are within the sidebar.
#sidebar h3 {
color: #9C8C85;
font-size: 1.2em;
margin: 24px 0 0 0;
}

#sidebar p
This descendant selector applies only to paragraphs that are within the sidebar.
#sidebar p {
margin: 6px 0 12px 0;
}

Fabrizio by PVII Page 23 of 43

.navbar
This class is assigned to the <ul> tag for each of the three navigation lists in the sidebar (main
links, section links, and external links). The left indent of an unordered list is controlled by margin
in some browsers, and by padding in others - so to have the indentation be consistent in all
browsers we need to set both left margin and left padding to the same value. We also add a top
margin of 6 pixels.
.navbar {
margin: 6px 0 0 1em;
padding-left: 1em;
}

Note: Dreamweaver MX 2004 has a quirk that causes it to render both the left margin and the left padding -
making the lists appear to have double the indent. This is a known issue in Dreamweaver and does not reflect
what browsers actually render.

.navbar li
This descendant selector turns off the bullet character in the navbar lists.
.navbar li {
list-style-type: none;
}

.navbar link styles

These selectors set the styles for all navbar links.
.navbar a {
padding: 3px;
}
.navbar a:link, .navbar a:visited {
color: #9C8C85;
}
.navbar a:hover, .navbar a:active, .navbar a:focus {
color: #333333;
}

Fabrizio by PVII Page 24 of 43

#footer
The footer is outside of the contentwrapper, so we need to make sure it clears the floated
elements above it and that it is both centered on and aligned with the content above it. We set
the top padding to 12 pixels to provide a bit of vertical separation from the main content. We set
right and left padding to 24 pixels. To arrive at a rendered width equal to the contentwrapper's
width, we need to take the contentwrapper's width (748) and subtract the left and right padding.
748 - 24 -24 = 700.
#footer {
clear: both;
color: #E3DFDD;
font-size: 0.75em;
margin: 0 auto;
padding: 12px 24px 0 24px;
width: 700px; /*748 rendered*/
}

#footer link styles

We set styles for links inside the footer DIV.
#footer a:link, #footer a:visited {
color: #675954;
}
#footer a:hover, #footer a:active, #footer a:focus {
color: #FFFFFF;
}

Fabrizio by PVII Page 25 of 43

IE PC Conditional Comments
While some CSS authors use complex filter hacks to hide and show various rules to several
different browsers, we prefer a cleaner and more orderly approach. Conditional Comments are a
Microsoft feature built into Explorer versions 5.0 and higher. They allow you to include code
targeted at specific MSIE versions on the Windows platform. Using this technique to serve
curative style rules to Internet Explorer allows your main style sheet to remain clean and devoid
of all manner of hacks.
For the Fabrizio layout we only need to fix IE5.x bugs. IE 6 has no problems to deal with.
The IE5.x fixes are contained in a style sheet called fab_ie5fixes.css. Here are the rules:

body
IE5.x does not support auto margins to center elements but if we set text-align to center on the
body, every element on the page will be centered - along with the text inside those elements.
This is a quirky behavior specific to IE5.x that we can take advantage of.
body {text-align: center;}

By setting the body text to align center, IE5.x will center all elements within the body.
Interestingly, if we set a child element of the body - such as contentwrapper - to text-align left,
the contentwrapper will still display in the center of the window, but anything inside
contentwrapper will align left. If we set both contentwrapper and footer to text-align left, then our
page will display correctly in IE5.x.
#contentwrapper, #footer {text-align: left;}

#footer #sidebar #maincontent

IE5x gets the box model backwards - that is, it adds padding to the inside of the box, rather than
to the outside. So instead of setting a declared width that is equal to the rendered width minus
the padding, we can simply make the declared width for our structural elements equal to the
rendered width - and IE5.x will render the boxes precisely as they are rendered in more modern
browsers.
#footer {width: 748px;}
#sidebar {width: 212px;}
#maincontent {width: 528px;}

Tip: In IE5.x Windows a box's rendered width is always the same as its declared width.

IE5.x Conditional Comment

Now we need to include the IE5.x fixes in a style sheet linked to the page that only IE5.x will be
able to read. To do this, we'll insert the CSS link inside a Conditional Comment.
In the Conditional Comment, the version vector IE 5 targets all versions of Internet Explorer from
5.0-5.99 running on Windows.
<!--[if IE 5]>
<link href="fab_ie5fixes.css" rel="stylesheet" type="text/css">
<![endif]-->

Fabrizio by PVII Page 26 of 43

Style Sheet for Printing
The main Fabrizio style sheet's media type is set to screen. If you attempt to print the page
using a modern browser, there will be no styles rendered. The page will print as plain text. To
gain more control over the printed Fabrizio page we have included a separate style sheet with a
media type set to print and linked it to your starter page:
<link href="fab_print.css" rel="stylesheet" type="text/css" media="print">

The strategy is to minimally style the page with techniques that work well for printing. An analysis
of the print style sheet follows.

body
We simply set a background color that will print well and a font. We'll leave the color to the user's
default setting, which will most surely be black.
body {
background-color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}

Font Sizes
We use a combined selector to set the font size for all items we wish to have print smaller than
the main content. Blockquotes, the footer, and the tagline will print at 80% of whatever the user's
default font size is.
Note that the tagline will actually print so make sure you've edited yours to something
meaningful.
blockquote, #footer, #tagline {
font-size: 80%;
}

#tagline
We set a border above the tagline and 12 points padding to separate it from the main body of
text. Points is a unit of measure suitable for printing.
#tagline {
border-top: 1px solid #000;
padding-top: 12pt;
}

img
Since the masthead content, including the print-optimized logo inside it, will be printing, we need
to turn off the default border that browsers render around images that are hyperlinks.
img {
border: 0;
}

Fabrizio by PVII Page 27 of 43

#maincontent
We justify the main content area text (as it is in the screen style sheet). If you'd rather the text be
left-aligned, simply delete this rule.
#maincontent {
text-align: justify;
}

h2
We set the top margin for level 2 headings to 24 points.
h2 {
margin-top: 24pt;
}

.picture
We set our little sample picture to float right, as it does in the screen style sheet.
.picture {
float: right;
}

Stuff to hide from the printer

There is obviously no need for the control links that toggle the info section's visibility, so we will
set those elements to display: none. We'll also set all navbar lists and their headings to be
hidden. Use this selector to add additional elements you wish to hide from the printer or to
remove elements you wish to have shown.
#introControls, .navbar, .navheading {display: none;}

Fabrizio by PVII Page 28 of 43

Version 4 browser CSS
The Version 4 style sheet is served to Netscape 4.x and IE4.x via the P7_v4StyleSheet
command, which places this script in your page:
function P7_v4StyleSheet(a,b){ //v1.1 by PVII-www.projectseven.com
var m=false,tS='<l'+'ink re'+'l="sty'+'lesheet" t'+'ype="tex'+'t/css"
hr'+'ef="'+b+'">';
m=(a==0)?(!document.getElementById):(document.layers);
if(m){document.write(tS);}
}
P7_v4StyleSheet(0,'fab_v4.css');

This technique allows you to maintain a completely separate style sheet for IE4 and Netscape 4.
Since modern browsers never see this style sheet, you do not have to worry about styles
cascading from one sheet to another or of using cumbersome and complicated filter hacks. Your
version 4 style sheet contains only safe rules.

Netscape 4 External CSS Path Quirk

Netscape 4 has a quirk with external style sheets. In order for NN4 browsers to be able to find
your CSS file in all scenarios, you will need to adjust the path so that it is absolute or site
relative. The path in the above script example is: 'fab_v4.css'.

Absolute Path Example

http://www.mysite.com/fab_v4.css

Site Relative Path Example

/fab_v4.css

Fabrizio by PVII Page 29 of 43

To change the path:
-Choose Commands: Studio VII: Write v4 Style Sheet by PVII
The Command window will open

Note: Since the starter page already contained the command, the window will open in "modify" mode with the
original document-relative path we set. You'll know you are in "modify" mode because the window will display
Apply and Remove buttons.

-Enter an absolute or site relative path in the Path to version 4 Style Sheet box
-Make sure the Apply for Netscape 4.x browsers only box remains unchecked
-Click the Apply button

Previewing in Netscape 4
Once you change the version 4 style sheet path to absolute (or site relative) you will not be able
to preview the page locally unless you temporarily change the path back to document relative.
The PVII Write V4 Style Sheet command allows you to do this easily:
-Choose Commands: Studio VII: Write v4 Style Sheet by PVII
The Command window will open in Modify mode

-Use the Browse button to locate your v4 style sheet or type in the document relative path
-Make sure the Apply for Netscape 4.x browsers only box remains unchecked
-Click Apply

IMPORTANT! Make sure you set the path back to absolute or site relative before publishing the
page to the Internet.

Fabrizio by PVII Page 30 of 43

The version 4 CSS analysis
The version 4 style sheet is simplified and was created to minimally style the page without
causing bugs, instability, or crashes.

body
The body selector carries the background color and image.

IMPORTANT: In order for Netscape 4 to find your background images, change the path to the image to either
Absolute or Site Relative before publishing your site.

body {
background-image: url(assets/fab_pbg.jpg);
background-color: #B6A29B;
}

Multiple Tag Selector

To avoid CSS inheritance quirks in Netscape 4, we explicitly declare font properties using a
multiple selector that covers the most likely tags you'll be using. Feel free to append additional
tags as the need arises.
body, div, p, h2, h3, ul, blockquote {
font-family: Arial, Helvetica, sans-serif;
}

#masthead
The masthead is set to 528px wide and given a 1px border. Background-color is set to white.
#masthead {
background-color: #FFFFFF;
border: 1px solid #000000;
width: 528px;
}

#masthead h1
For version 4 browsers we will not be using the masthead background so the print logo inside
the masthead's <h1> element will remain visible as it is in the print style sheet. We give the <h1>
element 6 pixels of padding to create a bit of white space inside the masthead's border.
#masthead h1 {padding: 6px;}

Fabrizio by PVII Page 31 of 43

#maincontent
Maincontent is set to the same width as the masthead. Padding is set to 12px top and bottom,
background color is white, a 1px border is assigned, and font-size set to 14px.
#maincontent {
padding: 12px 0;
width: 528px;
background-color: #FFFFFF;
border: 1px solid #000000;
font-size: 14px;
}

Paragraphs inside maincontent are given a top margin of 6px, a right margin of 24px, a bottom
margin of 12px, and a left margin of 24px. The left and right margins are set instead of padding
because padding will cause the maincontent DIV to push out and obscure part of the sidebar.
Font-size is also set here to eliminate inheritance issues with Netscape 4.
#maincontent p {
margin: 6px 24px 12px 24px;
font-size: 14px;
}

The level 2 headings inside maincontent are given left and right margins to match the
paragraphs.
#maincontent h2 {
color: #B9A199;
font-size: 24px;
font-weight: normal;
margin: 24px 24px 0 24px;
}

The following 3 selectors style all links inside maincontent. Though Netscape 4 does not
understand hover or active, IE4 does.
#maincontent a:link {
color: #A78A82;
}
#maincontent a:visited {
color: #B9A199;
}
#maincontent a:hover, #maincontent a:active {
color: #333333;
}

#introSection
The background image does work in version 4 browsers. Font-size is set to 12px.
#introSection {
background-image: url(assets/fab_quote.gif);
background-repeat: no-repeat;
color: #95847B;
font-size: 12px;
padding: 0 0 0 40px;
}

Fabrizio by PVII Page 32 of 43

.picture
The sample picture is set to float right.
.picture {
float: right;
}

#sidebar
The sidebar is positioned absolutely. Its left property is set to 560px, which sets it comfortably to
the right edge of the maincontent DIV.
#sidebar {
color: #E4E0DE;
font-size: 12px;
width: 200px;
position: absolute;
top: 120px;
left: 560px;
}

Since the sidebar is not assigned a background color (or image) there is no need for left or right
padding on its contents. The <h3> element is colored white, given a 16px font-size, and a 24px
top margin.
#sidebar h3 {
color: #FFFFFF;
font-size: 16px;
margin: 24px 0 0 0;
}

The following 3 selectors style all links for each of the navbar lists.
.navbar a:link, .navbar a:visited {
color: #E4E0DE;
}
.navbar a:hover, .navbar a:active {
color: #333333;
}

#footer
We set the footer styles and the footer link styles.
#footer {
color: #E3DFDD;
font-size: 10px;
padding: 12px 0 0 0;
}
#footer a:link, #footer a:visited {
color: #675954;
}
#footer a:hover, #footer a:active, #footer a:focus {
color: #FFFFFF;
}
#introControls, #tagline {display: none;}

Fabrizio by PVII Page 33 of 43

Netscape Resize Fix
If you plan to support Netscape 4, you probably should run Dreamweaver's Netscape 4 Resize
Fix.

• Choose Commands - Add/Remove Netscape Resize Fix...

• Click the Add button

PVII Extension Help

This section is a reference for the PVII Extensions used in this FastPack™.

Swap Class by PVII

The swapClass by PVII behavior allows you to quickly and efficiently manage CSS class name
changes to many elements on your page. This allows you to create user interactivity using CSS-
based style definitions. SwapClass will work in modern browsers that support CSS Class Name
changes, like IE5+ and Netscape 6+. Older browsers, like Netscape4, will be unaffected by the
swapClass events and will simply render the page based on the initial style sheet.

Note: While Opera 5,6 supports most CSS2 style properties, it is still lacking in support for many dynamic
interactions and does not support class name changes.

Overview
SwapClass by PVII works by automatically changing (swapping) the class name assigned to
elements on your page to another class name that you select. SwapClass scans your page for
all elements that are assigned to the "Swap From" class and changes the class assignment to
the "Swap To" class. You also control the scope of the swapping by selecting one or more
specific html element(s) that will be scanned. This allows you to actually use the class name on
other elements on your page without being affected by the swap.
SwapClass also allows you to select a specific element (by selecting its id) to receive a direct
class name change while still swapping all other instances. This is ideal for managing CSS-
based menus or other presentations.
A nifty "Toggle" feature is built in to allow you to automatically switch the class being swapped
each time the event is triggered. This allows the user to repeatedly fire the event, each time the
swapping is reversed.
SwapClass can be triggered by any element on the page that supports an event trigger. In
modern browsers most of the elements on the page can be used as a trigger. In addition to the
normal event triggers, null link, image, image map, you can also use most html tags, for example
<p>, <div>, <h1>, <h2>, etc.. The behavior on these tags can be set to fire onMouseOver,
onClick, onMouseOut just like the usual triggers.

Fabrizio by PVII Page 34 of 43

To access the full range of element triggers and events set the Behavior panel to display the events for IE5.0
Click the plus sign(+) on the Behavior Panel, then Choose Show Events For IE 5.0

Creating a swapClass by PVII event

1. Select (click) an element that will act as the trigger for the behavior.
2. Click the plus button (+) on the Behaviors Panel.
3. Choose Studio VII - CSS - swapClass by PVII to open the interface.
4. Select a Swap From class.
5. Select a Swap To class
6. Select one or more tags in the Tags to Use listing.
7. Optionally set the Element to Use and Toggle boxes
8. Click OK to apply the behavior.

Modifying an existing swapClass by PVII behavior

1. Select the element that contains an existing swapClass by PVII behavior.

2. Double-click the swapClass behavior in the Behavior Panel to open the user
interface.
3. Select and set the options to redefine the swapClass actions.
4. Click OK to apply the revised behavior.

Fabrizio by PVII Page 35 of 43

The Interface:
The swapClass by PVII interface allows you to easily set or modify the class name selections
and all options at any time.

Swap From
This listing shows all of the CSS class names that are on your page or defined in any style
sheets that are linked to your page. Select the class name that you wish to change. All of the
elements on your page that are set to this class will be automatically changed to use the class
you select in the "Swap To" box.

Swap To
This listing shows all of the CSS class names that are on your page or defined in any style
sheets that are linked to your page. Select the class name that you wish to change to. All of the
elements on your page that are set to the "Swap From" class will be automatically changed to
use this class.

Tag To Use
SwapClass allows you to limit the class changes (swaps) to only the elements that are contained
in the html tags you specify. The class swapping will only occur for tags that you select. This
allows you to swap class names in one set of tags, <div class="foo"> for example, without
affecting other elements on the page that are also set to that class, <p class="foo"> for example.
All of the html tags currently on your page are listed here, if you add more elements they will

Fabrizio by PVII Page 36 of 43

appear in this listing the next time you open the swapClass behavior. You must select at least
one tag, although you can select as many as you like.

Select Tag
Click this button to add a tag to the selection list. The word "(Selected)" will appear to the right of
the tag name.

Deselect Tag
Click this button to remove a "Selected" tag. The word "(Selected)" will no longer appear to the
right of the tag name.

Set This Element

In addition to swapping the classes, you can also select a specific html element to receive a
direct class name change. All of the elements on your page that contain an id will be listed here.
This feature allows you to set a specific element to the "Swap From" class, while still
automatically swapping all other elements to the "Swap To" class.

None
Select "none" if you do not wish to use this feature.

Select an id
Select one of the id's in this listing. All of the normal class swapping will occur based on the class
selections made in the "Swap From" and "Swap To" boxes. Additionally, the element that is set
to the selected id will receive a direct class name change to the class that is selected in the
"Swap From" box.

Toggle Option
The Toggle Option will switch the "Swap From" and "Swap To" classes each time the event is
triggered. If an id is selected in the "Set This Element" box, then only the element with that id will
use the toggle feature, the other elements will receive a standard swap.

Fabrizio by PVII Page 37 of 43

Write V4 StyleSheet by PVII
Write V4 StyleSheet by PVII dynamically loads a separate style sheet for version 4 browsers
(Netscape 4.x, IE 4.x) that is completely hidden from all modern browsers (version 5 and up).
This allows you to develop a specific style sheet for version 4 browsers independently from the
more advanced styles used for modern browsers. There is no need to worry about cascade
issues or other "shielding" hacks. Since the version 4 style sheet is completely hidden from
modern browsers you can easily develop a rich, full user style sheet using CSS that these older
browsers support.

Overview
The Write V4 Styles by PVII command adds a script to your page that will link the style sheet you
specify if the browser is a version 4 browser. This style sheet is applied to the page before the
page loads so the styles are completely applied to all page elements before they become
viewable. The system even allows you to target only Netscape 4.x browsers for this behavior or,
the default, all version 4 browsers.

Note: Netscape 4.x browsers will disable CSS whenever JavaScript is disabled so there is no concern about
using JavaScript to load the style sheet. If the user has JavaScript disabled in Netscape 4.x the browser will also
disable all CSS, it cannot be set independently.

Fabrizio by PVII Page 38 of 43

Deployment Strategy
The Write V4 StyleSheet command is best deployed when the main version 5+ style sheet is
kept hidden from older version 4 browsers. This technique provides total separation of the two
style sheets; version 4.x browsers will not see the version 5+ style sheets and version 5+
browsers will not see the version 4 style sheet.
You can easily hide the version 5+ style sheet from older browsers by using the @import
technique to attach the version 5+ style sheet:
<style type="text/css">
<!--
@import "mystyles.css";
-->
</style>

The @import directive is not understood by Netscape 4.x browsers and will be completely
ignored, thus hiding the style sheet form Netscape 4.x browsers.
The syntax of the @import statement can also be used to hide the style sheet from IE 4.x
browsers:
@import "mystyles.css";

Note: The default @import syntax used by Dreamweaver (@import url(../test.css);) will hide CSS from all version
4 browsers except for later versions of IE4 that shipped with Windows 98. If you use Dreamweaver to Import
your style sheet, you will need to edit the @import directive to this syntax. If you subsequently move an HTML or
CSS file using Dreamweaver's site or files panels, Dreamweaver will overwrite your syntax.

Now that the main version 5+ style sheet is linked to the page using the @import directive you
can apply the Write V4 StyleSheet by PVII command to dynamically load the version 4 style
sheet. The result is that only one style sheet will be seen by any browser, either the version 4 or
the version 5+ depending on the browser, providing complete independence and separation of
the style sheets.

Adding the Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the

interface.
2. Enter the path to your version 4 style sheet, or click the Browse button to navigate
to your version 4 style sheet.
3. Optionally, click the Apply for Netscape 4.x browsers only box.
4. Click the Apply button to add the Write V4 StyleSheet by PVII scripts to your page.
It runs automatically when your page loads in a browser.

Fabrizio by PVII Page 39 of 43

Modifying an existing Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the

interface. The existing style sheet path and option will be shown in the interface.
2. Enter or Edit the path to your version 4 style sheet, or click the Browse button to
navigate to your version 4 style sheet.
3. Optionally, click the Apply for Netscape 4.x browsers only box.
4. Click the Apply button to apply the modified style sheet path and option to your
page. It runs automatically when your page loads in a browser.

Note: Modify is not supported when the scripts are located in an externally linked JavaScript file, you must
manually edit the scripts or add the scripts back to the page.

Removing the Write V4 StyleSheet by PVII command

1. Choose Commands - Studio VII - Write V4 StyleSheet by PVII to open the

interface. The existing style sheet path and option will be shown in the interface.
2. Click the Remove button to completely remove the Write V4 StyleSheet by PVII
scripts from your page.

Note: Remove is not supported when the scripts are located in an externally linked JavaScript file, you must
manually remove the scripts from the external file.

Fabrizio by PVII Page 40 of 43

The Interface:
The Write V4 StyleSheet by PVII interface allows you to enter, or Browse to, the path of your
version 4 style sheet.

Path to version 4 Style Sheet

Enter the path to the style sheet that you wish version 4 browsers to load. The box cannot be
empty and the path must contain a .css file extension.

Note: For maximum browser compatibility we suggest that you use a absolute url for this path in order to allow
Netscape 4 browsers to locate the style sheet if the style sheet is not in the same folder as the current page.

Browse
Click the Browse button to navigate to the style sheet. A Select File dialog will open. Navigate
to the style sheet file you wish to use and click the OK button. The file path will then be displayed
in the Path to version 4 Style Sheet box. You can manually edit this path as you desire.

Apply for Netscape 4.x browsers only

Check this box if you wish to have the style sheet read by Netscape 4.x browsers only, all other
version 4 browsers (like Internet Explorer 4.x) will not load the style sheet. When this box is not
checked (the default) then all version 4 browsers will load the style sheet.

Apply
When you are finished entering or editing the path, and set the option, click the Apply button to
apply the Write V4 StyleSheet by PVII scripts to your page. You can preview the page in your
browser to check functionality.

Note: When using an absolute url for the path be sure that the style sheet has been uploaded to your server and
that your internet connection is available.

Fabrizio by PVII Page 41 of 43

Remove
Click the Remove button to completely remove the Write V4 StyleSheet by PVII scripts from your
page.

Note: If the scripts are located in an external JavaScript file the Remove function will be unavailable, you must
manually remove the scripts from the external file.

Cancel
Click the Cancel button to completely abort the current Write V4 StyleSheet by PVII operation.
This will close the interface and no changes will be made to your page.

Help
Click the Help button to open the associated Help File in your browser. This page can remain
open for easy reference while you continue working with the Write V4 StyleSheet by PVII by
PVII interface.

Fabrizio by PVII Page 42 of 43

Support Options

The PVII WEBDEV Newsgroup

Open 24 hours a day and seven days a week—all year long. Our newsgroup is a vital community
frequented by our customers, associates, and the PVII Team. It’s one of the most popular
Dreamweaver-related forums on the Internet and a great place to learn what you need to know -
and then some. Outlook Express users can click below to log on:
news://forums.projectseven.com/pviiwebdev
If you are using news reading software that does not respond to the above link, access its help
system to find out how to set up a new news account. The server you will need to use is
forums.projectseven.com.
After setting up the server, you should get a list of available newsgroups. Choose: pviiwebdev.
Additional help on logging on to newsgroups can be found here:
http://www.projectseven.com/support

THE PVII INFOBASE

This is our online database of technical notes, tips, tricks, and other goodies:
http://www.projectseven.com/support/support.asp

Fabrizio by PVII Page 43 of 43