By: Sheri German
Page 1 of 2
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.
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
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.