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

• Introducing Masterpiece Photo Collection 12: To Autumn
• Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 2
• Create Your Own Custom CMX Fireworks Course - Updated
• The CMX JumpStart Catalog Update 2009
• How to Apply Smart Filters to an Image in Adobe Photoshop CS4 - Part 1

View All
Free Content

Accessibility

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

Introducing CMX JumpStart Berlin

By: Sheri German

Page 1 of 2

Set for printing

Next

When I think of Berlin, I think of one of the world's greatest orchestras, The Berlin Philharmonic. I am listening to a recording of this august group playing Dvorak's Symphony #8 even as I type. In addition to its many orchestras, opera houses, and theaters, Berlin has the honor of being the capital of Germany. And now it can boast one more credential - it is the latest JumpStart, CMX JumpStart Berlin.

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View.

Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Image 1: Three-column version of CMX JumpStart Berlin - click the image to see a larger view

Image 2: Hovering over an image expands it while contracting the other image menu items

What the Package Includes

Like all CMX JumpStarts, the package includes everything you need to quickly build a site that meets the requirements for you or your clients.

Included Tutorials

The Berlin JumpStart includes the following tutorials:

• Centering a Wrapper - by John Gallant & Holly Bergevin
• Create Columns with Floats by Zoe Gillenwater
• Do You Want To Do That With CSS? - Floating Clear- by John Gallant & Holly Bergevin
• CMX Internet Explorer Conditional Comment Extension by Paul Davis
• Making CC & DT style sheets work for you by Adrian Senior
• CSS Tricks: Using Descendant Selectors to Control the Number of Columns by Stephanie Sullivan
• Extending Dreamweaver CS4: Part 5 - Phatfusion Image Menu by Adrian Senior
• CSS Tabbed Navigation Sets for Sliding Doors Navigation by Adrian Senior

Additional Package Contents

The contents of the package include everything you need to brand the site for your own or your client's requirements.

• An extension for Dreamweaver MX 2004, Dreamweaver 8, and Dreamweaver CS3 and CS4 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. (In Dreamweaver CS3 and CS4, JumpStarts appear in the Page from Sample category.) Berlin will appear in the right column, and if you acquire other CMX JumpStarts, their names will appear there also. Once you select Berlin 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.
• A starter page with a stable structure in place that lets you rapidly build a site that features either two or three column versions.
• Berlin includes multiple style sheets:
  • a main style sheet
  • a style sheet for Internet Explorer 6 and under
  • a style sheet of Internet Explorer 7
  • a Design Time style sheet for improved editing in Dreamweaver's Design View
  • a Phatfusion Image Menu style sheet

• You get the main drawing Fireworks PNG file so that you can customize and brand the pages with your own color scheme, logo, text, and images
• You get two PNGs that will allow you to customize the Sliding Door tabs
• The extension automatically installs the Phatfusion Image Menu files into your defined site

The Documentation

Adrian Senior, creator of the design and code for Berlin , also includes a tutorial that explains the details of implementation. These are some of the topics that the article covers:

• Directions for installing the extension
• Directions for creating and applying the Design Time style sheet
• An explanation of how to modify the Sliding Door tabs and understand how the two background images ensure the accessibility of the navigation
• An explanation of how the fluid/fixed layout is constructed
• A guide to working with the free Adobe Phatfusion Image Menu widget and how to use its gallery scripts, style sheets, and image files

Tip: If Berlin does not suit your current site, you can explore the unique features of our other JumpStarts by reading The Complete JumpStart Catalog 2008 Update.

And now it's time to present our modification, both as quality assurance, and also so that you can see the possibilities in the design. The Berlin JumpStart is a perfect showcase for compiling all the CMX stock photo collections.

Page 1 of 2 1 2 Next

Download Support Files

Keywords
CMX JumpStart, CMX JumpStart Berlin, Photography site, Gallery, Phatfusion Image Menu, Sliding Doors, two and three column layout