By: Sheri German
Page 1 of 3
It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.
Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication Server Behaviors that will allow you to quickly and easily edit the login.
As ever, Liverpool is based on web standards, with a versatile layout that employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. It will be easy for you to quickly create new sites that work on a variety of browsers and platforms. Liverpool has been extensively tested in a number of browsers, you can view the screenshots here. This unique JumpStart includes a two-column fixed-width layout with navigation on the left and a main content section on the right. There is also a little twist to the content area: its lower section is split into two columns, while the upper section spans across both of these columns. Check out the image below to see what we mean!
Image 1: CMX presents Liverpool, the fifth of its CMX JumpStarts based on web standards, XHTML 1.0, CSS2, and WAI and 508 Accessibility requirements. The screen shot above shows the main page. The login form is set to hidden until a user clicks the link at the top right of the page. Click the image above to see a larger view.
Let's look first at what the Liverpool CMX JumpStart package includes. We'll then look at why its web standards construction is important. Next, we'll look at how easy it is to customize the design so that it is completely unique, and show you an example of a site created from modified Liverpool pages. Finally, we'll show you how you can modify the Liverpool CMX JumpStart and make it your own.
First things first: what do you get when you purchase Liverpool for $39.99, or get it free as a subscriber to CMX.
What does Liverpool include?
The Liverpool JumpStart includes an extension for creating the pages, CSS files, XHTML 1.0 Transitional files (a main page and four pages that make up the login application), original PNG files, starter pages for both PHP and ASP login applications, bundled tutorial files, and documentation to help you learn new techniques. Let's look at each item in some more depth.
- An extension for Dreamweaver MX 2004 allows you to easily copy to your defined site all the files you need to get started. After installing the extension, you'll find a CMX JumpStarts category in the left column of your "New Document" dialog box. Liverpool 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.
- Once you select Liverpool in your "New Document" dialog box, you'll choose a "save" location so you can generate to a folder the extensively commented CSS and XHTML files that will serve as your starting point. The default images--such as those of the Beatles, appropriately enough--will also get added to the folder.
- You get original Fireworks PNG files so you can customize and brand the pages with your own logos, text, and images.
- You get a folder called admin that has the four ColdFusion login system pages.
- You get login system pages for both PHP and ASP.
Tip: There are no restrictions on the number of sites for which you may use the Liverpool layout. Apply it over and over again to create unique pages: you are limited only by the boundaries of your imagination.
What tutorials and extension come bundled with Liverpool?
For those of you who want to understand the structural and design basis of Liverpool, the package comes bundled with all the tutorials you'll need to decipher its essential methods.
The login tutorial includes seven video lessons that cover everything from creating the database tables and building the relationship between the tables to implementing the login/logout behaviors and restricting access to specific pages.
- Using the Log In Server Behavior by Adrian Senior - video tutorial
- Creating a ColdFusion Datasource by Adrian Senior - video tutorial
- Dynamic Web Development The Basics: The Application.cfm Template by Adrian Senior
- 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
- CSS An Introduction Part Two: Background Images by Adrian Senior
- CSS An Introduction - Part Six: The Basics of Positioning by Adrian Senior
- CSS an introduction Part Three: The descendant selector by Adrian Senior
- Semantic (X)HTML Markup: Styling Lists by Zoe Gillenwater
- Hidden Gems - Fireworks Fade Image Command by Jim Babbage
- Access Levels and Login for PHP by Tom Muck
- Access Levels and Login for ASP by Danilo Celic
What is included in the Liverpool documentation?
In addition to the bundled tutorials, Liverpool comes with specific directions on how to modify its starter pages, a main page and the ColdFusion, PHP and ASP login system pages. There is documentation for the following techniques:
- How to make the banner graphic for Liverpool
- An explanation of how the two columns in the main content section were created
- How to use Liverpool as a static site even if you're not interested in creating a login system
- A listing and description of what files come in the admin folder
You can see that the package includes everything you need to get you started, in addition to turning the Liverpool CMX JumpStart into an in-depth learning experience. You probably have other questions, however. For instance, why are the web standards components of this layout so important, and why should you care enough to use them in your own pages? Let's examine those questions now.