FireworksColdFusionDreamweaverFreehandFlashMXHome
Past Week's New Content

Latest Free Content
View All
Free Content
Accessibility
CMX Learning Guides
Hosted by enterhost

Announcing CMX JumpStarts

By: Sheri German

Page 1 of 3

Set for printing

Next

Travel the world with CMX as we tour great cities with our Web standards compliant JumpStarts. Our first stop is Paris with a two-column, fixed-width layout that includes both a banner and a footer in its centered wrapper. Constructed with CSS2 and XHTML 1.0 Transitional markup , fully valid and WAI and 508 compliant, the Paris package includes a basic page that can be used for home and inner pages, a contact form page, and much more.

The Jump Starts Paris template
Image 1: CMX presents Paris, the first of its JumpStarts based on Web standards, XHTML 1.0, CSS2, and WAI and 508 Accessibility requirements. Click the above image to see a larger view.

Let's look first at what the Paris JumpStart package includes. We'll then look at why its Web standards construction is important. Next, we'll look at how easy it is to customize the design so that it is completely unique, and show you a real working example of a modified Paris page. Finally, we'll let you know how you can make the Paris JumpStart your own.

First things first: what do you get when you purchase Paris for $29.99, or get it free as a subscriber to CMX?

What does Paris include?

The Paris JumpStart includes an extension, CSS files, XHTML 1.0 Transitional files, original PNG files, bundled tutorial files, and documentation to help you alter the Fireworks PNGs. Let 's look at each item in some more depth.

  1. A brand new extension for Dreamweaver MX 2004 allows you to easily copy all the files you need to get started into your defined site. After installing the extension, you'll find a CMX JumpStarts category in the left column of your "New Document" dialog box. Paris will appear in the right column, and if you acquire future CMX Jump Starts, their names will appear there also.

    Note: While all of the pages and files included will work in any version of Dreamweaver, or any other HTML editor, the extension to install the design into the New Document window will only work in Dreamweaver MX 2004.

  2. Once you select Paris in your "New Document" dialog box, you'll choose a "save" location where the extensively commented CSS and XHTML files will be copied. These will serve as your starting point. The default images--which include the National flower of France, the Iris--will also get added to the folder of your choice.
  3. You get original Fireworks PNG files so you can customize and brand the pages with your own logos, text, and images.

Tip: There are no restrictions on the number of sites for which you may use the Paris layout. Apply it over and over again to create unique pages: you are limited only by the boundaries of your imagination.

What tutorials come bundled with Paris?

For those of you who want to understand the structural and design basis of Paris, the package comes bundled with all the tutorials you'll need to decipher its essential methods.

What is included in the Paris documentation?

In addition to the bundled tutorials, Paris comes with specific directions on how to reproduce the effects used to create the graphics. Some of the techniques described include how to mask to achieve nondestructive modifications, and how to use textures to increase visual interest.

You can see that the package includes everything you need to get you started, as well as to turn the Paris JumpStart into an in-depth learning experience. You probably have other questions, however. For instance, why are the Web standards components of this layout so important, and why should you care enough to use them in your own pages? Let's examine those questions now.

Page 1 of 3 1 2 3 Next


download
Download Support Files


Keywords
design, CSS2, CSS, XHTML, WAI, 508, CMX JumpStarts, Paris JumpStart, CMX layouts, Web standards, template, positioning, CSS-P, lists, list buttons, CSS buttons, buttons, slicing, slice, wrapper, div, float, two column, 2 column, valid XHTML, valid CSS