The HTML5 CSS Starter Page Series - Part 1
Reader Level:

Unless you have been impersonating Rip Van Winkle and have been sleeping the past year, I am sure most of you are aware of the tsunami of CSS3 and HTML5 techniques that are flooding the web tutorial and blog sites. Adobe released its Dreamweaver CS5 11.03 updater with new HTML5 and CSS3 capabilities, as well as two HTML5 CSS Starter Pages. With two mainstream CSS Starter Page series behind us, I hope you are ready to embark on a freewheeling look into the future-is-now through this new HTML5 CSS Starter Page series.

The HTML5 CSS Starter Page Series:
The HTML5 CSS Starter Page Series - Part 1
The HTML5 CSS Starter Page Series - Part 2: Content Models
The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout
The HTML5 CSS Starter Page Series - Part 4: Markup Continued
The HTML5 CSS Starter Page Series - Part 5: Styling the Layout
The HTML5 CSS Starter Page Series - Part 6: More Layout Styling
The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout
The HTML5 CSS Starter Page Series - Part 8: Site Tasks
The HTML5 CSS Starter Page Series - Part 9: The Video Page
The HTML5 CSS Starter Page Series - Part 10: The Contact Page
The HTML5 CSS Starter Page Series - Part 11: The Contact Page Continued
The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables
The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web
The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet

Introducing CMX JumpStart Merry Christmas
Reader Level:

It's that most wonderful time of the year - not only is it the holiday season, but we're also gearing up for Community MX's annual open house. The entire web community is invited to browse our offerings for free, as well as accept our gift of a free CMX Dreamweaver template, CMX JumpStart Merry Christmas.

In this article I will discuss the features of the new JumpStart, and show you a modification that should get you started in thinking about ways you can use it in your own projects.

The CS5 CSS Starter Page Series Part 15: Lesson Plan for Teachers
Reader Level:

Now that we've completed the CS5 CSS Starter Page series, I would like to share my own lesson plans for incorporating the tutorials into a fifteen semester course. Join me as I give a class by class description of what I teach to my students at Montgomery College.

Introducing CMX JumpStart Lucknow
Reader Level:

With President Obama in India this week, it is a good time to offer a JumpStart based on an Indian city. Lucknow is the capital city of Uttar Pradesh in India, and is also now the latest CMX JumpStart, CMX JumpStart Lucknow.

The main construction of CMX JumpStart Lucknow consists of liquid outer DIVs, but fixed inner content widths. This ensures that the design fills out the user's browser width while still maintaining a good line reading length. There are styles for two or three column options that can be controlled from a single CSS file. The first tier tabbed navigation uses the popular Sliding Door technique, and the second tier navigation uses an unordered list for greater accessibility. Both navigation schemes provide for a current page marker. The optional third column includes a styled Spry Accordion widget. A version of the Lucknow logo is included as a multi-layered PNG that is fully editable.

(And if this is all still not enough for you, later in this article I will give you a bonus CSS3 style sheet. You'll be able to add gradients, rounded corners, box shadows, and RGBA color to enhance the design without the weight of extra images.)

Introducing CMX JumpStart Beijing
Reader Level:

The Vancouver Olympics are over, and we are left with only nostalgia. Let's add the 2008 Beijing Olympics to our memories as we contemplate the latest CMX JumpStart, CMX JumpStart Beijing.

Introducing CMX JumpStart Agra
Reader Level:

Maybe you haven't heard of Agra, India, but you most definitely have heard of its most famous building, the Taj Mahal. Agra is a popular tourist destination, and now it will be a particularly popular CMX JumpStart, CMX JumpStart Agra. Why? Because one page includes multiple layout possibilities.

CMX JumpStart Agra is a 900 pixel wide, fixed-width layout providing multiple column options that can be controlled from a single CSS file. While the top half of Agra remains constant, the lower three-column section can easily be modified from its default three columns to either a one or two column layout. The tabbed navigation uses the popular Sliding Door technique.

The JumpStart includes a main style sheet, a version six and below Internet Explorer style sheet, a version seven and above Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).

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

The CSS Starter Page Series Part 13: Designing with a Grid
Reader Level:

Wonderful as the CSS Starter Pages are, they are now a few years old. They are still invaluable as a starting point, but perhaps could benefit from a bit of sprucing up as we develop a site for the new decade 2010.

In this article, we'll expand the layout to the popular 960 pixel width that optimizes a site for the current lowest common denominator screen resolution of 1024 by 768. We'll use a grid to help us develop precise columns that divide the page into thirds. For fun, we'll then use the CSS3 property border-radius to make the design fancier without the weight of images.

The CSS Starter Page Series:
The CSS Starter Page Series - Part 1: Faux-Column Images
The CSS Starter Page Series - Part 2: More Background Images
The CSS Starter Page Series - Part 3: Three-Column Fluid Background Images
The CSS Starter Page Series - Part 4: Rounded Corner Background Images
The CSS Starter Page Series - Part 5: Shadows and Rounded Corner Background Images
The CSS Starter Page Series - Part 6A: Adding Navigation Schemes
The CSS Starter Page Series - Part 6B: Adding Navigation Schemes Part Two
The CSS Starter Page Series - Part 6C: Adding Navigation Schemes Part Three
The CSS Starter Page Series - Part 7: Adding a Spry Menu Bar
The CSS Starter Page Series - Part 8: Managing Content with Spry
The CSS Starter Page Series - Part 9: Working with the Conditional Comment
The CSS Starter Page Series - Part 10: Adding a Print Style Sheet
The CSS Starter Page Series - Part 11: Adding a Handheld Style Sheet
The CSS Starter Page Series - Part 12: Adding a jQuery Slideshow
The CSS Starter Page Series - Part 13: Designing with a Grid
The CSS Starter Page Series - Part 14: Designing with a CSS Table Grid
The CSS Starter Page Series - Part 15: Adding a Drop Cap with :first-letter

Decorating Lapland for the Holidays
Reader Level:

Can it be mid December already? The holiday season is in full force, and many of us are decorating, putting up trees, shopping online and in stores, and planning the holiday meal. We're decorating here at Community MX as well. In fact, this busy little CMX elf is decorating the latest JumpStart, CMX JumpStart Lapland. We are extremely pleased to offer this JumpStart as a free holiday gift to the entire online community. Put on the holiday music, and join me in this tutorial that guides you through modifying Lapland and decorating it for the holidays with a custom font from Font Squirrel.

The CMX JumpStart Catalog Update 2009
Reader Level:

Our last JumpStart Catalog was published in 2008, and of course we've released quite a few new JumpStarts since then. It's almost 2010(!), so it's definitely time to update and put all our JumpStarts more conveniently at your fingertips.

Hard as it is to believe, it is five years - almost to the day - since we published our first JumpStart, CMX JumpStart Paris, on Oct. 28, 2004. Long live the CMX JumpStart!

This catalog will start out by breaking down the JumpStarts into categories such as fixed-width, fluid, horizontal band, and number of columns. It will then list the special features that can be found in various JumpStarts, such as galleries, widgets, typography enhancements such as sIFR, Flash MP3 players, forms, and many more. Finally, we'll get to the actual catalog of every JumpStart we've published over the last five years. There will be a picture, a list of features, and links to the JumpStart itself, as well as the free article that describes it.

Introducing CMX JumpStart Black Forest
Reader Level:

Known for its highlands, scenery, and forests, the Black Forest in Germany is a popular center of tourism. When someone mentions Black Forest to me, however, I always think of the wonderful cake or waltzing by the beautiful Blue Danube. Now I am going to us all something else to think about, too, and that's the latest CMX JumpStart Black Forest.

CMX JumpStart Black Forest is a centered, two-column, fixed layout in the new wider width that many designers are now using. The tabbed navigation uses the popular Sliding Door technique. The header features a logo with the text placed on a circular path, and will make it easy to design an attractive logo for your site. The main content resides in the left column, and a Digg content sharing menu occupies the right column.

The JumpStart includes a main style sheet, an Internet Explorer style sheet, and a Design Time Style Sheet (in case your version of Dreamweaver makes the layout difficult to edit in Design View).

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

Introducing CMX JumpStart: Stelvio Pass - Gallery
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.

The Adobe BrowserLab Web Service
Reader Level:

For my students, the single most daunting aspect of putting together CSS layouts is the inconsistency in how browsers render pages. Many of you may have heard of, or have even used, services such as Browsercam (subscription) or Browsershots (free, but very public) to view your pages in browsers you don't have on your own system. Now Adobe has launched a public beta of its own diagnostic browser service, which it has named Adobe BrowserLab.

In this article you'll find out what you'll need to run BrowserLab, learn more about its features, and watch a sample page go through the BrowserLab paces.

Introducing CMX JumpStart Siberia
Reader Level:

It's almost summer, so don't make me think. You may have read the book by Steve Krug, a book about web usability, that uses this phrase as its title. If "don't make me think" is your philosophy, then you're going to love the latest JumpStart, CMX JumpStart Siberia. From its completely neutral color scheme that will easily adapt to any color choices you make, to its ready-made inclusion of the Spry Accordion Widget, to its brain dead method for switching from two to three column layouts, Siberia won't make you think, or certainly not much.

Introducing CMX JumpStart Isle of Skye
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.

Embedding Flash Content, Demystified - Part 1: Introduction
Reader Level:

There are numerous ways to embed Flash content in a web site, from Dreamweaver's Insert > Media menu (for SWF files, Flash Paper, FLV files, and more) to the publishing templates provided by the Flash authoring tool itself. In spite of these varied options — or perhaps because they're so varied — many people lack confidence when it comes to marrying Flash content with an HTML document.

If this strikes a chord with you, then lay your fears to rest. In this series, you'll cut through the complexity, find out what your application's auto-generated embedding code actually means, and learn to avoid a handful of common Flash-related pitfalls.

The Embedding Flash Content Demystified Series:
Embedding Flash Content Demystified - Part 1: Introduction
Embedding Flash Content Demystified - Part 2: The Traditional Approach
Embedding Flash Content Demystified - Part 3: Optional Parameters
Embedding Flash Content Demystified - Part 4: Optional Parameters Continued
Embedding Flash Content Demystified - Part 5: Optional Parameters Concluded
Embedding Flash Content Demystified - Part 6: Common Pitfalls
Embedding Flash Content Demystified - Part 7: Using JavaScript
Embedding Flash Content Demystified - Part 8: Using JavaScript (cont)
Embedding Flash Content Demystified - Part 9: Using JavaScript (concluded)

Introducing CMX JumpStart Landeck
Reader Level:

CMX JumpStart Landeck 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 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, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.

The Demise of Dreamweaver Has Been Greatly Exaggerated
Reader Level:

A recent article by Tom Arah at the PC Pro blog took a provocative stand, to say the least. In the article, I’m sorry but Dreamweaver is dying, Tom lays out an argument that static HTML pages are no longer a viable way to publish to the Web, and with their demise Dreamweaver may very well die right along with it. In its place he sees a place only for content management systems such as Drupal, Joomla, and WordPress. In a follow-on article, A nice chat with Adobe about Dreamweaver, he discusses his conclusions with Devin Fernandez, senior product manager for web products at Adobe. In the end, his opinion remains the same; Dreamweaver and the kind of static HTML it produces is a process that is due to fade away, undone by the rise of dynamic web publishing methods. He even goes so far in his conclusion to the first article to say:

"If you are a Dreamweaver user don’t bother upgrading to the latest version or exploring Adobe’s feeble attempts to graft end user content contribution onto Dreamweaver. Instead save your money and invest your time in getting to grips with the real future of web design: server-based content management systems."

Well. To say that I disagree with Mr. Arah would be a bit of an understatement as well. Let's take a look at some of his central arguments and see where he raises valid points and where his thinking goes off the rails.

Introducing CMX JumpStart Lima
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.

Preparing for the Adobe Certified Associates Exam for Web Design: Part 2
Reader Level:

Adobe Systems developed a new certification program beginning with Dreamweaver 8 that tested students' basic knowledge of the Dreamweaver work environment, the principles of page design, and the workflow methods that most web developers follow to produce a web site. The objective of the Adobe Certified Associate program is to allow students to demonstrate to prospective employers that they have the requisite skills to work as part of a web development team. (The ACA exam should not be confused with the Adobe Certified Expert (ACE) exam that demonstrates mastery of the software.)

To prepare for the exam, Adobe provides a complete listing of the exam objectives as well as free curriculum that instructors can use in their courses to prepare students for the examimation. What they don't provide are practice exams that students can take that are aligned to the course objectives. However, with the practice exam and answer sheet provided with this article you can get a preview of the kinds of questions that will appear on the exam. If you are an instructor you are free to use this exam in your course. If you are a student preparing to take the exam you can use the practice test you'll find here as a self-check on whether you have mastered the material covered in the exam objectives for the course.

Preparing for the Adobe Certified Associates Exam for Web Design: Part 1
Reader Level:

Adobe Systems developed a new certification program beginning with Dreamweaver 8 that tested students' basic knowledge of the Dreamweaver work environment, the principles of page design, and the workflow methods that most web developers follow to produce a web site. The objective of the Adobe Certified Associate program is to allow students to demonstrate to prospective employers that they have the requisite skills to work as part of a web development team. (The ACA exam should not be confused with the Adobe Certified Expert (ACE) exam that demonstrates mastery of the software.)

To prepare for the exam, Adobe provides a complete listing of the exam objectives as well as free curriculum that instructors can use in their courses to prepare students for the examimation. What they don't provide are practice exams that students can take that are aligned to the course objectives. However, with the practice exam and answer sheet provided with this article you can get a preview of the kinds of questions that will appear on the exam. If you are an instructor you are free to use this exam in your course. If you are a student preparing to take the exam you can use the practice test you'll find here as a self-check on whether you have mastered the material covered in the exam objectives for the course.

Introducing CMX JumpStart: The New Forest
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.

Introducing CMX JumpStart Nairobi
Reader Level:

Nairobi is the capital and largest city in Kenya. The latest U.S. election put focus on Kenya as the President-Elect, Barack Obama, had a Kenyan father. Nairobi is now one of the most important cities in Africa, and we think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts as well. Why? Because Nairobi is all about features and flexibility.

It's Goodbye and Good Riddance to .style1 in Dreamweaver CS4
Reader Level:

If you've been fooling around with web pages as long as I have, you've seen a real revolution when it comes to the methods that are used for styling pages. From the early abandonment of frame-based sites, to the more prevalent reliance on CSS-positioning versus table-based layouts that we see, these days there has been a constant change in the world of web site design.

Perhaps the last, really nasty throwback to earlier times was the way that Dreamweaver wrote styling information for text when the Properties inspector was used. Beginning in Dreamweaver MX, Macromedia moved away from the use of font tags (Yeah!) for styling text and moved towards a method that used CSS. But the truly ugly means they used to do this was to create, by default, numbered class rules named .style into the head of the document. Every time you styled text, even just a little, a new .style rule was created. Within minutes of the release of Dreamweaver the Web was awash in thousands of .style1's, .style2's, .style3's and so forth.

Introducing CMX JumpStart Tokyo
Reader Level:

Want a JumpStart where you need to modify only two graphics AND you can choose a two or three column version that you turn on with the flick of one class? Then welcome to CMX JumpStart Tokyo!

Tokyo is a centered, two-column or three-column, 770 pixel fixed-width layout that has many appealing design features. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The right column of the three-column version has a series of pods that can be used for "teaser text" with thumbnail images.

The Complete JumpStart Catalog 2008 Update
Reader Level:

You asked for it, and it's finally here: a massive update to the CMX JumpStart Complete Catalog. This catalog starts off with a rundown of all the types and features of our inventory of JumpStarts. It then lists each JumpStart in the order we released it, including a summary of its main features, along with an image to help you better visualize it. Each itemized JumpStart also includes links to both its subscriber article, as well as the free introductory article.

Introducing CMX JumpStart Prague
Reader Level:

It's that time again! CMX is proud to introduce our latest JumpStart design, CMX JumpStart Prague. CMX JumpStart: Prague is a two-column, centered, 770 pixel fixed-width layout that features rounded corners. Multiple wrappers, used in conjunction with faux column technique, maintain the integrity of the structure even upon text resize. Additionally, the JumpStart provides an attractive example of overlapping areas within a design. This JumpStart filters styles for various versions of Internet Explorer, and includes a separate style sheet to address navigation issues found in IE 5.01. Of course Prague meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

Introducing CMX JumpStart: The Lake District
Reader Level:

The Lake District in rural North West England is famous for its gorgeous scenery — and, of course, lakes. It is also associated with the poetry of William Wordsworth and the Lake Poets. It is to that region that we travel for our latest JumpStart design, CMX JumpStart The Lake District.

CMX JumpStart: The Lake District features an accessible split level navigation system. The main navigation is a series of tabs that uses the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and has rounded corners, as well as a decorative background image on the bottom that is reminiscent of CMX JumpStart North Pole. Both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 750px wide and utilizes subtle gradients on various page areas.

The color scheme of this layout was selected to make sure that the eye goes to the subject matter rather than the design. Thus, The Lake District is composed of black, gray, and white to help the images pop.

Dreamweaver CS4 Public Beta: Subversion Integration
Reader Level:

Dreamweaver is 10 years old, and Dreamweaver 10 (CS4) has been released as a public beta. Among the many new features is the integration with the Subversion source control and version control system. This has been a much requested feature over the years. With 10 releases in 10 years, it is hard to get major features into a program—the limited time spent on development and testing between releases leaves little room for transformations in functionality, but this is one good step towards turning Dreamweaver into a valid and productive coding environment.

Dreamweaver CS4 Public Beta: The Coding Improvements
Reader Level:

Like Sheri has been walking you through the features of the new Dreamweaver CS4 beta, I would like to show you some of the features that make me very happy! Since I do a lot of coding work, most of what impresses me is in the source code view. Let's dive right in to it!

Dreamweaver CS4 Public Beta: What's New? - Part 3
Reader Level:

By now you have probably downloaded the public beta of Dreamweaver Beta. I hope you have been playing with some of the new and/or modified features that I have been showing you in this series. Yesterday we explored Related Files and the Code Navigator, and today we will back up a bit and look at the new Dreamweaver Beta interface and workspaces. \

The Dreamweaver CS4 Public Beta Series:
Dreamweaver CS4 Public Beta: What's New? - Part 1
Dreamweaver CS4 Public Beta: What's New? - Part 2
Dreamweaver CS4 Public Beta: What's New? - Part 3

Dreamweaver CS4 Public Beta: What's New? - Part 2
Reader Level:

If you haven't already, head over to Adobe Labs and download the public beta of Dreamweaver CS4. Yesterday we explored some of the new CSS features, and today we will look at the Related Files and Code Navigator features, especially as they relate to CSS programming.

The Dreamweaver CS4 Public Beta Series:
Dreamweaver CS4 Public Beta: What's New? - Part 1
Dreamweaver CS4 Public Beta: What's New? - Part 2
Dreamweaver CS4 Public Beta: What's New? - Part 3

Dreamweaver CS4 Public Beta: What's New? - Part 1
Reader Level:

It's here - the public beta of Adobe Dreamweaver CS4 is available for immediate download at Adobe Labs. This week Community MX will help you sort out the major new features of the upcoming version of the best web authoring tool on the planet. Today you'll get a sneak peek at some of the new CSS tools and features.

The Dreamweaver CS4 Public Beta Series:
Dreamweaver CS4 Public Beta: What's New? - Part 1
Dreamweaver CS4 Public Beta: What's New? - Part 2
Dreamweaver CS4 Public Beta: What's New? - Part 3

Dreamweaver CS3 Code View
Reader Level:

The code view in Dreamweaver comes with its own tool bar on the left hand side. This tool bar contains some handy tools that makes working in the source code more efficient. Let's examine the tool bar and see what Dreamweaver's code view can do for you today!

Introducing CMX JumpStart Bordeaux
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.

Introducing CMX JumpStart Malé
Reader Level:

I grew up at the New Jersey shore, and spent my childhood playing in the surf and sand. I felt, and still feel, a bliss and peace there that I feel no where else in the world. So, when I first viewed Adrian Senior's latest JumpStart design, CMX JumpStart Malé, I was immediately smitten.

CMX JumpStart Malé, one of our most flexible JumpStarts to date, is a fixed-width two and three-column layout. You can show or hide the third column on a page-by-page basis, without having to delve into the code. The left column features a CSS based flyout menu that you can customize with as many levels as you need.

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

Introducing CMX JumpStart Sydney
Reader Level:

It has to be one of the most beautiful opera houses in the world: the Sydney Opera House in Sydney, Australia. Opulence, elegance, and grandeur all come to mind when viewing pictures of the architecture and the city. And now those very same qualities come to you in the latest JumpStart, CMX JumpStart Sydney. Indeed, the header includes an image of the Sydney Opera House under a night sky as the centerpiece of a tasteful and elegant page layout.

CMX JumpStart Sydney is a centered, fixed-width layout that features an absolutely positioned left column with menu system that drapes over the header and content regions. With its quiet color scheme and simplicity of layout, JumpStart Sydney wreaks of class.

Read on to find out what the Sydney package includes and to view a Sydney example modification.

Introducing CMX JumpStart Stirling
Reader Level:

CMX JumpStart Stirling, a centered, fixed-width layout with a header, is based upon the popular Playa Blanca JumpStart. However, it has some intriguing enhancements, the most notable of which is the use of descendant selectors to flip the design from a two-column layout to a three-column layout on a page-by-page basis. Stirling also positions the main structure in a different way than Playa Blanca in that all of the columns are floated to achieve the design layout. The navigation in the left hand column, on the other hand, is switched to an AP div for older versions of IE in order to enable the bleed into the main content area from the page marker. Of course Stirling meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.

Building a Reservation System From Discovery to Deployment - Part 2
Reader Level:

Making a reservation system is a complex task. This article series will walk you through the four D's of projects, Discovery, Design, Develop and Deploy.

This article is on the discovery and design process, a dialog between the decision makers and stakeholders to uncover what the project should entail and start to get the scope down as well as the first look at the SQL

The Building a Reservation System Series:
Building a Reservation System From Discovery to Deployment - Part 1
Building a Reservation System From Discovery to Deployment - Part 2
Buildiing a Reservation System from Discovery to Deployment - Part 3
Building a Reservation System - From Discovery to Deployment - Part 4

Pods
Reader Level:

Pods. I love pods. I use them everywhere. No, I'm not talking about the people from Invasion of the Body Snatchers. I'm talking about the little sidebar items and functional includes that show up on so many sites these days. They are huge in blogs, with pods that supply search boxes, rss feeds, blogrolls, and Amazon links. What exactly is a pod and how do you use it? This article will describe the concept, which can be applied to HTML, ColdFusion, PHP, ASP, or any other type of page.

Building a Reservation System - From Discovery to Deployment: Part 1
Reader Level:

Making a reservation system is a complex task. This article series will walk you through the four D's of projects, Discovery, Design, Develop and Deploy.

This article is on the discovery process, a dialog between the decision makers and stakeholders to uncover what the project should entail and start to get the scope down.

The Building a Reservation System Series:
Building a Reservation System From Discovery to Deployment - Part 1
Building a Reservation System From Discovery to Deployment - Part 2
Buildiing a Reservation System from Discovery to Deployment - Part 3
Building a Reservation System - From Discovery to Deployment - Part 4

Using File Comparison for Team Environments
Reader Level:

Working in the Dreamweaver environment with a team is not as easy as in some other applications, even though integration is provided for some common team applications, like SourceSafe, with extensions available for CVS and other systems. Also, Dreamweaver contains built-in tools for Check-in and Check-out, however these are very limited and leave little file scraps all over the server. I've found the best method for a small team is to simply use Beyond Compare or other file comparison program to maintain the site. The beauty of this system is that you don't have to use a specific tool to edit your files -- you can open up Notepad and make a change, if that is your tool of choice. The file comparison program will always give you the accurate view of what has changed in the file.

Basics: Top Ten Rules for Site and File Structure
Reader Level:

What is a good site structure? Different web developers use different site structures and have varying opinions about this, but I will show some rules for a simple structure that I use and have found to be quite simple to maintain. Maintenance is a concern on a large site, but having a good folder/file structure can make it pretty simple to keep track of where things are. I will list 10 rules I use when building a site, in no particular order.

Introducing CMX JumpStart: Playa Blanca
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.

Dreamweaver Report - Recently Modified
Reader Level:

Dreamweaver includes several reports under the Site menu option. The report on last modified files shows all of the files in the selected group which have been modified by the selected time frame. With this report you can figure out what files have been modified and when. Useful when you need to figure out what changes were just made and you need to examine them over again.

Introducing CMX JumpStart Madrid
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.

Dreamweaver's Accessibility Preferences
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.

Introducing CMX JumpStart Palm Springs
Reader Level:

Palm Springs, California, a desert city that is about 110 miles east of Los Angeles, is home to some of the most famous golf courses in the country. With that in mind, we have a new JumpStart that should especially appeal to all the golf fans among us. Welcome to CMX JumpStart Palm Springs!

Palm Springs is a three-column, fixed-width layout that includes a dual navigation system. The main navigation consists of horizontal tabs at the top of the design, and vertical sub navigation buttons in the left column. The design also features pre-prepared login and subscribe form layout elements. As with all the CMX JumpStarts, Palm Springs meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.

Optimize Images in Dreamweaver
Reader Level:

You are in Dreamweaver, working hard and heavy in the page and you insert an image that is the wrong size - what do you do?

• Load Fireworks?
• Load Photoshop?
• Change the size in the properties panel?

Nope, none of those - you optimize the image in Dreamweaver.

The Dreamweaver Web Standards Lesson Plan Series - Part Eleven
Reader Level:

Beware the Properties Inspector. It is after you create your CSS based layout and then troubleshoot and validate its code that your vigilance should really begin. When you start adding content, whether as images, text, or from Word and Excel documents, you can lose that clean code and introduce deprecated elements into the page.

In this article, you will learn what to use and what to avoid on the Properties Inspector when it is set to format text, images, or tables. You will learn the meaning of deprecated elements and attributes, why you should avoid formatting text with the Properties Inspector, and when deprecated code might cause validation to fail. You will also learn about the CSS problem of the cellspacing attribute, the use of target="_blank", and some legacy buttons such as "Low Source" on the Properties Inspector.

The Dreamweaver Web Standards Lesson Plan Series:
The Dreamweaver Web Standards Lesson Plan Series - Part 1
The Dreamweaver Web Standards Lesson Plan Series - Part 2
The Dreamweaver Web Standards Lesson Plan Series - Part 3
The Dreamweaver Web Standards Lesson Plan Series - Part 4
The Dreamweaver Web Standards Lesson Plan Series - Part 5
The Dreamweaver Web Standards Lesson Plan Series - Part 6
The Dreamweaver Web Standards Lesson Plan Series - Part 7
The Dreamweaver Web Standards Lesson Plan Series - Part 8
The Dreamweaver Web Standards Lesson Plan Series - Part 9
The Dreamweaver Web Standards Lesson Plan Series - Part 10
The Dreamweaver Web Standards Lesson Plan Series - Part 11
The Dreamweaver Web Standards Lesson Plan Series - Part 12
The Dreamweaver Web Standards Lesson Plan Series - Part 13
The Dreamweaver Web Standards Lesson Plan Series - Part 14 Coming Soon

Introducing CMX JumpStart Washington, D.C.
Reader Level:

Washington, D.C. is, of course, significant for being the capital of the United States, but it has also been my "hometown" since I was seventeen years old. I have lived in the city or one of its suburbs for all of my adult life. It is with the greatest pleasure, therefore, that I introduce the newest JumpStart, designed and coded by Adrian Senior, CMX JumpStart Washington, D.C.

Washington, D.C. is a two-column, fixed-width design that employs a horizontal band method for the header and footer areas. It has a main navigation level that uses the popular tabbed sliding doors technique. CSS based buttons on the left form the secondary navigation. Washington, D.C. meets the standards for CSS, XHTML and Accessibility, thus ensuring that you have a good solid layout on which to base a client site.

The PHP Insert Bar Explained
Reader Level:

The PHP Insert bar is a collection of commonly used programming features in PHP. The collection is used to insert a snippet of PHP code in the page and relies upon you to complete the variable information. We will walk through each of the icons on this bar and detail what it does and how to make it complete for your purposes.

Playing Nice with Dreamweaver -- Making Code and Design View More Useful
Reader Level:

Dreamweaver, as a visual tool and a coding tool, has achieved status as the premier development tool for the web—not only for static HTML pages, but for dynamic pages in ASP, JSP, ColdFusion, PHP, and ASP.NET. One of the reasons is the combination of design view with code view, and the fairly accurate representation in design view of your page. It's not a WYSIWYG program, but design view does present a very close approximation of WYSIWYG.

The time when DW does not accurately represent a page is usually when there is some server-side code involved. This article will show a few ways to make your server code "play nice" with Dreamweaver, while not sacrificing quality of coding. I will show examples in various server languages, but the examples are only meant to illustrate the concepts. This article should apply equally to all server models.

TODCon 9 Session - Tabbed Content Switching Using JavaScript & AJAX Techniques
Reader Level:

The download file for this article contains my PowerPoint presentation from the TODCon session on Tabbed content switching using JavaScript & AJAX techniques. The content includes a RSS feed, both local and remote, and AJAX content, both on demand and continually updated. Utilizes the Spry framework from Adobe Labs.

Spry Table
Reader Level:

Adobe has created a great and easy to use AJAX framework in Spry. The integration into Dreamweaver CS3 makes creating Ajax based web pages a breeze. Keep in mind that you don't have to have Dreamweaver CS3 to utilize this framework, but it helps.

In our Spry XML Series we have taken a look at the various methods to grab and populate XML data from both a static and dynamic XML dataset. To finish off the series we will take a look at the Spry Table which allows us to display tabular data, sort the data and format even/odd rows, hover and selection effects with CSS integration.

The Spry XML Series:
Spry XML Data Set
Spry Region and Repeat
Spry Repeat List
Spry Table

Spry Repeat List
Reader Level:

So far in our series on Spry (the Ajax Framework), we have taken a look at how to build a Spry XML Data Set and publish the results to a web page using Dreamweaver CS3. Although it is not required to have Dreamweaver CS3 to utilize the Spry Framework, it definitely makes it much easier.

We will continue to look at another subset of the Spry toolbar when it comes to repeating XML data in a list. Spry Repeat List gives us an option to specify our Spry Data Set and output the contents we want repeated within an unordered list, an ordered list, a definition list or a select.

The Spry XML Series:
Spry XML Data Set
Spry Region and Repeat
Spry Repeat List
Spry Table

Introducing CMX JumpStart Tahoe
Reader Level:

If you've been around a while, you may remember the CMX JumpStart Vegas that was released in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber. As one of our most popular JumpStarts, it inspired some CMX subscribers to request a fluid version of this fixed-width design. Zoe Gillenwater, one of our great CSS gurus, happily complied with our newest CMX JumpStart Tahoe, a JumpStart modification. Tahoe, like Vegas, is located in Nevada, and because it shares many of the same kinds of entertainment centers, seems like a fitting city for a permutation of the Vegas design. And Tahoe has one thing that Vegas doesn't - the beautiful Lake Tahoe that gives literal meaning to the tagline in the Tahoe JumpStart: "Like Vegas, only fluid."

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. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.

Spry XML Data Set
Reader Level:

With all the development buzz around AJAX (Asynchronous JavaScript and XML) to provide a rich interface to your web sites, Adobe has injected its Spry Framework into the next version of Dreamweaver CS3. In fact Spry now has an actual toolbar that allows you to drag, drop and wire up Spry widgets into your next web project with little knowledge of what is actually going on behind the scenes. Since XML (Extensible Markup Language) makes up one of the functional pieces of the Spry framework we will start off by taking a look at how to use the Spry XML Data Set.

The Spry XML Series:
Spry XML Data Set
Spry Region and Repeat
Spry Repeat List
Spry Table

Dreamweaver CS3 - CSS Management
Reader Level:

We have all been awaiting the new Adobe CS3 products to come out, especially that of Dreamweaver CS3. There have been a lot of great improvements with this latest version in terms of Cascading Style Sheet management. Not to say that Dreamweaver 8 didn't display CSS particularly well, but we all know it had its shortcomings. However this newest version implements some great design flow tools when it comes to how most developers work with CSS.

We will be taking a look at converting inline styles to a CSS rule, reordering CSS rules and finally how to move embedded styles to an external style sheet all from the CSS Styles Panel or context menu.

Spry Tabbed Panels
Reader Level:

The release of Dreamweaver CS3 saw the integration of the new Spry widgets, in this article we will look at the Spry Tabbed Panels. We will look at how we can action and edit the widgets and see just how easy they are to edit and build on.

Introducing CMX JumpStart Detroit
Reader Level:

We are pleased to introduce our latest CMX JumpStart: Detroit. Created by Adrian "JoJo" Senior, it has all the trademarks of his designs: clean with no-fuss CSS, easy to modify, and always professional looking. This two-column, centered, fixed-width layout includes a shadowed, tapering background image on the main column that gives the effect of a raised platform for the content. Like all JumpStarts, Detroit uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines.

CS3 Sneak Preview: Device Central
Reader Level:

Integrated with Dreamweaver CS3 as well as throughout the family of Creative Suite 3 software, Adobe Device Central simplifies the creation of mobile content with built-in mobile device skins and regularly updated device profiles. Besides the ability to quickly access essential technical specifications for each device, Adobe Device Central displays HTML content and allows you to scroll using the buttons on the device. The Small Screen Rendering (SSR) mode will shrink the text and images to show accurate rendering as it would appear on the device. Now you can easily design, preview, and test engaging mobile content and rich user interfaces.

CS3 Sneak Preview: The CSS Panel
Reader Level:

Not everyone can create the right CSS rules, in the right place, on the first try. To get things right, it’s often necessary to move, rename, or otherwise change the structure of your CSS. Additionally, many people like to introduce CSS changes incrementally to a site, first by getting the CSS working on a single page, and then working on the entire site. Others prefer to step back further and get the CSS working on a single element before trying to make it work for a whole page. The Manage CSS feature makes it easier for you to move CSS rules from document to document, from the head of a document to an external sheet, between external CSS files, and more. You can also convert inline CSS to CSS rules, and place them where you need them—just by dragging and dropping.

The Mobile Internet - Part 5: Sniffing for Operating Systems
Reader Level:

In this article we look at some of the problems we have come up against and investigate how we can check the UA string to send our users to the correct site version based on whether they are using a desktop operating system or not.

The Mobile Internet Series:
The Mobile Internet - Part 1: An Introduction
The Mobile Internet - Part 2: Image Display & Filtering
The Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
The Mobile Internet - Part 4: Text Elements
The Mobile Internet - Part 5: Sniffing for Operating Systems

Putting the Sting into the CMX San Francisco JumpStart
Reader Level:

I was recently contacted by a small, family run business who wished to update their website. They wanted to make some content changes and have the overall look of the site be more contemporary. Being a small business, their budget was limited as well. I took on the project, thinking that a CMX JumpStart would be the perfect solution.

I see many questions on our forums about the CMX JumpStarts and how to make them work for one's own specific needs. As you may be aware, the JumpStarts are designed and tested to work based on specific layout concepts - that's why we have so many and continue to create more.

But I'd like to share with you my own personal experience in customizing one of our recent JumpStarts: San Francisco. San Francisco is based on Gordon Mackay's CMX Design Element: Gold PNG file. My customizations include:

Fireworks PNG

• Color alterations
• Changing dimensions of the background image for the innerwrapper div
• Altering export format of slices

CSS

• Adjusting rules to change the position of the navigation
• Adding a custom bullet image
• Creating a secondary modified style sheet and web page for a pop up window requirement.

So what are you waiting for? Hop on that trolley and follow me from San Francisco to Sooke, British Columbia.

CMX JumpStart: Kansas City
Reader Level:

Welcome to the next design in the CMX JumpStarts series, Kansas City, located in the wide, open great plains of the U.S.

The Kansas City JumpStart is a two-column design based on Zoe Gillenwater’s Horizontal Band Layout. The content is centered and fixed-width. The bands of color behind the header, footer, and main navigation bar stretch across the entire browser giving the design a wide, open feeling. Much like driving through the miles and miles of wheat fields in Kansas.



As with all of our JumpStarts, Kansas City can be used in any way you wish, commercial or personal, and includes several tutorials, an extension, and source PNG.

Kansas City is structured to be as hack-free and straightforward as possible. So, if you've been looking for a smooth transition into using CSS for positioning as well as aesthetics, this may be just the JumpStart for you.



Kansas City comes with a starter page and a nicely styled form page. Of course, both use valid XHTML 1.0 Transitional and CSS 2 markup and follow WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Using Background Images in a Horizontal Band Design
Reader Level:

Zoe's part two of the Horizontal Band Layout series describes ways to set additional background images on various areas of the design. While Heidi Bautista's JumpStart Kansas City focuses on the layout that Zoe described in part one of her series, the design that I created as the companion site for the Graphic Design for the Web class that I am now teaching focuses on the techniques in part two. Taken together, these two free articles that we're offering on the day that Community MX reaches its second grand milestone should give you plenty of ideas about how to capitalize on the horizontal band layout technique.

The CMX Mobile Device Reference Resource
Reader Level:

Information in general on CSS support for mobile browsers is scarce, often such browsers do not look for handheld media types and instead use the screen CSS to display the target page. The goal of the the CMX Mobile Device Reference Resource is to build an accurate resource for information on handheld devices. You will be able to search devices by: Manufacturer, Model names/numbers, Browser types and User Agent Strings. You can also check for CSS support, linked handheld and screen media, @import handheld and screen media and CSS 3s content switching support.

The Mobile Internet - Part 1: An Introduction
Reader Level:

In this article you will look at some of the problems that we can expect when designing for mobile devices. You will see some of the common viewing options that are available and how different handheld browsers cope with different situations.

In Part 2 of this series we will begin to complete some practical work and look at how we can overcome problems that we might meet in the small screen world of mobile browsing.

The Mobile Internet Series:
The Mobile Internet - Part 1: An Introduction
The Mobile Internet - Part 2: Image Display & Filtering
The Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
The Mobile Internet - Part 4: Text Elements
The Mobile Internet - Part 5: Sniffing for Operating Systems

The Complete JumpStart Catalog Update
Reader Level:

We now have 20 JumpStarts and are still counting. For anyone who has ever agonized over which to use for a current project, this article is for you. Updated from an article we released a year ago, the newly expanded and refreshed catalog should help you make the tough decisions about which layout and features will work for your latest client's site.

Modify Dreamweaver to Create a Default Style Sheet
Reader Level:

When you work with CSS as much as I do, you find that there are certain rules that you use over and over again across your sites. Instead of writing them out in each sheet every time, you can save them as Dreamweaver snippets that you can insert into each new sheet you create. However, an even faster way to get all your standard CSS rules into your style sheet is to have them already in there as soon as you create a new style sheet in Dreamweaver. You can make this happen by editing the default style sheet file that Dreamweaver loads.

In this tutorial you'll learn how to locate and edit Dreamweaver's default style sheet. You'll also get recommendations on rules to put in your customized default style sheet, helping you learn how to optimize your workflow and manage your CSS effectively.

Editable Select Lists Using CMX AutoComplete
Reader Level:

One of the most surprising aspects of HTML forms is that there is no way to natively create an editable select list. Developers are forced to either present a fixed value list for the user to choose from, or provide an additional text box to allow the user to enter a new value. Fortunately with a bit of help from the latest version of the CMX Auto Complete Extension we can finally solve this problem quite easily!

Converting the Santorini JumpStart to Use Two Columns Instead of Three
Reader Level:

The Santorini JumpStart - 18th in our ongoing series - provides you with a simple 3-column fluid layout. But what if you wanted just two columns? No problem. This article shows you exactly what you need to change. And it's only three things! Isn't it nice when things are simple for a change? That's the whole idea behind our JumpStarts. If Santorini doesn't meet your needs, be sure to check out our other designs.

Using Snippets Effectively in Dreamweaver 8
Reader Level:

This article builds on the introduction to snippets in Exploring the Snippets Panel in Dreamweaver by Bill Horvath. Although that article was written before the release of Dreamweaver 8, the Snippets panel remain largely unchanged, and snippets are still incredibly useful, time-saving development tools. If you've never used snippets before, please read Bill's previous article before this one. If you have used snippets, but want to learn more ways to put them to use in your development process, read this article to learn how to create your own snippets, organize them, insert them into your pages, back them up, and share them with other Dreamweaver users.

CMX JumpStarts: Santorini
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
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
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.

Jotforms: Free and Easy Forms for Your Site
Reader Level:

For some of us, the task of getting even the simplest forms developed and online can be more of a chore than we're prepare rd to face. Perhaps you just don't fully grasp, or want to learn, all the steps required to connect to a database or to tweak free scripts to get an online form prepared for user entry. Maybe you work in an organization where the job of getting databases created and configured and accessible is handled by someone else, and you can't get things done in a timely manner. Or perhaps you just want to toss up a quick online form for casual purposes like a quickie poll or registration page. For example, a form that allows your friends to sign up for the next potluck dinner and indicate what they're going to bring.

Whatever the barrier you may have faced in the past to getting forms online, there's a new service available that can take much of the work out of the job. Best of all, it's free, easy to use, and quite flexible.

Introducing CMX Jumpstart Greenville
Reader Level:

The name Greenville 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.

JavaScript Dissecting - Automatic Shipping Address Code
Reader Level:

Dissecting a JavaScript function to find out how it does all the things it does! This article takes apart the JavaScript function from the Automatic Shipping Address article and details its inner most secrets.

Realtime Searching with CMX Table Sorter
Reader Level:

The CMX Table Sorter extension allows you to give your users the ability to sort any HTML table in both ascending and descending order in realtime, without the need to reload the page (or even the table) from the remote server. The latest version of this extension goes one step further though and allows you to perform realtime searches on tabular data, giving users the ability to reorganize the entire table to more quickly and effectively find what they're looking for. In this article we'll take a look at how this new "tabular search" feature works, and just how easy it is to implement on your own web pages.

Introducing CMX Jumpstart Orlando
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
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.

What I Learned at TODCon 8
Reader Level:

I've had a few days to reflect on the things that I took away from the latest rendition of The Other Dreamweaver Conference, aka TODCon, and it looks like we're heading into a period of new innovations, uncertainty, and great potential on the web. If you're an independent web developer new revenue streams are opening up for you, and more decisions than ever have to be made on where you might want to take your business. Even if you aren't working for yourself, there are enough trends and changes heading your way that now is a good time to sit up and take notice.

In this article, I've summarized what I see are the emerging trends, interesting developments, and other factoids gleaned from the sessions, hallway conversations, and late night conversations that define TODCon.

A Dreamweaver 8.0.2 Updater
Reader Level:

Last week before heading off to TODCON I did my due diligence and installed the Dreamweaver 8.0.2 updater. Later that evening one of the partners for whom I had done a video tutorial asked me where I had put it. Turns out I thought she was finished with it and I had pulled it down. Being the great guy that I am, I opened Dreamweaver and used the Put feature of the Dreamweaver 8 Files panel to upload it. This is where things get interesting.

Beating Spam On Your Contact Forms
Reader Level:

In this article we will look at how we can use a very simple method to beat the spam form scripts that populate and submit our forms.

Precisely Positioning div Tags in Your Page From Design View
Reader Level:

Not everybody likes working in code view, indeed I would guess that many folks purchase Dreamweaver just so they don't have to work in code view.

In this article we will look at how you can insert div tags into your code, precisely. We will do this from Dreamweaver's design view by making good use of the insert div tag function that can be found on the insert bar.

Importing Tabular Data Into Dreamweaver
Reader Level:

In this article we will look at how we can import tabular data from an external source file such as a csv file and lay it out in Dreamweaver's design view. We will achieve this by using the Tabular Data option from the Layout tab of the Insert bar.

Introducing CMX JumpStart Modifications
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.

Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
Reader Level:

Community MX is pleased to announce the release of a modified Paris 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: Playacar 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

Approximate download size: 9.3MB

Introducing CMX Jumpstart Minneapolis
Reader Level:

What city has the biggest shopping mall in America? What city has a full-sized theme park inside its mall? What city is one of the most popular destinations for shopping-based vacations in the United States? Why, Minneapolis, Minnesota, of course! Home to the Mall of America, tourists flock there to shop till they drop. But there is one bigger mall in America, and indeed the world, and that is the Mall of the World Wide Web. More and more people do their shopping there, and eCommerce is hotter than ever. When we were planning our next JumpStart, we decided to do something a little different, a little out of the ordinary. We decided to do an eCommerce template and call it CommunityMX JumpStart Minneapolis.

Designed and coded by Gordon Mackay, Minneapolis is a fluid, three-column design with hidden layers. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Minneapolis also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

JumpStart Comparison Chart
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.

Investigating Drag-and-Drop For Use in Content Managements Systems: Part 2
Reader Level:

Clients continually ask for more and more control over their sites, whether they need it, or whether they will actually ever exercise that control. This is one reason why Content Management Systems (CMS) can work so well for many customers. Mostly they want to edit the content of a particular page, or to add a new item to their shopping cart. But occasionally they also want to change the order of the menu items, or move the news section around, above the main content one week, and the next at the bottom of the menu column. Most CMS applications can handle the content portion of things very well, but few readily accommodate layout changes. In fact, quite a few CMS impose their own layout (albeit with several templates to choose from) on a site when they are implemented.

So how do you handle client requests when they want to be able to change the ordering and even positioning of content on their pages? This series of articles will investigate using drag and drop scripts to allow you to implement some pretty sophisticated content management. Along the way you'll learn how to implement changing the order for a list, be it menu bars (vertical and horizontal) or categories of products, as well as user changeable content areas which can be moved from one area to another within your overall design.

The first part in the series showed how to apply a drag and drop mechanism to a list of categories so that the order of the categories displayed can be modified by your end user using ColdFusion, PHP or ASP-VBScript. The second part covers using drag and drop to allow the mvoing of content areas, such as a blog or featured product section, around the page into one of three "live" columns. This part covers more of a theoretical approach on how to apply the drag and drop from column to column and does not handle the persistance of the user's selections into a database or other means.

A completed set of files for ColdFusion are included in the support files for this article.

The Drag-and-Drop Series:
Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
Investigating Drag-and-Drop For Use in Content Management Systems: Part 2

Using the Default Documents to Speed Up Your Work Flow
Reader Level:

Have you wished for ways to speed up your workflow? Do you want more ideas for removing repetitive coding tasks? In this article we will look at using the Edit Document Templates extension (by Danilo Celic) to customise the New Document Templates. Talk about a Dreamweaver time-saver!

Alpha Video and HTML: How did they do that?
Reader Level:

Flash Video containing an Alpha channel can be used to intereact with your web pages. It is surprisingly easy to do.

Redesigning the Inverness JumpStart
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.

Redesigning the Inverness JumpStart
Reader Level:

Our JumpStarts are designed to be easy to rebrand with your own unique look. To show you what it takes to create a unique design from a JumpStart, I've redesigned the Inverness JumpStart by modifying the PNG and changing a few lines of CSS.

Introducing CMX Jumpstart Inverness
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.

The Complete JumpStart Catalog
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.

PHP and the Filesystem Part 1: Directories
Reader Level:

PHP provides a wide variety of ways to work with the filesystem of the server upon which it is running. In the first part of this article, Directories, we'll explore how to work with, manipulate, and access directory structures from within a PHP script.

The PHP and the Filesystem Series:
PHP and the Filesystem - Part 1: Directories
PHP and the Filesystem - Part 2: Basic File Control
PHP and the Filesystem - Part 3: File Contents

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
Reader Level:

In this final article in the series documenting the creation of my personal web site, you'll see how I used CSS to style the content of my XHTML page to match my design comp. This included styling a list to look like a navigation menu, formatting links and other text, and using sIFR to replace the text in my headings with beautiful Flash-generated text. You'll also see how I created a print style sheet, plus learn how I tested and debugged my page.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Introducing CMX JumpStart Cairo
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.

Structured Forms using CMX AJAX Form Submit
Reader Level:

One of the biggest problems with conventional HTML forms is that they can only send "flat data" to the webserver; HTML provides several ways to add structure to your form, but once the form is submitted the structure of the information is lost. If you're using the CMX AJAX Form Submit extension to handle your forms though you can now overcome this limitation, and in doing so better prepare yourself for the next generation of web forms. In this article we'll explore what "flat data" is, why it's a problem, and some of the benefits of "structured forms" from both a user and developer point of view.

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
Reader Level:

In the last article of this series documenting the construction of my personal site, you saw how I sliced my Fireworks design comp into individual graphics. These slices were tailored for a page built using semantic XHTML and clean CSS. In this article, you'll see how I built the structure for my site's home page using divs and semantic XHTML markup. Also, I'll show how I used CSS to lay out these divs into the visual structure I designed in my Fireworks comp.

The CSS Web Design Case Study Series:
A CSS Web Design Case Study: Constructing a Personal Site - Planning
A CSS Web Design Case Study: Constructing a Personal Site - Visualizing the Design
CSS Web Design Case Study: Constructing a Personal Site - Design Comp Construction
A CSS Web Design Case Study: Constructing a Personal Site - Slicing the Comp
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 1
A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2

Introducing CMX Jumpstart Traverse City
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.

Using the MM:If Custom Control on ASP.NET pages
Reader Level:

The <MM:If> custom control included in DreamweaverCtrls.dll is handy when you need a quick and dirty way to show/hide a section of your page. It has limitations, which we'll get into, but on the positive side, it's very easy to use. This article discusses how to use the <MM:If> control, where it works well and where it fails, and how the <asp:Panel> control can be used when the <MM:If> is unsuitable.

Comparing Files in Dreamweaver 8
Reader Level:

Comparing a pair of files to check for differences is a task most designers and developers face at some point. Prior to Dreamweaver 8, this task had to be performed outside of the Dreamweaver environment. Macromedia has simplified this job by allowing us to launch a file comparison tool from within Dreamweaver. Now we can compare a local file against the remote version; or compare two local files or two remote files. It'll even display a warning message if you attempt to put a file to the remote server and it has changed since you last put it.

Teaching Dreamweaver Part 2
Reader Level:

Part two of my Dreamweaver course series is devoted to how I teach students to create database-driven web pages and web applications. During the course of the semester we put together a form that is processed by a script, a login system based on access level that uses Dreamweaver's Authentication Server Behaviors, and a blog as introduced in a tutorial by Tom Muck. In the process, the students learn the basics of the various skills they'll use: form construction, SQL, database and web application design, and server model concepts.

Teaching Dreamweaver the Web Standards Way
Reader Level:

I have been teaching Dreamweaver in various training venues since version 2. Each new upgrade adds more features and makes my job more complex. How does a teacher help beginners make sense of an increasingly overwhelming interface that includes seemingly endless choices? My syllabus has changed a lot over the years, and this is what I have learned: pare the syllabus to the absolute essentials. Subtract, do not add. Aim for elegant simplicity. Focus on Web Standards. This article gives teachers a syllabus they can use to help their beginning students learn Dreamweaver within the framework of Web Standards.

Introducing CMX Jumpstart Machu Picchu
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.

Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
Reader Level:

Clients continually ask for more and more control over their sites, whether they need it, or whether they will actually ever exercise that control. This is one reason why Content Management Systems (CMS) can work so well for many customers. Mostly they want to edit the content of a particular page, or to add a new item to their shopping cart. But occasionally they also want to change the order of the menu items, or move the news section around, above the main content one week, and the next at the bottom of the menu column. Most CMS applications can handle the content portion of things very well, but few readily accommodate layout changes. In fact, quite a few CMS impose their own layout (albeit with several templates to choose from) on a site when they are implemented.

The first part in the series shows how to apply a drag and drop mechanism to a list of categories in Dreamweaver so that the order of the categories displayed can be modified by your end user. The pages created from the steps outlined in this part of the series can be performs for ColdFusion, PHP, and ASP-VBScript pages.

The Drag-and-Drop Series:
Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
Investigating Drag-and-Drop For Use in Content Management Systems: Part 2

Creating the Print Style Sheet for Vienna: Part Two
Reader Level:

In Part One of this series we explored reasons why we might want to include a print style sheet in our web pages. We especially focused on the problems many browsers have with printing out CSS layouts unless we make changes to floats and any positioning other than static. We looked at the various ways to attach a print style sheet, and we reconstructed Vienna's print style sheet. Now we'll look at some of the paged media properties in the CSS2 specifications that, if better supported, could provide almost as much sophisticated control as there is in print production. Next we'll look at creating page breaks and solving margin problems. And finally, we'll look at generated content in general, and especially focus on the attr() function that enables us to automatically print full URLs after link text by using the content property in conjunction with the :after pseudo class.

The CSS Styles Panel in Dreamweaver 8: A Sneak Peek
Reader Level:

One of the great new CSS tools in Dreamweaver 8 is the new, unified CSS Styles panel. All style information for all the elements on your pages is stored in this one central location. As with previous versions of Dreamweaver, you can use the panel to create, view, edit and remove style rules, as well as attach style sheets. Now, however, properties are laid out in a grid for easy editing, and the cascade for all your rules is displayed for you, to help you understand how each rule is affecting your page. You can select any element on your page and instantly see what rules are affecting it and what properties have been set for it. The CSS Styles panel provides the ease of use for those new to CSS, with a depth of information that advanced CSS users will appreciate.

Dreamweaver 8 Style Rendering Toolbar - A Sneak Peek
Reader Level:

Dreamweaver 8 has a very interesting and very cool new feature, the Style Rendering tool bar. The style rendering toolbar allows you to easily design for various media types, such as screen, handheld and print which we will look at in this preview. Other media types that are catered for are Projection, TTY - Television Type Devices, and TV media types. Dreamweaver 8 also provides the ability to toggle on and off all CSS rendering via the toggle CSS display button.

Redesigning the Vienna JumpStart
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. :-)

Redesigning the Vienna JumpStart
Reader Level:

One of the great features of the CMX JumpStarts, from a design standpoint, is their flexibility. With Vienna, I thought I would show just how flexible the PNG file can be, without making any major changes to the slices used in the page design and CSS. I took the Vienna and changed it to Canadian Cottage Country. Specifically, I revised the design for a fictitious Bed and Breakfast business in the Muskokas. I spend as much time as I can in that region and its eastern counterpart, the Haliburtan Highlands. So needless to say, I have many photos from the area. In fact, the hardest part for me was narrowing down which photos to use!

Introducing JumpStart Vienna
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
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.

Using the ASP.NET Insert Record Server Behavior - Part 2
Reader Level:

This article picks up where Part 1 left off. You'll get a better understanding of how to use the Insert Record server behavior with datatypes other than just strings and you'll learn how to add the necessary modifications to the MM:Insert tag so that it handles the ASP.NET validators that have been added to the form. The sample pages are provided in C# and VB.NET.

Introducing Jumpstart Vegas
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.

Using the ASP.NET Insert Record Server Behavior - Part 1
Reader Level:

This article shows you how to use the Insert Record server behavior to take data collected with a form and insert it into a table in a SQL Server database. It's fast and easy. You're likely to spend more time styling the form than doing the coding!

Introducing CMX Jumpstart New Orleans
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.

Passing Data Between Dreamweaver Commands
Reader Level:

Recently, I discussed a concept that I call a Pass through Object in another article here at Community MX. One of the concepts covered was passing some data to a Command, so that that Command could do some processing based upon what was passed in. This article will carry on with this concept and expand upon it to cover passing data to Commands and how to return data back to the calling extension once the processing by the Command is completed.

PHP Site Simplification with Application.php
Reader Level:

PHP and ColdFusion have many things in common, but they also have many differences. One of the nice features of ColdFusion that I wish I had in PHP is the Application.cfm. In the Application.cfm file, you can include things that need to be on every page, such as variables that contain connection information, often-used functions, login functionality, class instantiation, session starting, and form field cleaning, among other things. In ColdFusion, the Application.php file is automatically executed before any code on your page. To mimic this functionality in PHP, I like to create an Application.php file that I include on all my PHP pages. This article will show how an Application.php file can be used to simplify some aspects of your PHP application.

JumpStart Venice: An Introduction
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
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.

Run Dreamweaver on Linux
Reader Level:

Will Macromedia ever release Linux-native versions of its Studio MX applications? Who knows? Meanwhile, if you want to try Linux but don't want to leave Dreamweaver behind, this article will show you how to get your favorite web editor up and running on Linux, with CodeWeavers CrossOver Office.

Announcing CMX JumpStart: Liverpool
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.

Using Source Code Management Software: Part 4
Reader Level:

This is the fourth article in our series on using source code management software. In this article we look at the basic use of the Subversion to manage your Web development work and take a quick look at some options for Subversion from within Dreamweaver.

The Using Source Code Management Series:
Using Source Code Management Software: Part 1
Using Source Code Management Software: Part 2
Using Source Code Management Software: Part 3
Using Source Code Management Software: Part 4
Using Source Code Management Software: Part 5

Announcing CMX JumpStart: Aspen
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.

Announcing a New CMX JumpStart: Seattle
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?

Announcing CMX JumpStarts
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

Nested Repeat Regions in ColdFusion
Reader Level:

If you've ever wanted to nest data -- such as titles under individual categories, or products under individual headings -- this article will show you how to do it with minimum fuss and muss using ColdFusion and the cfoutput tag.

Watch Property Values To Determine Actions
Reader Level:

Nope, we're not talking real estate here, we're talking about using JavaScript to track and manage changes to the value of an object's property within a Dreamweaver extension. Since Dreamweaver's extensibility engine uses JavaScript internally, you can bring in many of the concepts that are usable within "plain" JavaScript into the Dreamweaver extensibility layer. One concept that I haven't seen used a lot on web pages, but that I have found to be quite useful within Dreamweaver: watching property values.

Macromedia Announces: The Flash Video Kit for Dreamweaver
Reader Level:

Macromedia announces the Flash Video Kit. A new Dreamweaver extension that provides you with a hassle free way to implement video into your web pages. See how you can get this extension and bring your clients products to life with streaming video content.

Configuration Files Paths and Dreamweaver Extensibility API Calls
Reader Level:

Many of the Dreamweaver extensibility API functions are configuration folder path agnostic. That is, regardless of which folder a file resides in, the application install folder, the user's folder, or the All Users/root folder, the API function will translate the passed in file path and grab the file that is supposed to be used (user's, then All Users/root, then install folder). DWfile methods copy and write, dw.getDocumentDOM() and dw.browseDocument() are examples of such path agnostic functions. However, some of Dreamweaver's API calls take file paths literally. Read on to find out how to get Dreamweaver to work with you when you need to use an exact path for some of its API calls.

All You Ever Wanted To Know About Macromedia Certification
Reader Level:

So you want to be certified huh? Well, some of us here at Community MX are certified. And yes, I am talking about that kind of certified! ;) Today, I am going to talk about Macromedia’s Certified Professional Program, and how you can benefit from being a Macromedia Certified Professional (MCP). This article comes out of my month-long experience studying for the Macromedia Dreamweaver MX 2004 Certified Developer Exam. So grab a beer (or 3), sit back, scroll your mouse a few times, and let's get smash... uh, certified, CMX-style!

Simple Dynamic Recordset Sorting Using Stored Procedures
Reader Level:

A stored procedure gives you many benefits when building applications, including web applications using ColdFusion, ASP, and other technologies. They are fast because they are precompiled and they are secure because the database tables are not being accessed directly. One thing that is a little tricky in working with stored procedures is building dynamic queries. You can build a SQL statement as a string within a stored procedure and execute it using the EXEC statement (or xp_executeSQL), but this also defeats one of the purposes of building your functionality into a stored procedure: the statement is not compiled when it is built dynamically. This article shows one way of creating dynamic SQL on the fly while still allowing the stored procedure to be precompiled.

ASP.NET and Dreamweaver's Application Panel
Reader Level:

As an ASP.NET developer, you've undoubtedly used the Application Panel. But if you're like me, you probably explored it only to the extent necessary to get the current job done. In this article, we'll explore the features in the Application panel more thoroughly. Perhaps you'll find something really useful that you didn't know about before.

Extensioneering 101: Getting Started
Reader Level:

Dreamweaver is arguably the most extensible application in the web development field. One great thing for a budding extension developer is that you can leverage your existing skills to create Dreamweaver extensions. To create many extensions, all you really need to know is HTML to create the user interface (UI), and have a basic understanding of JavaScript. However, before you get going, there are a few things that you should do to get yourself and Dreamweaver prepped for extension development. Read on, to get the scoop on what you need to do to get started...

Design Time Support for ASP.NET Custom Controls
Reader Level:

Recognize the benefits of using custom controls, but bummed because they don't show up in Dreamweaver's design view? Well, start celebrating. It's actually pretty simple to enable design-time support for custom controls.

Full O' Beans - Part 1
Reader Level:

If you are writing Java Server Pages (JSPs) for your Website or Web application, then you have an incredibly valuable and helpful coding tool at your disposal in JavaBeans. JavaBeans allow you to reuse code not only within one application, but also within multiple applications.

Dreamweaver MX 2004 Piece by Piece -- Part 3: Cover Your Assets
Reader Level:

The Assets panel is one of a number of inspired details provided by Macromedia to developers using Dreamweaver. With the Assets panel, you can easily drag and drop a variety of site elements into your pages, see at a glance what elements have been added to your site, and a great deal more.

Making The List: List Creation and Manipulation in ColdFusion
Reader Level:

Lists can be a great friend, and ColdFusion provides several ways to create and interact with them. This article will show how easy it can be to create, manipulate, and use lists to your advantage.

DW MX 2004 Updater - Expect Better Performance!
Reader Level:

To counter criticism over last September's poorly received release of Dreamweaver MX 2004, Macromedia decided to pour resources into performance improvements for this updater. Read on for a behind-the-scenes look at what the engineers have to say about the effort.

Dreamweaver MX 2004 7.0.1 Updater
Reader Level:

Once the word got around that Dreamweaver MX 2004 was released there was plenty of buzz about the new look and of the user interface. However, as the CDs and the trials started flying out the door, buzz turned to buzzing with reports of degraded performance, in particular on Macs, and complaints about removed features, especially Timelines. Macromedia even set up an Emerging Issues page to acknowledge the common issues being reported. Soon, an announcement of an updater made its way onto the Emerging Issues page. Since then many people have been eagerly awaiting the updater so that they could get the most out of the software that they were using, or hoped to acquire. Several months later, the wait is over, the eagerly awaited updater is finally here.

Web Terminology: Part One
Reader Level:

This article begins a new series concerning the definition of terms, specifically the terms most used (and mis-used) in HTML and CSS concepts. We hope to enlighten those who haven't had time to catch up on the lingo so common amongst web designers, begining with a discussion of tags vs. elements, divs vs. layers, and Class vs. ID.

Usability 101
Reader Level:

Usability problems still run rampant on the Internet, and now it's Robert Hoekman, Jr's turn to help you clean up. Part 1 of the series discusses five major usability concerns and what you can do about them.

DW Templates - Part 4: Nested Templates
Reader Level:

Dreamweaver nested templates give you fine-grained control over design and content. They allow you to further characterize the look and feel of your site while still retaining the flavor defined in the master template. Read on to learn more about this powerful feature.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Web Typography - Part 1
Reader Level:

The first principle of Typography is "Typography exists to honor content." When it comes to the web, sometimes it's as though this principle never existed. This series starts with a discussion of how this can actually be achieved simply by "giving words a voice". Read more...

ADO Connections
Reader Level:

Dreamweaver and ADO provide a number of ways to connect to a variety of databases. This article serves as a quick reference to the required format for a wide variety of connection schemes.

Protecting Your Images on the Internet
Reader Level:

If you ask a handful of web designers if they know of a way to prevent someone from taking pictures off of your web page, you'll get a grab-bag of answers. To my knowledge, none of these answers is an actual solution, and will not actually prevent someone from getting your images, one way or another. Put simply, if you have any graphics displayed on your standard html page, they can be taken if someone wants them bad enough.

An Introduction to SSI
Reader Level:

SSI (which stands for server-side includes) provides you with a rather simple, yet effective, way in which to add basic dynamic functionality to your otherwise static HTML content. In this article you will learn how to use SSI to include content such as headers and footers as well as how to output dynamic data such as dates and times.

Tracking Users in the Global.asa File
Reader Level:

Classic ASP is not dead just yet, and there will be sites around for quite some time that still use it. Those sites need accurate counts of the visitors they are serving. This article teaches you to use the global.asa file in ASP to keep track of the number of users that are viewing your site at any give point in time.

DW Templates - Part 3: Template Parameters and Expressions
Reader Level:

Add a touch of dynamicism to your templates with parameters and expressions. This is about as close as you can get to dynamic without actually backing it up with server-side code.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Securing Dreamweaver MX 2004 Applications
Reader Level:

There are many things to consider when putting sensitive data on the web, and Dreamweaver introduces a couple of security concerns that you may not have realized. Learn more about Dreamweaver's default behavior and how you can compensate for it.

The New Dreamweaver MX 2004 Application Group
Reader Level:

In this article we will look at the new Application group from the currently available Macromedia Dreamweaver MX 2004. The Application group, and its related panels, contain everything you need to start building a database-driven website. Its user friendly interface will make short, and easy, work of working with databases.

DW Templates - Part 2: Repeating Regions and Repeating Tables
Reader Level:

Get the most out of your Dreamweaver templates - learn how to add and customize repeating tables and regions.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

Dreamweaver MX 2004 Piece by Piece -- Part 1: Hyperlinks and Anchors
Reader Level:

The Piece by Piece series of articles aim to provide the most comprehensive references available to the interfaces and functionality of Macromedia Products. In this installation, we cover the Hyperlink and Named Anchor objects in Dreamweaver, along with detailed coverage of the technologies they support.

Using Dreamweaver to access a web service from an ASP.NET page - Part 2
Reader Level:

Take the mystery of out web services - Dreamweaver's built-in functionality will help you quickly and easily use web services.

Part 1 is a no-frills tutorial demonstrating the use of a web service on an ASP.NET page.

Part 2 will include the details left out of Part 1 regarding implementing web services with Dreamweaver and how to extend your knowledge from this one example to all kinds of web services.

Using Dreamweaver to access a web service from an ASP.NET page - Part 1
Reader Level:

Take the mystery of out web services - Dreamweaver's built-in functionality will help you quickly and easily use web services.

Part 1 is a no-frills tutorial demonstrating the use of a web service on an ASP.NET page.

Part 2 will include the details left out of Part 1 regarding implementing web services with Dreamweaver and how to extend your knowledge from this one example to all kinds of web services.

Absolute vs. Relative Paths
Reader Level:

Confused about the differences between absolute and relative linking? Not sure when to use a root relative path instead of a document relative one? This article spells it out for you by explaining the differences between each option, as well as providing examples. After reading this article you should never have to ask how to link to a page or object again.

Dreamweaver Templates - an Introduction
Reader Level:

Learn about one of Dreamweaver's most powerful and overlooked features - templates. This is the first in a series of articles that starts with template basics. You'll learn how to create and use templates and how templates can help you get your job done faster and more easily.

The Dreamweaver Template Series:
Dreamweaver Templates - an Introduction
DW Templates - Part 2: Repeating Regions and Repeating Tables
DW Templates - Part 3: Template Parameters and Expressions
DW Templates - Part 4: Nested Templates

The Improved Page Properties In Dreamweaver MX 2004
Reader Level:

In past versions of Dreamweaver, the Page Properties feature didn't allow you to do much, and much of what it did allow you to do resulted in deprecated html. In Dreamweaver MX 2004, this has all changed. The number of page elements that can be set using the Page Properties dialog has increased, and best of all, the code it generates is greatly improved, thanks to the option to use CSS rather than HTML tags.

Direct File Editing in Dreamweaver MX 2004
Reader Level:

Sometimes you just need to make a quick edit or take a look at a remote web site and setting up a whole site in Dreamweaver is just overkill. A new feature of DW MX 2004 allows you to perform Siteless File Editing by defining FTP and RDS connections without all the extras.

SSI's Versus Templates
Reader Level:

What's better? Dreamweaver templates or server side include (SSI) files? As with so many questions in life, the answer is "it depends... ." This article will explain the pros and cons of both approaches and let you decide for yourself.

Headless Fireworks in Dreamweaver MX 2004
Reader Level:

Dreamweaver MX 2004 has added the new "Headless Fireworks" option. This option allows you to perform edits on images from directly within the Dreamweaver MX 2004 design area.

DreamweaverMX 2004 - The Start Page
Reader Level:

As in past new releases of Dreamweaver, Macromedia has included several new features in the latest release, DreamweaverMX 2004. Among these are the new Start Page feature. In this article, we will take a look at the benefits and functions of this new feature.

New CSS features in DWMX 2004
Reader Level:

I'm going to go over all the basic CSS functionality changes here just to give you an overview of what's been changed. Some of our overview articles have already mentioned and shown some of the fabulous new CSS-P rendering capabilities. For me, this alone is worth the upgrade. No, nothing beats previewing pages in every browser imaginable, but it sure beats the jumbled mess I've seen in design view previously. Come in and see a more detailed view of the new tools.

The New Dreamweaver MX 2004 Behaviors Panel
Reader Level:

A look at the new Dreamweaver MX 2004 behaviours panel and how it differs from the existing version of Dreamweaver MX.

Dreamweaver MX 2004: The Insert Bar
Reader Level:

Macromedia has described their UI for Dreamweaver MX 2004 as more logical. While that is a quick and accurate description, it does not do justice to the improvements made in this area. The most commonly used tools are much easier to get to, and everything is laid out in a very logical manner. The Insert Bar, previously referred to as the Object Panel, is no exception.

New Property Inspectors for the ASP.NET form controls
Reader Level:

Here's a sneak preview of the new property inspectors for the ASP.NET form controls in Dreamweaver MX 2004, and some of their more interesting features.

Macromedia Announces Dreamweaver MX 2004
Reader Level:

Macromedia has announced the next version of Dreamweaver; Dreamweaver MX 2004. Take a look at the new features and improved performance in this early overview.

Moving to Stored Procedures - Part 3
Reader Level:

In this final part of the series, we will look at using your Stored Procedures in Dreamweaver applications.

The Moving to Stored Prodedures Series:
Moving to Stored Procedures - An Introduction
Moving to Stored Procedures - Part 2
Moving to Stored Procedures - Part 3

Customizing an Email Link
Reader Level:

One of the most important considerations for a web site is "ease of use". We want our visitors to be able to navigate and use our sites in a manner that is simple, logical, and - hopefully - enjoyable. Navigation is obviously an area that requires much thought, planning and testing. On a more macro level, we can take something as simple as an email link, and make it easier for the visitor to work with and easier for us to deal with upon reception.

Automatically update the 'date modified' of your pages.
Reader Level:

Learn a quick and easy way to automatically fill in a current date when you save your pages in Dreamweaver.

Under the Hood — The Basics of HTML: Part One
Reader Level:

Just what does go on "under the hood" of an HTML document? This article will give you a good general idea about what is going on when you create web pages. We will begin right at zero, and describe the source document point by point, in easy to understand, mostly non-technical language.

ASP.NET Validator Controls
Reader Level:

Form validation has never been easier thanks for the new validator server controls included in the ASP.NET framework. Learn how to check for required entries, the expected data type, values within a specified range, patterns, etc. Plus, learn Dreamweaver tips and tricks for dropping these controls on your aspx page.

Weaving a Web Dream, with Dreamweaver
Reader Level:

Are you new to Dreamweaver? Do you believe you can always learn something new, no matter how much experience you have? This article is just for you, then. This introductory article is about some of DMX's features and some general web common sense. Read on . . you never know what you'll discover!

Using the CSS Styles Panel
Reader Level:

DreamweaverMX contains a great tool to assist you in creating CSS styles. It's called the CSS Styles panel. In this article, we'll look at some of the different types of selectors that can be created. We'll look at creating the rule declarations for each selector. And then we'll briefly discuss the limitations with DreamweaverMX.

On-the-Fly Image Manipulation with ColdFusion and ImageMagick
Reader Level:

Have you ever wanted to be able to resize or convert images directly from within ColdFusion. By combining ColdFusion with a powerful open-source image manipulation package called ImageMagick, this is possible.

Hiding CSS from Nav 4: The Caio Hack
Reader Level:

At the time the CSS 1 specifications were written by the W3C, there were naturally no browsers that supported them. Netscape Navigator was then the premiere browser, and Nav 4 was the first browser to attempt supporting those specs. It got many of them right, but many more wrong. Come discover a method of hiding stylesheets from Nav 4, that you may not be familiar with, called the Caio Hack.

CSS Selectors: Pattern Matching and Inheritance: Article 3
Reader Level:

Working with selectors, combinators andusing pattern matching from the document tree. Learn how to to use the relationships betweeen your page elements to target specific elements for styling with CSS.

A Quick Introduction to the Structured Query Language (SQL)
Reader Level:

When you make the move from building static HTML pages to developing dynamic sites with ColdFusion, .NET, PHP or JSP you will need to start learning to work with relational databases. This article provides a quick introduction to the basic essentials of the Structured Query Language (SQL) which is the language you use to work with databases.

Flowing and Positioning: Two Page Models
Reader Level:

In doing web design work, it is likely you have heard terms such as "Normal flow" and "CSS Positioning." However, if you are accustomed to using tables for controlling the placement of page elements, you may be slightly hazy concerning what these terms actually mean. If so, it's time we got down to some basics on the ways web pages are visually constructed on the screen by current browsers.

This article has been updated as of 5/25/2007. You can read the updated article here

Enabling Session Variables in ColdFusion
Reader Level:

Enabling session management in ColdFusion is not automatic. So if you're having trouble getting your user log in form to work in Dreamweaver, take at look at this article where we walk you through the process of enabling sessions.

Using CodeBehind in Dreamweaver
Reader Level:

Dreamweaver MX doesn't natively support ASP.NET codebehind and all of its inherent advantages. This article will help you understand all that is necessary to create codebehind files and wire them up for use in Dreamweaver MX.

Rendering Mode and Doctype Switching
Reader Level:

Even though today's browsers have moved toward more standards-compliant behavior, it is still necessary to allow older pages to display as they have in the past. However, this can cause problems with modern pages written to (x)HTML and CSS standards if a browser cannot determine how to best render the page. The solution? Come learn about Rendering modes and the "Doctype Switch."

The Box Model Problem
Reader Level:

When breaking out of using tables and moving toward using Cascading Style Sheets (CSS) positioning for laying out elements on a page, it is important to become familiar with the W3C Box Model. At first, the box model may be confusing, but it is a necessary concept to grasp. Unfortunately, simply understanding the W3C box model is not the only thing you need to make your web pages look similar in different browsers. Come along as we explore the Box Model, the browsers that get it wrong, and what to do about them.

cf_label custom tag
Reader Level:

Handy dandy little custom tag to clean up your page code. Picking up from my experience with ASP.NET, I wanted a way to be able to separate some of my display code from my program logic.

This custom tag allows me to set properties such as style and text from code at the top of my coldfusion template, and define the custom tag elsewhere on the page, thus neatly separating code from content. When it comes to code organization and maintainability, this is one of the best techniques I have found so far.

Form Processing: Post and Get what are they?
Reader Level:

What are the get and post methods used for, how do they differ in passing data.

The Science of Color
Reader Level:

How many times have you stared at that blank canvas trying to figure out just where to begin? If you know your business, your audience and the psychological effect you want to have on them, you're well ahead of the game. This article discusses ways to make a color plan and creatively and harmoniously blend your color palette.

Simplify your documents with CFINCLUDES
Reader Level:

Site maintenance can be a real bear! A simple task such as changing an address can take hours, especially if the address is repeated on every page of a large site. Simplify your code and your life with includes!

Breathing New Life Into Custom Tags
Reader Level:

Some have predicted the death of Custom Tags with the release of ColdFusion MX and CFC's. Not only are Custom Tags alive and well...they now can be application specific. Learn why they still have a place in your application and how CFIMPORT breathes new life into them...

Tips For More Effective JavaScript Programming
Reader Level:

I'm a firm believer in the concept of continuing education. I honestly feel that there's always something more to learn about any given subject, even if you're an expert on that subject. That's why one of my favorite things to do is find ways of improving on something I'm already pretty good at. It's usually fun because I don't have to strain too hard to pick up new concepts (since I'm already familiar with the subject at hand), and it's always rewarding when you find yourself able to do something better than you could do it before.

That's why, even if you're an experienced JavaScript coder, I think you'll enjoy this article. Hopefully you'll learn something you didn't know before, or you'll better understand a concept or two that seemed difficult at first.

In this article, we're going to examine some ways that you can make your JavaScript code more effective.

Forms Authentication & Authorization Series: Part 1
Reader Level:

.NET has a bunch of excellent built in concepts and objects commonly needed in dynamic websites. Authentication and authorization is a big issue for many web designers and developers. This is an area that ASP.NET provides many tools for the developer to sculpt their security stratgies to take whatever form they desire. In this Part we cover setting up the web.config file properly so you can utilize ASP.NET forms authentication

Is Contribute Right For Your Client?
Reader Level:

Your new clients have a great idea--they want to keep the content on their site updated themselves! Of course, you think about Contribute right away, but is it the right solution for this particluar client? Take a look at some of the things you'll need to keep in mind when selling your services to Contribute users.

CSS: An Introduction
Reader Level:

In this tutorial we will take a look at the very basics of CSS, if you are new to cascading style sheets this is the place to start...........

The Introduction to CSS Series:

Part 1: An Introduction to the Syntax of CSS
Part 2: Using CSS to Apply Background Images
Part 3: The Descendant Selector
Part 4: Type Selectors and Grouping
Part 5: Working with Paragraphs
Part 6: The Basics of Positioning
Part 7: Working with the Class Selector
Part 8: Working with the ID Selector
Part 9: The Child Selector and First-Child Pseudo Selector
Part 10: The Link and Dynamic Pseudo-classes
Part 11: Some fun with valid and some not so valid CSS
Part 12: Looking at text formatting
Part 13: Working with a Wrapper div