• 
• 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 San Francisco

By: Sheri German

Page 1 of 2

Set for printing

Next

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

When we released the recent CMX Design Element Gold, we got many requests to see the code that was described in the Gold introductory article. You could say we had a bit of "Gold Fever" going on, with a number of subscribers who were ready to "Go West" into the wild frontiers of CSS layouts. So journey with us now modern day '49ers, and get your hands dirty as you pan for code in this latest CMX JumpStart San Francisco for students.

Image 1: The San Francisco CMX JumpStart home page

Your San Francisco Team

Let us first introduce you to the San Francisco team:

• Design by Gordon Mackay (based on his Design Element Gold)
• Fireworks PNG organized according to best practices by Jim Babbage
• CSS and XHTML structured by John Gallant and Sheri German

San Francisco Page Features

Just because it is relatively simple doesn't mean it's lacking in features. Here is some of what you'll see in the San Francisco starter page:

• A two column, fixed width design
• Attention to source order
• Skip to nav link for screen readers
• An easy to use color scheme
• A hack free working environment

What Does the Package Include?

Now let's look at what the San Francisco download files include:

• There is an extension so you can add San Francisco to the Dreamweaver New 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 and Dreamweaver 8.

• San Francisco includes a starter page that you can modify for your own projects.
• There is a commented style sheet so you can follow along with the logic behind the code manipulation.
• There are ten bundled articles so you can understand the theory behind the design.
• There is a source Fireworks PNG file so you can customize and brand the pages with your own color scheme, logo, text, and images. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.

The Bundled Article List

For those of you who want to understand the underlying structure, CSS, and graphics of San Francisco, the package comes bundled with ten tutorials:

• Teaching Dreamweaver the Web Standards Way by Sheri German
• Share your Style by Gordon Mackay
• Fireworks Layers - Best Practices by Jim Babbage
• CMX Design Element Gold by Gordon Mackay
• The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
• CSS An Introduction - Part Thirteen: Working With a Wrapper Div by Adrian Senior
• CSS An Introduction -Part Two: Background Images by Adrian Senior
• Using Skip Nav Links by Zoe Gillenwater
• Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
• Float: the Theory by John Gallant

Note: If San Francisco is not quite what you have in mind, be sure to check out our other JumpStarts by reading The Complete JumpStart Catalog and The JumpStart Comparison Chart

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

Now let's take a more in depth look at the San Francisco article documentation.

Page 1 of 2 1 2 Next

Download Support Files

Keywords
CMX JumpStart San Francisco, CMX Design Element Gold, CSS layouts, valid CSS, valid XHTML, css for students, wrappers, background images, 508, WAI, two-column, fixed-width, skip nav link