Accessibility
CMX JumpStart: Stelvio Pass - Gallery
by Adrian Senior - 19-Aug-09
Reader Level: 
The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.
The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.
Introducing CMX JumpStart: Stelvio Pass - Gallery
by Sheri German - 19-Aug-09
Reader Level:
Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.
CMX JumpStart: Nairobi-Flexible
by Adrian Senior - 07-May-09
Reader Level: 
In this tutorial we will take the Nairobi JumpStart and change it from its fixed width default layout into a flexible layout that works between two preset points, based on the user's browser width.
We will also discuss the merits and pitfalls of the changes we will make as we progress through the tutorial. We will discuss screen resolution and desktop setup through to problem areas of flexible layouts.
CMX JumpStart: Isle of Skye
by Adrian Senior - 30-Apr-09
Reader Level:
A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.
This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.
Introducing CMX JumpStart Isle of Skye
by Sheri German - 30-Apr-09
Reader Level:
National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.
CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.
CMX JumpStart: Landeck
by Adrian Senior - 16-Apr-09
Reader Level:
Welcome to the Landeck JumpStart!
The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Introducing CMX JumpStart Lima
by Sheri German - 13-Mar-09
Reader Level:
Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.
CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.
That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.
Of course Lima meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Lima
by Adrian Senior - 13-Mar-09
Reader Level:
Welcome to the Lima JumpStart.
Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.
Introducing CMX JumpStart: The New Forest
by Sheri German - 08-Jan-09
Reader Level:
Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.
CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.
Of course The New Forest meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: The New Forest
by Adrian Senior - 08-Jan-09
Reader Level:
Welcome to The New Forest JumpStart!
The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!
The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.
Approximate download size: 4.4MB
CMX JumpStart: Nairobi
by Adrian Senior - 26-Nov-08
Reader Level:
Welcome to the Nairobi JumpStart!
Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.
The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.
Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.
Nairobi is a JumpStart not to be missed!
Introducing CMX JumpStart Phoenix
by Sheri German - 21-Aug-08
Reader Level:
It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.
CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.
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.
Of course Phoenix meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Phoenix
by Adrian Senior - 21-Aug-08
Reader Level:
Welcome to the Phoenix JumpStart!
Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.
It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.
Introducing CMX JumpStart Bordeaux
by Sheri German - 14-May-08
Reader Level:
It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.
CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.
CMX JumpStart: Bordeaux
by Adrian Senior - 14-May-08
Reader Level:
Welcome to the Bordeaux JumpStart.
Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download
CMX JumpStart: Stirling
by Adrian Senior - 24-Jan-08
Reader Level:
The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.
Web Writing Exercises - Part Two
by Sheri German - 03-Jan-08
Reader Level:
In the second part of the web writing series, you will look at how to use common, everyday words that help readers understand information the first time they read it. You'll look at the principles of audience, organization, and clarity, core features in a style of writing called "plain language".
The writing challenge is an exercise in converting the passive voice to the active voice in another writing sample from my vet client.
The Web Writing Exercises Series:
Web Writing Exercises - Part One
Web Writing Exercises - Part Two
Web Writing Exercises - Part One
by Sheri German - 12-Dec-07
Reader Level:
In this series, we'll explore that topic of writing for the web in depth. Each article's download folder will include copy that you can use to experiment with the featured concepts. It will also include my interpretation of how to effectively present the copy.
According to statistics, 79% of readers scan text on web pages rather than read every word. Therefore, in this first article, we'll look at how we can help readers more easily scan text by using effective headings, hyperlinks, bolded phrases, and lists.
The Web Writing Exercises Series:
Web Writing Exercises - Part One
Web Writing Exercises - Part Two Coming Soon
Styling Skip Nav Links, Revisited
by Zoe Gillenwater - 05-Nov-07
Reader Level:
In Using Skip Nav Links, you learned why skip navigation links are important for the accessibility of your web pages, as well as how to implement them. In this follow-up tutorial, you'll learn how to style your skip nav links using CSS to hide them from sighted users. This was previously covered in Styling Skip Nav Links, but this tutorial presents an alternate technique that is likely to be preferred by more people. However, since there is nothing wrong with the original technique, we've chosen not to update and replace the old tutorial, but simply present a new one.
It's not necessary to read both Styling Skip Nav Links tutorials, as they both include the same background information, rather than one building on the next. If you've already read the earlier tutorial, simply skip past the background information to the description of the new CSS. If you haven't read the earlier tutorial, there's no need to — this one contains all the information you need to implement a hidden skip nav link. Do, however, read Using Skip Nav Links as a good introduction for why and how skip nav links work.
Before reading this tutorial, please keep in mind that hiding skip nav links is not recommended because it renders them useless to some of the users they are supposed to benefit. If you can, leave your skip nav link visible to help as many people as possible with it. However, I know that some clients may insist that the link be hidden, so I will show you how to hide your skip nav links in a variety of ways. I'll start out with the least accessible methods and move to the best, finishing with a method that can return the usefulness of your hidden skip nav links to keyboard users.
CMX JumpStart: Playa Blanca
by Adrian Senior - 01-Nov-07
Reader Level:
Playa Blanca is a two column fixed width design that 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.
The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.
Approximate download size: 1.8MB
Introducing CMX JumpStart: Playa Blanca
by Sheri German - 01-Nov-07
Reader Level:
I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:
While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.
All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.
How to Apply the longdesc Attribute in Dreamweaver
by Zoe Gillenwater - 23-Oct-07
Reader Level:
In Alternative Text for Complex Graphics, you learned about what the longdesc attribute is, why you would want to use it, and how to do so. If you're a Dreamweaver user and want to add longdesc attributes to your images, you may discover that there isn't a specific shortcut to do so. In fact, one of the methods for adding longdesc within Dreamweaver is downright confusing. However, there are Dreamweaver shortcuts for adding attributes to tags in general that we can take advantage of to speed up adding the longdesc attribute to img elements.
This tutorial will go over four ways to add the longdesc attribute to images using Dreamweaver and explain the tricks for using each method.
Alternative Text for Complex Graphics
by Zoe Gillenwater - 09-Oct-07
Reader Level:
Providing alternative text for images, a web accessibility cornerstone, is usually accomplished using the alt attribute. However, sometimes the amount of information that an image conveys is huge, much more than is useful in an alt attribute. For instance, charts, graphs, maps and diagrams can contain great amounts of information that would take several hundred words to adequately convey. While there's no limit on the amount of characters you can place in an alt attribute, they are meant to be kept very short and cannot contain additional (X)HTML markup within the attribute value itself. This can really limit your ability to adequately describe complex images. In this article, you'll learn a few ways to get around these limitations of the alt attribute to provide appropriate text equivalents for complex graphics in alternative ways.
Note: While this article does not deal directly with the alt attribute, it's a good idea to understand the principles behind writing proper alt text before reading this article. You can learn more about proper alt text at Debunking Alt Text Myths.
Declaring the Language of Your (X)HTML Content
by Zoe Gillenwater - 28-Sep-07
Reader Level:
Defining the language of your web content is an essential but often overlooked step in making your web pages standards-compliant. Even if your pages are all written in a single language and you are certain that all members of your audience speak that same language, it's still a good idea to specify the language so that a variety of user agents and tools can correctly interpret and display the content.
In this article, you'll learn how to declare the language of your content in both HTML and XHTML. We'll go over how to declare a default language for the page as a whole as well as how to indicate where the language changes within the page, whether for an entire section or just a word.
CMX JumpStart Madrid
by Adrian Senior - 20-Sep-07
Reader Level:
The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.
The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.
The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.
Approximate download size: 2MB
Introducing CMX JumpStart Madrid
by Sheri German - 20-Sep-07
Reader Level:
Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!
Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.
Finding and Fixing Missing Alt Text Using Dreamweaver
by Zoe Gillenwater - 14-Sep-07
Reader Level: 
If you have old, inaccessible sites that you maintain that you'd like to make accessible, one of the best places to start is adding alt attributes to all of the images throughout the site. Alt text can benefit screen reader users, text browser users, people who browse with images turned off (due to slow connections or tiny screens) and more. Adding alt text is also a good place to start because it is so easy to do from a technical standpoint. All you need to do is decide what the alternative text should be, add the alt attribute to the img element, and type in your value. There's no huge HTML restructuring, complicated CSS, or programming involved.
Of course, having to do this simple task over and over again is still easy but not very fun. If you have an entire site with no alt attributes, especially if it is a table-based site with spacer GIFs, you may have a lot of work ahead of you. There's no way you can automate adding alt attributes to existing pages, since alt text really needs to be tailored to each individual image. When it comes to alt text, its quality is just as important as its presence. However, there are some tricks you can do in Dreamweaver that can speed up the alt text addition process quite a bit.
In this tutorial, we'll take an example site with no alt attributes and lots of images and use Dreamweaver's Find and Replace function with regular expressions to add alt text to entire batches of images site-wide.
No pre-knowledge of regular expressions is necessary for this tutorial. Some knowledge of accessibility, specifically why and how to set proper alt text, will be helpful as you work through the example files as well as apply the demonstrated techniques to your own pages.
Dreamweaver's Accessibility Preferences
by Zoe Gillenwater - 27-Aug-07
Reader Level:
You may have the best of intentions when it comes to making your web pages accessible, but all of us can forget to add an alt attribute or label element here or there. If you're using Dreamweaver (from version MX 2004 onward), you can customize it to remind you about these accessibility enhancements every time you insert one of a number of common elements, as well as help you insert the needed attributes or elements. While this won't help you make your web pages more accessible if you don't know how to properly choose the values for these attributes and elements, it does serve as a handy reminder for those that are already familiar with accessibility best practices.
In this article, you'll learn:
- what elements Dreamweaver provides with accessibility prompts
- how to set your preferences so that it will prompt you about these elements every time
- what each prompt looks like and what accessibility changes it produces in your markup
We won't be focusing on the benefits and guidelines for each of these accessibility enhancements, but rather on how Dreamweaver helps facilitate them. Because of this, this tutorial is best suited for those already familiar with accessibility requirements and how to meet them. References to other articles providing this background information are supplied throughout the article, if you need to brush up in any of the areas covered.
Accessibility and 508: A Guide to Web Standards and Government Regulations
by Bevi Chagnon - 06-Jul-07
Reader Level:
The buzzwords flying around this topic seem endless...usability...accessibility...Web standards...WCAG...WAI. Add government regulations to the mix — such as US Section 508 and Access Board Standards, Canadian CLF Standards, and the European Commission's e-Inclusion policy — and it's enough to drive you crazy!
This comprehensive overview clears up the confusion by reviewing what the standards are, who's affected by the government regulations, and what you must do — or are encouraged to do — to be compliant.
Although the Web standards are voluntary international standards, Section 508 regulations are only for US Federal government web sites and are required by federal law. And Canada's Content Look and Feel Standards affect only Canadian government websites. WCAG standards are not quite the same as US 508-accessibility standards, but this article shows were they converge...and where they don't.
Links to other US Federal, state, and local regulations are included, as well as several international government regulations, and relevant CMX articles and tutorials.
This article is for:
- web developers and designers
- audio, video, and animation developers
- web masters
- project managers
- usability specialists
- GUI (interface) designers
- government contractors
- government contracting officers, procurement specialists, and FAR specialists
Topics covered in this article:
- Web standards, regulations, and entities: what's what and who's who.
- When must you adhere to the standards
- And when it's "smart" to meet the standards
- WCAG guidelines and checkpoints
- Comparison of WCAG guidelines and US Federal 508-accessibility requirements
- Resources: Catalog of CMX articles and tutorials on building accessibility into your websites
- Resources: Links to US Federal, local, state websites on accessibility
- Resources: Links to international websites on accessibility
CMX JumpStart: Tahoe
by Zoe Gillenwater - 18-May-07
Reader Level:
CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.
Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."
As do all our JumpStarts, 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. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.
This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.
Approximate download size: 10MB
Using the Flash CS3 FLVPlayback UI Components
by Tom Green - 19-Apr-07
Reader Level:
Living in an ActionScript-free zone when it comes to Flash video has arrived.
Approximate download size: 2.7MB
CMX JumpStarts: Santorini
by Heidi Bautista - 05-Oct-06
Reader Level:
Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.
The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.
As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.
The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.
Approximate download size: 2.9MB
CMX Announces a JumpStart Contest and FREE JumpStart
by Sheri German - 05-Oct-06
Reader Level:
The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.
Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.
Images and Accessibility
by Adrian Senior - 07-Sep-06
Reader Level:
One of the more overlooked items in website design when considering accessibility features is the image. In this article we will look at how we can adapt the image markup to make it accessible to users who perhaps cannot see the image as you intended it to be seen.
Introducing CMX Jumpstart Orlando
by Sheri German - 15-Jun-06
Reader Level:
Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.
Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando 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 for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.
Introducing CMX Jumpstart San Francisco
by Sheri German - 01-Jun-06
Reader Level:
We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced 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.
Introducing CMX Design Element Krypton
by Sheri German - 27-Apr-06
Reader Level:
It's a bird! It's a plane! No, it's super design CMX Design Element Krypton!
Join me as I unveil the latest Gordon MacKay Fireworks design element. We'll look at what the package includes, what articles come bundled with it, and at some possible ways you might implement it as a Dreamweaver CSS-based layout.
Create a Teaser Thumbnail List Using CSS: Part 3
by Zoe Gillenwater - 20-Apr-06
Reader Level:
This tutorial is the third part in a series on creating "teaser thumbnail lists" with CSS. Teaser thumbnail lists are those lists of items made up of a title, short description, and thumbnail. They're often used to provide short teasers that link to more information about the products, articles, or sections of the site being listed. In Parts 1 and 2, you've learned how to build teaser thumbnail lists from both definition lists and unordered lists and learned a couple different ways to style them.
In this tutorial, you'll learn how to create a version of the teaser thumbnail list that is not seen as often as the versions we have already created: the horizontal version, where each item follows the next to its right instead of below. We'll give the horizontal list a unique style from the list created in Part 2 to illustrate the various styling possibilities that exist for lists like these. Without touching the markup and only editing the CSS slightly, you can create lists that match the look and feel of your site easily.
Note: This tutorial has been updated as of 5/3/2007. You can view the updated tutorial here.
The Create a Teaser Thumbnail List Series:
Create a Teaser Thumbnail List Using CSS: Part 1
Create a Teaser Thumbnail List Using CSS: Part 2
Create a Teaser Thumbnail List Using CSS: Part 3
Create a Teaser Thumbnail List Using CSS: Part 4
Introducing CMX JumpStart Modifications
by Sheri German - 30-Mar-06
Reader Level:
With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?
We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.
JumpStart Comparison Chart
by Heidi Bautista - 02-Mar-06
Reader Level:
CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?
The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table
provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.
The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.
Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.
Dynamic & Accessible Navigation with ColdFusion
by Adrian Senior - 21-Feb-06
Reader Level:
In this tutorial we are going to be looking at creating a dynamic and accessible navigation system. To do this we will be using cfoutput queries and the group attribute to gather in the information for both our top level and our sub level navigation options.
Redesigning the Inverness JumpStart
by Heidi Bautista - 23-Dec-05
Reader Level:
All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.
All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.
Introducing CMX Jumpstart Inverness
by Sheri German - 21-Dec-05
Reader Level:
We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.
CMX JumpStarts: Inverness
by Gordon Mackay - 21-Dec-05
Reader Level:
Welcome to the latest CMX JumpStart— Inverness.
Inverness is the latest city in Scotland to attain city status. It is also the capital of the Highlands, and now it's a blog design too :)
The Inverness JumpStart is a centered, two column, fixed-width layout that emulates the styling's of a typical weblog. We chose to demonstrate this style of layout due to its current popularity as a way of representing frequently updated content on web pages.
There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:
- A summary of latest posts.
- A selection of latest posts with snippets of the post content.
- A link that takes the user to the detail page for the post.
- A link that takes the user directly to a form that allows them to comment on the post.
- A list of links to other blogs that the site's owner thinks his users will find interesting.
In addition to those features they also contain things common to all web pages… intuitive navigation and a unique form of branding that gives the owner's weblog a look all of its own.
This CMX JumpStart includes reference to all of these.
The Complete JumpStart Catalog
by Sheri German - 20-Dec-05
Reader Level:
We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.
Introducing CMX JumpStart Cairo
by Sheri German - 17-Nov-05
Reader Level:
We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.
CMX JumpStarts: Cairo
by Adrian Senior - 17-Nov-05
Reader Level:
Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.
CMX JumpStarts: Traverse City
by Zoe Gillenwater - 27-Oct-05
Reader Level:
You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City 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. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.
The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.
If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!
Introducing CMX Jumpstart Traverse City
by Sheri German - 27-Oct-05
Reader Level:
Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.
Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.
Introducing CMX Jumpstart Machu Picchu
by Sheri German - 12-Sep-05
Reader Level:
Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.
Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.
Accessibility and the Label Tag
by Adrian Senior - 23-Aug-05
Reader Level:
In this tutorial we will look at how we can build and lay out accessible forms.
In particular we will focus on the label element and we will see how the label can be used to not only increase the focus area of any form element but at the same time be utilised to give our form layouts a little more structure than a simple stacking of form elements in a single column.
Reconstructing Vienna: The Cascading Style Sheet
by Sheri German - 08-Jul-05
Reader Level:
If you've already followed along with my CMX JumpStart Vienna: Reconstructing the Markup article, then you're ready to take the structure and give it some cosmetic beauty. We have all our components, but now we need to create a style sheet that will lay them out in an organized design that enhances comprehension and usability. Let's get started on reconstructing the CSS of CMX JumpStart Vienna.
Redesigning the Vienna JumpStart
by Linda Rathgeber-Stewart - 08-Jul-05
Reader Level:
Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)
Reconstructing Vienna: The Markup
by Sheri German - 07-Jul-05
Reader Level:
Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?
If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.
Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.
If you're ready, let's first ascend to "Wrapper Heaven."
Introducing JumpStart Vienna
by Kim Cavanaugh - 06-Jul-05
Reader Level:
It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here
CMX JumpStart: Vienna
by Sheri German - 06-Jul-05
Reader Level:
Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.
In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?
But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.
The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.
Styling Skip Nav Links
by Zoe Gillenwater - 21-Jun-05
Reader Level: 
In Using Skip Nav Links, you learned why skip navigation links are important for the accessibility of your web pages, as well as how to implement them. In this followup tutorial, you'll learn how to style your skip nav links using CSS to hide them from visual users.
Before reading this article, please keep in mind that hiding skip nav links is not recommended because it renders them useless to some of the users they are supposed to benefit. If you can, leave your skip nav link visible to help as many people as possible with it. However, I know that some clients may insist that the link be hidden, so I will show you how to hide your skip nav links in a variety of ways. I'll start out with the worst methods and move to the best, finishing with a method that can return the usefulness of your hidden skip nav links to keyboard users.
Using Skip Nav Links
by Zoe Gillenwater - 07-Jun-05
Reader Level:
Have you ever been to a web site and noticed a mysterious link at the very top that says "skip navigation" or "skip to main content"? Perhaps not — most web developers don't use skip nav links to improve the accessibility of their pages. Skip nav links, also known as skip navigation or jump to content links, allow many different types of users to get right to the content on your site that they are looking for. This article will explain why you ought to be in the minority of web developers who do include skip nav links in their web pages and how to do it. If you are already committed to creating accessible web pages, read this article to learn about one of your tools to do so.
Introducing Jumpstart Vegas
by Sheri German - 02-Jun-05
Reader Level:
We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.
CMX JumpStart: Vegas
by Stephanie Sullivan,Linda Rathgeber-Stewart - 02-Jun-05
Reader Level:
Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.
We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.
If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.
CMX JumpStarts: New Orleans
by Paul Newman,Zoe Gillenwater - 21-Apr-05
Reader Level:
The New Orleans JumpStart has been designed with the Umoja String
Quartet and their jazzy feel at the center. Two pages, a home page and
contact page, are included in this JumpStart. Both pages feature a fixed
width, centered design with a scrollable content area. The home page
includes a customizable MP3 player built in Flash that includes music
from from two Umoja String Quartet CDs: "Songs of Our Fathers" and
"Things Ain't What They Used To Be."
The pages are constructed using valid XHTML 1.0 markup and formatted
using valid CSS 2.1 styling. We provide an extensively commented style
sheet so you know what each piece does and how to change it to suit your
design, as well as another version of the style sheet with the comments
stripped out so you don't have to cut out all those extra kilobytes by
hand when you're ready to go live! New Orleans also follows the WAI and
Section 508 accessibility guidelines to provide you with a solid
foundation for your work.
Beyond just the pages, we've also included all the source files used to
create both of the layouts, both PNG and Flash. All layers in the PNG
file are organized and labeled so that it's easy to make any
modifications you need.
The graphic and code techniques used to create New Orleans are explained
fully in the 14 tutorials that we've included in your download. Those
techniques that are not covered in the bundled tutorials are explained
in this article.
If you'd like a more detailed look at the New Orleans Jumpstart, as well
as seeing a modified New Orleans design, check out Sheri German's CMX
JumpStart New Orleans: An Introduction.
Introducing CMX Jumpstart New Orleans
by Sheri German - 21-Apr-05
Reader Level:
The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.
Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.
Semantic (X)HTML Markup: Other Elements
by Zoe Gillenwater - 03-Mar-05
Reader Level:
Throughout the Semantic (X)HTML Markup Series, you've learned about elements that give greater structure and accessibility to your pages. This last article in the series describes the proper uses for all remaining elements not previously covered: address, del, ins, hr, pre, sub, sup, and title. The article also includes a description of the mixed nature of the img element, a recap of the form elements, and some notes about the non-semantic yet non-presentational div and span elements.
The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements
CMX JumpStarts: Venice
by Zoe Gillenwater - 14-Feb-05
Reader Level:
Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.
In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.
To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:
- Using Masks in Fireworks MX by Jim Babbage
- Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
- Flowing and Positioning: Two Page Models 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
- Recreating Macromedia's Layout by Zoe Gillenwater
- Styling CSS Buttons (Part 2) by Stephanie Sullivan
- Styling Forms: Fieldset and Legend by Stephanie Sullivan
- Using Classes and IDs Effectively by Zoe Gillenwater
- Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin
Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.
If you'd like a more detailed look at the Venice Jumpstart, as well as seeing a modified Venice design, check out Sheri German's CMX JumpStart Venice: An Introduction.
JumpStart Venice: An Introduction
by Sheri German - 14-Feb-05
Reader Level:
Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.
CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.
Liverpool JumpStart with .NET
by Heidi Bautista - 31-Jan-05
Reader Level:
Ah yes, Liverpool, not only a great JumpStart, but now you can have it with ASP.NET support. In addition to a valid CSS2 and XHTML 1.0 Transitional, WAI and 508 Accessible CSS layout, you also get a dynamic ASP.NET login application. The original release of the Liverpool JumpStart comes bundled with ColdFusion, PHP, and ASP and uses Dreamweaver's built-in User Authentication Server Behaviors. Unfortunately, Dreamweaver doesn't boast similar server behaviors for ASP.NET. To help make up for that lack, here's a special tutorial just for you ASP.NET coders. I've taken the original Liverpool JumpStart pages and added the necessary ASP.NET code. The result: an out-of-the-box ASP.NET login solution combined with a versatile layout. What could be better? :-)
Included in the support files are the CF, ASP and PHP versions of the Liverpool JumpStart. There is a link at the end of the article that will allow you to download just the .NET version if you prefer, as well as a link to download the bundled tutorials that were included with the original Liverpool JumpStart.
The .NET version of Liverpool is available as a no charge upgrade to purchasers of the original Liverpool JumpStart.
If you would like to receive the .NET version, please send us an email and we will send you the .NET files. Please be sure to include your name and the email address that is associated with the PayPal account used to make the purchase.
Semantic (X)HTML Markup: Phrase Elements
by Zoe Gillenwater - 21-Jan-05
Reader Level:
Previous articles in the Semantic (X)HTML Markup series have focused on three of the ten phrase elements: em, strong, and cite. Here, we cover the remaining seven: abbr, acronym, code, var, samp, kbd, and dfn. These elements add structural information to text fragments in your documents and can act as handy hooks for styling or scripting. We pay particular attention to the acronym element, which can enhance your page's usability, accessibility, and search engine optimization.
The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements
CMX JumpStart: Liverpool
by Adrian Senior - 20-Jan-05
Reader Level:
The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.
Also included are login application pages for .NET, PHP and ASP server models.
This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.
If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.
If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.
Announcing CMX JumpStart: Liverpool
by Sheri German - 20-Jan-05
Reader Level:
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.
This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.
Debunking Alt Text Myths
by Zoe Gillenwater - 06-Jan-05
Reader Level:
With accessibility getting more press these days and the requirement to include the alt attribute on all images now part of the HTML and XHTML Strict specifications, more web developers than ever are finally providing alt text on their images. But the type of alt text you provide plays a tremendous role in how accessible your page truly is. When used incorrectly, alt text can actually hinder accessibility! This article will debunk four myths regarding the use of alt text so that developers can provide alt text that is more useful to non-visual users. Learn how to provide alt text that maximizes your page's accessibility in a real way rather than just satisfies automated accessibility checkers.
CMX JumpStarts: Aspen
by Zoe Gillenwater - 23-Dec-04
Reader Level:
Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.
Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.
In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:
- The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
- Clearing Floats, the Easy Way by John Gallant and Holly Bergevin
- Creating Liquid Faux Columns by Zoe Gillenwater
- Styling CSS Buttons (Part 2) by Stephanie Sullivan
- Styling Forms: Fieldset and Legend by Stephanie Sullivan
- Custom Gradients in Fireworks MX by Kim Cavanaugh
- Understanding the Pen Tool by Kim Cavanaugh (video)
- Using Masks in Fireworks MX by Jim Babbage
- CMX Design-time Extension by Paul Boon
Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.
If you'd like a more detailed description of Aspen, including screenshots, check out the free article Announcing a New CMX JumpStart: Aspen.
Announcing CMX JumpStart: Aspen
by Sheri German - 23-Dec-04
Reader Level:
Aspen Mountain, packed powder, light snow falling and you've just ascended by lift to the top. If you're a beginner, forget it. You shouldn't have. How will you make it down alive to sit by that fire to sip a hot toddy?
But wait. CMX, your expert guide, has negotiated all the slick turns and steep curves. We know you have been waiting for a three column liquid layout, and for our CMX holiday celebration, here it is: JumpStart Aspen.
With a three column liquid-width layout, a base page, and a form page, Aspen employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. Aspen has been tested in numerous browsers. Read on to find out what the bundled package includes.
Accessibility and accesskeys
by Adrian Senior - 22-Dec-04
Reader Level:
In this tutorial we will look at how we can use accesskeys to provide keyboard navigation and functionality to our web sites.
The use of accesskeys is of course not limited to the above, but this tutorial will give you the base knowledge you will need to take what you have learned and apply it to other areas of your site.
CMX JumpStarts: North Pole
by Adrian Senior - 16-Dec-04
Reader Level:
The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!
Semantic (X)HTML Markup: Styling Tables
by Zoe Gillenwater - 23-Nov-04
Reader Level:
In the last Semantic (X)HTML article, you learned about a number of underused table elements that can improve your table's structure and accessibility. Guess what – there's more! The second part of the semantic tables article covers additional table elements that act primarily as hooks for visual formatting. This article will introduce the thead, tfoot, tbody, col, and colgroup elements. You'll learn which CSS properties you can use to format your tables and how to apply them to the appropriate table elements.
The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements
Semantic (X)HTML Markup: Using Tables Appropriately
by Zoe Gillenwater - 16-Nov-04
Reader Level:
In this article, you'll learn how to use perhaps the most misused semantic element: the table element. Like all the other (X)HTML elements you've learned about in the Semantic (X)HTML Markup series, there's a right and wrong way to use tables. This article explains when it is appropriate to use tables (yes, there are such times!) and how to structure tables when you do need to use them. Beyond just rows and cells, (X)HTML provides you with additional elements and attributes that can add structure and accessibility to your tables and make them easier to style down the road.
The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements
CMX JumpStarts: Seattle
by Adrian Senior,Danilo Celic - 11-Nov-04
Reader Level:
Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"
Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.
All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!
Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.
The following tutorials are bundled with the Seattle JumpStart:
- Float: The Theory - by John Gallant & Holly Bergevin
- CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
- Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
- Styling Forms: Fieldset and Legend - by Stephanie Sullivan
- Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
- CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
- How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
- CMX Design-time Extension - by Paul Boon
- Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor
Seattle has been tested in various browsers. Click on the following link to view screenshots.
Announcing a New CMX JumpStart: Seattle
by Sheri German - 11-Nov-04
Reader Level:
Put down that coffee, and get your Grunge thing going on. That's right, we're off to the "Emerald City", once called Duwamps, but now known as Seattle!
Community MX is pleased to announce the release of the latest CMX JumpStart: Seattle. Based on Web standards, this versatile layout employs valid CSS2 and XHTML 1.0 Transitional markup and passes WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included with the CMX Seattle JumpStart package and bundled tutorials and extensions
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of pages that were created from the Seattle JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screenshots of the page in multiple browsers
Who's ready for a spin on the Space Needle?
CMX JumpStarts: Paris
by Adrian Senior,Danilo Celic - 28-Oct-04
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
This article covers the following:
- A list of what is included in the CMX JumpStarts: Paris download
- A list of the bundled tutorials that teach the theory behind the layout
- Directions for creating the effects in the Fireworks PNGs
- Demos of live pages
- A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms
Announcing CMX JumpStarts
by Sheri German - 28-Oct-04
Reader Level:
Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.
Inspired by famous world cities, each JumpStart will have an individual ambience and offer different table-less layouts and features. We travel first to Paris, a city of romance and style, with a design that features the Iris, the national flower of France. This two-column, fixed-width layout, complete with banner and footer, will serve as an elegant underpinning for almost any design.
This article covers the following:
- A list of what is included with the CMX Paris JumpStart package and bundled tutorials
- An explanation of the benefits of Web standards
- A demonstration of the ease with which the layout is customized
- The presentation of a page that was created from the Paris JumpStart
- Information about how this exciting design can belong to you for use in as many projects as you please.
- Screen shots of the page in multiple browsers
Living in a Dream House: Or How to Bring Web Standards to Your Web Sites
by Sheri German - 26-Oct-04
Reader Level:
We hear the phrase "Web Standards" frequently these days, but what does it mean, and why should we care? There are many advantages to using XHTML, CSS, and 508 accessibility, and we'll look at some of them in this article. We'll look at how structuring and designing web pages has evolved to its current "best practice" of separating content and presentation. Finally, after looking at a few of the problems involved in using CSS for layout, we'll wander through the CSS Zen Garden to look at a few inspiring examples of what can nonetheless be achieved when designers code for standards compliant browsers.
Features of a Powerful Home Page
by Tricia Littlefield - 10-Sep-04
Reader Level:
Creating the right home page can be a daunting task. It is difficult to pack in that powerful punch in a limited space. Learn what is important on your home page to make a bigger impact on your customers, and improve your conversion rating.
WebQuests for Teachers - Part 1
by Sheri German - 07-Sep-04
Reader Level:
The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.
The WebQuest Series:
Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest
Semantic (X)HTML Markup: An Introduction
by Zoe Gillenwater - 19-Aug-04
Reader Level:
CSS is making it easier than ever to control the visual presentation of our (X)HTML documents. However, good document structure is just as important as ever. Semantic markup is good for you, your users, your clients and search engines too!. This first article in the Semantic (X)HTML Markup series examines what "semantic markup" means and why it matters.
The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements
Accessible Forms With Dreamweaver
by Tricia Littlefield - 10-Aug-04
Reader Level:
Customer interaction through forms is vital. Are your forms accessible? Topics include making changes in Dreamweaver's preferences to help you build an accessible form, grouping form elements with fieldset and optgroup elements, choosing the appropriate input elements for disabled users, and keeping your label tags associated with your form elements.
Accessibility for Profit
by Tricia Littlefield - 26-Jul-04
Reader Level:
My initial interest in accessibility was purely selfish. Someone dubbed Google "the largest blind user on the Internet". Hmm...that's interesting, I thought. If I make my customers' web sites accessible, then their web sites will rank higher in the search engines. Now that was definitely worth looking into.
