Maxwell UserGuide

J.D.
Maxwell by PVII
J.D. Maxwell by PVII

Thank you for purchasing J.D. Maxwell - a PVII CSS FastPack™.
J.D. Maxwell is a two-column layout that incorporates a beveled frame border for a very unique
look. 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
© 2004 Project Seven Development Page 1 of 66

J.D. MAXWELL BY PVII 1
BEFORE YOU BEGIN 3

FAST TRACK, QUICK-START, I-DON'T-WANT-TO-READ-THE-MANUAL GUIDE 3
WHAT YOU NEED 3
WHAT'S INCLUDED 4
EXTENSIONS 4
STARTER PAGE 4
EDITABLE FIREWORKS IMAGES 4
CSS FILES 5
OVERVIEW: HOW WE FRAMED AND BEVELED J.D. MAXWELL 5
THE TOPBAR DIV 5
THE WRAPPER DIV 7
THE BOTTOMBEVEL DIV 7
PUT THEM ALL TOGETHER 8
CSS STRATEGY 8
EDITING AND CUSTOMIZING 8
THE PAGE HEADING AND HOME ICON 9
THE SKIP TO NAVIGATION LINK 9
THE TOPBAR DIV 9
THE MAINCONTENT DIV 9
THE SIDEBAR DIV 10
BOTTOMBEVEL DIV 11
FOOTER DIV 11
CSS GUIDE 12
IMPORTING CSS TO HIDE FROM OLDER BROWSERS 12
THE MAIN CSS FILE ANALYSIS 13
IE PC CONDITIONAL COMMENTS 23
STYLE SHEET FOR PRINTING 26
VERSION 4 BROWSER CSS 28
THE VERSION 4 CSS ANALYSIS 31
IMAGE EDITING TIPS AND PROCEDURES 34
FONTS USED 34
MX 2004 NOISE EFFECT 35
GENERAL EDITING TIPS 36
LAYERS AND OBJECTS 37
JPGS, GIFS, AND TRANSPARENCY 38
HOW WE CREATED THE BEVELED FRAME 41
HOW DID WE GET THE GRAPHICS IN TOPBAR TO "BLEED" INTO THE BEVELED FRAME? 44
THE PAGE BACKGROUND IMAGE 58
EXPORTING IMAGES 59
PVII EXTENSION HELP 61
WRITE V4 STYLESHEET BY PVII 61
SUPPORT OPTIONS 66

Before you begin

1. Before you begin to work with your FastPack™ move the unzipped folders into a defined
Dreamweaver web site.
2. We recommend that you backup the original zip file for safekeeping.
3. We also recommend that you print out this User Guide and keep it handy on your desktop
as you work.
Fast Track, Quick-Start, I-don't-want-to-read-the-Manual Guide

In the event that you would like to jump right into the process of editing and customizing this CSS
FastPack, without reading this User Guide, we've included some quick tips in the starter page
(maxwell.htm).
What you need

To work with Maxwell you'll need Dreamweaver version MX or higher (MX 2004 is recommended).
IMPORTANT: Dreamweaver MX 2004 (version 7.x and higher) will render your Maxwell page in Design View very nearly
the same way that a modern browser will. Dreamweaver MX (version 6.x) does not support some basic CSS properties
and its display will not be completely accurate. This is not the fault of our code - it is simply the lack of CSS support
programmed into Dreamweaver MX. To see the page accurately, you merely need to preview it in your browser.
To edit Maxwell's images, you'll need Macromedia Fireworks - version MX or higher.

What's included
Everything you need is included:
• Extensions
• Editable Fireworks images
• Starter page
• CSS files
• This User Guide (in both HTML and PDF formats)
Extensions
The following extension can be found in the J.D. Maxwell local files folder:
1. P7_v4StyleSheet_11.mxp
Install it 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 the extension be sure to close and restart Dreamweaver.
Starter Page
To make your job a bit easier, we've included a starter page for you: maxwell.htm is located in the
root of your Maxwell web site.
Editable Fireworks Images

We've included two editable Fireworks documents: maxwell.png and maxwellBG.png - located in
the root of the local files folder. Use these files to edit the web images on your J.D. Maxwell page.

Fireworks Fonts used

The Maxwell PNG uses Century Gothic for the logo text. Century Gothic is widely distributed with
Operating Systems, graphics suites, and with some versions of Microsoft Office. In the event you
do not have Century Gothic installed, Fireworks will present you with a Font Substitution dialog
upon opening the Maxwell PNG. Please see the Image Editing section later in this User Guide for
additional information.
Fireworks Live Effects

The Maxwell's Fireworks file uses the Noise effect built into Fireworks MX 2004 to provide texture
in the dark gray band under the logo. Earlier versions of Fireworks do not support this filter. Upon
opening the Fireworks file in a version prior to MX 2004, you will be presented with a dialog
informing you that the Noise effect is not supported. Please see the Image Editing section later in
this User Guide for additional information.
CSS Files
There are five included CSS files:
1. maxwell.css - Used by version 5 and higher browsers

2. max_v4.css - Used by version 4 browsers
3. maxwell_print.css - used for printing only
4. max_ie5fixes.css - contains IE5.x (Windows only) fixes
5. max_ie6fixes.css - contains IE6.x (Windows only) fixes
Overview: How we Framed and Beveled J.D. Maxwell

J.D. Maxwell uses CSS to center a two-column layout in your browser window. The beveled frame
is accomplished using CSS background images, along with two strategically placed embedded
images.
The topBar Div

The topBar DIV is assigned a background image that creates the top beveled frame. The
background image is 740 pixels wide, 132 pixels high, and also renders a dark gray band with a
faded graphic at either end, within the beveled frame:

We embed (insert) the Maxwell logo inside the topBar DIV. The logo image is optimized as a
transparent GIF to make it blend seamlessly into the topBar background. Here is how the logo
image looks against the white background of this User Guide page:
The text appears jagged because the logo is anti-aliased (smoothed) and optimized to blend into
the topBar background. See how it smooths out when viewed against the topBar background:
The CSS rule for topBar also sets text alignment right in order to align the Maxwell logo image to
the right edge of the DIV.
Note: The topBar background image, the logo, and the topBar DIV itself are all the same height (132 pixels). If you
change the height of the background image or the logo, you must make a corresponding change to the height property in
the topBar CSS rule. See the topBar rule in this User Guide's CSS analysis for additional information.

The wrapper DIV

The wrapper DIV is assigned a background image that serves two purposes:
1. It carries the center portion of the beveled frame. This part 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, as shown below:
Note: Because the maincontent and sidebar DIVs are nested inside the wrapper, the wrapper’s background image spans
them both. This is how one background image can provide a background for two distinct areas. If you change the width of
this image, or the position of the vertical dashed rule, you must also adjust the widths of the #maincontent and #sidebar
rules correspondingly.
The bottomBevel DIV

The bottom bevel is supplied by a background image assigned to the bottomBevel DIV that spans
the layout's bottom edge (between the main content area and the footer). The background image
looks like this:
We also insert an image in the DIV that serves as a link that users can click to scroll up to the top
of the page:
The Top of Page image is 34 pixels high - just like the bottomBevel background. The text is not
jagged because it's an aliased font optimized for the web. Here is how the image looks against the
bottomBevel DIV background:
Text alignment is set to right so that the embedded "Top of Page" image is aligned to the right
edge of the DIV.
In this manner, we've added practical functionality to a DIV that ordinarily would serve no other
purpose but to carry an interface graphic.

Put them all together

When all the background images are assembled with CSS, they fit together seamlessly to create
the J.D. Maxwell interface:
CSS Strategy
J.D. Maxwell 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 use current CSS techniques for a richly styled
page, while older browsers get a nicely styled page that uses CSS techniques that they safely
support. 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 Maxwell page
in a modern browser, you will see a page that is logically set up for printing.
Editing and Customizing

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

The Page Heading and Home Icon
The masthead DIV contains J.D. Maxwell's level one heading (H1), as well as a home icon set as
its CSS background image. The heading text is left-padded to provide a space for the background
image. Edit this text as you normally would any text in Dreamweaver Design or Code views.
The Skip to Navigation Link

The skip to navigation link provides a means for people using assistive technology, or who browse
using the keyboard, to quickly skip over the main content to access the navigation links. If you
select the link text and look at your Property Inspector, you'll see the link points to: #skiptonav.
This link targets a named anchor, which has been placed inside the first link in the navigation bar.
The link's code looks like this:
<a name="skiptonav" href="#">Services</a>
The skip to navigation link resides in the skipnav DIV, which is absolutely positioned at the top right
edge of the page.
Please do not attempt to drag or resize this DIV in Dreamweaver Design View as Dreamweaver
will rewrite your style sheet without warning and without a means to undo the change. If you need
to adjust its position, do so in your CSS file.
The topBar DIV

The topBar DIV contains the J.D. Maxwell logo image, right-aligned. Select the image and use
Dreamweaver's Property Inspector to change the link and the ALT text.
The maincontent DIV

Edit the main content as you ordinarily edit text in Dreamweaver. Because of the default width of
this DIV, any image you insert should be limited to 446 pixels wide.

The sidebar DIV

The sidebar DIV contains the main navigation, which is in an unordered list. Additional content may
be placed below the navigation. Because of the default width of this DIV, any image you insert
should be limited to 148 pixels wide.
Sidebar: Editing and Adding Navbar Links

To edit an existing link in your navbar:
• Select the linked text
• Enter the page or file you wish to open into the Link field on your Property inspector (or use
the browse icon to find the file)
To add additional links to the main navigation:
• Place your cursor at the end of any of the existing links

• Press Enter to create a new line
• Choose Insert - Hyperlink

The Hyperlink dialog will open-
• Enter your link text in the Text field

• Enter (or browse to) your hyperlink in the Link field
• Click OK
Your new link will appear, fully styled, on the new line you created.
bottomBevel DIV
The bottomBevel DIV contains a right-aligned image that links to a named anchor at the top of the
page. When you click the link, the page scrolls back to the top. This DIV is also assigned a CSS
background image that serves as the bottom portion of the beveled layout.
footer DIV
The footer DIV contains a copyright notice. Edit it to reflect your site's name.

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


</style>
A media type set to screen describes a style sheet designed for browser screens only. This
technique also allows us to more easily deploy a special style sheet just 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. Open Netscape 4 directly (not through Dreamweaver Preview)

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.

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 CSS file. 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 dark portion of the
background image. Sets the background image attachment to fixed so that as the page is scrolled,
the background image remains fixed in place. Sets the global font family, base font size, and font
color.
A font-size of 101% may seem odd, but it serves to address an IE5.x PC bug when text is set to
"smallest" from the browser's View menu.
Margin is set to 30px bottom; and 0 top, 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 740px, which is equal to the width of the wrapper DIV.
body {
background-image: url(images/max_pbg.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #555555;
font-family: Arial, Helvetica, sans-serif;
font-size: 101%;
color: #333333;
margin: 0 0 30px 0;
padding: 0;
min-width: 740px;
}
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. Throughout this style
sheet we avoid using the three-value method since it's sometimes a confusing syntax - even for seasoned CSS authors.

#masthead
The masthead contains the level 1 (H1) page heading. We set its left margin to 6 pixels so that the
heading is not flush against the left edge of the page.
#masthead {margin-left: 6px;}
h1
We set a relatively small font size because our level one heading sits at the top of the page. We
also turn off the heading's default bold characteristic by setting font-weight to normal. The
background image is of a home icon. It's set to not repeat and is positioned horizontally to the left
and vertically centered - so that its alignment is consistent even when users resize text. Top and
bottom padding is set to 6 pixels so that there is enough room for the entire icon and left padding is
set to 30 pixels to leave enough room to the left of the text for the icon. Bottom margin is set to 24
pixels, which creates an offset between the bottom of the heading and the top of the content below
it.
h1 {
font-size: .75em;
font-weight: normal;
background-image: url(images/max_home.gif);
background-repeat: no-repeat;
background-position: left center;
padding: 6px 0 6px 30px;
margin: 0 0 24px 0;
}

#skipnav
The skipnav DIV is positioned absolutely and set to be zero pixels from the top of the window and
15 pixels in from the right edge. Font size and top/bottom padding are set to the same values as
the H1 so that the Skip to Navigation link and the H1 are vertically aligned. Right padding is set to
15 pixels to work around a bug in IE5-Mac. Without this padding, use of the right property on an
absolutely positioned element would cause a persistent horizontal scrollbar on the browser
window.
Text color is set to #E2DFCD, which is the same color as the link style for this element. This allows
the brackets that surround the link to be the same color as the link. The brackets are used to
prevent an adjacent link error that would violate Section 508 accessibility guidelines.
#skipnav {
position: absolute;
top: 0;
left: auto;
right: 15px;
padding: 6px 15px 6px 0;
font-size: .75em;
color: #E2DFCD;
}
#masthead and #skipnav link styles

The masthead and skipnav 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 or #skipnav elements. When two or more selectors share the same properties and
values, they can be combined into a multiple selector separated by commas. In this rule we are
declaring the text color and turning off underlines for both unvisited and visited links.
#masthead a, #masthead a:visited, #skipnav a, #skipnav a:visited {

color: #E2DFCD;
text-decoration: none;
}
Then we are setting the hover, active, and focus states to a different color in this rule:
#masthead a:hover, #masthead a:active, #masthead a:focus,

#skipnav a:hover, #skipnav a:active, #skipnav a:focus {
color: #FFFFFF;
}
Note: a:focus is used by modern browsers to style a link that is reached and highlighted when using your browser's tab
key.

#wrapper
This DIV establishes the main layout and is the container for the topBar, maincontent, sidebar, and
bottomBevel DIVs - which are nested inside it. The background image and color assigned to this
DIV act 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 while the page and the background images are in the process of loading.
Margin is set to zero top and bottom, and auto left and right. By giving an element a fixed width (in
this case 740 pixels) and setting its left and right margins to auto, the wrapper (along with all of the
elements nested inside it) is centered in the browser window.
#wrapper {
width: 740px;
margin: 0 auto;
background-image: url(images/max_sides.jpg);
background-repeat: repeat-y;
background-color: #FFFFFF;
}
#topBar
topBar is the dark gray box that spans the top of the layout. Its width is therefore set to the same
value as the wrapper. The background image is 740 pixels wide and 132 pixels high - and does not
repeat. Background color is set to a dark gray color that is similar in shade to the background
image. As the page is loading, the topBar will display a background color similar to that of the
background image - until the actual background image has a chance to load.
Text alignment is set to right so that the logo, which is an embedded image, will hug the right edge
of the DIV.
#topBar {
width: 740px;
height: 132px;
background-image: url(images/max_topbar.jpg);
background-color: #656565;
text-align: right;
}
IMPORTANT: The height of the topBar DIV must be reset to correspond to any changes you make to the height of the
background or embeddded images.

#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.4em to provide a comfortable and more readable spacing between lines. Text is set
to fully justify. Padding is set to 16 pixels top, 30 pixels right, 0 bottom, and 52px left.
Width is set to 446px. Note the comment to the right of the width declaration. The comment is there
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: 446 (declared) + 52 (left padding) + 30 (right padding) = 528.
#maincontent {
float: left;
font-size: .8em;
line-height: 1.4em;
text-align: justify;
padding: 16px 30px 0 52px;
width: 446px; /*446+30+52=528 rendered*/
}
So why the odd padding values? The left and right edges of the beveled background that creates
the Maxwell interface are exactly 22 pixels wide. Look at the screen capture below. The red outline
marks the boundaries of the maincontent DIV. If we want 30 pixels of padding on both the right and
left sides of maincontent, then we need to allow for the 22 pixels that comprise the left edge of the
beveled frame. In other words, we need to add the width of the left bevel to the amount of padding
we actually want.
By adding 22 pixels to the left padding value, we achieve 30 pixels of white space between the
bevel and the left edge of the text.
Note: In the above screen capture, the red outline on the right side of the maincontent DIV is obscuring the dashed
vertical line that separates maincontent from the sidebar.

Global Link Styles

These selectors style all links on the page not governed by a more specific descendant selector. In
this case, that would be all links inside the maincontent DIV.
a:link {color: #495472;}

a:visited {color: #8D847A;}
a:hover, a:active, a:focus {color: #A33D23;}
#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 leftmost 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 148px and we add right and left padding (148 + 42 + 20 = 210) to arrive at the
rendered width of 210px. 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) + 210 (sidebar rendered) = 738. The wrapper is 740 pixels wide, which
leaves us a buffer of 2 pixels. This buffer is necessary because without it the sidebar would not
render correctly in IE5-Macintosh browsers. It seems that this browser is factoring in the left and
right borders of our navigation bar links.
#sidebar {
width: 148px; /*148+42+20=210 rendered*/
float: left;
padding: 16px 42px 0 20px;
font-size: .7em;
}
Just as with maincontent, sidebar's left and right padding are not equal. The screen capture below
illustrates why.

#maincontent p, #sidebar p
This descendant selector applies only to paragraphs that are within the maincontent and sidebar
DIVs. This rule sets bottom margin to 16px and all other margins to 0 (zero).
#maincontent p, #sidebar p {margin: 0 0 16px 0;}
#bottomBevel
bottomBevel establishes the bottom edge of the beveled frame. Its width is therefore set to the
same value as the wrapper. Height is set to the height of the background image, which is also the
height of the embedded "Top of Page" image.
IMPORTANT: The height of the bottomBevel DIV must be reset to correspond to any changes you make to the height of
the background or embeddded images.
The background image is 740 pixels wide and 34 pixels high - and does not repeat.
Text alignment is set to right so that the Go To Top link, which is an embedded image, will hug the
right edge of the DIV.
Font-size is set to 10px so that in the rare event a visitor has images disabled, the ALT text will not
be so big as to cause the layout to go out of alignment.
This DIV comes after the two floated DIVs (maincontent and sidebar) and is the last element before
the end of the wrapper DIV. By setting it to clear: both, we ensure that the wrapper DIV is rendered
correctly.
#bottomBevel {
width: 740px;
height: 34px;
background-image: url(images/max_bottom.jpg);
text-align: right;
font-size: 10px;
clear: both;
}
Insight - Clearing Floats: When floated elements are nested inside a wrapper that has a declared background, the
wrapper's bottom edge is not automatically forced down as the floated elements become taller. When a cleared element is
the last element in the wrapper, it forces the wrapper to enclose the cleared element. Since the floated elements come
before the cleared one, they go along for the ride and are also enclosed by the wrapper. DO NOT DELETE or MODIFY
THIS RULE unless you are a advanced CSS author.

#bottomBevel a
The image embedded inside the bottomBevel DIV is a link. In the event that images are disabled
by a visitor, ALT text will be displayed in our global hyperlink style. The global link style for Maxwell
would not render well in this scenario, so we give it a charcoal gray color.
#bottomBevel a {color: #333333;}
Secondary heading styles

h2, h3 is a combined selector, which affects all H2 and H3 elements on the page. We set a
substantial top margin and a smaller bottom margin and also set font-size.
h2, h3 {
margin: 24px 0 8px 0;
font-size: 1.4em;
}
h2#first, h2#nav is a combined descendant selector, which affects H2 elements that are assigned
an ID of either first or nav. In the Maxwell page, these IDs are assigned to the first H2 elements in
both the maincontent and sidebar DIVs. We want those particular headings to not have a top
margin, while we do want all other H2 elements to have a substantial top margin.
h2#first, h2#nav {margin: 0 0 8px 0;}
We set a font-size for all H3 elements that is slightly smaller than that of our H2 elements.
h3 {font-size: 1.2em;}
#navlist
The ID navlist is assigned to the unordered list (UL) that contains the main navigation bar. We turn
off all normal list indentation by setting both margin and padding to 0 (zero). We also set the top
border of the menu list to 1 pixel white.
Insight: Why do we zero both padding and margin to turn off indentation? Some browsers use margin while others use
padding to indent unordered list items. Setting both properties to zero ensures that all browsers behave consistently. Why
are we setting a top border? Maxwell's navigation links are boxes rendered with 1 pixel borders. If both the top and the
bottom of our links had borders, the intersection would have a 2 pixel border. By setting the top border of the entire list we
can eliminate the top borders on the individual links and achieve a perfectly rendered 1 pixel border around each link.
#navlist {
margin: 0;
padding: 0;
border-top: 1px solid #FFFFFF;
}

#navlist li
This descendant selector turns off the bullet character in the navbar lists and sets margins to 0
(zero).
#navlist li {
list-style-type: none;
margin: 0;
}
#navlist link styles

This combined selector sets both default and visited links for our navigation bar. Text-decoration:
none turns off underlining. Color is set to charcoal gray. Background color is set to a peachy
orange (to match the graphic in topBar).
Padding is set to 2 pixels top and bottom and 6 pixels left and right to create a bit of space between
the text and the outer edges of the background color.
Border is set to 1 pixel white and the top border is set to 0 (zero) because the top border on the
entire list eliminates the need for each link to have its own top border (see the #navlist rule Insight).
We set display to block, which makes the entire box that is created with the padding and borders
part of the link. That is, the entire box is clickable - not just the text inside it.
#navlist a:link, #navlist a:visited {

color: #333333;
background-color: #DCD6BE;
padding: 2px 6px;
border: 1px solid #FFFFFF;
border-top: 0;
display: block;
}
The following combined selector changes the background color and the text color for the hover,
active, and focus states.
#navlist a:hover, #navlist a:active, #navlist a:focus {

background-color: #E69A68;
color: #FFFFFF;
}

#footer
The footer spans the entire layout, so we set its width equal to the wrapper's width.
Since the footer is outside the wrapper, we need to center it so that it aligns with the rest of the
layout. To do so, we set left and right margins to auto. Top and bottom margins are set to 0 (zero).
We set the top padding to 6 pixels to provide a bit of vertical separation from the main content. We
set right, bottom, and left padding to 0 (zero).
Font-size is set to a relatively small .7em and text color is set to an off-white shade.
#footer {
width: 740px;
margin: 0 auto;
padding: 6px 0 0 0;
font-size: 0.7em;
color: #A5A396;
}
#footer p
We set margins for paragraphs inside the footer DIV.
#footer p {margin: 0 0 8px 0;}
#footer link styles

We set text color for links inside the footer DIV.
#footer a:link {color: #D3C7AD;}
#footer a:visited {color: #CABB9B;}
#footer a:hover, a:active, a:focus {color: #A0A6B8;}

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 (this feature is not available on
Macintosh versions). 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 J.D. Maxwell layout we need to fix IE5.x bugs and IE 6 issues, as well. There are two style
sheets that are used:
max_ie5fixes.css: Fixes relating only to IE5.x
max_ie6fixes.css: Fixes relating only to IE6
max_ie5fixes.css 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 wrapper) to text-align left, it will still display in the
center of the window, but anything inside it will align left. If we set masthead, wrapper, and footer to
text-align left, then our page will display correctly in IE5.x.
#masthead, #wrapper, #footer {text-align: left;}
#maincontent #sidebar
IE5.x gets the box model backwards - that is, it adds padding to the inside of the box, rather than to
the outside. In IE5.x (Windows) a box's rendered width is always the same as its declared width.
#maincontent {width: 528px;}
#sidebar {width: 212px;}

#navlist a
IE5.x has problems with list items that are links when they are also displayed as blocks. To fix that,
we float them left and clear them in both directions. This closes up extra vertical gaps between
links. Then we set a height of 1em on the <a> elements, which enables the link to be active for the
entire box rather than just the text.
#navlist a {float: left; clear: both; width: 100%; height: 1em;}
i, em
IE5.x has problems when you set text to an italic font style by using the <em> or <i> tags. This rule
allows you to display italicized text without your layout breaking.
/* The following rule stops IE5 from breaking
your floats (and your heart) when
italicized text is used.*/
i, em {
width: 100%;
overflow: hidden;
text-align: left;
}

max_ie6fixes.css rules
#navlist a
IE6 needs only the height declaration to enable the link to be active for the entire box.
#navlist a {height: 1em;}
i, em
IE6 has problems when you set text to an italic font style by using the <em> or <i> tags. This rule
allows you to display italicized text without your layout breaking.
/* The following rule stops IE6 from breaking
your floats when italicized text is used.*/
i, em {
overflow: visible;
zoom: 100%;
}
Deploying the Conditional Comments

We use two Conditional Comments, one for IE5.x and the other for IE6.
To target only IE5.x, we use a conditional statement that specifies only IE5: [if IE 5]. Inside of the
opening and closing comments, we link the appropriate style sheet using ordinary syntax:

To target only IE6, we use a conditional statement that specifies only IE6: [if IE 6]. Inside of the
opening and closing comments, we link the appropriate style sheet:


Style Sheet for Printing

The main J.D. Maxwell 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 J.D. Maxwell page we have included a separate style sheet with a
media type set to print and linked it to your starter page:
<link href="maxwell_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 the background color to white.
body {background-color: #ffffff; margin: 0;}
Stuff to hide from the printer

Use this selector to add additional elements you wish to hide from the printer.
#skipnav, #topBar, #bottomBevel, #nav, #navlist {display: none;}
Additional printing styles
H1
We set a bottom border on the H1.
h1 {border-bottom: 1px solid #000000;}
#masthead a
We turn off link underlining for the H1 element, which is inside the masthead DIV.
#masthead a {text-decoration: none;}

#sidebar
We set sidebar's top margin to 48 pixels and its bottom margin to 24px to provide vertical offset.
We set font-size to 80% of default.
#sidebar {margin: 48px 0 24px 0; font-size: 80%;}
#footer
We set font-size to 70% of default and set a top border.
#footer {font-size: 70%; border-top: 1px solid #000000;}

Version 4 browser CSS

The Version 4 style sheet serves supported styles to Netscape 4.x, IE4.x, and other legacy
browsers 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,'max_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
conflicting from one sheet to another or of using cumbersome and complicated filter hacks. Your
version 4 style sheet contains only rules that are supported by version 4 browsers.
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: 'max_v4.css'.
Absolute Path Example

http://www.mysite.com/max_v4.css
Site Relative Path Example

/max_v4.css

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.

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 page margins.
body {background-color: #ffffff; margin: 24px;}
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, ul {
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}
Headings
We set styles for headings level 1-3.
Note: Font size is set in pixels because older browsers do not handle proportional font sizes very consistently.
h1 {
font-size: 20px;
font-weight: normal;
margin: 0 0 24px 0;
}
h2 {font-size: 16px;}
h3 {font-size: 14px;}

#skipnav
We set font-size.
#skipnav {font-size: 10px;}
#masthead and #skipnav link styles

We set color and turn off underlining.
#masthead a, #masthead a:visited, #skipnav a, #skipnav a:visited {
color: #666666;
}
#maincontent
We set font-size.
#maincontent {font-size: 14px;}
Global link styles

We set link colors . Though Netscape 4 does not understand hover, IE4 does.
a:link {color: #59688E;}
a:visited {color: #776F66;}
a:hover {color: #A33D23;}
#sidebar
We set font-size, margin, padding, and a top border. Netscape 4 will ignore the border, while IE4
will render it .
#sidebar {
font-size: 12px;
margin: 16px 0 0 0;
padding: 6px 0 0 0;
border-top: 1px solid #000000;
}

#navlist
We set a bottom margin and turn off padding.
#navlist {
margin: 0 0 24px 0;
padding: 0;
}
#navlist li
We turn off bullets and set margins to 0 (zero).
#navlist li {
list-style-type: none;
margin: 0;
}
#navlist link styles

We set link colors.
#navlist a:link, #navlist a:visited {
color: #E69A68;
}
#navlist a:hover {color: #000000;}
#footer
We set font-size, top margin, top padding, and assign a top border for IE4.
#footer {
font-size: 10px;
margin: 16px 0 0 0;
padding: 6px 0 0 0;
border-top: 1px solid #000000;
}
Stuff to hide from version 4 browsers

topBar and bottomBevel are turned off for version 4 browsers.
#topBar, #bottomBevel { display: none;}

Image editing tips and procedures

If you are not familiar with the Fireworks program we suggest taking a few hours to go through its
Help System to acclimate yourself to the interface.
Fonts used
The Maxwell logo uses Century Gothic, a rather elegant sans serif typeface that is widely
distributed with Operating Systems, graphics suites, and with some versions of Microsoft Office. In
the event you do not have Century Gothic installed, Fireworks will present you with a Font
Substitution dialog upon opening the Maxwell PNG.
• Highlight Century Gothic on the left side of the dialog

• Scroll your list of installed fonts on the right side and make a selection
• Click OK

MX 2004 Noise Effect

Maxwell's Fireworks file uses the Noise effect built into Fireworks MX 2004 to provide texture in the
dark gray band that underlays the logo. Earlier versions of Fireworks do not support this filter. Upon
opening the Fireworks file in a version prior to MX 2004, you will be presented with a dialog
informing you that the Noise effect is not supported.
Simply click OK to dismiss the dialog. It's not a critical component of the interface.

General Editing Tips

To edit the Maxwell images you must open the appropriate editable Fireworks PNG file that came
with your FastPack:
1. maxwell.png - Contains all of the DIV background images that comprise the layout, as well
as the Logo and Top of Page images.
2. maxwellBG.png - Contains the page background image, as well as the Home icon.
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.
• Click the "eyeball" icon to make slices visible

• Click the icon again to hide slices
Each slice is marked by a green overlay. If you want to edit an object, first note its slice
dimensions. If your edit results in a change of size that makes your object too large to fit under its
slice, you'll need to change the slice size. Unless you are an experienced Fireworks user, we
recommend that you make every effort to work within the scope of the default Maxwell slice
dimensions.
When editing objects, you should hide the web layer because visible slices will obscure your
objects and make editing almost impossible.

Layers and Objects

The Fireworks PNG document contains logically named Layers. Each Layer contains logically
named objects. To edit an object, find it by name in your layers panel. As you select the object
name in your Layers panel, the actual object on the canvas will also be selected.
The screen capture below, shows the Logo text selected in the Layers panel:
To edit the Logo text, simply double-click the text object on your canvas. The object's text will
become editable.
After double-clicking on the text, you will be able to edit it. Note how Fireworks changed the cursor
to indicate you are in text editing mode.

JPGs, GIFs, and Transparency

When an object contains complex colors, photographic elements, or color gradients, the JPG file
format is appropriate and results in a very smooth and pleasing web image. Most of the Maxwell
images are JPGs.
The Logo and Top of Page images are set to the GIF format. Why? Because they are embedded in
the Maxwell page and sit atop intricate background images. By choosing the GIF format, we can
set a transparent color so the images blend perfectly into the background. In the screen capture
below, note that the Maxwell logo has a rectangle below the text:
The rectangle is a solid color that approximates the shade of the topBar background image. By
setting this rectangle's color to transparent, we can get the logo to blend perfectly into the topBar
background image.

Setting a transparent color
• When we created the image, here is how we made it transparent:

• Switch to Preview mode
• Turn on the web layer to view slices
• Select the slice that overlays the logo
• Open the Optimize panel
• Choose GIF WebSnap 128

• Click the Add Color to Transparency button

When you click the button, your cursor will change into an eyedropper tool.
• Point the eyedropper at the dark gray rectangle on which the logo text sits
• Click with the eyedropper tool onto the dark gray rectangle
The dark gray of the rectangle is now set as the transparent color for this GIF and will change to a
checkerboard pattern to denote that it is transparent.
Note: The Top of Page image is optimized with the same transparent color, using the same technique described for the
logo.

How we created the beveled frame

To show you how we made the frame, let's create a new one and go though the process.
Creating the object and setting fill and stroke
• Create a new Fireworks document

• Size your canvas at 800 x 600 pixels
• Set canvas color to #555555
• Save the file as Max_test.png
• Select the Rectangle tool
• Draw a rectangle 738 pixels wide by 298 pixles high

• Select the rectangle and give it a fill color: #8A8673
• Set Texture to Metal and texture amount to 14%

Setting live effects to finish the beveled frame

With the rectangle still selected -
• Click the + symbol next to the Effects label on your Property inspector
• Choose Noise - Add Noise...
Note: You must have Fireworks 2004 or later to add noise. If you have an older version, don't worry - it's not a critical
effect. Your image will just be a little smoother in texture.
The Add Noise dialog will open.
• Set the Amount to 4

• Click OK
Keep that rectangle selected!
• Choose Bevel and Emboss - Inner Bevel...

The Bevel dialog will open
• Set Bevel Edge Shape to Ruffle

• Set Width to 22
• Set Contrast to 75%
• Set Softness to 1
• Set Angle to 135
• Set Button Preset to Raised
• Press Enter to close the dialog
One more effect...
• Choose Shadow and Glow - Drop Shadow
The Drop Shadow dialog will open
• Set Distance to 2
• Set Opacity to 65%
• Set color to #000000
• Set Softness to 1
• Set Angle to 315
• Press Enter to close the dialog

Your beveled frame is complete.
How did we get the graphics in topBar to "bleed" into the beveled frame?
Let's go through the process using two practice images we've provided. We'll go through the
exercise using the beveled frame you just created in Max_test.png.
In Max_test.png...
• Draw a rectangle 697 pixels wide and 114 pixels high

• Set its fill color to #666666
• Open the Effects menu (click the + symbol)
• Choose Noise - Add Noise...
• Set the amount to 3

• Click OK

Position the rectangle just inside the beveled rectangle as illustrated below:
Create the left side faded graphic
• Choose File - Import

• Browse to the local files folder in your Maxwell site
• Select practiceImageLeft
• Click the Open button

• Your cursor will change into a positioning icon, which resembles a carpenter's square.
• Position the cursor as illustrated below (it doesn't need to be precisely positioned)
• Click the cursor to deposit your imported graphic
With the imported graphic selected...
• Choose Commands - Creative - Fade Image

The Fade Image dialog will open
• Choose the third box in the second row

• Click OK
• Move the object up and to the left to create just the degree of "bleed" you desire:
• Click on a blank part of the canvas, then click the faded graphic to select it again

• Choose Modify - Flatten Selection
Select the faded graphic again
• Choose the fourth box in the first row

• Click OK

You've just created a gorgeous faded graphic. Good job!
Create the right side faded graphic
• Choose File - Import

• Browse to the local files folder in your Maxwell site
• Select practiceImageRight
• Click the Open button
• Your cursor will change into a positioning icon, which resembles a carpenter's square.
• Position the cursor about 250 pixels in from the right edge of the bevel and between the
first and second ruffles, as illustrated below
• Click the cursor to deposit your imported graphic

• Position it as illustrated below:

The Fade Image dialog will open
• Choose the third box in the second row

• Click OK
• Move the object up and to the right to create just the degree of "bleed" you desire:

Select the faded graphic again
• Choose the fourth box in the first row

• Click OK

Add a 1 pixel stroke to the Bevel

The finished Maxwell bevel has a 1 pixel stroke around its edge. Logically, we would have had you
create this stroke when you created the beveled rectangle earlier. Fireworks, unfortunately, is
programmed to automatically recall the effects applied to the last object you have selected and will
assign them to subsequent objects you create. There is no way to turn this feature off. Had you
applied the stroke prior to fading the two corner graphics, the faded graphics would have been
assigned a 1 pixel stroke, as well. This would certainly spoil the look. To prevent this corruption, we
must assign the stroke after the graphics have been faded.
• Select the beveled rectangle

• Open the Stroke Category menu on your Property inspector
• Select Pencil - 1-Pixel Hard

• Set the Stroke Color to #C3C0B5

Add a 1 pixel stroke to the inner dark gray rectangle

The inner dark gray rectangle also needs a stroke to finish it off.
• Select the inner, dark gray rectangle

• Open the Stroke Category menu on your Property inspector
• Select Pencil - 1-Pixel Hard
• Set the Stroke Color to #000000
• Select the rectangle and position it so that its outer borders fit inside the bevels to your
liking

Creating a light source

The final touch is to create an ambient light source shining on each of the graphics.
• Choose the Ellipse tool
• Draw an ellipse 38 pixels wide by 122 pixels tall

• Set the Fill Category to Solid on your Property inspector
• Set its fill color to #FFFFCC
Check your Property inspector for any properties Fireworks may have recalled and assigned based
on the prior selected object. You'll likely have a 1-pixel stroke around your ellipse, which must be
removed before you proceed.

• With the ellipse selected, make your Property inspector look like this:
Note: If the Texture is other than MB-Denim, that is not important - but the Amount of Texture must be 0%.
• With the ellipse selected, choose Modify - Transform - Numeric Transform...
The Numeric Transform dialog will open
• Select Rotate for the transformation type

• Enter -45 in the angle box
• Leave Scale Attributes checked
• Click OK
• With the ellipse still selected, open the Effects menu
• Choose Blur - Gaussian Blur...

The Blur dialog will open
• Set the Blur radius to 24

• Click OK
• Position the light source overlapping the top left corner of the bevel as illustrated below:
• Select the light source ellipse and make a copy (Edit - Copy / Edit - Paste)
• Position the copy over the right side graphic as illustrated below:

The Page Background Image

The page background image has its own Fireworks document: maxwellBG.png
• Please open maxwellBG.png now.

• Turn on slices by clicking the web Layer "eyeball" icon in the Layers panel
This file yields two web images:
1. max_pbg - the two-tone page background image

2. max_home - the home icon
Should you change the color of the lower portion of the background image, make sure you make a
corresponding change to the canvas color in the maxwell.png file.
Should you change the upper portion's color make sure you reset the home icon's transparent
color and re-optimize it.

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 J.D. Maxwell root
• Select and open the images folder by double-clicking it
• Enter max 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

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.

PVII Extension Help

This section is a reference for the PVII Extensions used in this FastPack™.
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.

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

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

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

Maxwell UserGuide

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Maxwell UserGuide

Transféré par

Droits d'auteur :

Formats disponibles

J.D.

J.D. Maxwell by PVII

© 2004 Project Seven Development Page 1 of 66

J.D. MAXWELL BY PVII 1

BEFORE YOU BEGIN 3

© 2004 Project Seven Development Page 2 of 66

Before you begin

Fast Track, Quick-Start, I-don't-want-to-read-the-Manual Guide

What you need

To edit Maxwell's images, you'll need Macromedia Fireworks - version MX or higher.

© 2004 Project Seven Development Page 3 of 66

• Commands - Manage Extensions - The Extension Manager will open

Editable Fireworks Images

© 2004 Project Seven Development Page 4 of 66

Fireworks Fonts used

Fireworks Live Effects

1. maxwell.css - Used by version 5 and higher browsers

Overview: How we Framed and Beveled J.D. Maxwell

The topBar Div

© 2004 Project Seven Development Page 5 of 66

© 2004 Project Seven Development Page 6 of 66

The wrapper DIV

The bottomBevel DIV

© 2004 Project Seven Development Page 7 of 66

Put them all together

Editing and Customizing

© 2004 Project Seven Development Page 8 of 66

The Page Heading and Home Icon

The Skip to Navigation Link

The topBar DIV

The maincontent DIV

© 2004 Project Seven Development Page 9 of 66

The sidebar DIV

Sidebar: Editing and Adding Navbar Links

• Select the linked text

To add additional links to the main navigation:

• Place your cursor at the end of any of the existing links

© 2004 Project Seven Development Page 10 of 66

The Hyperlink dialog will open-

• Enter your link text in the Text field

© 2004 Project Seven Development Page 11 of 66

Importing CSS to hide from older browsers

<style type="text/css" media="screen">

1. Open Netscape 4 directly (not through Dreamweaver Preview)

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

© 2004 Project Seven Development Page 12 of 66

The main CSS File Analysis

© 2004 Project Seven Development Page 13 of 66

#masthead {margin-left: 6px;}

© 2004 Project Seven Development Page 14 of 66

#masthead and #skipnav link styles

#masthead a, #masthead a:visited, #skipnav a, #skipnav a:visited {

#masthead a:hover, #masthead a:active, #masthead a:focus,

© 2004 Project Seven Development Page 15 of 66

© 2004 Project Seven Development Page 16 of 66

© 2004 Project Seven Development Page 17 of 66

Global Link Styles

a:link {color: #495472;}

© 2004 Project Seven Development Page 18 of 66

#maincontent p, #sidebar p {margin: 0 0 16px 0;}

© 2004 Project Seven Development Page 19 of 66

Secondary heading styles

© 2004 Project Seven Development Page 20 of 66

#navlist link styles