Introducing CMX Jumpstart Greenville

By: Sheri German

Page 1 of 3

Set for printing

Next

Greenville, North Carolina is one of the entry cities into the South, and as such exhibits all its charm and relaxed hospitality. It's also home to a large state university, East Carolina, where, coincidentally, my husband got his undergraduate degree. The name itself, however, evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.

Transparency and Teaser Text Lists

Greenville's "raison d'etre" centers around the transparent PNG and its ability to layer and blend images in a design. Because Internet Explorer does not support this feature (though Internet Explorer 7 will), Heidi makes use of a Microsoft AlphaImageLoader filter to accomplish the job in IE 5.5 and IE 6.

The other feature Heidi integrates into Greenville is thumbnail images aligned with teaser text and links that are styled into an unordered list. You may have read Zoe Gillenwater's series on doing this, but never felt brave enough to try to incorporate the technique into your own layout. Now Heidi's done it for you.

Greenville was both designed and coded by Heidi Bautista. Greenville uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines. It will provide a solid foundation for any design in which you may use it. Greenville is a two-column, centered, fixed-width layout that features transparent background images, teaser text lists, and a styled form.

CMX JumpStart Greenville
Image 1: The JumpStart Greenville home page (Click the image to see a larger view.)

What does Greenville include?

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

  1. An extension for Dreamweaver MX 2004 and Dreamweaver 8, which allows you to easily copy all the files you need to a defined site so that you can 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. Greenville will appear in the right column.

    Note: While all of the pages and files included will work in any version of Dreamweaver, or any other HTML editor, the extension to install the design into the New Document window will only work in Dreamweaver MX 2004 and Dreamweaver 8.

  2. There is an extension installation and usage guide.
  3. The package comes with full documentation on how the graphics, CSS and markup were put together, so you can completely understand the underlying layout and make your own modifications.
  4. Greenville includes a two-column starter page that includes a left column with teaser thumbnail lists and styled form.
  5. Greenville includes commented and uncommented style sheets: a main style sheet, three Internet Explorer hacks style sheets (called from within Conditional Comments), and a print style sheet.
  6. There is a source Fireworks PNG file so that you can customize and brand the pages with your own color scheme, logo, text, and images. All layers in the PNG file are organized and labeled by Jim Babbage, so it's easy to make your modifications.

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

What tutorials come bundled with Greenville?

Greenville comes bundled with eleven tutorials that expand upon many of the techniques used in its construction:

Tip: Greenville is the seventeenth in our series of CMX JumpStarts Dreamweaver templates. We will continue to diversify our features and layouts so that you will always be able to find a design to fit your needs. If Greenville does not suit your current site, you can explore the unique features of our other JumpStarts by reading the JumpStart Comparison Chart.

Now let's take a more in-depth look at the Greenville article documentation.

Page 1 of 3 1 2 3 Next


download
Download Support Files


Keywords
JumpStarts, JumpStart Greenville, teaser text lists, transparent PNG, Microsoft transparency filter, background image, transparent, filter, AlphaImageLoader, images, transparency, opacity, CSS, valid XHTML, valid CSS, 508 and WAI accessible