By: Sheri German
Page 1 of 3
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.
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:
- 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.
- 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.
- Detroit includes three style sheets: one for the screen media type, one for Internet Explorer 6 and below, and one for Internet Explorer 7.
- You get the original Fireworks PNG file so you can customize and brand the pages with your own color scheme, logo, text, and images.
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....