Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

J.D. Maxwell by PVII J.D. Maxwell by PVII Thank you for purchasing J.D. Maxwell

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. A l S p a r b e r a n d G e r r y J a c o b s e n – P V I I © 2004 Project Seven Development Page 1 of 66 J.D. Maxwell by PVII 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 © 2004 Project Seven Development Page 2 of 66 J.D. Maxwell by PVII 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. © 2004 Project Seven Development Page 3 of 66 J.D. Maxwell by PVII 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. © 2004 Project Seven Development Page 4 of 66 J.D. Maxwell by PVII 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: © 2004 Project Seven Development Page 5 of 66 J.D. Maxwell by PVII 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. © 2004 Project Seven Development Page 6 of 66 J.D. Maxwell by PVII 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. © 2004 Project Seven Development Page 7 of 66 J.D. Maxwell by PVII 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 uploads/Litterature/ maxwell-userguide.pdf