• 
• Forums
• Calendar
• CMX Info
• Join CMX
• My CMX

•  Home
•  All Content
•  Dreamweaver
•  ColdFusion
•  Flash
•  Fireworks
•  Freehand

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials
• Extensions

• Articles
• Tutorials

Latest Free Content

• Get the Time of Day as a MySQL Developer - Part 1: Data Types
• Introducing CMX JumpStart Agra
• Ribbons Using the Warp Tool
• Star Burst Lines (Polar Coordinates)
• Call To Action - Is Your Web Site Working For You?

View All
Free Content

Accessibility

• Main content
• Log in
• Power Search
• Today's Content

Introducing CMX JumpStart Detroit

By: Sheri German

Page 1 of 3

Set for printing

Next

It's been a while since I've had the pleasure of working with an Adrian Senior JumpStart, and this one was worth the wait. JumpStart Detroit has all the trademarks of Adrian Senior's designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes the novel feature of a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content.

Known for being a center of the automobile and popular music industries, Adrian chose to focus on the aspect of Detroit, Michigan that produces what is surely many people's best friend - their cars. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.

Image 1: CMX JumpStart Detroit = click the image to see a larger view

This JumpStart contains the following tutorials that provide an in-depth analysis of the techniques used.

• Designing with Gradients and Glows - Adrian Senior
• Centering a Wrapper - John Gallant & Holly Bergevin
• Absolute Positioning and the Top Property - John Gallant & Holly Bergevin

What does Detroit include?

Now let's look at what the Detroit package includes:

1. An extension for Dreamweaver MX 2004 and Dreamweaver 8 allows you to easily copy all the files you need to a defined site so that you get a quick start. After installing the extension, you'll find a CMX JumpStarts category in the left column of your "New Document" dialog box. Detroit will appear in the right column, and if you acquire other CMX JumpStarts, 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 or Dreamweaver 8.

2. Once you select Detroit in your "New Document" dialog box, you'll choose a "save" location and the CSS and XHTML files that will serve as your starting point will appear in your defined site's folder. The default images will also get added to the folder.
3. Detroit includes three style sheets: one for the screen media type, one for Internet Explorer 6 and below, and one for Internet Explorer 7.
4. You get the original Fireworks PNG file so you can customize and brand the pages with your own color scheme, logo, text, and images.

Tip: If Detroit does not suit your current site, you can explore the unique features of our other JumpStarts by reading the The Complete JumpStart Catalog or The JumpStart Comparison Chart.

The Documentation

What could be easier? With the modification of just three background images, you'll brand the layout and make it your own. The article guides you through a div-by-div assembling of the structure. You'll learn how to adjust the buttons that are actually a list of links so you can avoid some Internet Explorer bugs. Finally, you'll get a complete description of how JoJo created the tapering shadow effect that provides the background of the main content area.

This is a truly pain-free JumpStart. It didn't take long to go from the Detroit automobile industry to a....

Page 1 of 3 1 2 3 Next

Download Support Files

Keywords
CMX JumpStart Detroit, background images, gradients, wrapper, centering layout, CSS layouts, CSS positioning, absolute positioning