By: Sheri German
Page 1 of 3
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.
What does Greenville include?
Now let's look at what the Greenville download files include:
- 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.
- There is an extension installation and usage guide.
- 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.
- Greenville includes a two-column starter page that includes a left column with teaser thumbnail lists and styled form.
- 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.
- 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:
- Using Skip Nav Links by Zoe Gillenwater
- Share Your Style by Gordon Mackay
- Custom Gradients in Fireworks MX by Kim Cavanaugh
- CSS An Introduction Part Two: Background Images by Adrian Senior
- Making it Legal: Validating Your (X)HTML and CSS by Zoe Gillenwater
- CSS and Introduction - Part 13: Working with a Wrapper Div by Adrian Senior
- Hidden Gems - Fireworks Fade Image Command by Jim Babbage
- Media Types and Their Uses by Stephanie Sullivan
- Transparent Backgrounds in Win IE by Heidi Bautista
- CMX Black Line Master Graphics 4 by Kim Cavanaugh
- Create a Teaser Thumbnail List Using CSS: Part 1 by Zoe Gillenwater
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.