• 
• 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 Tahoe

By: Sheri German

Page 1 of 3

Set for printing

Next

If you've been around a while, you may remember the CMX JumpStart Vegas that was released in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber. As one of our most popular JumpStarts, it inspired some CMX subscribers to request a fluid version of this fixed-width design. Zoe Gillenwater, one of our great CSS gurus, happily complied with our newest CMX JumpStart Tahoe, a JumpStart modification. Tahoe, like Vegas, is located in Nevada, and because it shares many of the same kinds of entertainment centers, seems like a fitting city for a permutation of the Vegas design. And Tahoe has one thing that Vegas doesn't - the beautiful Lake Tahoe that gives literal meaning to the tagline in the Tahoe JumpStart: "Like Vegas, only fluid."

Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.

Image 1: CMX JumpStart Tahoe - click the image to see a larger view

Image 2: The Tahoe form page - click the image to see a larger view

The Article Bundle

CMX JumpStart Tahoe includes the following articles and tutorials to provide you with an in-depth analysis of the techniques it uses.

• Fireworks Layers- Best Practices by Jim Babbage
• Using Masks in Fireworks MX by Jim Babbage
• Working with Overlapping Slices in Fireworks 8 by Jim Babbage
• Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
• Float: The Theory by John Gallant and Holly Bergevin
• Styling CSS Buttons (Part 1) by Stephanie Sullivan
• Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
• How To Attack An Internet Explorer Display Bug -Revised for IE7 by John Gallant and Holly Bergevin
• Using Skip Nav Links by Zoe Gillenwater
• Create Columns with Floats by Zoe Gillenwater
• The Box Model Problem by John Gallant and Holly Bergevin
• Simple Form Styling with CSS by Stephanie Sullivan
• Styling Forms: Fieldset and Legend by Stephanie Sullivan
• Accessible Forms With Dreamweaver by Tricia Littlefield

What else does Tahoe include?

Now let's look at what else the Tahoe package includes:

1. An extension for Dreamweaver MX 2004, Dreamweaver 8, and Dreamweaver CS3 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. Tahoe will appear in the right column, and if you acquire other CMX JumpStarts, their names will appear there also. In the new Dreamweaver CS3, the CMX Jumpstarts will appear in the "Page from Sample" category of the New Document dialog box.

   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, Dreamweaver 8 or Dreamweaver CS3.

2. Once you select Tahoe 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. Tahoe includes both a home and form page to provide a solid starting point for developing all the pages of a site.
4. Tahoe includes four style sheets: a commented and uncommented version of the main style sheet, an Internet Explorer specific style sheet, and a DTSS (Design Time style sheet) for ease of editing the form page.
5. You get the original Fireworks PNG file so you can customize and brand the pages with your own color scheme, logo, text, and images.
6. There is also a minimum/maximum width script to force Internet Explorer 6 and below to comply with these CSS properties that it doesn't natively support.

Tip: If Tahoe 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

In addition to the bundled articles, Zoe Gillenwater has written a very thorough article on how to accomplish the modifications that the PNG, XHTML page, and style sheets need in order to morph the fixed-width Vegas into the elastic Tahoe. Here are some of the topics she covers:

• The steps that are required to go from fixed to fluid/elastic
• The necessary Fireworks PNG alterations and reslicing
• The changes to the Fireworks header graphic and its masking technique
• The XHTML structural changes for each DIV
• The changes to the style sheet
• The construction of an IE specific style sheet to address IE7 issues
• The construction of the skip link accessibility feature
• The how-to's of the accessible form
• The facilitation of easier editing with the included Design Time Style Sheet
• The rational for the min and max width properties, as well as a look at how to use the script that forces pre-IE7 versions to recognize them
• A rundown of the hacks that Tahoe uses to ensure cross platform stability
  

Page 1 of 3 1 2 3 Next

Download Support Files

Keywords
CMX JumpStart Tahoe, CMX JumpStart Vegas, CSS layouts, elastic layout, fluid layout, Spry, accessible forms, design inspiration