Dreamweaver

The Dreamweaver CS6 Fluid Grid Layout
Reader Level: Reader Level

This tutorial teaches you to use the new Dreamweaver CS6 Fluid Grid Layout feature. The feature uses CSS3 Media Queries, fluid media and images, and fluid grids to create responsive designs. The download includes a complete example of a page that adapts to phone, tablet, and desktop viewports. There are also starter files so that you can follow along with the tutorial.

Dreamweaver CS6 and the New Web Font Manager
Reader Level: Reader Level

Add a custom font to your site using the CSS3 property @font-face and the new Dreamweaver CS6 Web Fonts Manager. This tutorial provides a tutorial that walks you through downloading a web font from Font Squirrel and adding it to a page from within Dreamweaver's Design View.

The TwentyEleven Wordpress Series: Part 3
Reader Level: Reader Level

Welcome back to the Twenty Eleven Wordpress series! In this tutorial you will continue developing the graphics for the Safari African Adventures Wordpress site. Using the new CSS Properties panel you will also extract rules to put together a style guide that you will later use as the basis of the Wordpress CSS document. Finally, you will export a PDF for the client, as well as the graphics you will need for the production site.

The TwentyEleven Wordpress Series:
The TwentyEleven Wordpress Series: Part 1 - Introduction
The TwentyEleven Wordpress Series: Part 2
The TwentyEleven Wordpress Series: Part 3
The TwentyEleven Wordpress Series: Part 4
The TwentyEleven Wordpress Series: Part 5

The TwentyEleven Wordpress Series: Part 2
Reader Level: Reader Level

Welcome back to the Twenty Eleven Wordpress series! Before you dig into Wordpress itself, you're going to do a bit of preparation work in Fireworks. Though this is not a completely exhaustive Fireworks tutorial, even those who have little experience with the program should become quite comfortable with using it for developing a layout by the time they work through parts two and three of this series.

This tutorial guides you through installing the new CSS3 Mobile Pack for Fireworks and building the basic Safari African Adventures layout. There is a support_files folder that includes all assets as well as examples of the work in progress.

The TwentyEleven Wordpress Series:
The TwentyEleven Wordpress Series: Part 1 - Introduction
The TwentyEleven Wordpress Series: Part 2
The TwentyEleven Wordpress Series: Part 3
The TwentyEleven Wordpress Series: Part 4
The TwentyEleven Wordpress Series: Part 5

The CS5 CSS Starter Page Series Part 15: Creating a Spry Widget Slideshow Free!
Reader Level: Reader Level

There are many wonderful gallery/slideshow options at the Widget section of the Adobe Exchange. You'll want to explore them all, but in this tutorial we're going to install and configure the Spry Image Slideshow with Filmstrip widget.

The HTML5 CSS Starter Page Series - Part 14: Optimizing for Phone and Tablet Free!
Reader Level: Reader Level

In the last installment of the HTML5 CSS Starter Page series, you learned to use the Multiscreen Preview Panel to see how a layout looks in various devices. You also used the Media Queries dialog box to generate the appropriate media queries to target style sheets for tablets and smart phones. In this tutorial you'll create the rules for tablet.css and phone.css to optimize the layout for those devices.

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

The HTML5 CSS Starter Page Series - Part 13: CSS3 Media Queries and the Mobile Web Free!
Reader Level: Reader Level

n the last installment of the HTML5 CSS Starter Page series, we completed the Stringendo Studios site. But wait! Not so fast. We only finished the desktop Stringendo Studios site. In this tutorial, we'll begin the process of optimizing Stringendo for mobile devices by using Dreamweaver's CSS Media Queries dialog box and the Multiscreen Preview panel.

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

The HTML5 CSS Starter Page Series - Part 12: Styling Data Tables Free!
Reader Level: Reader Level

In this installment of the HTML5 CSS Starter Page series, we're going to add tables to the faculty and classes pages of the Stringendo Studios site. We're going to perform a slick little trick with these tables - we're going to use the :nth-child pseudo class to create alternating colors on the table rows while keeping the markup free of extraneous classes. Then we're going to use a script to make Internet Explorer support the pseudo class, though natively it does not do so. This will finish up all the pages of the desktop Stringendo site - all we'll have left is the

This tutorial includes exercise files.

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

The HTML5 CSS Starter Page Series - Part 8: Site Tasks Free!
Reader Level: Reader Level

In this installment of the HTML5 CSS Starter Page series, we're going to perform site tasks such as ordering the style sheet, exporting the style sheet to an external file, running the page through BrowserLab, using the new CS5.5 HTML validator, validating the CSS using the W3C CSS3 validator, turning the layout into a template, and generating the site pages. Whew! I hope this will be enough to keep you busy for one tutorial.

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

The HTML5 CSS Starter Page Series - Part 7: Styling the Navigation for the Layout Free!
Reader Level: Reader Level

In this installment of the HTML5 CSS Starter Page series, we are going to style all the links for the layout. We'll style buttons for the sidebar, and decorate each button with a different musical symbol - all without additional markup - by using attribute selectors. Then we'll style global link styles for other regions of the layout.

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

The HTML5 CSS Starter Page Series - Part 3: Constructing the Layout Free!
Reader Level: Reader Level

In this third tutorial in the HTML5 CSS Starter Page series, we're going to mark up the layout for Stringendo Studios. We'll be using many of the new semantic elements of HTML5. We'll then run the page through an HTML5 outliner and modify the code as needed.

This tutorial includes start and completed exercise files.

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

What's New in the Adobe BrowserLab CS Live Service
Reader Level: Reader Level

It's been a while since Adobe launched BrowserLab and I reviewed it in my article The Adobe BrowserLab Web Service. In this update to that article, I will detail some of the new features that have been added over the last few months to the BrowserLab CS Live service. We'll look in depth at the BrowserLab plugin for Firebug and the Auto align tool.

Diff (file differences) and Dreamweaver
Reader Level: Reader Level

In computing, 'diff' is a file comparison showing the differences between two files, used to show the changes between one version of a file and a former version of the same file. You can use Dreamweaver and a file comparison utility that you likely already have to compare your current file with that on your server or in your version control. This article shows you how.

The CS5 CSS Starter Page Series Part 14: Adding a Contact Form Free!
Reader Level: Reader Level

We have one last page to complete in the CSS Starter Page web site, and that is the contact page. We'll use the contact page as an opportunity to learn about various form objects. While we'll be using the tried and true form objects that have been a part of HTML "forever", we'll also discuss some of the HTML5 form objects that will transform the way we work with forms going forward.

This tutorial includes starter and completed files so you can work through the exercises.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

CMX Jumpstart: Lucknow
Reader Level: Reader Level

Lucknow is, of course, renowned for its blue lights, and the colour theme is based around this.

Lucknow provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, to the built-in accordion and flexible column choice, Lucknow has it all.

The CS5 CSS Starter Page Series Part 13: Adding a Gallery Free!
Reader Level: Reader Level

There are only two more pages to develop in the Dreamweaver CS5 CSS Starter Page site. In this tutorial we're going to use Lightbox to create a gallery on one of the remaining pages. The Lightbox home page describes Lightbox as "a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers." This tutorial includes start and completed files.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series Part 12: Adding a Data Table Free!
Reader Level: Reader Level

We're close to finishing a complete site based on the two-column, fixed-width, left sidebar, header and footer Dreamweaver CS5 CSS Starter Page. All we have left is to add some content to the pages other than the home page. In this installment we're going to add a data table to the accommodations page of the Safari site. (Or, you can adapt the techniques to your own site.)

We're going to perform a fancy little trick with this table. We're going to use the :nth-child pseudo class to create alternating colors on the table rows while keeping our markup nice and clean. Then we're going to use a script to make Internet Explorer support the pseudo class, though natively it really would prefer not to.

This tutorial includes starter and completed files.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series - Part 11: Creating the Template Free!
Reader Level: Reader Level

In this installment of the CS5 CSS Starter Page series, we'll use templates, library items, and snippets to create a four page site from our layouts.

This tutorial includes exercise files as well as a completed site example.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series - Part 10: Making it Your Own Free!
Reader Level: Reader Level

In this installment of the CS5 CSS Starter Page series, we'll use Fireworks and Dreamweaver to transform the Yukon layout into your own design.

This tutorial includes start and completed files.

Approximate download size: 7MB

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series - Part 9: Quality Assurance Free!
Reader Level: Reader Level

In the last installment of the Dreamweaver CS5 CSS Starter Page series, we finally finished the base layout. Before we can move on to creating new pages from the layout, we need to perform a few maintenance and quality assurance chores:

  • Check the layout in multiple browsers at Adobe BrowserLab
  • Order the rules so that they are more organized and easier to read
  • Move the rules into an external style sheet
  • Create a separate style sheet for browser specific properties and values
  • Validate the document at the W3C CSS validator



The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form



The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font Free!
Reader Level: Reader Level

In this installment of the Dreamweaver CS5 CSS Starter Page series, we'll add the last finishing touch to the design. We'll use @font-face to add a custom font that expresses the rugged terrain of Alaska and the Yukon.

The CSS property @font-face offers true font support. After linking to a custom font within your style sheet and uploading the font file to your site (just as you would for an image), you can then use it on your pages without users having to have the font on their own systems. There is a catch, however, and that is the variability of browser support. Fonts have to be converted to a number of different formats in order to work in Safari, Firefox, IE, Opera, Chrome, the iPhone, and the iPad. These formats then have to be written in a somewhat complex syntax in the style sheet.

Fortunately, there is a free service called Font Squirrel that offers hundreds of fonts that are licensed for use on the web, and that are already converted to the formats you'll need for them to work in all major browsers. In this tutorial we'll use this service to add the font Gesso to the Yukon layout.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

From CPanel to Dreamweaver - Getting Your MySQL On!
Reader Level: Reader Level

Setting up a database to connect to Dreamweaver with CPanel is very easy to do. Follow this quick guide on getting set up.

Quick Shot - Check for Existing User Names On a Sign Up Form
Reader Level: Reader Level

Member sign up forms need to have a unique user name so people can log in to the correct account. In Dreamweaver, we can use Server Behaviors to make all of this happen without having to write the code ourselves.

The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods Free!
Reader Level: Reader Level

After all the hard work of learning how the new Dreamweaver CS5 CSS Starter Pages work, it's time to have some fun with them. The "next big thing" on the web is CSS3 properties that let you create all kinds of visual effects without using images. In this installment of the series, we're going to create three pods in the sidebar, each of which will contain a heading and paragraph with a link to a page with more information about its topic. The pods will have rounded corners, box shadows, and a gradient background.

In the old days this would have required multiple DIVs and images. CSS3 offers the promise of freedom from all of that. Web standards compliant browsers offer good, though differing, support for CSS3. While these properties do not work in Internet Explorer 6, 7, and 8 (Internet Explorer 9 is about to arrive and will support many CSS3 properties), you have some choices in handling the web's problem child browser. We'll get to that towards the end of the tutorial.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation Free!
Reader Level: Reader Level

In the last tutorial of the CS5 CSS Starter Page series, we finally completed the Yukon layout. In doing so, the mysteries of the fixed-width CSS Starter Pages in Dreamweaver CS5 were de-mystified. With that behind us, it's time to go outside the box, and start to extend various aspects of the design. The first one we'll tackle is the navigation. We're going to transform the vertical buttons into a horizontal navigation bar.

This tutorial includes starter files so that you can play along with the steps, and completed files so you can compare your work.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series Part 5: Adding Navigation Systems Free!
Reader Level: Reader Level

In the last installment of this series, we completed all parts of the layout except for the navigation. In this tutorial, we'll style the unordered list of links into a set of vertical buttons. This is the default navigation styling for the Dreamweaver CS5 CSS Starter Pages. In the next tutorial, we'll change the navigation scheme into a horizontal navigation bar under the header, but for now it is important for you to understand how navigation in the CSS Starter Pages works.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series Part 4: Refining Details with CSS Free!
Reader Level: Reader Level

In the last tutorial in the this series, The CS5 CSS Starter Page Series Part 3: Structuring with CSS, we used CSS to manipulate the page into two columns with a header and footer. We painted the broad brush strokes, so to speak. In this installment, we'll fill in the fine details by coding some styles for text and images.

This tutorial has exercise files so you can work along at home.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

Creating a Site in Dreamweaver CS5 Free!
Reader Level: Reader Level

Follow this step-by-step guide on how to create a site in Dreamweaver CS5.

The CS5 CSS Starter Page Series Part 3: Structuring with CSS Free!
Reader Level: Reader Level

In the second installment of the new Dreamweaver CS5 CSS Starter Page series, we divided the page into sections by using the DIV element. We added links in an unordered list, added text and headings, and inserted the logo image. Now that the "hooks" are in place, it is time to code the styles that will manipulate the structure into columns.

This tutorial includes starter files so you can try the exercises, and it includes a completed layout in case you need to compare your work.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

CMX JumpStart: Brasilia
Reader Level: Reader Level

The Brasilia JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page directly from your CSS file. You simply need to add a class to the body tag and the CSS takes care of everything else for you! Brasilia also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion the navigation hangs from the top of the page rather than sitting at the bottom of its containing element.

The main construction of Brasilia consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The layout will collapse gracefully on smaller viewports while the images in the strap are self centering to ensure the layout always displays at it's best. The content, as always, is created with valid code and accessibility in mind.

Introducing CMX JumpStart Brasilia Free!
Reader Level: Reader Level

CMX JumpStart Brasilia is fluid, both in its outer and inner DIVs. The outer DIVs are completely fluid and conform to the width of the viewport. The inner DIVs are fluid, but with max width to keep reading lines comfortable, and min width to keep the layout from collapsing in narrow windows. 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. There is a "fat" header that allows your company to showcase important content and/or branding. The PNG allows for the editing of the images in the monitor screens if you wish to stick to the computer theme. In lieu of images, you could also put text in either the right or left floated areas of the header for a real "above the fold" showcasing of your message. 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 Brasilia meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

The CS5 CSS Starter Page Series - Part 2: Marking up the Page Free!
Reader Level: Reader Level

If you read the introductory article to the new Dreamweaver CS5 CSS Starter Page series, you already know that we're going to create our own JumpStart Yukon as a means to understanding the new and improved CSS Starter Pages. We're also going to add CSS3 enhancements, a Lightbox gallery, and styled forms and data tables before this series runs its course. But let's not get ahead of ourselves. First things first: let's add the markup and basic content to the layout that we'll come to know as Yukon.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

The CS5 CSS Starter Page Series Part 1: The Yukon Free!
Reader Level: Reader Level

There is no other way to say it: the new CSS Starter Pages in Dreamweaver CS5 are wicked awesome. They are everything I would have hoped for in a version two upgrade. There are such significant changes from the first set that it is time to begin a new CS5 CSS Starter Page Series. The center of the series will be an ongoing project, CSS Starter Page Yukon. Not only will we take advantage of all the great new features in the new, improved CSS Starter Pages, but we'll get trendy with some CSS3 properties, as well as some custom typography.

The CS5 CSS Starter Page Series:
The CS5 CSS Starter Page Series - Part 1: The Yukon
The CS5 CSS Starter Page Series - Part 2: Marking up the Page
The CS5 CSS Starter Page Series - Part 3: Structuring with CSS
The CS5 CSS Starter Page Series - Part 4: Refining Details with CSS
The CS5 CSS Starter Page Series - Part 5: Adding Navigation Systems
The CS5 CSS Starter Page Series - Part 6: Converting to Horizontal Navigation
The CS5 CSS Starter Page Series - Part 7: Adding CSS3 Pods
The CS5 CSS Starter Page Series - Part 8: Adding a Custom Font
The CS5 CSS Starter Page Series - Part 9: Quality Assurance
The CS5 CSS Starter Page Series - Part 10: Making it Your Own
The CS5 CSS Starter Page Series - Part 11: Creating the Template
The CS5 CSS Starter Page Series - Part 12: Adding a Data Table
The CS5 CSS Starter Page Series - Part 13: Adding a Gallery
The CS5 CSS Starter Page Series - Part 14: Adding a Contact Form

Dreamweaver CS5 New Features Part 1: The All New CSS Starter Pages Free!
Reader Level: Reader Level

The big launch has finally come, and now it's time to make a decision. Upgrade or skip this time around? Arm yourself with knowledge of the new features before you decide. Does CMS and Wordpress integration appeal to you? New CSS troubleshooting tools? How about new CSS Starter Pages? These features and many more are yours when you get a Suite or Dreamweaver CS5 by itself.

Let's start with the new CSS Starter Pages....

The Dreamweaver CS5 New Features Series:
Dreamweaver CS5 New Features Part 1: The All New CSS Starter Pages
Dreamweaver CS5 New Features Part 2: CSS Troubleshooting

CMX JumpStart: Beijing
Reader Level: Reader Level

Welcome to the Beijing JumpStart!

The Beijing JumpStart provides the easiest of solutions for changing the amount of columns on a page. You simply add a class to the body tag and the CSS takes care of everything else for you! Beijing also has a slight variation on the popular sliding doors CSS navigation system. While the concept is exactly the same as we have used in the past, on this occasion it hangs from the top of the page rather than sitting at the bottom of it's containing element.

The main construction of Beijing consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width while maintaining a good line reading length. The content as always is created with valid code and accessibility in mind.

CMX JumpStart: Agra
Reader Level: Reader Level

Welcome to The Agra JumpStart!

The Agra JumpStart is based around an Indian theme and follows the diversity of that country by providing multiple layout structures that can be controlled from a single CSS file. While the top half of Agra remains constant the lower three column section can be easily modified from its default three column layout to either a one or two column layout. Like India, Agra provides a solution for just about every requirement you may have!

Approximate download size: 4MB

CMX JumpStart: Lapland Free!
Reader Level: Reader Level

Welcome to the Lapland JumpStart!

The Lapland JumpStart is a free offering to you from Community MX. We hope you enjoy and are able to make good use of the layout!

The main construction of Lapland consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

CMX JumpStart: The Black Forest
Reader Level: Reader Level

Welcome to The Black Forest JumpStart!

The Black Forest is a wooded mountain range in Baden-Württemberg, in southwestern Germany. It is a region that has vineyards, river valleys, sunny peaks, wide panoramic views, calm forests, revitalising spas, exciting family destinations and a cuisine that is the most elaborate in Germany.

The Black Forest JumpStart uses the Digg This! widget to provide current and up to date information for your users, ensuring your website is always current and informative.

Extending Dreamweaver CS4 - Part 6: Phatfusion Rounded Corners
Reader Level: Reader Level

In Part 6 of this series on Extending Dreamweaver CS4 we will be looking at the Phatfusion roundedCorners widget from the Adobe web site. The Phatfusion roundedCorners widget is an automated click of a button widget that will provide with rounded corners on both your divs and images.

A default set of images are provided to get you up and running. You can, of course, create your own and change the radius of the corners. As with all the widget add-ons in this series, the widget is free, you need only download the widget in extension form and install it through your Extension Manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

The CSS Starter Page Series Part 12: Adding a JQuery Slideshow
Reader Level: Reader Level

The new semester is under way, and my students are using this CSS Starter Page series to design their portfolio sites. As we go along, we'll be exploring various nifty ways to add the portfolios of their graphic design work. In this installment of the CSS Starter Page series, we're going to use a jQuery script to create an attractive slideshow of images with descriptive text.

We'll accomplish this objective in stages. First we'll insert the slides into the HTML code so that even older browsers have access to the content. Our next step will be to style the slides with CSS, a "progressive enhancement" that will benefit most users. Finally, we'll add the pre-written jQuery script to add a little wow factor to the slideshow.

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

Introducing CMX JumpStart Berlin Free!
Reader Level: Reader Level

CMX JumpStart Berlin is a centered, two-column or three-column, liquid/fixed layout. The two tier navigation uses the popular Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, and it is easy to add as many links as you need. The header features a third menu, a PhatFusion Image Menu, that lets you add your own categories and images. This feature is especially handy for photographers who would like to feature their work.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7. There is also a Design Time Style Sheet in case your version of Dreamweaver makes the layout difficult to edit in Design View. Of course Berlin meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Berlin
Reader Level: Reader Level

Berlin is, of course, renowned as a city of great culture and diversity, and the Berlin JumpStart mirrors those traits. Berlin provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system, and the srolling image menu Berlin is equipped to cope with the largest of websites while remaining attractive and interesting to your users and functional to your clients.

The main construction of Berlin consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Berlin comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.



The CSS Starter Page Series Part 11: Adding a Handheld Style Sheet
Reader Level: Reader Level

In the last installment of the CSS Starter Page series, we added a print style sheet to our layout. We're going to add a handheld style sheet this time around, and this is a task that requires a bit more thought and planning.

This tutorial could possibly be subtitled "Everything You Wanted to Know about Handheld Style Sheets but Were Afraid to Ask!"

This tutorial includes starter and completed project folders.

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

PHP Undo Delete Button in Dreamweaver
Reader Level: Reader Level

For those of us with Gmail accounts, we have seen, after deleting an email, the undo link show up on the page. Sometimes that is a real savior for me! Of course, it is also nice that I don't have to confirm each delete that I do. I looked in to a simple way to have an undo button on my delete functionality for database tables. With a few quick steps, we can make this work for you as well.

CMX JumpStart: Stelvio Pass - Gallery
Reader Level: Reader Level

The Stelvio Pass - Gallery JumpStart presents a nicely integrated image gallery and flexibility of layout width and advanced CSS column control.

The Stelvio Pass - Gallery also includes inverted sliding door navigation and an accessible sub navigation in the left hand column, both of which can be expanded with ease to suit any given situation.

Displaying Horizontal List Navigation in Dreamweaver's Design View
Reader Level: Reader Level

How to stop your horizontal list navigation from moving out of line in Dreamweaver's design view. In this article we will look at what causes this annoying problem and two different ways it can be corrected.

The CSS Starter Page Series Part 10: Adding a Print Style Sheet
Reader Level: Reader Level

In this installment of the CSS Starter Page series we will add a print style sheet. Most visitors are only interested in printing out the content of a page and prefer to economize on paper and ink. Print style sheets, therefore, remove any superfluous colors, visuals, links, or other items that will only waste resources.

This tutorial includes starter and completed folders so you can play along at home.

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

The CSS Starter Page Series - Part 9: Working with the Conditional Comment
Reader Level: Reader Level

Welcome back to another installment of the CSS Starter Page series. We've spent quite a bit of time on navigation systems and Spry Widgets in the most recent tutorials. Now we'll switch gears to work with something a little less sexy, and that is the Conditional Comments that reside in the heads of most CSS Starter Pages. These Conditional Comments address issues that make layouts look different in various versions of Internet Explorer browsers. The problems arise when an unsuspecting designer makes certain modifications to the layout, and then fails to realize that those changes require some adjustments to the Conditional Comments as well.

In this tutorial, we'll look at what we need to change in the IECC (Internet Explorer Conditional Comments) when we want to balance the top headings in the columns and when we need to change the width of the sidebar column.

This tutorial includes support files so you can play along at home.

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

The CSS Starter Page Series Part 8: Managing Content with Spry
Reader Level: Reader Level

In the last installment of the CSS Starter Page series you got to use a Spry Menu Bar on the "Spring is Here" design. Now in this tutorial you'll use another Spry Widget to manage content. You will use the Spry Accordion Panel to economize on the space a gallery of images would take in the content area of the page. You'll also learn how to add a print style sheet that will allow the content in the closed panels to print as well as the focus panel.

This tutorial includes starter and completed project files.

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

Extending Dreamweaver CS4: Part 4 - Digg This!
Reader Level: Reader Level

In Part 4 of this series on Extending Dreamweaver CS4, we will be looking at the Digg widget from the Adobe web site. The Digg widget is an excellent way to keep fresh content on your site. You can open the story links in a new window to ensure that you don't lose visitors. You can choose stories that are relevant to your own web site's content or you can take stories from a particular author.

As with all the widget add-ons in this series, the widget is free, you need only download the widget in extension form and install it through your Extension Manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

The CSS Starter Page Series Part 7: Adding A Spry Menu Bar
Reader Level: Reader Level

In this installment of the CSS Starter Page series, we are going to segue into exploring Spry widgets by continuing where we left off - that is with trying out different navigation schemes. We're going to add a Spry Menu Bar to the Photo Gallery page of our layout to accommodate the numerous sub categories of images we might have in that section of the site.

This tutorial will take you through the following tasks:

  • Setting up a site definition - very important for ensuring that the Spry Widget works once you upload the files
  • Inserting the Spry Menu Bar widget
  • Customizing the menu items (link text) for each link and its sublinks
  • Styling the menu

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



Extending Dreamweaver CS4: Part 3 - Phatfusion SortableTable
Reader Level: Reader Level

In Part 3 of this series on Extending Dreamweaver CS4 we will be looking at the Phatfusion SortableTable widget from the Adobe web site. The Phatfusion SortableTable widget provides your end users with a method to sort an HTML table by clicking on the column headers. This functionality allows your users to sort a table to meet their requirements thus making the information they need far more accessible than trying to retrieve it from a static table. As with all the spry widget add ons in this series the widget is free, you need only download the widget in extension form and install it through your extension manager.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

The CSS Starter Page Series Part 6c: Adding Navigation Schemes Part Three
Reader Level: Reader Level

In the last installment of the CSS Starter Page series, we added Sliding Door navigation above the header of the layout. In this article, we'll instead add a horizontal navigation bar beneath the header. We'll use an unordered list for accessibility, and change the list items from block to inline elements so that they'll appear side-by-side. We'll then style the list and links to integrate the navbar with the rest of the layout.

This tutorial includes support files so that you can play along at home.

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

Extending Dreamweaver CS4: Part 2 - jQuery UI Calendar
Reader Level: Reader Level

In Part 2 of this series on Extending Dreamweaver CS4, we will be looking at installing a date picker widget from the Adobe web site. The date picker is one of many jQuery UI widgets that are available in the Adobe web site's widgets section. A date picker is a very useful option to have in your armoury and one that can be deployed in several different ways to enhance your web site's functionality.

In this tutorial, we will look at how the date picker can be used and how it can be changed from the default American style of date format to the UK date format.

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Extending Dreamweaver CS4 - Part 1: The TNC Lightbox Free!
Reader Level: Reader Level

Dreamweaver has a little gateway hidden within it that leads to the land of magic! Have you ever used this gateway? Do you know where it is? If the answer to those two questions is no then you should read on and be prepared to meet the first of our free items of treasure.

When you buy Dreamweaver you buy so much more than what comes on the disk. You can become involved in some great communities like CMX, and you can access widgets and extensions that will make your work flow faster and therefore make you more productive and cost effective in what you do.

Not all widgets and extensions come with a price tag, as we shall see as we set off on a series that will introduce to some of the fantastic functionality that can be added to Dreamweaver in no more than a couple of clicks of your mouse! Read on...

The Extending Dreamweaver CS4 Series
Extending Dreamweaver CS4 - Part 1: The TNC Lightbox
Extending Dreamweaver CS4 - Part 2: jQuery UI Calendar
Extending Dreamweaver CS4 - Part 3: Phatfusion SortableTable
Extending Dreamweaver CS4 - Part 4: Digg This!
Extending Dreamweaver CS4 - Part 5: Phatfusion Image Menu
Extending Dreamweaver CS4 - Part 6: Rounded Corners

Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds
Reader Level: Reader Level

CSS Layout Backgrounds, of all the CSS visual aids this is probably my favourite. Activating this option de-clutters design view completely, it takes you right down to the bare bones and really lets you get to grips with the structure of the layout. If I am having a problem with a layout this where I go to, it just makes everything very easy to see. Background images are removed and all your layout elements are given random background colours, it is uncanny how this de-cluttering makes everything so easy to read in design view.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

CMX JumpStart: Siberia
Reader Level: Reader Level

Siberia is, of course, renowned for its freezing temperatures, and the colour theme is based around the coldness of the region. Siberia is a design that sits easy with me - it is understated in appearance yet provides a powerful and flexible interface on which you could base just about any design you could imagine. From the inverted sliding door navigation and the accompanying sub navigation system to the built in accordion and flexible column choice, Siberia has it all.

The main construction of Siberia consists of liquid outer divs, while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind. Siberia comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.



Dreamweaver's Built-In CSS Help Features: Part 2 - CSS Layout Box Model
Reader Level: Reader Level

In Part 1 of this series, we looked at the CSS Layout Outlines. While this option provided us with clear demarcation by setting a border against our elements, it didn't provide any feedback on the layout itself.

In Part 2 we will be looking at the CSS Layout Box Model option. The CSS Layout Box Model visual aid is a very useful feature, a feature that provides both a method of selecting individual elements and gaining feedback about the CSS rules set against the selected element. All this information can be accessed directly from within Dreamweaver's design view and is available in text and visual design formats.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines Free!
Reader Level: Reader Level

Dreamweaver, over the last version or two, has included some very nice CSS help features. The features I'm referring to are termed Visual Aids and can be found within the Visual Aids drop-down menu that can be accessed from the document toolbar. There are several different CSS features within this area and we will look at them one by one to gain a good understanding of each and see how they can benefit our workflow.

The Dreamweaver Built-In CSS Help Features Series:
Dreamweaver Built-In CSS Help Features - Part 1: CSS Layout Outlines
Dreamweaver Built-In CSS Help Features - Part 2: CSS Layout Box Model
Dreamweaver Built-In CSS Help Features - Part 3: CSS Layout Backgrounds

The CSS Starter Page Series Part 6b: Adding Navigation Schemes Part Two
Reader Level: Reader Level

In the last installment of the CSS Starter Page series, we added vertical navigation to the sidebar. We used CSS to create the look of buttons for a set of links within an unordered list. This time around we're going to add horizontal navigation in the form of tabs. We are going to use the famous Sliding Door technique, taking our code from Adrian Senior's CSS Tabbed Navigation Sets for Sliding Doors Navigation.

This tutorial includes all the files you'll need to play along at home, as well as a completed layout folder in case you need to compare your work.

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

A Beginner's Guide to Spry - Part 5: Spry Menu Bar
Reader Level: Reader Level

The Spry Menu Bar provides a means of inserting a flyout menu system into your web site layout that is both easy to build and easy to edit. All maintenance is completed from within Dreamweaver's Property inspector and can be completed in a just a couple of clicks. It really is that simple.

If you haven't used the Spry Menu Bar you really need to take a good look at its capabilities and flexible options, I think you might be pleasantly surprised!

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

The CSS Starter Page Series Part 6A: Adding Navigation Schemes
Reader Level: Reader Level

Welcome back to the CSS Starter Page Series! If you've been following along with previous installments of the series, you already know that we have been looking at how to enhance the pages with one of the features the CSS Starter Pages lack: graphics. In this part of the series we will begin to look at how to add another missing ingredient, navigation schemes. In part one of the navigation scheme tutorials, we'll add a vertical navigation scheme to the sidebar of a CSS Starter Page.

We'll also look at how to use Kuler within Fireworks to create a color scheme for the CSS Starter Page.

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

A Beginner's Guide to Spry - Part 3: The Spry Accordion
Reader Level: Reader Level

The Spry Accordion is similar to the Spry Collapsible panel that we covered in Part two of this series, in many ways the Spry Accordion is the Spry Collapsible panel's big brother.

As we discovered in Part two, the Spry Collapsible panel provides the ability to open and close a single panel and thereby reveal or hide content within your web page. The Spry Accordion uses the same technique, but doesn't restrict you to a single panel. This flexibility allows you to set multiple panels within a single area of your page, allowing you to provide your end users with maximum content in a minimal amount of screen real estate.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
Reader Level: Reader Level

The Spry Tabbed Panels provide an alternative method of displaying content to the Spry Accordion. While the accordion provides a vertical method of displaying and hiding content, the Spry Tabbed Panels provide similar functionality, but in a horizontal format. While everyone might not agree with my opinion, I feel that the Tabbed Panels provide a more natural method of displaying related content than the accordion. The tabs across the top of the panel seem to lead you from one section to the next with greater fluidity than the accordion. The Tabbed Panels provide a natural way to break down flowing content, from breaking down form data into specific sections to categorising content and breaking down guides into a flowing process.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

Introducing CMX JumpStart: Nairobi Flexible Free!
Reader Level: Reader Level

It wasn't that long ago - November 26, 2008 to be exact - that we released CMX JumpStart Nairobi. At the time, I introduced the JumpStart based on the capital of Kenya with this sentence:

We think that the latest CMX JumpStart, CMX JumpStart Nairobi, will become one of your most important JumpStarts. Why? Because Nairobi is all about features and flexibility.

Read that last word again, because that is exactly what we're offering in this reworking of Nairobi - CMX JumpStart Nairobi Flexible. My original meaning in the word "flexibility" was meant to underline all the ways you could use the JumpStart. In response to subscriber interest in using Nairobi as a flexible layout, however, Adrian Senior has not only provided a modification of his own Nairobi design, but has provided a comprehensive tutorial on how he accomplished thet transformation.



CMX JumpStart: Nairobi-Flexible
Reader Level: Reader Level

In this tutorial we will take the Nairobi JumpStart and change it from its fixed width default layout into a flexible layout that works between two preset points, based on the user's browser width.

We will also discuss the merits and pitfalls of the changes we will make as we progress through the tutorial. We will discuss screen resolution and desktop setup through to problem areas of flexible layouts.

A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
Reader Level: Reader Level

The Spry Collapsible Panel provides an easy method to provide your users with the option to display or hide content with a simple click of the mouse. Both the content and the text on the collapsible panel trigger can be easily modified within Dreamweaver's design view, allowing you to quickly modify the default content of your panel.

As with all the spry widgets the necessary code is fully automated and written into a folder in the root of your site called SpryAssets. To generate this code, and the relevant links to the code that are placed in the head of your document and immediately before the closing body tag, all you need to do is select the appropriate icon within the Spry menu.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

CMX JumpStart: Isle of Skye
Reader Level: Reader Level

A short while ago, the beginning of March to be more precise, I wrote an article on selling your business. It looked at how easy it was to lose visitors when they printed a page from your web site and what we could do to remedy that problem. You can read the article on CMX; it is called Selling Your Business.

This JumpStart, Isle of Skye, takes the principles of that article and puts them to use in a way that means minimal work for yourself. You just need to add the relevant details into the web site and the CSS files will do the rest for you. Further to this automated functionality, Dreamweaver allows you to easily make any edits you need by making good use of the Style Rendering toolbar. The Style Rendering toolbar allows you to move quickly from one media type to another making it easy to stay on top of the different views available within your web site. All this control is provided with just a simple click of an icon.

A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget Free!
Reader Level: Reader Level

Spry widgets are a collection of JavaScript driven behaviours that are native to Dreamweaver. The functionality they provide is varied and customisable. From form checking to sliding panels and data sets, Spry widgets provide a quick and customisable solution to everyday requirements in the web site designer's world.

We'll begin this series by investigating the Spry Tooltip widget, the Spry Tooltip widget is — for want of a better description — a fancy tooltip generator that allows you to customise how your tooltip will appear with good use of CSS. The Spry Tooltip is similar in functionality to the title attribute, but provides greater flexibility and styling options. With a little care you can make Spry Tooltips a desirable feature within your website.

The Beginner's Guide to Spry Series:
A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget
A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
A Beginner's Guide to Spry - Part 3: The Spry Accordion
A Beginner's Guide to Spry - Part 4: Spry Tabbed Panels
A Beginner's Guide to Spry - Part 5: Spry Menu Bar

CMX JumpStart: Landeck
Reader Level: Reader Level

Welcome to the Landeck JumpStart!

The Landeck JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three-column to a two-column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of Landeck consists of liquid horizontal outer divs with a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.

The Landeck JumpStart

A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates
Reader Level: Reader Level

Welcome to Part 5 of our beginners series on Dreamweaver Templates, where we will be discovering how to deploy and get the most out of nested templates. Nested templates carry a relationship with the parent template they are created from and allow you to maintain a specific layout based on the parent while providing the flexibility for variation within your web site.

We will be looking at how you can control and vary specific areas of your layout and content with a single nested template. In reality there is no reason why you couldn't deploy several such nested templates within your web site. The art of building a functional web site often lies within the flexibility it contains. Dreamweaver provides this ability and you can exploit it with clever use of nested templates and still maintain the integrity of your layout by retaining overall control of your core code.

The Beginner's Guide to Dreamweaver Templates Series:
A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates

A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
Reader Level: Reader Level

Today we will look at how we can set up repeating editable areas within our child pages. Such areas provide a great deal of flexibility by allowing your template users to make adjustments to specific elements you have designated from the template. They have the power to increase, or decrease, the number of times such elements repeat on a page and, where you have given them the power to do so, they can also make content changes within those repeating regions.

The Beginner's Guide to Dreamweaver Templates Series:
A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates

Making Your Own FAQ - Part 3: Adding Comments and Feedback
Reader Level: Reader Level

With your FAQ set up in the first article, do you want to add comments and feedback? Wait no longer. In under and hour, you'll have it all ready to go.

The Make Your Own FAQ Series:
Making Your Own FAQ - Part 1: The Basic Set Up
Making Your Own FAQ - Part 2: Adding Categories and Search
Making Your Own FAQ - Part 3: Adding Comments and Feedback
Making Your Own FAQ - Part 4 Coming Soon

A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
Reader Level: Reader Level

As I'm sure you are aware, there will exist times when designing any web site that you will want specific layout options available to perhaps only a single page. We have already seen how we can use templates to keep our layouts consistent, in this tutorial we will look at how we can create page elements for our layout and show them only on the pages that they are required. The same technique can also be used in reverse, reversing the technique would allow you to remove specific elements from pages that don't require them.

Today we will look at how we can show an element on one page while hiding it from view on all other pages. The element we will be revealing will be a search results table on the search page. This search results table is surplus to requirements on all other pages in the web site so will not be visible on any page other than search.html. To achieve this functionality through our template we will be using the Optional Region functionality.

The Beginner's Guide to Dreamweaver Templates Series:
A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates

The CSS Starter Page Series Part 5: Shadows and Rounded Corner Background Images
Reader Level: Reader Level

Welcome back to the CSS Starter Page series! We're going to continue with our exploration of adding background images to the starter pages. My students always ask about rounded corner layouts that have shadows and textures, and so that is what we'll cover today.

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

A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
Reader Level: Reader Level

In Part 1 of this series we learned how to create a template. We made an editable region and discovered the two default editable regions Dreamweaver adds to the head of your page. We worked on a design called Scotty's Birdland and we will continue to work on this design as we discover how to create editable attributes to enhance our navigation systems.

The enhancement to the navigation systems in Scotty's Birdland will take the form of "You are here" page markers, a simple process in a standard HTML file, but a little different when working within the confines of a template. As we shall see.

The Beginner's Guide to Dreamweaver Templates Series:
A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates

A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
Reader Level: Reader Level

First of all, thanks are in order to Sheri German for this lovely rendition of The Lake District JumpStart. Sheri's design is called Scotty's Birdland and it is this design we will be making good use of in this introductory series to using Dreamweaver's templates.

The Dreamweaver template functionality is one that makes the editing of your individual pages safe and secure. This is achieved by dividing your page into two specific areas: editable and non-editable regions. The non-editable areas are in place to protect specific areas of your code, code that will remain consistent from page to page throughout your entire web site. Editable areas in contrast will allow you to make changes to your page on a page-by-page basis. We will be investigating each of these regions as we progress through this tutorial.

The Beginner's Guide to Dreamweaver Templates Series:
A Beginner's Guide to Dreamweaver Templates - Part 1: Creating the Template
A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
A Beginner's Guide to Dreamweaver Templates - Part 3: Optional Regions
A Beginner's Guide to Dreamweaver Templates - Part 4: Repeat Regions
A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates

CMX JumpStart: Lima
Reader Level: Reader Level

Welcome to the Lima JumpStart.

Lima is, of course, the capital of Peru and is our second JumpStart from that country, the first being Machu Picchu. Lima uses the Mercury design element that was designed by Gordon Mackay. The Mercury design element is a simple, yet effective, design to which I have made some subtle changes. Lima is an exercise in taking a design element and modifying it suit your needs. I have kept the main design structure intact and have introduced a change to the main header that originally held the navigation and moved the navigation into the side bar. Design elements are easy and quick to work with, I highly recommend them.

JumpStart Lima

The Spry Validation Confirm Control
Reader Level: Reader Level

The Spry Validation Confirm option provides a simple method for checking that the value of one form field is equal to that of the second. This a common check that is used when accepting passwords from users as they register for a web site store account or for controlled access to a web site's information. The behavior is simple to apply and validates before the form is submitted. You will need a form on your web page and at least two form elements of the same type, generally text inputs, for password verification.

Making Your Own FAQ - Part 2: Adding Categories and Search
Reader Level: Reader Level

With your FAQ setup in the first article, do youwant to add categories and a search? Wait no longer and in under and hour, you'll have it all ready to go.

The Make Your Own FAQ Series:
Making Your Own FAQ - Part 1
Making Your Own FAQ - Part 2: Adding Categories and Search
Making Your Own FAQ - Part 3 Coming Soon
Making Your Own FAQ - Part 4 Coming Soon

Dreamweaver's Swap Image Behaviour Free!
Reader Level: Reader Level

Dreamweaver's Swap Image behaviour is a simple, yet effective, way to provide interaction on your web page. In this tutorial we will be exploring this behaviour. We'll see how to correctly slice and export the images from Fireworks before implementing the Swap Image behavior in Dreamweaver. You will understand how the interaction between your images is triggered and see how to set alternative interaction events. Finally we'll implement a little CSS to remove the default borders that are applied to this type image swap.

Making Your Own FAQ - Part 1 Free!
Reader Level: Reader Level

Need to create a quick FAQ (frequently asked question) for a web site? With Dreamweaver, a little JavaScript and SQL, we can have a nice display in place in less than an hour!

The Make Your Own FAQ Series:
Making Your Own FAQ - Part 1
Making Your Own FAQ - Part 2: Adding Categories and Search
Making Your Own FAQ - Part 3 Coming Soon
Making Your Own FAQ - Part 4 Coming Soon

Losing that Rollover Lag
Reader Level: Reader Level

Rollover lag on image swaps can be one of the most annoying problems of all to deal with. The lag can really detract from your web site and give the appearance that things are not really working as they should! I find that this problem varies from browser to browser and the lag time in some is really unacceptable.

No matter if you mouseover or click to generate the swap image, it is only then that the swap image is requested from the server. Fortunately, this is an easy problem to fix - we just need a little CSS magic to ensure that our swap images are already in the cache when they are requested by the browser. This will ensure that our image swaps are as instant as they can be.

The CSS Starter Page Series Part 4: Rounded Corner Background Images
Reader Level: Reader Level

Rounded corner designs are very popular, and for good reason. They take a design outside the box! In this installment of the CSS Starter Page Series, you are going to create rounded corner designs for both fixed-width and liquid starter pages.

This tutorial will take you through three exercises. First you'll create the look of rounded corners in the two-column, fixed-width, left sidebar with header and footer CSS Starter Page. You'll then create the look of rounded fixed-width pods in its left sidebar.

In the third exercise you will use four background images to achieve a rounded corner design in the two-column fluid layout. The rounded look remains stable no matter how wide or narrow the user's window is.

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

The CSS Starter Page Series Part 3: Three Column Fluid Background Images
Reader Level: Reader Level

In The CSS Starter Page Series Part 1: Faux Column Images, we used background images to create the illusion of equal height columns in fixed-width layouts and two-column fluid layouts. The technique involved placing a background image on one div, the container div.

In this part of the series we will tackle the more complex task of creating the illusion of equal columns in three-column, fluid layouts. We will need to use two background images, and because some current browsers do not support the CSS3 specifications for allowing multiple images on one element, we are going to have to add an additional div to the markup to serve as the hook for the extra image.

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

From Screen to Print: Creating a Print CSS in Dreamweaver Free!
Reader Level: Reader Level

Questions often arise about how to print web pages. Should you create a separate, simple page for printing? Should you just leave users to their own devices knowing they control whether backgrounds or images print anyway? Cascading style sheets (CSS) make it simple to maintain a single page while presenting the content in two different manners using media types.

In this article, you'll learn about media types and how to take advantage of them to create compact pages for print. At the end of the fixed width chapter of the book Greg Rewis and I wrote called, Mastering CSS with Dreamweaver CS4 (there's also a Dreamweaver CS3 version of the book if you have not yet upgraded), we discuss the rules of creating a print style sheet. In this article, you will see those principles in action as you build an example CSS page. Let's get started!

CMX JumpStart: The New Forest
Reader Level: Reader Level

Welcome to The New Forest JumpStart!

The New Forest JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file. To switch the design from a three column to a two column layout you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The main construction of The New Forest JumpStart consists of liquid horizontal outer divs while maintaining a fixed inner content width to ensure that the design fills out the user's browser width, while still maintaining a good line reading length. The content, as always, is created with valid code and accessibility in mind.



Approximate download size: 4.4MB

Dreamweaver's Form Validation Behavior
Reader Level: Reader Level

This quick video shows how to use the form validation behavior in Dreamweaver.

Approximate download size: 14MB

CSS Tabbed Navigation Sets for Sliding Doors Navigation
Reader Level: Reader Level

Navigation is the most important part of any website - no matter how nice the site looks it has to be usable or it has little to no value in the real world. Not only does the navigation need to be well thought out, it also needs to be well designed, be accessible, look good and be robust enough to not break when a user resizes the page content. Their aren't too many systems that fill all those criteria, but one springs to mind almost every time I build a new site and that is Douglas Bowman's "Sliding Doors" navigation system. In this tutorial I will introduce you to the sliding doors technique. The tutorial is also accompanied by a sliding doors tab starter pack. The starter pack contains four different sets of images in the form of png files that you can easily edit to suit any given layout and all the (X)HTML and CSS required is available within the downloads.

The CSS Starter Page Series - Part 2: More Background Images
Reader Level: Reader Level

In the first installment of the CSS Starter Page Series, we looked at how we can use background images to create the look of equal height columns in Dreamweaver's CSS Starter Pages. We worked with fixed-width, hybrid, and liquid two-column layouts.

In this part of the series we will look at how we can use body background images on both fixed and liquid layouts while exploring the various repeat options that are available to us: repeat (the default), no-repeat, repeat_x (horizontally), repeat-y (vertically). We'll also try out some techniques for using complex pattern background 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

Hide Your Body!
Reader Level: Reader Level

Sometimes, when you have a lot of tables with data on the screen, the information can be overwhelming. If we could create a way to hide table content that didn't completely hide the table and was easily accessed, that could make the page better for the visitor. Well - with a little JavaScript code and a properly setup table - this is a quick fix!

CMX JumpStart: Nairobi
Reader Level: Reader Level

Welcome to the Nairobi JumpStart!

Nairobi allows you to quickly change the layout of the page from a three-column to a two-column layout by using descendant selectors to change the pages appearance. It also features an "upside down" version of the popular sliding doors navigation method, which is complemented by an accessible sub navigation set.

The main construction of Nairobi consists of liquid outer divs while maintaining a fixed inner content width to ensure that the design fills out the users browser width, while still maintaining a good line reading length. The content, as always, is created with accessibility in mind.

Nairobi comes complete with an extension to install the design into Dreamweaver, making the creation of new pages a breeze. It also comes complete with a series of tutorials that explain in-depth how the design elements have been put together.

Nairobi is a JumpStart not to be missed!

Quick Shot: Alternate Table Row Coloring
Reader Level: Reader Level

Do you have tables of data everywhere and you want to automatically setup the rows to alternate color?

This quick shot will use JavaScript and CSS to automatically alternate the background color of the table rows.

Dreamweaver for GoLive Users: Part Nine Free!
Reader Level: Reader Level

In this last installment of the Dreamweaver for GoLive Users series, you will learn about templates and library items, two essential productivity/automation features. You will then get an introduction to Dreamweaver's ultimate layout productivity feature, the CSS Starter Pages.

If you have been using GoLive's template and component features, learning to use the Dreamweaver equivalents - templates and library items - will not be too much of a stretch.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

The CSS Starter Page Series - Part 1: Faux-Column Images Free!
Reader Level: Reader Level

Most of you have probably opened a CSS Starter Page by now, intending to use it as a launching pad for a site design. Sure, they save a lot of headaches in that they give you the basic structure for columns, header, and footer. They include generic classes for floating images left and right. They even take the worry out of figuring out how to code a liquid versus fixed, or elastic versus hybrid, layout. And what a blessing that they include some basic Internet Explorer fixes!

Still, you may have looked at them with some dismay as soon as you noticed what they don't include. Like how about that pesky little detail called the navigation scheme? Or what about the fact that the second (or third column, if there is one) has a background color that stops as soon as the content within stops? Or what to do about the Internet Explorer problems that you introduce as you modify the CSS Starter Page?

Relax. This series will tackle the missing puzzle pieces of the CSS Starter Pages in a codified and modular fashion by taking on one issue at a time. The first topic of this series will be devoted to background images and faux column technique in all of their permutations, starting with background images for columns in liquid, elastic, and fixed-width layouts. So settle back, download the support files at the bottom of the page, and begin your journey towards becoming a background image guru.

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

CMX JumpStart: Tokyo
Reader Level: Reader Level

The Tokyo JumpStart looks at how we can use the flexibility of a CSS layout to control the number of columns on any given page from a single CSS file.

The Tokyo JumpStart provides the easiest of solutions for changing the amount of columns on a page - you simply need to add a class to the body tag and the CSS takes care of everything else for you!

The Tokyo JumpStart includes the following tutorials:

There are some great tutorials for you to work through in that list, as well as a great extension for creating the conditions for using conditionally commented style sheets that feed styles to the various versions of Internet Explorer.





Dreamweaver for GoLive Users: Part Eight Free!
Reader Level: Reader Level

In Part Seven of this series, we completed the Music History design in Dreamweaver. This time around we'll perform some quality assurance on the page by using the Check Browser Compatibility feature. We'll learn about using Internet Explorer Conditional Comments (IECC) to take care of problems in that browser. Finally, we'll create a snippet to fix future encounters with the Three-Pixel Text Jog bug.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

Dreamweaver for GoLive Users: Part Seven Free!
Reader Level: Reader Level

In Part Six of this series, we used Dreamweaver to manipulate the various divisions of the page and position them into a header with two columns underneath. This time around we'll complete the design in Dreamweaver by formatting the maincontent div text and turning the sidebar links into clickable buttons. In the process, I hope to introduce you to additional features that will improve your productivity.

This tutorial includes starter exercise files as well as a completed layout that you can use as a basis of comparison while you work through the steps.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

Integrating Cartweaver with a Page Design Free!
Reader Level: Reader Level

My last article about integrating Cartweaver with your web site focused on our JumpStarts. The article described how to integrate Cartweaver with the Minneapolis JumpStart, which was an e-commerce JumpsStart, but the techniques could apply to any of our JumpStarts.

This article will focus on integrating Cartweaver with any design, including the simple layouts included with the latest versions of Dreamweaver (CS3 and CS4).

Pagination in Dreamweaver
Reader Level: Reader Level

Dreamweaver comes with some handy server behaviors to accomplish a lot of commonly done tasks on your web site. One such server behavior is the pagination functions. Learn about how to make this work on your site.

Approximate download: 5MB

Introducing CMX JumpStart Phoenix Free!
Reader Level: Reader Level

It's another JumpStart, and this one is named after a city I visited and loved, Phoenix, Arizona.

CMX JumpStart Phoenix is a centered, two-column, 760 pixel fixed-width layout that has many appealing design features. There is a strikingly contrasted color scheme, vertical navigation in the right column, and "swap image" rollovers that use a caching technique that corrects flaws in Internet Explorer.

The JumpStart filters styles for various versions of Internet Explorer, and includes separate style sheets to address issues found in IE 6 and below versus IE 7.

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

CMX JumpStart: Phoenix
Reader Level: Reader Level

Welcome to the Phoenix JumpStart!

Phoenix, as with all CMX JumpStarts, comes complete with all source files - from the XHTML document to the PNG files to, of course, the heart of the JumpStart, the CSS files.

It is a two-column centred design and can easily be modified to suit your own requirements. Phoenix makes good use of Conditionally Commented style sheets and comes complete with a design time style sheet to ensure everything looks just as you would expect in Dreamweaver's design view.



User Authentication in Dreamweaver
Reader Level: Reader Level

User authentication (logging someone in) takes minutes with Dreamweaver, watch how it is done and get your work done in no time!

Approximate download size: 4.7MB

Showing Results and Details on One Page Using AJAX For Cartweaver Free!
Reader Level: Reader Level

Dreamweaver's Master/Detail page set is a handy set of behaviors to use for a drill-down functionality -- display a list of records, and click on a link in the list to view the full record. Cartweaver does not use the Dreamweaver behaviors for the Master/Detail page set, but does include the same concept with its results and details page. The article Creating a Master/Detail Pageset on One Page Using AJAX showed how to put both pages together using AJAX using the built-in Dreamweaver server behaviors. In that tutorial, I showed how to create one master/detail page that uses some very simple JavaScript to load the details section of the page dynamically using AJAX. This creates a much faster page, in that it only loads the dynamic details portion when needed, rather than the entire page.

This article will use the same JavaScript functionality to create the functionality for a Cartweaver site. The article will apply equally to the ColdFusion, PHP, and ASP versions of Cartweaver and assumes that you own one of those products. To use this functionality you have to set your details display setting in the admin to either "Simple" or "Tables". The "Advanced" option uses JavaScript to set menus, which would require more modifications.

CMX JumpStart: Prague
Reader Level: Reader Level

The Prague JumpStart looks at how we can lay out over-lapping elements within our designs and investigates the use of multiple wrappers to ensure that our layout maintains its structure on resize.

In previous JumpStarts we have looked at how we can filter our CSS rules to one browser or another; with Prague we will be filtering our CSS in a slightly different way by providing a style sheet to take care of specific navigation problems that can be found in IE 5.01.



Add, Edit and Delete Records with PHP and Dreamweaver - Video
Reader Level: Reader Level

Dreamweaver comes with some really great wizards which make the add/edit/delete process for database tables quick work. This tutorial will walk you through creating all of the needed functionality to get this done.

Approximate download size: 17MB

Dreamweaver for GoLive Users: Part Six Free!
Reader Level: Reader Level

In Part Five of the Dreamweaver to GoLive series, we completed the Music site design in GoLive. Now it is time to translate your GoLive CSS skills into Dreamweaver CSS skills. The basic concepts do not change, but rather just the location of a few tools.

This tutorial includes both a starter and completed folder in its support files.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

Dreamweaver for GoLive Users: Part Five Free!
Reader Level: Reader Level

In Part Four of this series, we used GoLive to manipulate the various divisions of the page, and positioned them into a header with two columns underneath. This time around we'll complete the design in GoLive by formatting the maincontent div text and turning the sidebar links into clickable buttons.

This tutorial includes starter files as well as the completed layout.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9


Dreamweaver for GoLive Users: Part Four Free!
Reader Level: Reader Level

It's been a while since the third installment in the Dreamweaver for GoLive users series, but I didn't forget you while I was writing about the Dreamweaver public beta or the latest CMX JumpStart! In parts four and five of this tutorial, we'll get to the really exciting stuff. We'll use Adobe GoLive to add the styles that will transform the pure markup from a series of divs that stack vertically down the page into a neatly contained fixed-width layout with side-by-side columns.

Then, in part six, you'll learn how to perform the same tasks in Dreamweaver.

This tutorial includes both starter and completed files folders.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

CMX JumpStart: The Lake District
Reader Level: Reader Level

The Lake District JumpStart wanders away slightly from our usual city theme. The Lake District is an area in the North West of England that has a beautiful collection of (guess this if you can...) lakes and some absolutely stunning scenery. You should really visit The Lake District if you ever get the slightest opportunity to do so.

The nature of the images in this type of website demands that the eye be drawn to the subject matter rather than the design. With this in mind The Lake District allows the content images to take centre stage by utilising a design that consists of black, greys and white to ensure the design does not subtract from the content.

Baltimore: Developing a CSS Starter Page - Part Five
Reader Level: Reader Level

Welcome back to the Baltimore CSS Starter Page series. Last time around you added the markup for the header, navbar, and footer divs. In this installment, you are going to code the CSS rules for the header, navbar, and footer that will turn Baltimore into a horizontal band layout.

This tutorial includes starter files, as well as the completed layout.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five


Dreamweaver for GoLive Users: Part Two Free!
Reader Level: Reader Level

In Dreamweaver for GoLive Users: Part One, you set up the sites and files you are going to use as you create a web standards layout side-by-side in both GoLive and Dreamweaver. In this second tutorial in the series, you will code the markup for the layout in Adobe GoLive; in the third part, coming very soon, you will code the markup for the layout in Dreamweaver. During the course of these two interrelated tutorials, you will learn more about how to translate your knowledge of GoLive's interface into knowledge of Dreamweaver's.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

CMX JumpStart: Bordeaux
Reader Level: Reader Level

Welcome to the Bordeaux JumpStart.

Bordeaux features a split-level navigation system, both of which are accessible. The main navigation incorporates the sliding door method as described by Douglas Bowman. The sub-navigation is an unordered list based navigation system and both navigation systems provide clear "you are here" page markers. The design is a two-column layout, fixed at 740px wide, and utilises gradients in the background while using the full width of the user's browser to provide a full and expansive appearance to the overall design. Bordeaux can be integrated into the New File dialog window of Dreamweaver by using the extension that is provided within the download

Baltimore: Developing a CSS Starter Page Part Four
Reader Level: Reader Level

In this installment of the Baltimore CSS Starter Page series, you are going to add the markup for the header, navbar, and footer to complete the horizontal band structure. You can use the site you worked on in the previous installment, or you can use the baltimore_site_starter folder in the download that accompanies this tutorial. The download folder also includes a completed tutorial site so that you can compare your work if you get into any trouble.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

Dreamweaver for GoLive Users: Part One Free!
Reader Level: Reader Level

Current reality suggests that we all make the switch to Dreamweaver now that GoLive is no longer part of the Adobe Suites and is likely at the end of the line. Sure, we can keep using GoLive as long as our operating systems support the software. Still, it would be a wise decision for many GoLive users - especially those who are making web sites for a living - to learn to use Dreamweaver in addition to GoLive.

I have frequented GoLive forums and lists over the years, and often read posts by frustrated GoLive users who claim Dreamweaver doesn't do this or that task. Occasionally, the charge is true. Still, often the problem is that the path to finding the task is radically different in Dreamweaver and is not immediately discoverable.This series aspires to ease the pain of translating equivalent tasks from one "language" to the other. You will "learn by doing", that is, by creating the same layout in both GoLive and Dreamweaver.

In this first installment in the series, you will set up the site definition and file structure for the "music history" site in both programs.

The Dreamweaver for GoLive Users Series:
Dreamweaver for GoLive Users: Part 1
Dreamweaver for GoLive Users: Part 2
Dreamweaver for GoLive Users: Part 3
Dreamweaver for GoLive Users: Part 4
Dreamweaver for GoLive Users: Part 5
Dreamweaver for GoLive Users: Part 6
Dreamweaver for GoLive Users: Part 7
Dreamweaver for GoLive Users: Part 8
Dreamweaver for GoLive Users: Part 9

Image Maps: Creating a Client-side Image Map with Fireworks and Dreamweaver
Reader Level: Reader Level

In this third tutorial in the series we will show the process of creating an image map in Fireworks using both manual and automatic hotspot creation tools. Fireworks makes it easy to create the interactive areas, which can then be exported out for use in your favorite web editor. Dreamweaver/Fireworks integration makes it easy to insert the Fireworks generated image map into an existing web page.

Be sure to check out the two other parts in this series, written by Steven Seiller: Creating a Client-side Image Map with Illustrator and Creating a Client-side Image Map with Dreamweaver.

The Creating Image Map Series:
Image Maps: Creating a Client-side Image Map with Illustrator
Image Maps: Creating a Client-side Image Map with Dreamweaver
Image Maps: Creating a Client-side Image Map with Fireworks and Dreamweaver

Image Maps: Creating a Client-side Image Map with Dreamweaver
Reader Level: Reader Level

If a picture is worth a thousand words, then an image map can be worth a thousand text links. With a client-side image map, you can provide the visitor a graphical set of links to follow. Relying less on reading and more on visual cues, image maps are ideally suited to images which provide geographic or process-oriented information.

In this tutorial, we will show the process of creating an image map in Dreamweaver using its built-in selection tools and automatic map creation. Dreamweaver provides a convenient way to create image maps when you use the program to create your web pages.

The Creating Image Map Series:
Image Maps: Creating a Client-side Image Map with Illustrator
Image Maps: Creating a Client-side Image Map with Dreamweaver
Image Maps: Creating a Client-side Image Map with Fireworks and Dreamweaver

CMX JumpStart: Malé
Reader Level: Reader Level

The Malé JumpStart is a fixed-width, two and three-column layout. It has a right column that can be shown, or hidden, on a page-by-page basis, without the need to delve into the code. The centre column is our main info area while the left column features a CSS based flyout menu. This is a menu design that owes some thanks to Peter Nederlof for his work on the csshover.htc script that allows the menu to function in versions of Internet Explorer that don't support the hover on non-anchor elements. Coupled with this JumpStart is an excellent introductory tutorial written by John Gallant and Holly Bergevin that explains the set up of the menu. Read and enjoy.



Baltimore: Developing a CSS Starter Page Part Three
Reader Level: Reader Level

In the first two parts of the Baltimore CSS Starter Page series, you created a comp for the design we are naming after the city of Baltimore. You analyzed the graphics in relation to the fixed-width, two-column, centered layout CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Baltimore site. You now should have the following documents in the site folder:

  • mockup.html, the XHTML page (with the CSS rules in the head of the document)
  • an images folder with the exported graphics for the site

In this third part of the series, you will apply the exported graphics to the existing sidebar and mainContent columns, using the CSS Starter Page as your launching pad.

This tutorial includes a starter folder and a completed exercise folder in its download.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five



Baltimore: Developing a CSS Starter Page - Part One
Reader Level: Reader Level

I am pleased to introduce Baltimore, the third city to form the basis of a CSS Starter Page series. I am particularly fond of Baltimore as my family and I live between this largest city in Maryland and Washington, DC. We go into Baltimore every week for our son's musical activities at the Peabody Preparatory Department, which is a division of John Hopkins University.

If you followed along with Honolulu or Chicago, you'll remember that the CSS Starter Pages, while extremely useful, do lack navigation schemes and other bells and whistles, such as gradient background images. So, you need a little knowledge in order to turn them into viable layouts.

You may remember that Honolulu guided you through adding faux column technique and vertical buttons created with an unordered list. Chicago added a horizontal navigation bar and sidebar pods to your growing skill set. This time around you'll add "modules" to the two-column, fixed-width, left-sidebar CSS Starter Page to turn it into a horizontal band layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for the design we're calling Baltimore. You'll export the slices and develop the XHTML and CSS to create a working template that you can use for a personal or client project.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Baltimore Dreamweaver site, and develop the graphics in Fireworks.

The Developing a CSS Starter Page: Baltimore Series
Baltimore: Developing a CSS Starter Page - Part One
Baltimore: Developing a CSS Starter Page - Part Two
Baltimore: Developing a CSS Starter Page - Part Three
Baltimore: Developing a CSS Starter Page - Part Four
Baltimore: Developing a CSS Starter Page - Part Five

From Create a Site to Connecting to a Database
Reader Level: Reader Level

If a picture is worth a thousand words - then a video should be worth millions (if, of course, you account for the 15 frames per second)! In my first video tutorial for Community MX, I am going to show how to set up a new Dreamweaver site using the basic site set up, set up a database on a Linux based server utilizing CPanel and then how to connect to the database.

Approximate download size: 26MB

From Chicago Style to Picture Perfect - Customizing the Chicago JumpStart
Reader Level: Reader Level

I was recently approached by a friend to update her site. I had done the initial design a few years ago and while she still received positive feedback on the site, she wanted a more contemporary, corporate feel to attract business customers.

As luck would have it, Sheri German was just wrapping up her series on the Chicago JumpStart. This new JumpStart design is based on one of the Dreamweaver CS3 CSS templates. If you followed Sheri's series, you saw her take the skeleton template and turn it into a fully fledged design, including the PNG artwork.

This article will focus primarily on customizing the PNG, and try to retain as much of the original CSS as possible. For my design, I did customize the slicing in a couple areas in the PNG, so we will also talk about how to make those changes in the CSS.

Approximate download size: 1.3MB

CMX JumpStart: Sydney
Reader Level: Reader Level

Welcome to the Sydney JumpStart. Sydney is comprised of two columns, one of which is an absolutely positioned div that contains the nested list navigation elements.

Sydney utilises three style sheets, one that is read by all browsers and a second that is read only by versions of Internet Explorer that are greater than version 5. The final style sheet is used only at design time and provides a workaround for Dreamweaver's lack of support for the min-height value and property.

The Sydney JumpStart comes complete with a comprehensive set of tutorials and it also includes all source files, from the design png file right through to the xhtml and CSS files. Also included within the Sydney download file is the CMX design time style sheet extension which builds on and enhances the native functionality.



Chicago: Developing a CSS Starter Page - Part Four
Reader Level: Reader Level

In the last article in the Chicago: Developing a CSS Starter Page series, you established "the big picture" for the layout by styling the main divs, such as the header, columns, and footer. Now it is time to start painting in some of the finer details. You'll tweak the text, add an image with a border to the content area, and use definition lists to provide the hooks for the sidebar pod styles.

For this tutorial, you can use the work you completed in the last installment of this series, or you can use the starter site that is in the download folder that is included with this article. There is also a completed site that you can use to compare your work against should you develop any problems.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Copy a Record in PHP Using Dreamweaver
Reader Level: Reader Level

A quick and easy way to copy a record, edit the record contents and insert it as a new record in to your database. By using Dreamweaver server behaviors, this process is a snap!

Chicago: Developing a CSS Starter Page Part Three
Reader Level: Reader Level

In the first two parts of the Chicago CSS Starter Page series, you created a comp for the design we are naming after the city of Chicago. You analyzed the graphics in relation to the fixed-width, two-column, centered layout with header and footer CSS Starter Page, and developed a slicing strategy. Finally, you exported the graphics to the defined Chicago site. You should now have the following documents in the site folder:
  • mockup.html, the XHML page
  • main.css, the external style sheet
  • an images folder with the exported graphics for the site

In this third part of the series, you will apply the exported graphics to the appropriate page areas, using the CSS Starter Page as your launching pad. The beauty of using a CSS Starter Page is that all of the basic structure is coded for you. The floated column, the clearing element, the centering of the layout, and other generic features are in place. All you have to do is tweak the design to suit your taste.

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5



Breaking the Mold: How to Customize a JumpStart
Reader Level: Reader Level

As a creative exercise, I challenged myself to customizing a JumpStart in such a way that the original layout structure could not be recognized. The success of this challenge would go beyond a simple 'paint-by-numbers' approach to modifying the template and require more advanced CSS layout techniques. The first self-imposed rule was to not alter the original layout framework. Secondly, I wanted to leave the HTML source intact so that I could apply any number of CSS design modifications to the same page for the demonstration of various design techniques. My approach to this challenge was grounded in providing the illusion that the formatted design was no longer constrained by the Jumpstart layout despite being confined to it. I decided from the start that the effect of 'jail-breaking' the layout could be achieved with a combination of carefully designed images and CSS placement techniques. Let's take a look at the result of the initial redesign which I feel achieves the desired effect.

Chicago: Developing a CSS Starter Page - Part One
Reader Level: Reader Level

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you're able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

You need some knowledge to modify them, however. They do not include navigation schemes, nor do they include any bells and whistles, such as sidebar pods.

In this series you'll modify the two-column, fixed-width, left-sidebar, header and footer CSS Starter Page by adding a horizontal button navigation scheme as well as definition list-based pods. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Chicago.

In the first part of this tutorial series, you will select a CSS Starter Page, define the Chicago Dreamweaver site, and develop the graphics in Fireworks.

CSS Starter Page Chicago

The Developing a CSS Starter Page Series:
Chicago: Developing a CSS Starter Page - Part 1
Chicago: Developing a CSS Starter Page - Part 2
Chicago: Developing a CSS Starter Page - Part 3
Chicago: Developing a CSS Starter Page - Part 4
Chicago: Developing a CSS Starter Page - Part 5

Drag and Drop from Bridge to Dreamweaver Free!
Reader Level: Reader Level

In the past we've looked at both Fireworks' and Photoshop's improved integration with Dreamweaver. Well, Adobe Bridge has the same functionality! You can easily move image files from Bridge right into a web page in Dreamweaver. This short tutorial shows you how.


Handy Form Snippets Free!
Reader Level: Reader Level

Drop down lists. They are a necessary part of many applications, and yet are time-consuming to create. You will not know how valuable these are until you need them. Included are:
  • US States
  • US States and Canadian Provinces
  • Time in hour segments
  • Time in half-hour segments
  • Time in quarter-hour segments
  • Time in hour segments with military time values
  • Time in half-hour segments with military time values
  • Time in half-hour segments with military time values
  • Time in hour segments with military time values and display
  • Time in half-hour segments with military time values and display
  • Time in half-hour segments with military time values and display
  • Business Hours (8-5) in hour segments
  • Business Hours (8-5) in half-hour segments
  • Business Hours (8-5) in quarter-hour segments


CMX JumpStart: Stirling
Reader Level: Reader Level

The Stirling JumpStart is based around the popular Playa Blanca JumpStart, with one or two subtle enhancements that will allow you to easily flip the design from a two-column layout to a three-column layout on a page-by-page basis.

Case Study: How to Customize a JumpStart Free!
Reader Level: Reader Level

The primary benefits to the JumpStarts are that they have been tested with the popular browsers and can get you up and running quickly. Having a limited timeframe to get the site redesigned, I decided to give the JumpStarts a good look. What I quickly realized is that despite my disdain for templates, the JumpStarts are highly customizable, which can result in uniques designs.

In this tutorial, I will describe the process I used for assessing my web site needs and selecting a specific JumpStart. We will then walk through the steps of creating a unique design from the example. Finally, I will share an extra step I took in which I used PHP to 'templatize' my page design to speed content creation, ease revisions and provide customized content to the visitor.

Highlight a Table Row on Mouseover!
Reader Level: Reader Level

Highlighting a row in a table is a commonly seen web feature and is pretty handy for figuring out where you are in a larger table. Highlighting the row also allows the visitor to quickly see what data is connected to the row the mouse cursor happens to be over. While the effect is simple, the JavaScript is a little tricky. This tutorial will go over exactly how to implement this functionality on your tables!

Flash Video and Dreamweaver CS3
Reader Level: Reader Level

A lot of confusion has arisen around inserting Flash Video into Dreamweaver CS3. Here are the straight goods.

How to Make a Popup with a Translucent Background
Reader Level: Reader Level

Displaying a larger image to a thumbnail can be accomplished many ways, in this article we will go over how to do it with apDIVs and a translucent background.

Quick Shot - Form Styling Free!
Reader Level: Reader Level

Need to create a visual clue on all of your form elements when the form element has focus? Don't want to apply two behaviors per form element? Check out this solution, apply once, works everywhere!

Quick Shot - Using CSS to Create a Scrolling Content Area - The Text Version Free!
Reader Level: Reader Level

Adding a scrolling region to your pages is pretty easy using CSS and DIV's, as we saw in my recent video tutorial. Having received a couple subscriber requests, though, I decided to make a simple written version of this process for our CMX Quick Shot series.

HTML Reports in Dreamweaver - Part 2
Reader Level: Reader Level

Dreamweaver includes a set of reports to check the HTML of a group of pages in a site. The reports include Combinable Nested Font Tags, Accessibility, Missing Alt Text, Redundant Nested Tags, Removable Empty Tags and Untitled Documents. In this part of the series, creating and reading the Accessibility report is covered.

The HTML Reports in Dreamweaver Series:
HTML Reports in Dreamweaver - Part 1
HTML Reports in Dreamweaver - Part 2

Using CSS to Create a Scrolling Content Area
Reader Level: Reader Level

Sometimes, CSS makes things so easy you have to smile. Such was the case when several of my students posed the question, "How can I make a long page of content fit in a short area on my web page?"

In a few quick steps, I demonstrated how to set up a generic div to act as a scrollable content area. They were surprised (and relieved) the process was so quick and easy. The following video shows the steps I took to create such a scrollable area within a web site mock up.

Approximate download size: 9.8MB

CMX JumpStart: Playa Blanca
Reader Level: Reader Level

Playa Blanca is a two column fixed width design that uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for.

The colours in Playa Blanca have been used to reflect the sunshine and the many wonderful volcanic shades that can be found on the island. I hope you like Playa Blanca and it serves you well for future work.

Approximate download size: 1.8MB

HTML Reports in Dreamweaver - Part 1
Reader Level: Reader Level

Dreamweaver includes a set of reports to check the HTML of a group of pages in a site. The reports include Combinable Nested Font Tags, Accessibility, Missing Alt Text, Redundant Nested Tags, Removable Empty Tags and Untitled Documents. In this part of the series, creating and reading the Combinable Nested Font Tags, Missing Alt Text, Redundant Nested Tags, Removable Empty Tags and Untitled Documents reports is covered.

The Accessibility report will be covered in Part 2 of this article.

The HTML Reports in Dreamweaver Series:
HTML Reports in Dreamweaver - Part 1
HTML Reports in Dreamweaver - Part 2

How to Apply the longdesc Attribute in Dreamweaver
Reader Level: Reader Level

In Alternative Text for Complex Graphics, you learned about what the longdesc attribute is, why you would want to use it, and how to do so. If you're a Dreamweaver user and want to add longdesc attributes to your images, you may discover that there isn't a specific shortcut to do so. In fact, one of the methods for adding longdesc within Dreamweaver is downright confusing. However, there are Dreamweaver shortcuts for adding attributes to tags in general that we can take advantage of to speed up adding the longdesc attribute to img elements.

This tutorial will go over four ways to add the longdesc attribute to images using Dreamweaver and explain the tricks for using each method.

Quick Shot - Adding Accessibility To A Form With Validation Free!
Reader Level: Reader Level

So you've got a fancy JavaScript validated form, but it won't work when someone has JavaScript turned off. Want to get the form working? Read on...

Honolulu - Developing a CSS Starter Page: Part Two
Reader Level: Reader Level

In the first part of the CSS Starter Page series, you developed a Fireworks composite to use with the two-column, fixed-width, right sidebar with header and footer CSS starter page. In this tutorial, you will slice the composite, export the slices, and apply the graphics to either the CSS or XHTML document, depending on whether its purpose is presentation or content.

In this tutorial you will learn the following skills:
  • Use different slicing methods
  • Analyze a composite for creating slices that are most effective in a CSS based layout
  • Set export options for a CSS based layout
  • Apply background images to the various starter page divs
  • Determine which graphics should be in the CSS and which graphics should go into the XHTML page

Approximate download size: 1.8MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon



Taking Madrid to Print Free!
Reader Level: Reader Level

Perhaps the most common down-fall when designing for print is to overdo things. You need to remember that you are creating a style sheet that will present your information to your users in a printed format.

There is no need whatsoever to redesign or recreate your web site, it is simply the information that we want to provide and it is the information that your users are interested in.

Copy and Paste Between Fireworks and Dreamweaver CS3
Reader Level: Reader Level

Fireworks is also reaping the benefits of the new integration between Photoshop and Dreamweaver CS3. We can now copy and paste objects and layers (vector or bitmap or both) between Fireworks and Dreamweaver. As obvious as it sounds, this feature was not available prior to CS3.

This short video will walk you through the process of copying and pasting between Fireworks and Dreamweaver, which, you will find, is remarkably similar to the Photoshop to Dreamweaver work flow.

Copy and Paste Features Between Photoshop and Dreamweaver CS3
Reader Level: Reader Level

In my last video, I demonstrated how to take images from a pdf file and paste them from Photoshop into a Dreamweaver Document. Well this copy/past functionality is not limited to single-layer images. Dreamweaver CS3 supports the use of PSD files and also allows you to copy and paste multiple layers from a Photoshop file.

In this video we'll explore this new integration between Dreamweaver and Photoshop and various ways to use it.

Approximate download size: 17.8MB

Honolulu - Developing a CSS Starter Page: Part One
Reader Level: Reader Level

The CSS Starter Pages are an invaluable addition to the CSS toolset in Dreamweaver CS3. With well over thirty different layout types from which to choose, you'll be able to rapidly develop page designs, free from the onerous task of having to build the underlying structure from scratch.

In this two-part tutorial you'll learn to take advantage of this feature as you modify the two-column, fixed-width, right-sidebar, header and footer layout. You'll use a Fireworks graphical representation of the layout to develop the graphics for a design we'll call Honolulu.

Approximate download size: 1.5MB

The Honolulu - Developing a CSS Starter Page Series:
Honolulu - Developing a CSS Starter Page: Part 1
Honolulu - Developing a CSS Starter Page: Part 2
Honolulu - Developing a CSS Starter Page: Part 3 Coming Soon

Limiting Textarea Characters
Reader Level: Reader Level

Limiting the characters for a textarea is a pretty common thing around the web. We are going to create our own script to accomplish this functionality, but with a little twist - using DOM compliant scripting and without putting a single line of JavaScript in the body of the document, not even on the textareas themselves.

CMX JumpStart Madrid
Reader Level: Reader Level

The latest CMX JumpStart follows the same city theme, but this time you are magically transported across the continents to Europe and the beautiful city of Madrid, Spain.

The Madrid JumpsStart is an elastic three-column layout that incorporates the use of header and footer divs. Elastic layouts are a little different than liquid layouts and are perhaps a little more awkward to work with. Not to worry: we'll be exploring the intricacies of working with an elastic layout and you'll soon be in a position to start modifying Madrid for your own ends.

The Madrid JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Madrid meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2MB

Creating a Master/Detail Pageset on One Page Using AJAX
Reader Level: Reader Level

Dreamweaver's Master/Detail page set is a handy set of behaviors to use for a drill-down functionality -- display a list of records, and click on a link in the list to view the full record. Using the behaviors, however, you typically create two pages. If you create one page with both, the page will refresh each time you click on a link.

In this tutorial, I'll show how to create one master/detail page that uses some very simple JavaScript to load the details section of the page dynamically using AJAX. This tutorial will apply to PHP, ColdFusion, and ASP, with the concepts applicable to the other available server models that Dreamweaver now supports.

Finding and Fixing Missing Alt Text Using Dreamweaver
Reader Level: Reader Level

If you have old, inaccessible sites that you maintain that you'd like to make accessible, one of the best places to start is adding alt attributes to all of the images throughout the site. Alt text can benefit screen reader users, text browser users, people who browse with images turned off (due to slow connections or tiny screens) and more. Adding alt text is also a good place to start because it is so easy to do from a technical standpoint. All you need to do is decide what the alternative text should be, add the alt attribute to the img element, and type in your value. There's no huge HTML restructuring, complicated CSS, or programming involved.

Of course, having to do this simple task over and over again is still easy but not very fun. If you have an entire site with no alt attributes, especially if it is a table-based site with spacer GIFs, you may have a lot of work ahead of you. There's no way you can automate adding alt attributes to existing pages, since alt text really needs to be tailored to each individual image. When it comes to alt text, its quality is just as important as its presence. However, there are some tricks you can do in Dreamweaver that can speed up the alt text addition process quite a bit.

In this tutorial, we'll take an example site with no alt attributes and lots of images and use Dreamweaver's Find and Replace function with regular expressions to add alt text to entire batches of images site-wide.

No pre-knowledge of regular expressions is necessary for this tutorial. Some knowledge of accessibility, specifically why and how to set proper alt text, will be helpful as you work through the example files as well as apply the demonstrated techniques to your own pages.

The Dreamweaver Web Standards Lesson Plan Series Part Fourteen
Reader Level: Reader Level

In the last part of the lesson plan series you learned about dealing with Excel and creating accessible tables. Now you'll set up an accessible contact form on a new contact page that you'll generate from the site template. You'll learn to use the label "for" and multiple fieldset and legend elements. You'll also style the form so that its design enhances meaning.

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

Defining a Site in Dreamweaver CS3, Advanced Tab Free!
Reader Level: Reader Level

A step by step guide to setting up a site in Dreamweaver CS3 using the advanced tab

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

After you learn to create layouts using CSS techniques, you may think that you no longer need to use tables. Tables are still a very important tool, though. They are still appropriate for their original intended purpose, that is, for tabular data.

In the last part of this series, you dealt with Word documents and their tendency to break valid code. Now you'll turn to Excel and learn the best way to convert its documents into spreadsheets on the web. You'll take an Excel document that contains a spreadsheet of the plays of Shakespeare, convert it to clean (X)HTML, add accessibility and usability features, and then style it to match the design of the Shakespeare site. You can download the support files, as well as a completed version of the page, in the download link so that you can "play along at home".

Approximate download size: 687k

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

Defining a Site in Dreamweaver CS3, Basic Tab Free!
Reader Level: Reader Level

A step by step guide to setting up a site in Dreamweaver CS3 using the Basic tab.

CMX JumpStart: Palm Springs
Reader Level: Reader Level

Palm Springs is a three-column fixed-width layout that incorporates a dual navigation system consisting of a horizontal tab section at the top of the design and a left column vertical sub navigation set. The design includes a pre-prepared log in form, layout elements and a subscribe form layout in the right hand column. As always the JumpStart contains all source files that were generated in its creation, from the CSS files, to the PNGs and of course the XHTML code that lies at the heart of the design. Palm Springs meets the W3C standards for CSS and XHTML as well as the WAI accessibilty requirements.

Approximate download size: 2.3MB

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

All hail content - content is King!

Continuing where you left off in Part Eleven of the lesson plan series with adding content so that it doesn't break the code. You'll learn to add Microsoft Word content and clean it up to web standards. You'll learn to deal with character entities to avoid those weird characters that some pages display. You'll get deep into the features of Dreamweaver's Find and Replace dialog box to speed up content cleanup and changes. Finally, you'll learn to add images in a way that does not break the layout, especially in Internet Explorer.

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

Create a Simple Database Web Search - Part 1
Reader Level: Reader Level

Putting together a simple database search is a piece of cake using built-in Dreamweaver tools -- no coding required. We'll show a simple Master/Detail Page Set behavior and how to add a simple search form to it. This tutorial will work with any Dreamweaver server model. Part 2 will focus on PHP and show a more advanced search.

The Creating A Simple Database Web Search Series:
Creating a Simple Database Web Search - Part 1
Creating a Simple Database Web Search - Part 2: PHP
Creating a Simple Database Web Search - Part 2: ColdFusion

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

In Part Ten of the Dreamweaver Web Standards Lesson Plan series, you will complete the bug squashing work you started in part nine, as well as learn some "best practices" for feeding Internet Explorer the unique styles it needs. Here is what you will do in this tutorial:

  • Identify the 3-pixel text jog bug
  • Use the CSS Advisor to find solutions to fix the bug
  • Create an Internet Explorer specific style sheet for all IE bugs from lessons nine and ten
  • Use Conditional Comments to feed the style sheet to Internet Explorer only

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



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

The Washington, D.C. JumpsStart is a two-column fixed-width design. It uses the sliding doors method for presenting the navigation as a nice horizontal tabbed menu, which acts as a main navigation for the page-level vertical sub-navigation set.

Washington, D.C. makes good use of background images and, as always, meets the standards for CSS, XHTML and Accessibility, thus ensuring you have a good solid layout in which to begin your conversion to a client site.



Approximate download size: 2.6MB

The Dreamweaver Web Standards Lesson Plan Series Part Nine
Reader Level: Reader Level

In Part Nine of the Dreamweaver Web Standards Lesson Plan series, you are going to move away from novice status as you delve into more complex CSS topics. In this tutorial, you are going to add more accessibility to the page by modifying the navigation buttons and putting them into an unordered list. This will launch you into the world of browser bug squashing as you work to resolve the Internet Explorer issues caused by links in lists.

Here is what you will do in part nine:
  • Take the links in the left column out of their paragraph formatting, and put them into a bulleted list in order to group them.
  • Change the name of a rule in the CSS Styles panel with the new CS3 CSS management features.
  • Identify possible CSS browser bugs by using the Dreamweaver CS3 Check Page feature.
  • Fix the problems by viewing and choosing solutions from the new Adobe CSS Advisor.
  • Implement the "hacks" and solutions that will correct the problems.

Don't have CS3? You can still play along at home - look for alternative steps along the way.

This tutorial is a two-parter within the series. You'll find a list of what you will do in this tutorial's sequel, Part Ten, at the end of this article.

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 Seri


The Dreamweaver Web Standards Lesson Plan Series Part Eight
Reader Level: Reader Level

If you have been following along with the Dreamweaver Web Standards Lesson Plan series, by now you should have a good start on a working site. There is a very important step to take before going any further, however: you should validate the site for (X)HTML, CSS, and 508/WAI accessibility. Based on these tests, you can make the necessary corrections to ensure that your pages are error free, as well as accessible to users with disabilities. In the process, you'll create a more usable and reliable experience for everyone who visits your site.

In part eight of the series, you will learn how to do the following:
  • Validate pages
  • Explore options for validating pages
  • Look at Dreamweaver's markup and accessibility validation tools
  • Use the Firefox or Internet Explorer web developer toolbars
  • Add the language attribute to the page
  • Create a snippet for storing the language attribute code for easy reuse

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



Create a Table-less Horizontal Looper in PHP
Reader Level: Reader Level

Dreamweaver has a Repeat Region server behavior that loops through your data and allows you to display it in a vertical or horizontal manner. If you want to display the data in a grid pattern, however, it requires a little more effort. Typically, a Horizontal Looper extension or code is used to create a table and put your individual data sections in a table cell. In this tutorial, I'll show how to do that using <div> tags and CSS without tables.

For this tutorial I'll assume you know how to use MySQL tools to create and manage databases, and how to create connections for PHP in Dreamweaver.

The Dreamweaver Web Standards Lesson Plan Series Part Seven
Reader Level: Reader Level

You may remember way back in the second part of this series that you explored two common methods for creating the look of two columns with CSS. First you used absolute positioning to create a left column that could never be longer than the content column or it would drape over a footer or any other content beneath it. Then you used a left float to create a side column that does have the potential to be longest. This latter method is what you used in the Shakespeare site, and in this seventh part of the series you'll get to make use of its flexibility. You'll create an editable region for secondary content pods, which when applied to pages that have a short amount of main content, will allow for a left column that can be longer without covering content beneath it.

In this part of the series, you will learn to do thefollowing:
  • Modify the structure of the layout
  • Add a div in code view using Code Hints
  • Use nested divs with editable regions
  • Use the code indenting feature
  • Modify the style sheet in code view
  • Use Fireworks/Dreamweaver roundtrip image editing
  • Roughly balance the columns of the layout into thirds
  • Use the Properties for panel for direct CSS editing

    Enhanced layout

Approximate download size: 1MB

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


Feed Tools in Dreamweaver 8 and CS3: RSS and XSL Free!
Reader Level: Reader Level

Adding an RSS feed to a web page is a piece of cake with the XSL features of Dreamweaver 8 and CS3. This article will show the new features of XSL transformation using the freely available Community MX RSS feed, or any other of your choice. The tutorial will require PHP, ColdFusion, or another of the available server models in Dreamweaver, as the XSL functionality uses a server-side file to parse and transform the XML news feed.

CMX JumpStart: Tahoe
Reader Level: Reader Level

CMX JumpStart Vegas, created in the summer of 2005 by Stephanie Sullivan and Linda Rathgeber, has proven to be a very popular JumpStart. And with good reason: it's a clean, two column design that adapts well to a variety of subject matter, content types, and graphic identities. However, some CMX subscribers were interested in using it as a liquid or fluid design, meaning the layout's overall width would be determined by the width of the user's browser window, instead of a rigid pixel-based width assigned in the style sheet by the designer.

Out of this idea the CMX JumpStart Tahoe was born. Tahoe, the place, shares many similarities with Vegas, the place: both located in Nevada, they are centers of entertainment known for their casinos, nightlife, and incredibly cheap buffets. But Tahoe has something Vegas doesn't: a whole bunch of water in the form of the beautiful Lake Tahoe. Thus, the tagline for the Tahoe JumpStart: "Like Vegas, only fluid."



As do all our JumpStarts, Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both pages from Vegas, a home page and contact page, are included in Tahoe as well. They feature a two column, centered, fluid layout that is constrained to your desired range of widths by using a minimum and maximum width. The layout is constructed of floats and utilizes a faux column technique. We provide an extensively commented style sheet so you know what each rule does and how to change it to suit your design, as well as an uncommented version for deployment on your site with smaller file size.

This JumpStart has been designed to teach you about the logistics of designing a fluid layout, as well as how to convert an existing fixed-width design into a fluid design. All of the files for Tahoe — the Fireworks PNG, XHTML pages, and style sheets — are simply modifications of those used in Vegas as an exercise to demonstrate how an entire site design can be radically transformed with very little modification to its XHTML structure. However, you need not be familiar with Vegas to use Tahoe. As with all our JumpStarts, each technique or component of Tahoe is fully explained in either this article or one of the 14 tutorials we've included in your download.

Approximate download size: 10MB

Spry Region and Repeat
Reader Level: Reader Level

In our previous article we took a look at the Spry XML Data Set which is part of the new Spry Framework within Dreamweaver CS3. However, once we have created a JavaScript object containing our XML data set, we would like to be able to use it. This is where the Spry Region and Spry Repeat come in handy. We will take a look at each and see how to display individual elements and repeated elements from our Spry Data Set.

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

Using the Spry Accordion Widget Free!
Reader Level: Reader Level

One of the new features in Dreamweaver CS3 is the integration of the Spry javascript library. In this series, we'll look at using Dreamweaver CS3 to insert, integrate and modify the Spry Accordion widget. Give your pages the pizzazz they deserve!

Swap Image DOM Replacement!
Reader Level: Reader Level

Swap image behavior is a standard effect seen on web sites worldwide. Each script that controls the image swap, image restore and the events on the link or image are repeated on every page and the events on every image. When a new page is made, all of this has to be put on the page again. How about a script that is external to the page, which, of course, is included via the script tag link, but, has no other code in the page at all and automatically does the swap image effect for your menu? Want to see it? Read on!

The Dreamweaver Web Standards Lesson Plan Series Part Six
Reader Level: Reader Level

In lesson five of the Dreamweaver Web Standards series, you created a comp, or design prototype, of the Shakespeare layout. You then exported five images from the slices you drew in the comp.

In this part of the series, you'll use those exported images to set backgrounds on various regions of the layout. In the process, you will explore many of the options for setting background images. You will also learn fundamentals of div behavior that affect the display of background colors and images. Finally, you will work through exercises that guide you in modifying "CMX JumpStart Stratford-on-Avon" so that you can use it for your own projects.

Approximate download size: 960k

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

Understanding the New Dreamweaver CS3 CSS Layouts
Reader Level: Reader Level

Today, more designers and developers than ever are adopting web standards to deliver their content. One example is the migration from table-based layouts to cascading style sheets (CSS). And while the benefits of embracing web standards such as CSS include a more flexible and robust cross-browser site design, many people don’t have the time to learn brand new ways to get their work done.

Dreamweaver CS3 helps by offering CSS Layouts that not only get your page up and running quickly, they also help you learn by providing extensive inline comments in the code. Most site designs on the web can be categorized as one-, two-, or three-column layouts, each with a number of additional elements (such as headers, footers, etc.). Dreamweaver offers a comprehensive list of essential layout designs, which enable you to start using CSS with the click of the mouse.

In this article, we will discuss the CSS Layouts in Dreamweaver CS3, what they are, how to access them, and what to watch for as you utilize them in your projects.

Saving Page Designs in Dreamweaver for Future Use
Reader Level: Reader Level

I'm not a designer, so any time I find myself with a design template that I would like to use in the future I like to keep track of it and use it from Dreamweaver's File > New dialog box. Community MX JumpStarts make use of this functionality by use of an extension that puts all the files in the correct location. I will show you how to save your own pages in this special location so that your own designs can show up in File > New.

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

In the fifth part of the Dreamweaver Web Standards series, you'll create a graphical representation, or prototype, of the XHTML/CSS page. You'll enhance the layout and export images that will serve as backgrounds for various page regions. You'll learn to create background images that survive the potential increase of text size from some of your visitors.

Now what do you know! You already have your XHTML and CSS documents. Now you'll add an organized, well structured Fireworks PNG to your site files. By the time we get to the end of this part of the series, you'll have essentially created your own JumpStart. Stratford-on-Avon anyone?

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

CMX Jumpstart: Detroit
Reader Level: Reader Level

Detroit is a two column design that uses background shadows created in the Fireworks to present the content as if it was sitting on a raised and tapering canvas.

As always there are a host of bundled tutorials that discuss each of the techniques used in great depth. I hope you enjoy Detroit and that it will become a useful addition to your design armory.

Anti-Spam Measures for PHP and ColdFusion - Part 2
Reader Level: Reader Level

Spam, spam, spam, spam. Spammers have taken over the Internet and made it a horrible place to maintain a web site. Spammers have gone beyond simply spamming your email account -- now they are spamming blogs and guestbooks, spamming trackbacks, and spamming signup forms. Even a child's home page with a guestbook for friends is not safe from links for cialis, porn, or web hosting. Obviously these spammers are getting some return from their criminal activity, because they keep doing it. Unfortunately, you can't reach through the computer screen and grab them by the throat to strangle the life out of them. All you can do is put in place some safeguards and try to minimize the attack. Part 2 in this series shows how you can record the IP address of the spammer and block access to your site to that computer in the future. Once again, I'll assume you have familiarity with PHP or ColdFusion basics (databases, inserting and displaying data) and HTML forms.

The Anti-Spam Measures for PHP and ColdFusion Series:
Anti-Spam Measures for PHP and ColdFusion - Part 1
Anti-Spam Measures for PHP and ColdFusion - Part 2

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

In Part Four of the Dreamweaver Web Standards Lesson Plan series, you will extend your skills by learning how to do the following:
  • Center the layout
  • Fix the double float margin bug in the left column
  • Export the style sheet
  • Create a site template
  • Add pages based on the site template

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



The Mobile Internet - Part 4: Text Elements
Reader Level: Reader Level

In Part 4 of this series we will be taking a look at text elements and cross browser issues. We'll investigate how we can implement our CSS to provide our handheld users with the most consistent display we can.

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 Dreamweaver Web Standards Lesson Plan Series - Part 3
Reader Level: Reader Level

In part three of the Dreamweaver Web Standards Lesson Plan series, the students will add two new divs to the layout (header and container), use descendant selectors and pseudo class selectors to help create the design of the page, and add more new concepts to increase their CSS skills. At the end of the lesson, the students will have a solid, basic design on which to build in future lessons.

Final layout

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

The Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
Reader Level: Reader Level

In this article we will look at some of the differences in how our background images are rendered. We'll specifically be looking at Internet Explorer, Opera and Opera Mini.

We will also investigate the affect that specific media types have on the displaying of background images and we'll finish up by taking a look at a different breed of mobile browser.

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 Mobile Internet - Part 2: Image Display & Filtering
Reader Level: Reader Level

In this tutorial you will look at how images are rendered in Internet Explorer, Opera and Opera Mini. You will see some very different behaviours and how the handheld media type affects the way Opera displays images.

You will look at how you can plan your design and lay down foundations with mobile media in mind; you will learn how you can assign classes and IDs and then use those selectors to perform filtering actions within the mobile website's display.

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

From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type
Reader Level: Reader Level

This is the eigth and final part of the "From Concept to Cross-Media Compatibility" series; in this final tutorial you will learn how to port your website to the handheld media type.

PDAs - Personal Digital Assistants - and smart phones are becoming an increasingly popular way of accessing the Internet for both information and purchasing, certainly within the UK.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
Reader Level: Reader Level

Part Seven of this series is all about print media styling. It is pretty pointless printing a web page in its default state, much of the content is just not required and totally unusable. With this in mind our first task is to decide what is relevant to a printed page and what is not. We begin with a weeding out process.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Multiple Insert/Update in PHP - Part 2
Reader Level: Reader Level

Dreamweaver has some built-in tools for doing database inserts and updates, but they only handle basic inserts/updates of one record. What if you want to insert multiple records at a time, or update multiple records? Dreamweaver is no help in this case, but using PHP the process is simple. The first part of this tutorial showed two often-used methods for doing multiple inserts. Part 2 will show how to do a multiple update using these two techniques.

The Multiple Insert/Update in PHP Series:
Multiple Insert/Update in PHP - Part 1
Multiple Insert/Update in PHP - Part 2

Multiple Insert/Update in PHP - Part 1
Reader Level: Reader Level

Dreamweaver has some built-in tools for doing database inserts and updates, but they only handle basic inserts/updates of one record. What if you want to insert multiple records at a time, or update multiple records? Dreamweaver is no help in this case, but using PHP the process is simple.

This tutorial will show two often-used methods for doing multiple inserts and multiple update. The files testinsert.php and testinsert2.php are included in the download package showing the final code for both methods. Part 1 of this series will show how to do inserts and Part 2 will show how to do a multiple update using these two techniques.

The Multiple Insert/Update in PHP Series:
Multiple Insert/Update in PHP - Part 1
Multiple Insert/Update in PHP - Part 2

CMX JumpStart: Metropolis
Reader Level: Reader Level

CMX JumpStart Metropolis is a two-column, hybrid layout that has a fluid left column and a fixed-width right column. It includes rounded corners on its right side, and employs faux column technique to achieve equal height columns. It has a footer as well as a fixed header that remains in view even as the visitor scrolls the page - a property that is now supported by Internet Explorer 7. It features styled unordered lists for the navigation, styled skip links, min and max width, and has a placeholder for a photo gallery. Finally, there are several style sheets involved: a main style sheet, a style sheet for print, and a style sheet for all of the special Internet Explorer rules. And of course, as always, Metropolis validates for XHTML 1.0 Transitional, CSS 2.1, and 508 and WAI accessibility.

Approximate download size: 7.1MB

Let's Learn ColdFusion: Building a Simple Admin - Part 3
Reader Level: Reader Level

In this tutorial we will build on the administration area that we created earlier in the series, you will begin to build the functionality required for page creation and the construction of a central control area.

The Let's Learn ColdFusion: Building a Simple Admin Series:
Let's Learn ColdFusion: Building a Simple Admin - Part 1
Let's Learn ColdFusion: Building a Simple Admin - Part 2
Let's Learn ColdFusion: Building a Simple Admin - Part 3
Let's Learn ColdFusion: Building a Simple Admin - Part 4 Coming Soon

Good Behavior
Reader Level: Reader Level

Learn to make a simple Dreamweaver Behavior.

From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
Reader Level: Reader Level

In Part Four of this series you completed the optimising and exporting of your images from Fireworks, together with creating a good solid site structure.

In Part Five you will assess how your layout needs to be constructed for the screen media type by taking into consideration the content that will be required in each section. You will evaluate the areas where images need to be set to the background of your layout elements and we will discuss each rule as we build it so it becomes absolutely clear as to why we are implementing this rule or that and the reasons why we are implementing them.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
Reader Level: Reader Level

In Part 4 of this series you will learn how to build a good solid site structure and optimise and export your Fireworks images; This section completes our work in Fireworks.

In Part 5 of this series the real fun begins as we start to lay out our site for the screen media type and look at the problems that various browsers present to us and how we can work around these problems.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Create a Style Sheet in Dreamweaver 8
Reader Level: Reader Level

Although it's always best to know how to perform web development tasks by hand, the CSS Styles panel of Dreamweaver 8 lets you get away with not having to create, attach, or edit a style sheet by hand ever again if you don't want to. In this tutorial, you'll learn how to use the CSS Styles panel to:
  • attach a style sheet to a page
  • create new rules in a style sheet
  • edit existing rules' properties and add new ones

Note: Although this tutorial is aimed at beginner users of CSS and Dreamweaver, you still need to understand CSS syntax and what each property controls in order to know how to set the appropriate values in Dreamweaver. If you're not yet familiar with how CSS works, please read Adrian Senior's introductory series of CSS tutorials first.



PHP Formmail Spam Prevention
Reader Level: Reader Level

It used to be that there were clear sides in the junk email battle: the spammers and the spammed. I always considered myself a member of the latter group, and then one day I became a member—inadvertently—of the former. I had become a victim of the email injection attack via a PHP formmail script.

In this update to the Dreamweaver Creating and Processing Form series, we'll take a new look at the phpformmail script and demonstrate how to use a key and email value pair to keep your email address out of the html page.

From Concept to Cross-Media Compatibility: Part Three - Building the Footer and Slicing the Drawing
Reader Level: Reader Level

In Part three of this series you will complete the design work in Fireworks, slice your PNG file and prepare the slices for exporting.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Create a Quick Poll in PHP - Part 2
Reader Level: Reader Level

Add an administration section to the PHP Poll article and learn how to make your poll management easy!

The Create a Quick Poll in PHP Series:
Create a Quick Poll in PHP - Part 1
Create a Quick Poll in PHP - Part 2

Introduction to Design-Time Style Sheets
Reader Level: Reader Level

Design-time Style Sheets (DTSS) is a feature that was introduced back in Dreamweaver MX (version 6) and continues to exist in Dreamweaver 8 today, as well as Contribute. A Design-time Style Sheet allows you to apply or hide certain styles within Dreamweaver, without applying these styles to your live page in the browser. That means that if Dreamweaver is displaying certain styles incorrectly, you can write a separate style sheet with styles to correct the problem and have this style sheet only affect the Design View in Dreamweaver.

DTSS can also be used for a whole lot more than correcting style rendering problems in Design View, such as:
  • Showing styles on includes
  • Showing content that is hidden with CSS
  • Highlighting content you need to take action on
  • Showing styles from dynamic style sheets
  • Displaying styles from external style sheets

This tutorial will explain these uses in more detail, then show you how to create a DTSS and apply it to a page.



CMX JumpStarts: Greenville
Reader Level: Reader Level

Our summertime JumpStart takes us to Greenville, North Carolina. Chances are that if you were born in the United States your state has a town named Greenville. And with a name like that, it's got to have great gardening opportunities, right? Our Greenville JumpStart features a beautiful tapestry of transparent backgrounds that afford the designer all sorts of artistic opportunities. Plus, Greenville, like all our JumpStarts, uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines. Taken altogether, Greenville provides you with a solid foundation for any design.

Greenville is a two column, fixed width layout with header and footer. It features styled unordered lists for the navigation, a styled form, and styled skip links. Several style sheets are included: commented and uncommented style sheets for print and screen media and three Win IE - only sheets that take care of browser anomalies in WinIE5, WinIE5.5 and WinIE6. The JumpStart features Zoe Gillenwater's Teaser Thumbnail List to display the images and text in lefthand column. Last but not least, the JumpStart includes the PNG file used to create the layout.

The download for this JumpStart is fairly large at 18MB, due in large part to an included tutorial that weighs in at 12.5MB. If you are purchasing CMX JumpStart Greenville and would like to download the package without that tutorial, or download it in smaller chunks, please send an email to info@communitymx.com and we will make arrangements for you to do so. If you are a CMX subscriber, you will find links at the end of the article, but prior to the list of supported browsers, to download the JumpStart various different ways.

Create a Quick Poll in PHP - Part 1
Reader Level: Reader Level

Create a quick poll using PHP, MySQL and Dreamweaver.

The Create a Quick Poll in PHP Series:
Create a Quick Poll in PHP - Part 1
Create a Quick Poll in PHP - Part 2 Coming Soon

Let's Learn ColdFusion: Part 4d - Error Checking Your ColdFusion Queries
Reader Level: Reader Level

In this the final lesson in Part 4 you will learn how to negate errors that may occur when you are running queries. You will learn about the cftry, cfcatch and cfcatch variables that can indicate the problem to aid in debugging.

The Let's Learn ColdFusion Series:
Let's Learn ColdFusion: Part 1 - Installation and the Testing Server
Let's Learn ColdFusion: Part 2 - The URL Scope, Variable Names and Values
Let's Learn ColdFusion: Part 3 - Adding Simple Logic and Error Checking
Let's Learn ColdFusion: Part 4a - Creating a Datasource
Let's Learn ColdFusion: Part 4b - Building a Dynamic List Menu
Let's Learn ColdFusion: Part 4c - Filtering Your Queries and the cfqueryparam Tag
Let's Learn ColdFusion: Part 4d - Error Checking Your ColdFusion Queries

Let's Learn ColdFusion: Part 4b - Building a Dynamic List Menu
Reader Level: Reader Level

In Part 4 you created a dsn - Data Source Name - and we discussed how a dsn allowed you to connect to a database. The second key in this process is passing information to the database in order to get the information you want back from the database.

It is this concept that we will learn in this lesson and to complete the lesson you will build a dynamic list menu as a proof of concept.

The Let's Learn ColdFusion Series:
Let's Learn ColdFusion: Part 1 - Installation and the Testing Server
Let's Learn ColdFusion: Part 2 - The URL Scope, Variable Names and Values
Let's Learn ColdFusion: Part 3 - Adding Simple Logic and Error Checking
Let's Learn ColdFusion: Part 4a - Creating a Datasource
Let's Learn ColdFusion: Part 4b - Building a Dynamic List Menu
Let's Learn ColdFusion: Part 4c - Filtering Your Queries and the cfqueryparam Tag
Let's Learn ColdFusion: Part 4d - Error Checking Your ColdFusion Queries Coming Soon

Automatic Shipping Address Fill-in with Dreamweaver and JavaScript
Reader Level: Reader Level

How many times have you been to a website which wants you to fill out the billing and shipping addresses and they are the same and you just want to copy the information over from one set of fields to another? Or you have a client who wants these fields always filled out and you want to ensure the visitor can do this efficiently and easily?

In this tutorial, we will show you how with a little JavaScript and a checkbox in the form, you can make this happen easily!

CMX SendEmail User Control for ASP.NET Sites
Reader Level: Reader Level

This article introduces you to the CMX SendEmail user control. Drop the control on your .aspx page and you immediately have a CSS-styleable contact form for your website.

The CMX SendEmail user control's ease of use is especially convenient when you're working with designers who are comfortable using tags but may not be familiar with code. Even if you're a hardcore programmer you may still find the control convenient since it effectively separates presentation from business/logic.

Creating a Registration Page: Part 3
Reader Level: Reader Level

Dreamweaver contains many built-in tools to aid in quickly building dynamic sites. Part 1 of this series showed the Record Insertion Form Wizard to set up a simple user registration form on a web site. The registration form allows a user to register for a site.

Part 2 showed validation and the user agreement, using more built-in tools of Dreamweaver and a little rudimentary JavaScript. The tutorial will apply equally to PHP, ASP, ColdFusion, and JSP using built in tools.

Part 3 will show how to pass registration details to Paypal or other payment processor for a paid membership-type of site.

The Creating a Registration Page Series:
Creating a Registration Page: Part 1
Creating a Registration Page: Part 2
Creating a Registration Page: Part 3

CMX JumpStarts: Orlando
Reader Level: Reader Level

Mention Orlando, and most people immediately think of theme parks, laughing kids, warm sunshine and palm trees. Our Orlando JumpStart captures this spirit of Orlando perfectly, from its imagery to fun masthead font to bright colors.

As do all our JumpStarts, 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 you may wish to use it for. Orlando 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 no matter what window or font size the page's visitors are using, as well as making the design very accessible. The design also features a subhead area, a styled list as a navigation menus, and floated images.

The graphic and code techniques used to create Orlando are explained fully in the 11 tutorials that we've included in your download, as well as this article. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for the layout, the two source Fireworks PNGs, and a Dreamweaver extension that allows you to create new pages based on Orlando easily.

If you'd like a more detailed look at the Orlando Jumpstart, as well as seeing a modified Orlando design, check out Sheri German's CMX JumpStart Orlando: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
Reader Level: Reader Level

In Part 2 of this series we will continue with the design in Fireworks. We will begin work on the content area, lay the ground work for displaying equal-length columns in your CSS layout and create a dividing rectangle using textures between the Banner area and the content area.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Creating a Registration Page: Part 2
Reader Level: Reader Level

Dreamweaver contains many built-in tools to aid in quickly building dynamic sites. Part 1 of this series showed how to use the Record Insertion Form Wizard to set up a simple user registration form on a web site. The registration form allows a user to register for a site.

Part 2 will show validation and the user agreement, using more built-in tools of Dreamweaver and a little rudimentary JavaScript. The tutorial will apply equally to PHP, ASP, ColdFusion, and JSP using built in tools.

Part 3 will show how to pass registration details to PayPal or other payment processor for a paid membership-type of site.

The Creating a Registration Page Series:
Creating a Registration Page: Part 1
Creating a Registration Page: Part 2
Creating a Registration Page: Part 3

CMX JumpStart San Francisco for Students (and Anyone)
Reader Level: 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.

Approximate download size: 4MB

Creating a Registration Page: Part 1
Reader Level: Reader Level

Dreamweaver contains many built-in tools to aid in quickly building dynamic sites. One such tool is the Record Insertion Form Wizard. Using this tool, I'll show how to set up a simple user registration form on a web site. The registration form will allow a user to register for a site (free site or membership site), and include a way for the user to agree to a user agreement and also opt-in/opt-out of a newsletter. The tutorial will apply equally to PHP, ASP, ColdFusion, and JSP using built in tools. This is the first part in a series.

Part 2 will show validation and the user agreement, and Part 3 will show how to pass registration details to Paypal or other payment processor for a paid membership-type of site.

The Creating a Registration Page Series:
Creating a Registration Page: Part 1
Creating a Registration Page: Part 2
Creating a Registration Page: Part 3

From Concept to Cross-Media Compatibility: Part One - Building the Header Free!
Reader Level: Reader Level

This series is for the designer that is new to CSS layouts, it will require no pre-requisite knowledge.

Once completed you will have gained the necessary knowledge of how to build a website with CSS and how to carry that design through from an initial concept in Fireworks and present the completed work to a variety of media types.

The series will discuss the techniques involved from the image creation in Fireworks through optimisation and exporting your slices.

Once the design is complete I will talk you through the reasons why the CSS structure is as it will be and discuss how the elements of the design work in relationship with each other.

The Concept to Cross-Media Compatibility Series:
From Concept to Cross-Media Compatibility: Part One - Building the Header
From Concept to Cross-Media Compatibility: Part Two - Building the Content Area
From Concept to Cross-Media Compatibility: Part Three - Buidling the Footer and Exporting the Slices
From Concept to Cross-Media Compatibility: Part Four - Site Structure and Image Preparation
From Concept to Cross-Media Compatibility: Part Five - Building the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Six - Completing the Screen Media Type Layout
From Concept to Cross-Media Compatibility: Part Seven - Building the Print Media Type Layout
From Concept to Cross-Media Compatibility: Part Eight - Building the Handheld Media Type

Creating Dreamweaver Extension Packages
Reader Level: Reader Level

This article will show how to create an extension package for Dreamweaver. Dreamweaver extensions are basically HTML and JavaScript files stored in a user's local configuration folder. To move an extension to a different machine or share it with other users, you can create an extension package. Dreamweaver comes with a free Extension Manager, which also includes a built-in packager for extensions.

Creating a ZIP File Backup of Your Website in ASP.NET
Reader Level: Reader Level

This tutorial will show you how to backup a web site by creating a zip file that contains all files in the site. This task is made considerably simpler because of a cool, open source library available from ICSharpCode called #ziplib (pronounced sharp zip lib). I originally used this library to automate the backup for a bank site but there are endless possibilities when you stop to consider that this library allows you to create and add to an archive, as well as unpack the archive. This tutorial creates a ZIP file, but the library supports other formats, too, including GZip, Tar and BZip2.

The sample application automatically creates the zip file such that it contains every file in the website. In this tutorial, you'll learn how to use the DirectoryInfo and FileInfo classes to recurse through the site and then use the #ZipLib classes to add the files to zip archive.

Making Full Use of Bindings
Reader Level: Reader Level

The Dreamweaver bindings panel has a lot of uses beyond a place to build recordsets and stored procedures. Many people don't realize that when you add session, request, and application variables to the panel manually, you get some visual advantages — the ability to drag items to the page into design view, the ability to use variables as filters, and the ability to add formatting functions to design view.

This article will explore the bindings panel and its advantages. Because we are discussing core Dreamweaver functionality, the article will apply equally to all server models in Dreamweaver, although some server models have better bindings panel support than others.

Modifying the Machu Picchu JumpStart to Work with Short Pages
Reader Level: Reader Level

The Machu Picchu JumpStart is a great two-column, fixed-width design that can work for many types of sites. But like any web site design, it is not one-size-fits-all. If you have pages that are rather short on content, you'll notice that the side menu can overlap the footer. For most sites, this problem will never be revealed due to the length of the pages, making Machu Picchu an effortless choice. If you fall into the minority with short pages, however, there are a few easy modifications you can make to Machu Picchu to stop the footer overlap and allow you to keep using this beautiful JumpStart.

This tutorial will walk you through the basic changes to the XHTML and CSS that are needed to keep the sidebar from overlapping the footer on short pages. Included in the download for this tutorial is a revised version of both the HTML file and screen style sheet that can be used in place of the original Machu Picchu files on projects where very long sidebars or very short pages may be a reality.

Using a ColdFusion Custom Tag as a Site Template: Part 4 - JumpStarts
Reader Level: Reader Level

I wrote a series of three articles on how you can use a ColdFusion custom tag to supply the design of every page in your site. Since that time, Community MX has released several JumpStarts — page designs using the latest HTML and CSS techniques to create starting points for your own designs. A JumpStart is also a perfect fit for the use of a ColdFusion custom tag. Heidi Bautista wrote an article about using JumpStarts with ASP.NET master pages — Convert an Existing Site to Use ASP.NET Master Pages and Themes. The ASP.NET master page is very similar in concept to the technique I presented in my series on CF, so this tutorial will cover the same ground for ColdFusion users, using the free North Pole JumpStart.

Using JumpStarts with Cartweaver, Featuring Minneapolis Free!
Reader Level: Reader Level

JumpStarts are great starting points for dynamic sites, and the Minneapolis JumpStart is a great starting point for a dynamic e-commerce site. Shopping carts like Cartweaver integrate well with Dreamweaver, but how do you integrate a third-party cart with a JumpStart? This tutorial, written by a member of the Cartweaver team and Community MX, shows one way of integrating the two.

CMX JumpStarts: Minneapolis
Reader Level: Reader Level

When it comes to shopping, Minneapolis is tough to beat. Travel + Leisure magazine called Minneapolis the 4th best shopping destination in the country, behind only New York, San Francisco and Chicago. And when it comes to jumpstarting your web designs, Community MX is the best. Our newest JumpStart boasts a pretty neat eCommerce design. So naturally we named it Minneapolis, after the city with the largest shopping mall in the United States.

The future of shopping is online, right? The Minneapolis JumpStart, with its valid XHTML 1.0 and CSS 2.1 markup, adherence to WAI and Section 508 accessibility guidelines, provides you with a solid foundation for any kind of eCommerce site.

Note: The download for this JumpStart is very large, 73MB, due in large part to the Drawing on Nature tutorial listed above. This tutorial contains four video lessons, hence the large file size. If you would like to download this JumpStart with all the bundled tutorials except this one, there is a link at the end of the article that will allow you to do so.

If you are not a member of CMX and are buying this JumpStart and can not download a 73MB zipfile, please send an email to info@communitymx.com after your purchase and we will make arrangements for you to download it in 2 parts.

Convert an Existing Site to Use ASP.NET Master Pages and Themes
Reader Level: Reader Level

One of the great advantages in ASP.NET v2.0 is the introduction of master pages and themes. This tutorial presents a practical example of converting an existing site to use master pages and themes. Our example site is the Community MX North Pole JumpStart. You'll learn how to chop up the code to create the master page, where to put the theme files and how to modify the existing css file so that it works well with the theme. It's actually a very quick process and one that can be adapted to any JumpStart offered by Community MX.

Approximate download size: 320k

An XHTML, CSS and Accessible Form Template
Reader Level: Reader Level

In this tutorial we will look at how we can create a generic form template that can be used as a starting point in your web designs. We'll pre-set selectors so that you can choose to display your from elements inline or at block level.

Adding WYSIWYG to Textareas: Part 1
Reader Level: Reader Level

One of the problems web developers encounter when allowing clients or users to insert content dynamically is ensuring that the outputted content still conforms to the standard of code required from a modern web site. The average site user knows little or nothing of HTML syntax, and certainly not enough to ensure that your precious pages still meet HTML syntax validation.

Many solutions have been created in order to solve this problem, BB style syntax is one of those; but the majority of users would probably prefer to be able to format their text as they would in a product like Microsoft Word. The generic word processor environment is something that's familiar to almost everyone who uses a personal computer. So, let's say we could actually allow people to insert data as clean HTML using a simple word processing interface, wouldn't that be cool? :) We can, and as a bonus we can easily implement it into a generic Dreamweaver "Insert Record" page.

Unobtrusive JavaScript: Dynamically Adding a Flash Music Player to MP3 Links
Reader Level: Reader Level

This tutorial discusses using JavaScript to dynamically add a small Flash music player control to a page that contains links to MP3 files. With this technique, you'll merely need to link in the appropriate JavaScript to your page, and all MP3 links on a page, such as your latest Podcast, will automatically have player controls added next to them, with no further digging into the code on your part.

The Style Rendering Toolbar: Displaying Additional Elements
Reader Level: Reader Level

The style rendering toolbar is a new feature in Dreamweaver 8 that I covered briefly in the Dreamweaver 8 Style Rendering Toolbar - A Sneak Peek. This is just about my favourite new CSS feature in Dreamweaver and it is a feature I use a lot.

While it is a fantastic tool straight out of the box it can also be very easily enhanced to provide greater visual indication on which elements are doing exactly what within any given design.

Creating a Simple Blog: Part 6
Reader Level: Reader Level

There have been five parts in the series on creating a simple blog. The first five parts focused on creating basic functionality to get a basic blog up and running using simple Dreamweaver design tools. This part will show how to incorporate the functionality into a more complex design — specifically, the latest CMX Jumpstart — Inverness. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. In the course of merging the dynamic blog into the design, you'll learn the following about merging content with design in general — how to find repeating items and make them dynamic, how to separate parts of an existing design into a module.

CMX JumpStarts: Inverness
Reader Level: Reader Level

Welcome to the latest CMX JumpStart— Inverness.

Inverness is the latest city in Scotland to attain city status. It is also the capital of the Highlands, and now it's a blog design too :)

The Inverness JumpStart is a centered, two column, fixed-width layout that emulates the styling's of a typical weblog. We chose to demonstrate this style of layout due to its current popularity as a way of representing frequently updated content on web pages.

There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:
  • A summary of latest posts.
  • A selection of latest posts with snippets of the post content.
  • A link that takes the user to the detail page for the post.
  • A link that takes the user directly to a form that allows them to comment on the post.
  • A list of links to other blogs that the site's owner thinks his users will find interesting.

In addition to those features they also contain things common to all web pages… intuitive navigation and a unique form of branding that gives the owner's weblog a look all of its own.

This CMX JumpStart includes reference to all of these.



Redirecting Users When Logging In
Reader Level: Reader Level

While the article Show and Hide Content Based on User Access Level discusses allowing content for multiple access levels (or user groups) to be held on the same page and showing portions of content based upon the user's group, sometimes you need each user group to get sent to different pages (perhaps within different folders). This article discusses how to enhance the existing Log In User Dreamweaver Server Behavior to allow redirecting users to specific pages based upon their access level when they log in.

Show and Hide Content Based on User Access Levels Free!
Reader Level: Reader Level

Dreamweaver's native Log In User server behavior combined with the Restrict Access to Page server behavior can help you protect your pages from prying eyes. However, when it comes to more fine grained control of content on pages viewable by users from multiple access levels, Dreamweaver doesn't have anything built in to offer any assistance to you.

Read on to learn how to show and hide content on a page based upon the access level (user group) of a logged in visitor.

Using Disk Files As the Data Source for a DropDownList, ListBox, CheckBoxList, or RadioButtonList
Reader Level: Reader Level

This tutorial demonstrates how you can create a data source from a list of files on the server and bind that data source to four different controls: DropDownList, ListBox, CheckBoxList, or RadioButtonList.

CMX JumpStarts: Cairo
Reader Level: Reader Level

Welcome to the CMX JumpStart — Cairo. Cairo is a fixed-width two-column layout that has been developed as a learning tool to show how you can use background images and work with gradients and glows to produce designs that are a little different from the run of the mill designs we see so many of on the Internet.

Using Swap Image with a Select List/Menu - Part 2
Reader Level: Reader Level

In Part 1, you learned how to take static values from within a list and use those values as the file name for an image that was to be swapped in and shown to the visitor. But, if you actually need the selected value from the list to do something else useful, such as use it to determine which item is getting added to a shopping cart, or update a field in your database, the method described in Part 1 won't be too useful, as it's quite unlikely that your image file names exactly match your record IDs in your database.

So, how do you accommodate working under such constraints? Read on to find out how to use Dreamweaver's built-in tools, along with a bit of hand coding, to accomplish your task.

Using the Dreamweaver 8 Image Viewer
Reader Level: Reader Level

There are a lot of slide show solutions that can be used in Dreamweaver. Sometimes we forget there is a rather nifty tool — Image Viewer — that can do the job.

CMX JumpStarts: Traverse City
Reader Level: Reader Level

You can rest easy using this JumpStart inspired by the tranquil and beautiful Traverse City, Michigan. As do all our JumpStarts, Traverse City uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Traverse City includes both a three-column home page layout and a two-column inner page layout, both fixed-width, which we've set up in a way that allows you to switch between the two in your own site with ease. Both layouts feature styled lists as navigation menus, and the inner page layout includes a styled data table.

The graphic and code techniques used to create Traverse City are explained fully in the nine tutorials that we've included in your download. We also include the four style sheets needed for this design (including an extensively commented one you can use for reference), the XHTML files for both the layouts, the source Fireworks PNG, and a Dreamweaver extension that allows you to create new pages based on Traverse City easily.

If you'd like a more detailed look at the Traverse City Jumpstart, as well as seeing a modified Traverse City design, check out Sheri German's CMX JumpStart Traverse City: An Introduction. Otherwise, click the link below to dive right into this JumpStart!

CMX AJAX Loader: Beyond the Basics
Reader Level: Reader Level

The CMX AJAX Loader Extension, out of the box, provides a quick and easy means of loading document fragments into the current page without requiring a refresh. It's important to be aware however that this is not a limit of the behavior's functionality. In this article we'll explore the how the CMX AJAX Loader can act as a tool that can be integrated into other scripts to provide additional functionality and open up new possibilities.

Using CFCs as Sources of Data for Queries in Dreamweaver 8
Reader Level: Reader Level

ColdFusion MX added the possibility to create objects through ColdFusion Components ( CFCs ) that could be easily reused throughout your site. Reuse of is good, as it allows you make changes in one place and have the update available everywhere it is used. Dreamweaver 8 (and Dreamweaver MX 2004 with the ColdFusion MX 7 Extensions installed) allows you to create queries within components (CFCs) that can be used as data suppliers to queries visually within the editing environment.

Adding Flash Video to Dreamweaver 8 Free!
Reader Level: Reader Level

Web video is suddenly all the rage thanks to Flash Professional 8, those wonderful people at On2 and Sorenson and the folks at Adobe who provide the video editing software. It is enough to make a web developer's head spin. Suddenly we are confronted with putting web video in our web pages because clients see the neat stuff the "Cool Kids" over on the Flash side of the street are doing and we get caught with a "Me too!" The guys at Macromedia must have anticipated this because they did something with Flash Video in Dreamweaver 8 that is rather amazing; they made it even easier to use. Best off all, it is free.

Prior to the release of Dreamweaver 8, the Flash Video Kit for Dreamweaver MX 2004 was a spending decision on your part if you wanted to add Flash video to your pages. Mind you, the "Kit" included a copy of Sorenson Squeeze Lite and it is still an integral FLV creation tool if you didn't purchase either Studio 8 or Flash Professional 8. The Video Kit is now bundled with the application and is even better than the retail version of the Video Kit.

Macromedia has pulled off a rather amazing feat with Dreamweaver 8. They made adding video to your web pages even easier than ever.

Designing with Gradients and Glows
Reader Level: Reader Level

In this tutorial we will look at how we can use gradients and drop shadows to create a nice back drop to our designs. The technique is a simple one, but it is also one that is very easy to get wrong.

To create this type of design it is very important that you get the planning stages correct, right down to setting the margin values in Fireworks. When using a gradient for a background image and incorporating a drop shadow on your wrapper div it is very important that the structure is defined exactly as you envisage your finished design, once your design leaves Fireworks you will have very little room for error; if any at all.

Rotating Images with Dreamweaver and JavaScript Free!
Reader Level: Reader Level

Slideshow, rotating images, image-a-go-go, whatever you want to call it, a client will ask for an image or banner to swap out with another image (or more than one), and continue swapping every so often. With Dreamweaver it's pretty easy to throw together some scripting that will accomplish just that for your client. Dreamweaver does most of the heavy lifting, and all you need to do is to paste in a little bit of code, set the images you want to display, how long you want the interval between image swaps to be and your all ready to send the invoice. Right, yes you did read that you'd be doing a bit of work up there, but don't worry, once you have this technique down it can take you as little as 20 seconds to get this going.

Using Related Fields with the CMX Auto Complete Extension
Reader Level: Reader Level

The CMX Auto Complete Behavior makes adding basic "auto complete" functionality to your HTML forms fast and easy; when you begin to develop larger forms though you may be ready to start utilizing some of the more advanced features of the extension.

Note: This tutorial requires that you have the CMX Auto Complete Behavior installed on your system and are familiar with its use.

CMX Jumpstart: Machu Picchu
Reader Level: Reader Level

Welcome to our latest CMX JumpStart offering; Machu Picchu.

Machu Picchu has been developed to be accessible to screen, print and handheld devices. Handheld devices are still very much a gray area in our content delivery for web pages. PDAs and more modern phones can do a very good job of rendering web pages and with a little tweaking can provide us with access to very usable and good looking web sites.

Similarly a print style sheet, when correctly set, can give our users access to printed content that can be digested at their leisure. Web pages that don't print correctly can be very annoying and detract from the site's value. It is these two media types that we will be focusing on along with screen media in Machu Picchu. The aim is to provide content of a high quality to screen, handheld and print medias.

Using the asp:Calendar Control - Part 3
Reader Level: Reader Level

Further exploration of the asp:Calendar control. This part in the series shows you how to set up the calendar to allow the user to select a whole week or the entire month. You'll learn how to get the date(s) selected by the user. Plus, you'll learn quite a bit more about styling this versatile control.

The asp:Calendar Control Series:
Using the asp:Calendar Control - Part 1
Using the asp:Calendar Control - Part 2
Using the asp:Calendar Control - Part 3
Using the asp:Calendar Control - Part 4

Visualize This: Great New Design Tools in Dreamweaver 8
Reader Level: Reader Level

Dreamweaver 8 provides some terrific new visualization tools that have been on my personal wish list for some time. For people like me who are primarily visual designers, these new tools and features will be a great help in getting design tasks done more rapidly and efficiently. In addition, the new tools for visualizing page structures based on Cascading Style Sheets (CSS) will be of a tremendous help for those who are learning standards-based design or who just want to quickly examine the structure of the page without having to refer to the CSS settings themselves.

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

You may have noticed that we included a print style sheet with CMX JumpStart Vienna. There are many good reasons to make print style sheets for CSS layouts, but one in particular persuaded me to always include one. In part one of this series we'll look at print style sheets in general, as well as reconstruct the Vienna print style sheet.

Using the asp:Calendar Control - Part 2
Reader Level: Reader Level

Further exploration of the asp:Calendar control. This part in the series places the calendar in a popup window and shows you how to transfer the selected date to the main window by handling the SelectionChanged event.

The asp:Calendar Control Series:
Using the asp:Calendar Control - Part 1
Using the asp:Calendar Control - Part 2
Using the asp:Calendar Control - Part 3
Using the asp:Calendar Control - Part 4

Rollovers: Fireworks vs. Dreamweaver
Reader Level: Reader Level

Q."Should I do image rollovers in Fireworks or Dreamweaver? I've heard it's better to do them in Dreamweaver."

I've read many posts in the Dreamweaver forum warning people away from using Fireworks image rollovers, "because Fireworks produces bloated code" compared with Dreamweaver's. No doubt I'll stir up a hornets' nest with this tutorial, but let's do image rollovers in both Fireworks and Dreamweaver so you can see the difference and decide for yourself.

Using the asp:Calendar Control - Part 1
Reader Level: Reader Level

The asp:Calendar control provides tons of built-in functionality that's quick and easy to leverage. Make your web pages even more professional-looking by allowing your users to input dates by selecting from a user-friendly calendar. Here in Part 1 you'll get a solid introduction to the control: how to add it to your page, how to customize the look of it, and most importantly, how to use the selected date.

The asp:Calendar Control Series:
Using the asp:Calendar Control - Part 1
Using the asp:Calendar Control - Part 2
Using the asp:Calendar Control - Part 3
Using the asp:Calendar Control - Part 4

Reconstructing Vienna: The Cascading Style Sheet
Reader Level: Reader Level

If you've already followed along with my CMX JumpStart Vienna: Reconstructing the Markup article, then you're ready to take the structure and give it some cosmetic beauty. We have all our components, but now we need to create a style sheet that will lay them out in an organized design that enhances comprehension and usability. Let's get started on reconstructing the CSS of CMX JumpStart Vienna.

Reconstructing Vienna: The Markup
Reader Level: Reader Level

Upon releasing a JumpStart, we occasionally hear requests for a step-by-step reconstruction of how it was done. Sure, it's nice to have a great template that allows you to quickly whip up an accessible and valid site for clients. It's also nice to have all those great bundled articles that — face it — most of us never have time to read. The extensively commented CSS is also wonderful, but some of that detail can seem daunting. Wouldn't it be nice to have someone hold your hand as you get initiated into the magic of CSS layouts so you can really understand how it's done?

If this sounds like something you'd like to participate in, get ready for a two-part series that lets you recreate Vienna from start to finish. Today's article will teach you to plan your structure and write your markup. Part two, which will appear tomorrow, will help you penetrate the mysteries of its CSS documents, both print and screen.

Note: You will need to download CMX Jumpstart Vienna in order to follow along with this tutorial.

If you're ready, let's first ascend to "Wrapper Heaven."

Exporting an Embedded Stylesheet to an External Stylesheet Using Dreamweaver MX 2004
Reader Level: Reader Level

CSS is all the rage these days, and for many good reasons. However, if you are new to the whole CSS method of controlling web pages, it can be intimidating when you begin. The goal of this video tutorial is to show you how to create a very basic embedded (internal) stylesheet using the Property inspector, and then export that embedded set of rules to an external file.

CMX JumpStart: Vegas
Reader Level: Reader Level

Las Vegas, entertainment capital of the world, inspired this exciting JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design using a faux column technique. The home page includes a customizable Flash Slideshow component that includes a demonstration of images loaded using an XML file. This JumpStart features the cutting edge and accessible sIFR technique. sIFR allows you to use any font currently on your computer to create your headings. The contact page features a styled form using fieldset and legend. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design. Vegas also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work and give your users the best experience possible.

We've included the PNG file used to create the layout so you can adapt it with your own look and colors. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. It includes the CMX Flash Slideshow component and the graphic and code techniques used to create Vegas are explained fully in the 13 tutorials that we've included in your download. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool giving you insite into the web design process as well.

If you'd like a more detailed look at the Vegas Jumpstart, as well as seeing a modified Vegas design, check out Sheri German's CMX JumpStart Vegas: An Introduction.

ASP.NET Snippet - ShortenString
Reader Level: Reader Level

Snippets on ASP.NET pages are great time-savers. This tutorial uses a snippet called ShortenString. The snippet contains a function wrapped in a server-side script block. ShortenString takes a long string and shortens it to a practical length. The tutorial includes the snippet (in C# and VB.NET) plus sample pages that use the snippet in an editable DataGrid. Rather than displaying a long cumbersome text block, the DataGrid shows abbreviated versions of the strings. Thus, the DataGrid takes up less space on the page and is easier to read. In edit mode, the DataGrid shows the complete, unabbreviated string in a multi-line textbox.

Modifying the Aspen JumpStart to Work with Short Pages
Reader Level: Reader Level

There's no such thing as one-size-fits-all in web design — some layouts are suited to particular types of content, and others are not. The Aspen JumpStart is no exception. One thing it does not handle well are pages with very little content. As a three column, liquid design, it's better suited toward pages that are bursting at the seams. But luckily, it can be revised to improve its performance on short pages. This article will explain how and includes all the modified files.

If you previously purchased the Aspen JumpStart, please send an email to info@communitymx.com and we will send you this article and the support files at no charge. Please include the email address for the PayPal account used to make the purchase in your email.

Creating a Simple Blog - Part 5
Reader Level: Reader Level

One of the frequent questions in the forums is "How do I create a blog?". There are many commercial blog systems out there, and many full-featured blog providers, like Blogger, but you can also create a simple blog using the standard tools of Dreamweaver. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. This fifth part of the series will describe how to add a design to the blog, including a sidebar with category, blogroll, and RSS modules.

Event-Driven Dreamweaver Commands: onOpen, beforeSave, afterSave
Reader Level: Reader Level

As you move further into extending Dreamweaver, you're likely to encounter a situation where you want an action to occur automatically, without any user intervention such as clicking a button, or accessing a particular menu item. The folks that built extensibility into Dreamweaver also thought of this as a possibility, and added in support for a number of events that are very easy to tap into, by merely placing a Command file in a certain folder, or by giving a Command a specific file name suffix.

There are three general categories of event-driven Commands that Dreamweaver allows an Extensioneer to tap into:
  1. Application session Commands: Startup and Shutdown Commands
  2. Document related events: Opening a document, before saving a document, and after saving a document.
  3. Menu and Function call triggered events.

In this tutorial, we'll cover the second type of event-driven command: events that occur when a document opens, before it is saved, and after it is saved.



CMX JumpStarts: New Orleans
Reader Level: Reader Level

The New Orleans JumpStart has been designed with the Umoja String Quartet and their jazzy feel at the center. Two pages, a home page and contact page, are included in this JumpStart. Both pages feature a fixed width, centered design with a scrollable content area. The home page includes a customizable MP3 player built in Flash that includes music from from two Umoja String Quartet CDs: "Songs of Our Fathers" and "Things Ain't What They Used To Be."

The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. We provide an extensively commented style sheet so you know what each piece does and how to change it to suit your design, as well as another version of the style sheet with the comments stripped out so you don't have to cut out all those extra kilobytes by hand when you're ready to go live! New Orleans also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for your work.

Beyond just the pages, we've also included all the source files used to create both of the layouts, both PNG and Flash. All layers in the PNG file are organized and labeled so that it's easy to make any modifications you need.

The graphic and code techniques used to create New Orleans are explained fully in the 14 tutorials that we've included in your download. Those techniques that are not covered in the bundled tutorials are explained in this article.

If you'd like a more detailed look at the New Orleans Jumpstart, as well as seeing a modified New Orleans design, check out Sheri German's CMX JumpStart New Orleans: An Introduction.

Extensioneering 101: Objects - Part 3
Reader Level: Reader Level

Objects are probably the most basic of extensions. Their single-minded purpose is to place a small portion of code where the user has made a selection, or has positioned their insertion point. Objects had their own panel through Dreamweaver 4, and Dreamweaver MX introduced the Insert bar where you now access all the available built-in, as well as third-party, Object extensions. Of course, Objects, like many of the other extension types that we'll cover throughout the Extensioneering 101 series, can do more, much more, if you really want them to.

The previous two parts of this series discussed how to have an Object extension make changes to a user's document. We're going to change speed a little bit and discuss probably the laziest type of extension, what I call a "pass through" Object. You probably know the type, you step up to the counter with your paper work, and they just look at it and then pass it along to Bob down the counter, they never realy do any work, they just pass off the work to someone else. Well, a pass through Object is just like that. You call the Object and it passes off execution to another extension.

The Extensioneering Series:
Extensioneering 101: Objects - Part 1
Extensioneering 101: Objects - Part 2
Extensioneering 101: Objects - Part 3

Using Swap Image with a Select List/Menu - Part 1
Reader Level: Reader Level

Dreamweaver is good at what it does, very good in fact, but good can only take you so far. Go beyond what it is built for and you will have to start digging into the code and get your hands a little dirty. Swapping images based upon user interaction — such as mouseing over images or links, or clicking buttons — can be implemented with point-and-click ease using Dreamweaver's Swap Image behavior. The Swap Image behavior is one example of where you need to get into the code is if you want to go beyond the built in functionality. If you wanted to use the Swap Image behavior with a list and allow your visitors to change an image that is shown based upon the option chosen in a list, you couldn't readily do it with the way that the Swap Image behavior is set up to work. You can, however, with a carefully created list, and a quick modification in the code, turn the code used by the Swap Image behavior into something that will work well for you when applied to a list menu.

In Part 1 of this article, we'll take a look at working with static pages, that is, pages where you do not need any database interaction. Part 2 will take into consideration the needs of dynamic pages to allow swapping of images from a data driven list menu.

Fireworks Hotspot Rollovers
Reader Level: Reader Level

Everyone knows that web images are rectangular. If you want a navigation system made of image rollovers, you have to make them out of stacks of rectangles, or horizontal arrays of rectangles. Rectangles to the left. Rectangles to the right. Rectangles over and under. Gets boring, eh?

CMX JumpStarts: Venice
Reader Level: Reader Level

Venice, the city of canals, inspired this romantic JumpStart design. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Venice includes a three-column home page design as well as a two-column form page. Both layouts feature fixed-width, equal-height columns with rounded corners. Techniques used in the layout include floats, absolute positioning, list styling, and backgroung image tiling. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Venice also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Both designs have been extensively tested on a wide range of platforms and browsers to ensure maximum cross-browser compatibility.

In addition to the extensively commented XHTML and CSS files, Venice comes with the PNG file used to create both of the layouts. It features masks that allow you to easily replace our graphics with your own, enabling you to adapt this design for any number of uses or clients. You'll learn how to organize a single Fireworks file into a comp for multiple pages.

To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:
  • Using Masks in Fireworks MX by Jim Babbage
  • Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
  • Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
  • Float The Theory by John Gallant and Holly Bergevin
  • CSS An Introduction Part Two: Background Images by Adrian Senior
  • Recreating Macromedia's Layout by Zoe Gillenwater
  • Styling CSS Buttons (Part 2) by Stephanie Sullivan
  • Styling Forms: Fieldset and Legend by Stephanie Sullivan
  • Using Classes and IDs Effectively by Zoe Gillenwater
  • Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin

Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.

If you'd like a more detailed look at the Venice Jumpstart, as well as seeing a modified Venice design, check out Sheri German's CMX JumpStart Venice: An Introduction.



Using DropdownLists, CheckBoxes, and TextBoxes in an Editable ASP.NET DataGrid
Reader Level: Reader Level

Learn how to easily add data-bound dropdown lists, checkboxes, and single and multi-line textboxes to your editable DataGrids. If you stick with these three types of controls you can still leverage Dreamweaver's built-in functionality provided by DreamweaverCtrls.dll to handle updating and deleting from your database. It's easier than you might think. Read on to learn this "trick of the trade."

CMX JumpStart: Liverpool
Reader Level: Reader Level

The Liverpool JumpStart is a little different than what has gone before. It includes a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviours. This allows you to quickly and easily edit the login if you need to do so. The login also supports dual access levels and provides default pages for each level to view, along with a logout page to kill the sessions when your users have completed whatever it was they logged in to do.

Also included are login application pages for .NET, PHP and ASP server models.

This JumpsStart contains 12 tutorials, including video lessons on creating a relational database in Access, using Dreamweaver's User Authentication server behavoiurs and setting a datasource via the ColdFusion administrator.

If you prefer not to use server side code, within the download files you will find a static version of the Liverpool JumpStart.

If you'd like a more detailed description of Liverpool, including screenshots, check out the free article Announcing a New CMX JumpStart: Liverpool.

Access Level and Login For PHP
Reader Level: Reader Level

Dreamweaver has many tools to help simplify page creation. Beginning with Dreamweaver MX 2004, Dreamweaver contains Server Behaviors for password protecting PHP pages in your site. This tutorial will show how to password protect your pages using a username, password, and access level defined in a MySQL database.

North Pole: A Structural CSS Positioning Study Free!
Reader Level: Reader Level

In this tutorial we will clear away all the elements that are used to style the North Pole JumpStart so that we are only left with the structure of the document. We will then investigate how the layout is structured and the techniques that are used to position the structural elements of the layout.

Access Level and Login for ASP
Reader Level: Reader Level

Dreamweaver contains quite a number of server-side code-related tools in its Application panel. In this tutorial, we'll be exploring some of the User Authentication tools in the Server Behaviors panel that allow you to password protect pages using ASP. While the steps in the tutorials will show ASP VBScript pages, the exact same steps can be taken with ASP JavaScript pages. This tutorial will show how to password protect your pages using username, password, and access level as defined within an Access or SQL Server database.

Creating Dependent Dropdown Lists with Dreamweaver MX04 and ASP.NET - Part 2
Reader Level: Reader Level

Make smarter ASP.NET pages by implementing data-bound dependent dropdown lists. The selection in the first dropdown list dictates the contents of the second dropdown list and the selection in the second dropdown list dictates the contents of the third dropdown list.

Part 1 showed how to make the data-bound dropdown lists plus how to make the second one dependent on the first.

Here in Part 2, we first extend the paradigm to three dropdown lists and then generalize the technique so that you can add as many dependent dropdown lists as you wish.

A JumpStarts Case Study: Replacing Page Design Elements
Reader Level: Reader Level

One of the things that I really love about the JumpStart designs from Community MX is the fact that I don't need to worry about the little tweaks and hacks that are so common when attempting fully validated CSS-P designs that are compatible across multiple browsers and platforms. Frankly, I just don't have the time to remember all the little things that need to be done to make a CSS-P design work, and having the CSS wizards at Community MX doing that part of the work allows me to concentrate on the things that do matter to me, like getting a design completed to meet my client's requirements. OK, they're only imaginary clients at this point, but imagine the all-too-real instance of a client saying that they like the overall design that you've worked out, but that things are just a "little too purple". This part of the series shows you how to locate all those other elements of your JumpStart design, how to change them to create a unique design, and how to use Fireworks to help in the process.

Note to non-subscribers purchasing this tutorial: The download file for this tutorial is approximately 39MB. If a download of this size is too large for you, please send an email to info@communitymx.com after your purchase and a link will be sent to you where you may download each video contained in the article separately. Please include the email address that is associated with the PayPal account used to make the purchase. For subscribers, there will be links at the end of the tutorial itself giving you the same options.

Creating Dependent Dropdown Lists with Dreamweaver MX04 and ASP.NET - Part 1
Reader Level: Reader Level

Make smarter ASP.NET pages by implementing data-bound dependent dropdown lists. The selection in the first dropdown list dictates the contents of the second dropdown list.

Here in Part 1 you'll learn how to make the data-bound dropdown lists plus how to make the second one dependent on the first.

In Part 2, we'll extend the paradigm to three or more dropdown lists. Along the way you'll get a better understanding of view state and the Dreamweaver MM:DataBind custom tag.

Extensioneering 101: Objects Part 2
Reader Level: Reader Level

Objects are probably the most basic of extensions; their single-minded purpose is to place a small portion of code where the user has made a selection, or has positioned their insertion point. Objects had their own panel through Dreamweaver 4,while Dreamweaver MX introduced the Insert bar where you now access all the available built-in, as well as third-party, Object extensions. Of course, Objects, like many of the other extension types that we'll cover throughout the Extensioneering 101 series, can do more, much more, if you really want them to.

In this part of the series, we'll step off from where we left off in Objects Part 1 and we'll take a look at using insertObject API call to allow for better error trapping. We'll also take a look at how to provide help to our users, as well as limit when a Object can be used.

The Extensioneering Series:
Extensioneering 101: Objects - Part 1
Extensioneering 101: Objects - Part 2
Extensioneering 101: Objects - Part 3 - Coming Soon

Creating Mozilla and Firefox Sidebar Tabs
Reader Level: Reader Level

This tutorial will cover creating a Sidebar Tab for Mozilla and Firefox. By the end of the article, you will have learned what the Sidebar is, and how to create a page that will be usable within a Sidebar. You will also be able to add code to a page on your web site that will allow your visitors to add your Sidebar Tab to their own browser.

CMX JumpStarts: Aspen
Reader Level: Reader Level

Community MX is pleased to announce the release of the latest CMX JumpStarts designs, Aspen. As with all the JumpStarts, you can use and modify the design in any way you see fit, for commercial work or otherwise.

Aspen is a three column liquid-width design that includes floats, fixed and absolute positioning, background positioning, styled lists, a base page and a form page, plus all the PNG files used to create the graphics for the pages. Both pages meet the specifications of XHTML 1.0 Transitional and CSS 2. Aspen also follows the accessibility guidelines for WAI and 508 to provide you with a solid foundation for any design you may wish to use it for.

In addition to the extensively commented XHTML and CSS files, Aspen comes bundled with the following tutorials:
  • The Theory of CSS Column Design: Source Order by John Gallant and Holly Bergevin
  • Clearing Floats, the Easy Way by John Gallant and Holly Bergevin
  • Creating Liquid Faux Columns by Zoe Gillenwater
  • Styling CSS Buttons (Part 2) by Stephanie Sullivan
  • Styling Forms: Fieldset and Legend by Stephanie Sullivan
  • Custom Gradients in Fireworks MX by Kim Cavanaugh
  • Understanding the Pen Tool by Kim Cavanaugh (video)
  • Using Masks in Fireworks MX by Jim Babbage
  • CMX Design-time Extension by Paul Boon

Each bundled tutorial explains how to complete the tasks that were undertaken to create the layout. Those techniques that are not covered in the bundle are explained here, providing you with not only a robust template, but a learning tool into the web design process as well.

If you'd like a more detailed description of Aspen, including screenshots, check out the free article Announcing a New CMX JumpStart: Aspen.



Dreamweaver Piece by Piece Part 5: Creating and Processing Basic Forms Part 2
Reader Level: Reader Level

In the first part of our basic forms series, we learned how to configure Dreamweaver form preferences, set up the form with the proper actions and method, and use many of the different kinds of form objects such as text field, textarea, radio groups, and checkboxes.

In this second article in the series, we'll look at the menu/list form object, add our submit and reset buttons, use the validate form behavior, learn to set file permissions, and configure our PHP form processor. Also included in this article are both a ColdFusion and an ASP form processor for those who do not have PHP available on their servers.



CMX JumpStarts: North Pole Free!
Reader Level: Reader Level

The North Pole JumpStart is a two column, fixed width design that uses clever deployment of background images in both the navigational elements and the content areas of the design. The graphics used in North Pole are both simple and complex. They range from the beautifully created snowman made in Freehand and converted to Fireworks to some Christmas black line art that was coloured in to make simple yet effective images that enhanced the Christmas theme with only a few minutes work. Come and have a look!

Adding a Visual Font Picker to a Dreamweaver Extension
Reader Level: Reader Level

Building web pages can be quite a visual experience, and Dreamweaver is pretty good at delivering the goods when it comes to seeing what you're going to get. Unfortunately, as user, one thing that can be missing is visual feedback on a font a user may want to select within your extension interface. It would be great if we had access to the great font pickers in the Fireworks and Flash Properties panels where you can see how your text will be styled you hover over each font name in the font list.

So what's an extension developer to do when your users would benefit from being able to see the font(s) that they want to select as part of using your extension? The answer is of course build it yourself. While you won't get the same great render on hover with a list menu, you can allow your users to select a font and have that font be displayed so they know what they are getting themselves into.

Once you have the visual font chooser built, it will be relatively easy to add the functionality to an existing, or a new extension you're working on.

Dreamweaver Piece by Piece: Part 4 - Creating and Processing Basic Forms
Reader Level: Reader Level

The ability to interact with users is one of the great lures of the Internet for businesses and individuals. Most of you have filled out a form on the Internet, then hit the submit button to send your data off into cyberspace. How is it done? Most instructions give the old "setting up the script is beyond the scope of this tutorial" line, which has long been a frustration to many Web designers. I hope that this article helps you set up a feedback form that actually works. In part one of this series, we'll configure Dreamweaver form preferences, set up our form, and cover most of the different types of form objects developers will use when creating interfaces for interacting with users.

Let it Snow, Man! - Part 2
Reader Level: Reader Level

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own snowman" web page.

In Part 1, we used Fireworks to create all the essential ingredients for our frozen friend. We then exported the pieces using Export as CSS Layers. This gave us a starting html page (generated by Fireworks) and all our graphics, in absolutely positioned DW layers (divs).

In our second and final chapter we will work in Dreamweaver, using the Drag Layer behavior to create a web page where you can move all the snowman pieces together and build your own snowman online. The Drag Layer behavior makes use of Dynamic HTML (DHTML), to make your page interactive. In our case, we're letting the user move all the snowman pieces around to build their very own snowman, using a Drag-n-Drop method.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

Note: The Safari browser does not support the Dreamweaver Drag Layer Behavior at this time.

Let it Snow, Man! - Part 1
Reader Level: Reader Level

Well there's a chill in the air. The leaves have fallen, the wind is brisker and sometimes, even in early November, there's that "scent of snow" in the air. In the lead-up to the holiday season, I have created a two-part series that uses both Fireworks and Dreamweaver. The end result will be a fun little "build your own" snowman web page. In Fireworks, we will create all the essential ingredients for our frozen friend. Then in Dreamweaver, we'll use the Drag Layer behavior to create a web page where we can move all the snowman pieces together and build our own snowman online. This is a great opportunity for our friends to the south who don't even get snow to have a little winter fun.

We will also make use of a different export option in FW: Export as CSS Layers. This is a little known—or little-used—feature in FW, and comes in quite handy for jump-starting our web page.

This concept could have many different uses: visual quizzing, jigsaw puzzles, or other holidays, just to name a few.

CMX JumpStarts: Seattle
Reader Level: Reader Level

Seattle is our second design in the CMX JumpStarts series. It is free to members of Community MX and available for purchase by non-members at the competitive price of $29.99. If you'd like a more detailed description of Seattle, including screenshots, check out "Announcing a New CMX JumpStart: Seattle"

Seattle provides a fixed-width two column layout with a right-hand navigation setup. Included are a home page, a pre-prepared form page and an inner page design. It has been designed to validate to XHTML 1.0 Transitional and CSS 2, and it also meets the requirements of 508 and WAI for accessibility.

All the source files that were used to create this design are available in the download. That is, the CSS files, the XHTML documents and even the PNG files. The CSS files and the XHTML pages are extensively commented to make editing Seattle a breeze. We are sure you will have a Whale of a good time adapting Seattle to meet your own requirements!

Seattle teaches you how to use nested lists to create a fully accessible navigation system. The download contains tutorials that will provide an in-depth analysis of all the techniques that have been used to create the design.

The following tutorials are bundled with the Seattle JumpStart:
  • Float: The Theory - by John Gallant & Holly Bergevin
  • CSS An Introduction - Part Six: The Basics of Positioning - by Adrian Senior
  • Do You Want To Do That With CSS? — Centering a Wrapper - by John Gallant & Holly Bergevin
  • Styling Forms: Fieldset and Legend - by Stephanie Sullivan
  • Semantic (X)HTML Markup: Styling Lists - by Zoe Gillenwater
  • CSS An Introduction - Part Three: The Descendant Selector - by Adrian Senior
  • How to Attack an Internet Explorer (Win) Display Bug - by John Gallant & Holly Bergevin
  • CMX Design-time Extension - by Paul Boon
  • Foto 1.0 for Fireworks MX Extension - by Steve Grosvenor

Seattle has been tested in various browsers. Click on the following link to view screenshots.



Delaying Swap Image Restore to Avoid the 'Swap Back Flash' Problem
Reader Level: Reader Level

The built in Swap Image behavior is one of the most used pieces of Dreamweaver. In fact, we have a couple of articles that cover it already, Laurie's Using DWMX's Swap Image behavior and Bill's Disjointed Rollovers, both freebies. So why take the effort for another bob at the apple in the barrel? Well, despite its usefulness, the combination of just a couple Swap Images with the associated Swap Image Restore on your page may introduce an undesirable visual effect, that some have called "flash swap back". In this article we'll show you an example of the problem, a page that solves the problem, and then we'll show you how to solve the problem for your pages. Along the way we'll discuss how to introduce a delay in a Behavior, as well as how to cancel out a delay.

eCommerce and ASP.NET - Part 1: Create a Product Catalog and Use PayPal's Shopping Cart
Reader Level: Reader Level

eCommerce is easier than you might think - when you have help from Dreamweaver and PayPal.

This is the first in a series of articles that describe how to use ASP.NET to develop eCommerce sites. In this installment, you'll learn how to build a simple, but effective, product catalog based on products in the Northwind sample database and hook your product catalog into PayPal to take advantage of their payment processing systems as well as their shopping cart.

In future articles we'll explore:
  • Adding features to your catalog (e.g., displaying one or more product images and using a paged catalog),
  • Taking advantage of other PayPal features (e.g., Instant Payment Notification and subscription services), and
  • Building your own shopping cart instead of relying on PayPal's cart.


CMX JumpStarts: Paris
Reader Level: Reader Level

Community MX is pleased to announce the release of an exciting new line of products called CMX JumpStarts. Based on Web standards, these versatile layouts employ valid CSS2 and XHTML 1.0 Transitional markup and pass WAI and 508 accessibility checkpoints. This makes it easy for you to quickly create new sites that work on a variety of browsers and platforms. You are only a few simple edits away from your own look and feel.

This article covers the following:
  • A list of what is included in the CMX JumpStarts: Paris download
  • A list of the bundled tutorials that teach the theory behind the layout
  • Directions for creating the effects in the Fireworks PNGs
  • Demos of live pages
  • A page of screen shots that show the Paris layout in a variety of browsers on multiple platforms


Styling Forms: Fieldset and Legend
Reader Level: Reader Level

In my last form tutorial, we looked at creative ways to use CSS to style label, input, select and textarea field elements. This time, we're going to move on to fieldset and legend. These elements will boost the accessibility of your form in most cases as well as really add a lot of style to your web site when handled correctly. Your forms don't have to be unattractive. In this tutorial, you'll learn about the styling options of these two form elements as well as some of the more stubborn gotchas and how to work around them. Source files to begin the tutorial, the gradient png and the final example, with commented CSS, are included.

Validating Forms to xhtml strict
Reader Level: Reader Level

In this tutorial we will investigate the requirements that need to be met when validating our forms to the xhtml 1.0 strict standard. We'll look at the elements we have available to us and how we can style them with CSS.

WebQuests for Teachers - Part 2 - Reconstructing Free!
Reader Level: Reader Level

In the first part of this series, we introduced the WebQuest and a bit of its history. We learned that this lesson in a Web page allows students to make safe use of Internet resources. We also discussed the six sections that make up a traditional WebQuest, and how the WebQuest should be more than mere fact-finding. Finally, we looked at the completed version of the "Time Machine MTV" WebQuest that we're going to reconstruct from scratch. The moment to do that is now upon us, so let's get started.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing
Part 3: WebQuests for Teachers - Creating an Original WebQuest

Simple Form Styling with CSS
Reader Level: Reader Level

Boring, dry, plain forms. They don't have to be that way. You can jazz your forms up by using CSS on the form elements to give them style that coordinates with your web site. We'll look at simple methods of styling inputs, textareas, selects and options, and optgroups. We'll also discuss some of the browser differences, showing what can and can not be styled. Font and text properties, line height, borders, background colors, padding, margin and form field dimensions can all be affected by CSS. Follow along with this tutorial to learn about some simple styling techniques. This tutorial contains example files so you can follow along.

Flash Video Kit for Dreamweaver MX 2004 Free!
Reader Level: Reader Level

In typical Macromedia fashion, the Flash Video Kit has been quietly introduced and, based on my first impressions, they have a sleeper hit on their hands.This thing is an absolute breeze to use and doesn't require you to know anything about video in Flash. No components. No "netConnections". No "netStreams". No video objects. No intimate knowledge of Actionscript 2.0. Nothing. Nadda. If you can access a menu item in Dreamweaver, you can now add video to your web pages.

Using Descendant Selectors to Create a Site Map
Reader Level: Reader Level

Creating a site map is simple if you harness the power of descendant selectors. Learn to use the flow of the document to write selectors that target the specific element you need and avoid classitis -- the overuse of classes for every element on your page.

WebQuests for Teachers - Part 1 Free!
Reader Level: Reader Level

The World Wide Web has been an important part of our lives for a decade or more. Many things about the Internet have changed dramatically during this time, but one thing hasn't. Parents and teachers want children to participate in all the Web has to offer, but they don't want to expose them to danger in the process. Back in 1995, Bernie Dodge and Tom March of San Diego State University thought of a way to accomplish the seemingly contradictory goals of safety and access. They created the WebQuest.

The WebQuest Series:

Part 1: WebQuests for Teachers
Part 2: WebQuests for Teachers - Reconstructing

Part 3: WebQuests for Teachers - Creating an Original WebQuest

Creating A Photo Blog in PHP - Part 2
Reader Level: Reader Level

What good is a blog with no content? Not much good I'm afraid! So today, we will solve your problem of having no content. Today, we are going to setup the pages that will allow you to not only add new entries, but manage them as well, either through editing existing blog entries, or by deleting ones you don't like.

Vodafone: How Did They Do That? Free!
Reader Level: Reader Level

Going from concept- let's show the future of wireless communication- to upload in less than 30 minutes using the tools in the Studio, I show how to put a video on a a wrist watch and how to create an effect used in the Vodafone site.

Accessible Forms With Dreamweaver
Reader Level: Reader Level

Customer interaction through forms is vital. Are your forms accessible? Topics include making changes in Dreamweaver's preferences to help you build an accessible form, grouping form elements with fieldset and optgroup elements, choosing the appropriate input elements for disabled users, and keeping your label tags associated with your form elements.

Event-Driven Dreamweaver Commands: Startup and Shutdown
Reader Level: Reader Level

As you move further into extending Dreamweaver, you're likely to encounter a situation where you want an action to occur automatically, without any user intervention such as clicking a button, or accessing a particular menu item. The folks that built extensibility into Dreamweaver also thought of this as a possibility, and added in support for a number of events that are very easy to tap into, by merely placing a Command file in a certain folder, or by giving a Command a specific file name suffix.

There are three general categories of event-driven Commands that Dreamweaver allows an Extensioneer to tap into: 1. Application session Commands: Startup and Shutdown Commands 2. Document related events: Opening a document, before saving a document, and after saving a document. 3. Menu and Function call triggered events

In this tutorial, we'll cover the first type, Application session Commands, and create Dreamweaver Commands that can be run when the application starts and when it shuts down.

Creating A Photo Blog in PHP: Part 1
Reader Level: Reader Level

Doesn't it seem that everyone and their grandma has a blog these days? Blog, blog, blog. That's all people talk about lately.

Today, you and I will use Dreamweaver, and a host of other tools, to start building a different kind of blog. A photo blog! Curious? Intrigued? Scared? Think you can't do it? I'll bet you Jim's camera that you can! And I'm going to show you how.

Let's get our photo phreak on!

Flash, DHTML Menus and Accessibility Free!
Reader Level: Reader Level

It's not uncommon to hear developers complaining that their DHTML menus, when triggered, have dropped behind the Flash movie below them. It's also not uncommon to hear, "that's just how they work." Before Flash Player 6, that was true in many browsers. But nowadays, it's become urban legend. With Flash Player 6, Macromedia introduced windowless mode for Netscape and Mac OS X (previously it was supported only for Windows). In the process, this also gave developers a way to completely hide Flash from older screen readers and the focus issues they can have with it. In fact, when Flash is purely used as eye candy, it's wise to remove it from the flow of the screen reader's page so that they don't have to listen to Flash without a purpose.

Batch Updates in ASP.NET - Part 2
Reader Level: Reader Level

This tutorial explains how to perform a batch update in ASP.NET using strictly the .NET Framework. You can accomplish the same goal with Dreamweaver's Update Record server behavior, too. (See Using Dreamweaver and .NET For Batch Updates - Part 1.) Which method is best for you? Read both tutorials to learn the pros and cons of each approach.

Immersive Imaging - Part 2 - Adding A QTVR File To A Web Page
Reader Level: Reader Level

In Part One of this two-part series, we looked at the basics of creating panoramic images for use in QuickTime VR (QTVR). In Part Two, we'll look at bringing the panoramic image into your web page as a QTVR movie. Also included in this tutorial, is a video that shows the process of embedding the QTVR movie into a web page, and adding various parameters to the movie via Dreamweaver.

Extensioneering 101: Objects Part 1
Reader Level: Reader Level

Objects are probably the most basic of extensions; their single-minded purpose is to place a small portion of code where the user has made a selection, or has positioned their insertion point. Of course, Objects, like many of the other extension types that we'll cover throughout the Extensioneering 101 series, can do more, much more, if you really want them to.

But wait, doesn't an Object's functionality sound exactly like what a snippet does? Why not create a snippet to insert the code, and forget about all this Extension earring stuff?

Read on to find out why you will want to create an Object extension...

The Extensioneering Series:
Extensioneering 101: Objects - Part 1
Extensioneering 101: Objects - Part 2
Extensioneering 101: Objects - Part 3 - Coming Soon

Create a Web Photo Album With Dreamweaver and Fireworks
Reader Level: Reader Level

Use Dreamweaver and Fireworks to create a web photo album. Great for sites showcasing a lot of products. Dreamweaver creates a thumbnail page and links each thumbnail to a larger image on a separate page. This behavior is very easy to use, and a great time saver since Dreamweaver and Fireworks do all the work.

Dynamic Duo: JSP and MySQL
Reader Level: Reader Level

These days, no one would argue that a dynamic site is far more powerful, flexible, and scalable than a static site. But if you have a lot of static pages in your existing site, you might not know how to convert them in order to take advantage of the benefits of a dynamic site. This tutorial will show you how to do just that, by taking some existing static HTML pages, and converting them to Java Server Pages (JSP) using Dreamweaver MX 2004 and a MySQL database.

Get Connected
Reader Level: Reader Level

These days few web sites are left that aren't dynamic, and some might even be classified as true web applications. When you have a database backend, your site is much easier to update and maintain, because so much of its functionality can be automated. If you're in the process of creating a dynamic web site using Java Server Pages (JSPs), then using Dreamweaver to set up the connections will make the whole process that much simpler and quicker. This tutorial will guide you through the process of creating a database connection for a JSP site using Dreamweaver MX 2004 (DWMX 2004). Future articles and tutorials will cover related topics such as working with dynamic data in JSPs using Dreamweaver MX 2004 and setting up servers for JSP sites.

The Long and Short of Dreamweaver Timelines - An Introduction
Reader Level: Reader Level

Built right into DW 4, MX and MX 04 (7.01), is the capability to do interactive animation, and more. This article will examine the Timeline feature, pros and cons, and how it works, by doing a few simple exercises. It will act as a launching point for future, more project-based tutorials.

Creating a Simple Blog Part 4
Reader Level: Reader Level

One of the frequent questions in the forums is "How do I create a blog?". There are many commercial blog systems out there, and many full-featured blog providers, like Blogger, but you can also create a simple blog using the standard tools of Dreamweaver. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. This fourth part of the series will describe how to add categories to the blog by modifying the pages you've already created and also how to display the number of comments on each item.

Full O' Beans Part 3
Reader Level: Reader Level

One of the really nice things about Java is the way it allows you to reuse code not only within one application, but also among multiple applications. JavaBeans are a convenient means for reusing code, and Dreamweaver MX 2004 provides a convenient means for quickly adding JavaBeans to your Java Server Pages (JSPs). Part 1 of this series explained the theory behind JavaBeans, how they work, and why they are used. Part 2 showed you how to create two JavaBeans and add them to your JSPs. This tutorial, the third and final part of the series, will first describe the panels available in DWMX for adding JavaBeans to a JSP, and then will take you through the process of creating 2 JSPs that make use of a simple JavaBean with the help of those panels.

Full O' Beans - Part 2
Reader Level: Reader Level

Everyone knows that separating presentation from business logic when developing web projects is desirable. JavaBeans allow JSP developers the ability to come that much closer to achieving that goal. Part 1 of this series explained the theory behind JavaBeans, how they work, and why they are used. This tutorial will show you how to create two JavaBeans and add them to your JSP. Part 3 of the series will deal specifically with adding JavaBeans to a JSP using Dreamweaver.

Creating a Simple Server Behavior - Part I
Reader Level: Reader Level

Server behaviors insert bits of code into your page at the touch of a button. That code performs a function such as creating a recordset or a repeat region, or almost any other server-side task, although they are not limited to using server-side code. Some server behaviors require input from the user, and some do not. If you've ever used any of Dreamweaver's built-in server behaviors, you know that they can insert a lot of (sometimes very involved) code that you would have otherwise had to type in by hand. For a good idea of the kinds of tasks you can perform with 3rd party server behaviors, check out http://www.basic-ultradev.com/extensions/index.asp.

Many people create server behaviors and distribute them to others, while other people create server behaviors for themselves that are only meant to help facilitate their workflow. Quite a few server behaviors are created because someone decided they were tired of creating a particular function on their web page over and over, and wanted an automatic way of inserting that code into their page - without cutting/pasting it from another page - while still allowing the flexibility of adding new parameters to the code on the fly.

The basic idea behind building a server behavior is knowing what code you want it to place on the page, and where it should go. Dreamweaver makes the task of building a server behavior simpler by providing a tool that does much of the hard work for you: the Server Behavior Builder. In this tutorial, we will explore the basics of the server behavior builder, and we will expand on our knowledge with each subsequent part of this series.

Creating a Simple Horizontal Looper in ASP.NET
Reader Level: Reader Level

There is no horizontal looper extension for Dreamweaver in ASP.NET, but there is no need for the extension because looping is built into the DataList Application object. This tutorial will show you how to create a simple Horizontal Looper using the DataList, including recordset navigation for the loop.

Fireworks Slicing Technique #1--Inserting Rollovers
Reader Level: Reader Level

In the first of a series of Camtasia video tutorials, we'll look at a simple method for inserting slices over an existing navigation bar, creating a rollover effect, and some best practices for working with Fireworks slices. Along the way you'll learn about arranging and organizing your slices, naming slices, and some tips on exporting sliced graphics for use in Dreamweaver.

Tiptoe Through the Tool Tips
Reader Level: Reader Level

Sometimes your client needs to have a little more information displayed for one or more objects on a page, but the Show-Hide Layers behavior just doesn't seem to fit quite right. You don't want to carve out precious space on the page so that you can use that area to display the extra info. Pressing on, your client would really love something like those little blurbs that appear when you mouse over an image with alt text in its code in Internet Explorer, or the blurb that appears for a link if you have its title attribute set, but they really don't want those bland colors. Or perhaps they want to be able to provide a little "help text" for one of your form fields. If any of these situations are what you're looking for to keep the client happy then the Tool Tips are probably what you're looking for! Read on...

The Basics of Flash Buttons and Navigation Bars Free!
Reader Level: Reader Level

You've designed a great Flash button, or a series of Flash buttons for a navigation bar, but now what? In this tutorial you'll learn the basics of working with Flash navigation objects, including the all-important step of making them actually work in your HTML pages.

Advanced User Authentication with .NET and Dreamweaver - Part 3
Reader Level: Reader Level

This is Part 3 of the Advanced User Authentication with .NET and Dreamweaver series. You've created a great two-role authentication scheme using the first two parts of this tutorial series, but now your boss says you actually need three roles. Well, maybe four or five, he's not really sure. No problem. This tutorial takes you through the process of how to store and use role information from a database. And, while you're at it, impress your boss by throwing in some nifty site personalization, which is also covered in this tutorial.

Creating Desktop Recordings with Camtasia Studio 2
Reader Level: Reader Level

If you've spent some time on CommunityMX.com, you probably already know that we offer video tutorials. What you may not know is that we use Camtasia Studio 2 to create them. In this tutorial, you'll learn how to record screen actions with Camtasia Studio 2, assemble the elements of your project, and publish the completed video to Flash SWF format.

Limiting Upload File Size in CF
Reader Level: Reader Level

Even if you're standing right behind someone saying "OK, your upload size is limited to 10 kilobytes", chances are they'll try and upload something larger than that. This tutorial will outline how to prevent a user from uploading a file that exceeds your predetermined file size limitation. We'll also give the user a message explaining what the file size limit is - if they exceed it, and a "File Uploaded" message if they do not.

Toggle Between Showing All Rows and Showing a Paged View of Results
Reader Level: Reader Level

Learn how to enhance the usability of a page of data by including a link that the allows the user to toggle between showing all rows and showing a subset of rows over a series of pages. This tutorial uses the Macromedia custom Dataset tag as well as several server behaviors (repeat region, dataset paging, show region) and the DataGrid tag to display data on the page. Two sample pages written in C# are included.

Creating Button Sets In Fireworks
Reader Level: Reader Level

In this tutorial, we will look at how we can speed up repetitive tasks in Fireworks using copy and paste while building a navigation menu. We will also look at organising our png files into folders and look at the best methods for exporting our images for use within Dreamweaver.

Going Beyond the Basic Show-Hide Layers Behavior - Part 4
Reader Level: Reader Level

One of the most frequent uses of the Show-Hide Layers Behavior is to use it to show sub-menus. The current Community MX menu system uses Show-Hide Layers to display a horizontal sub-menu when mousing over a main menu item. Before we changed to our current system, if you weren't careful, you would roll over another main menu item on the way to a sub-menu layer, thereby triggering the other sub-menu, and you'd have to start again. Not any more. We implemented a method that delays the showing of a sub-menu so that if you inadvertently roll over another main menu item briefly on the way to a sub-menu, you do not trigger the other sub-menu. Read on to learn the technique we used.

Creating a Simple Blog Part 3
Reader Level: Reader Level

One of the frequent questions in the forums is "How do I create a blog?". There are many commercial blog systems out there, and many full-featured blog providers, like Blogger, but you can also create a simple blog using the standard tools of Dreamweaver. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. Part 3 will focus on adding more features to the blog, such as an RSS feed, individual blog item pages, and how to automatically insert dates.

Creating a Guestbook - Part II
Reader Level: Reader Level

In Part I of this two-part series, we learned how to create a simple guestbook that had two simple pages: Sign Guestbook and Read Guestbook. In Part II we will learn how to validate the Sign-In form, use recordset paging to navigate the guestbook entries and filter out "bad" words from the guestbook.

Do You Want To Do That With CSS? — Align Elements Left and Right Free!
Reader Level: Reader Level

There are various "tasks" designers wish to have happen in the display of their pages, using CSS, that seem like they ought to be simple to do. The need for accomplishing the tasks is common to most web authors sooner or later, but the techniques used to do them are not widely known in the community yet. Our first "task" involves placing two items in a box, and having them display on opposite sides of that box. Let's look at ways we can align elements left and right using CSS.

Creating a Guestbook - Part I
Reader Level: Reader Level

Guestbooks are a way for people to leave comments on your website for other folks to see. In this series, we'll build a guestbook from the ground up. Part I will cover the very basics and at the end we will have a functional guestbook. Part II will cover a couple of advanced concepts to add more functionality to the guestbook, like disallowing "bad" words and supplying "Next" and "Previous" navigation links.

Randomly Display Text And Images Each Time The Page Reloads In The Browser
Reader Level: Reader Level

Customer testimonials have become a great selling point for virtually all types of businesses. The question is, how can you best showcase the wonderful testimonials your business has garnered? You could spread them throughout the site or perhaps display all of them on the same page. The drawback to both approaches is that they rely on the assumption that your website visitors will browse around the site. An alternative solution is to place the testimonials on your home page, one at a time, so that each time the page is revisited (or reloaded) a different testimonial appears. We'll take advantage of the file system object to pull nicely formatted text (including img tags, if you want) from a file on the web server. A cookie will be used to keep track of which testimonial was last displayed so that we can ensure that a different testimonial appears next time. Furthermore, to make sure the first testimonial in the bunch doesn't get undue attention at the expense of the others, we'll employ a randomizer function when picking the first testimonial to display. Sound like something you need? Read on for a step-by-step tutorial that explains exactly what you need to do.

Exploring the Snippets Panel in Dreamweaver
Reader Level: Reader Level

Ever looked through the Snippets panel? If you haven't, you should. There are quite a few bits of code there that could not only save you development time, but make your repetitive tasks much simpler. For instance, you can place a button on your page that will close a popup window just by clicking one little line in the snippets panel. There's also a snippet that will create a very basic starter menu for you with just the click of a button. Those are just a couple of the many little gems you'll find in the Snippets panel. Let's take a closer look at the Snippets panel.

Creating a Banner Graphic
Reader Level: Reader Level

Requested by one of our subscribers, this tutorial demonstrates - with video - how to create a banner or header graphic using only vectors and native Fireworks effects. We'll also discuss how to slice this image for creating a "stretchy" graphic for flexible web pages.

Creating a Simple Blog Part 2
Reader Level: Reader Level

One of the frequent questions in the forums is "How do I create a blog?". There are many commercial blog systems out there, and many full-featured blog providers, like Blogger, but you can also create a simple blog using the standard tools of Dreamweaver. This tutorial will be equally applicable to ColdFusion, ASP, PHP, ASP.NET, or JSP because we will be using standard Dreamweaver server behaviors to create the blog. Part 1 of the tutorial can be found at http://www.communitymx.com/abstract.cfm?cid=7CC52. Part 2 will focus on adding more features to the blog, such as a system for adding and viewing comments, and more administration options.

Creating a Simple Blog Part 1
Reader Level: Reader Level

Many people ask "how can I build my own blog?" This tutorial will show how to create a simple blog using point-and-click features of Dreamweaver. For that reason, this tutorial can be followed for any server model that Dreamweaver supports.

Gifs - Get Rid of That Jagged Edge
Reader Level: Reader Level

In this tutorial, we'll learn how to keep those jagged outlines from appearing on your transparent gif files. While transparent gifs can be difficult to get just right sometimes, the payoff is great; The extremely small file size and the clean integration with your web page can make quite a difference in how your page loads and how it looks. Let's learn how to use transparent gifs in a way that will give you good-looking gifs every time.

Export Recordsets to Excel - Part 3
Reader Level: Reader Level

In Parts 1 and 2, Bill showed you how to create Excel files on the fly and email them to your clients, yourself, etc. Well, what if your client just wants to be able to click a link and download it directly from the server? That's exactly what I'll show you how to do in this installment. I do recommend you read at least the first installment as the topics covered there will not be rehashed in this one.

Using the asp:CheckBoxList control and determining which items are selected
Reader Level: Reader Level

Learn how to create an asp:CheckBoxList control, configure its display characteristics, and determine which check boxes were selected. Along the way learn about creating an OnClick event handler and get a first hand look at the benefits of view state preservation in ASP.NET.

Going Beyond the Basic Show-Hide Layers Behavior - Part 3
Reader Level: Reader Level

Showing and hiding layers based upon user interaction — such as mousing over images or links, or clicking buttons — can be implemented with point-and-click ease using Dreamweaver's Show-Hide Layers behavior. However, if you want to go beyond these types of interactions, the built-in behavior falls a little short. This series of tutorials will show you how a little hand-coding can extend the functionality of the Show-Hide Layers behavior. You may want to treat your visitors that arrived from Google to a free shipping deal, or perhaps your email marketing campaign sends your visitor deep into your site, but they may wander from that page and you want to remind them about the great deal that they would get on your latest, greatest widget with chrome plating. In Part 3, you will learn how to show a layer based upon the page that a visitor arrives from.

Dreamweaver MX 2004 Piece by Piece -- Part 2: Flash Text and Flash Buttons
Reader Level: Reader Level

So you've found the perfect font to use for your menu system. That's the good news. The bad news you already know: Unless the person who looks at your web page has that same font, they're going to see Times, Arial or Helvetica instead of the font you intended, and possibly your design will look much different than what you wanted. Flash Text and Flash Buttons to the rescue! Simple to use and easy to integrate into your web page, these two Dreamweaver tools will allow you to keep your design intact in a very simple manner.

Server Behaviors: DataSet, Repeat Region, DataSet Paging, and Show Region
Reader Level: Reader Level

Harness the power of Dreamweaver's built-in server behaviors. In this tutorial you'll learn how to: - retrieve data with the DataSet server behavior - display it with the Repeat Region server behavior - add paging links with the DataSet Paging server behavior - and show/hide the paging links using the Show Region server behaviors


Hidden Gems: Format Table Command in Dreamweaver Free!
Reader Level: Reader Level

If you have a plain vanilla html table, and are looking for a way to quickly spruce it up, the Format Table Command could be just what you're looking for. This neat little feature is built right into Dreamweaver 4, MX and MX 04 and makes table formatting a snap.

Hidden Gems: Insert Date in Dreamweaver
Reader Level: Reader Level

Dreamweaver has a little known gem that can insert and edit the date and time within your pages -- automatically. They'll be updated on your pages each time you edit and save from within Dreamweaver. If you use CSS to style the date/time, you can change the look of all dates in your documents for the entire site with one simple change to your CSS document. What could be easier?

From Design to Completion: Case Study One
Reader Level: Reader Level

I'll take you through a very real-world example of how a page composition can be transferred from a client-approved Fireworks concept to CSS-P reality. You'll see how the essential elements of the original design are sliced and exported from Fireworks, how the initial page structure is analyzed and built, how to position your divs properly, and how to build your styling from the ground up.

From Designer to Developer--Part 1
Reader Level: Reader Level

If you're a visual person, you may have found the whole idea of learning about dynamic web development just too confusing and difficult to deal with. I know I'm in that category, but recently I decided to take the plunge in a big way and configure my Macintosh to do the kinds of basic web programming that I need for some upcoming projects. In this, the first in an ongoing series, you'll learn about the process of configuring the Apache web server and installing PHP on a Mac.

Going Beyond the Basic Show-Hide Layers Behavior - Part 2
Reader Level: Reader Level

Showing and hiding layers based upon user interaction — such as mousing over images or links, or clicking buttons — can be implemented with point-and-click ease using Dreamweaver's Show-Hide Layers behavior. However, if you want to go beyond these types of interactions, the built-in behavior falls a little short. This series of tutorials will show you how a little hand-coding can extend the functionality of the Show-Hide Layers behavior. In Part 2, you will learn how to show a layer when the page loads based upon the value the query string in the URL for the page.

Going Beyond the Basic Show-Hide Layers Behavior - Part 1
Reader Level: Reader Level

Showing and hiding layers based upon user interaction — such as mousing over images or links, or clicking buttons — can be implemented with point-and-click ease using Dreamweaver's Show-Hide Layers behavior. However, if you want to go beyond these types of interactions, the built-in behavior falls a little short. This series of tutorials will show you how a little hand-coding can extend the functionality of the Show-Hide Layers behavior. In Part 1, you'll learn how to show a layer based upon a selection in a select list (List/Menu in Dreamweaver-speak).

Database Design: Introducing Relationships and Queries
Reader Level: Reader Level

In this tutorial, we will look at some of the problems we may encounter when designing our database, we will investigate primary keys, foreign keys and how we can avoid NULL values. We will also look at the WHERE clause and see how we can filter our information by using variables. We will use the repeat region server behavior and look at how we can use and set up dynamic list menus. Further to this we will also look at the ColdFusion isdefined function to ensure that information is only displayed to our end user at the appropriate time. This tutorial contains written and video instruction.

Invitations: The 21st Century Way!
Reader Level: Reader Level

Traditionally, invitations to an event, such as a wedding or a technology show, are sent out via postal mail. Sometimes, invitations get lost in the process, or they are misplaced by the recipient. Today, I will show you how to create an RSVP script that will allow you to manage all your RSVPs without having to incur the expense of stamps or worse, lost invitations!

Setting Up A Testing Server For The PHP Server Model: Part II
Reader Level: Reader Level

In my previous article, we learned how to set up a testing server for the PHP server model. This allows you the opportunity to test your PHP pages locally for bugs and errors in your programming. We also learned how to set up Dreamweaver MX 2004 to use the MySQL testing server you've previously installed. In this second part, we will set up a Graphical User Interface (GUI) so that you can add new databases and tables to your newly installed local MySQL server to further extend your resources.

Dynamic Web Development - The Basics: Creating a Join and Log In Application.
Reader Level: Reader Level

In this tutorial we will use the native Dreamweaver behaviours to create a join and log in application for our users. We will design the database tables, and the insert and log in pages. As this tutorial only uses the native Dreamweaver behaviours the server-side language you use is irrelevant. We will let Dreamweaver insert all the code that is required and of course that code will be defined by your site definition. This tutorial contains video demos.

Dynamic Web Development - The Basics: The Application.cfm Template
Reader Level: Reader Level

In this tutorial, we will explore how to use the ColdFusion Application.cfm template to make our lives so much easier. We will also explore the tag and how to use and manage variables for our application from a single location.

Managing Keyboard Shortcuts
Reader Level: Reader Level

Shortcuts are an easy way to access menu functions without having to use your mouse. They can be used to perform simple tasks such as opening or saving a file, or performing more complex tasks such as moving or copying files from one location to another. In Macromedia Dreamweaver MX 2004, there are 199 shortcuts that can be used to accomplish every task imaginable, from the blatantly obvious like creating a new file (Ctrl+N on the Windows platform, Command Key+N on the Macintosh platform) or access the Dreamweaver Help Topics (F1 on both the Windows and Macintosh platforms). In this article, I will show you a few things, such as how to create your own shortcuts for a few menu items, and also hook you up with a few Dreamweaver shortcut resources.

Dynamic Web Development - The Basics: Filtering Recordsets
Reader Level: Reader Level

In this tutorial, we will learn how we can filter specific data from our database. We will look at doing this using both form and url variables. This tutorial contains video demos. In Part two of this mini-series we will look at catching errors that may be generated from missing recordset content.

Using the Log In Server Behavior
Reader Level: Reader Level

In this tutorial we will be learning about the standard Log In Server Behavior that ships with Dreamweaver. We will be looking at this Server Behavior in its basic form, in a language independent way. This tutorial is aimed at beginners who are new to Server side development and looking to to be able to show unique content on a user group by user group basis. Tutorial contains video demos.

Using the Stored Procedure Server Behavior on ASP.NET Pages
Reader Level: Reader Level

It's well known that using stored procedures is better practice over using embedded SELECT statements in your code. Dreamweaver has a built-in server behavior called Stored Procedure that makes this process much easier on ASP.NET pages. Read on to learn how.

Setting Up A Testing Server For The PHP Server Model
Reader Level: Reader Level

Once you have created your site in Dreamweaver MX 2004, you have the option of testing it locally for any bugs, errors or to make changes to the way your pages display in the browser. This is usually done before the site is uploaded to the server. However, in order to test your site locally before uploading, you need to set up a testing server. This article will show you in detail how to setup a testing server in Dreamweaver MX 2004 for the PHP server model.

The Insert Record Server Behavior in Dreamweaver MX 2004
Reader Level: Reader Level

In this first part of a two-part article, we are going to be looking at Data Insertion using a simple form that we will create in Macromedia Dreamweaver MX 2004. Inserting data from a form into a database is something we all have done at least once. For instance, signing up to get email alerts from CNN is a great example of inserting data into a database. Or filling out a form on a website to start a magazine subscription. However, the uses don't stop there. In fact, they are limitless.

Sending and Receiving Data within Dreamweaver Extensions - Part IV
Reader Level: Reader Level

As your extensions grow more sophisticated, you may find that it would be advantageous to obtain external sources of information for use within your extension. Allowing the user to update the database to show that a task has been completed is another step in you not having to do anything at work, right? Of course we can't all code ourselves to a task free day, but at least you can have those performing the tasks sending that information into the database themselves. Part IV introduces MMHttp.postText() to send data from within a Dreamweaver extension to a remote location, in this case updating the tasks database.

User Authentication in Macromedia Dreamweaver MX 2004
Reader Level: Reader Level

The User Authentication server behavior built into Dreamweaver MX 2004 can help you password protect sections of your site, such as an administration panel, or other areas that you want only specific users to have access to. As such, the User Authentication server behavior is a great tool for accomplishing this. In Part 1 we will go over setting up the User Authentication login form. In Part 2, we'll take an in depth look at the code produced when we use this behavior in a PHP page, and explain how everything works.

Check New Username Server Behavior
Reader Level: Reader Level

A lot of people in the Dreamweaver forums ask "How can I make sure when someone registers on my website that their username is not the same as someone else's?" Server behaviors can save you time, sweat, energy and frustration. The Check New Username server behavior is one of those behaviors that has been a part of Dreamweaver since UltraDev, but folks glance by it somehow. In a few simple steps, you'll learn how to use this server behavior, and also how to modify it a bit to offer greater flexibility.

Sending and Receiving Data within Dreamweaver Extensions - Part III
Reader Level: Reader Level

As your extensions grow more sophisticated, you may find that it would be advantageous to obtain external sources of information for use within your extension. Part III in this series covers using MMHttp.getText() to obtain remote data, using a database of tasks assigned to team members.

Sending and Receiving Data within Dreamweaver Extensions - Part II
Reader Level: Reader Level

As your extensions grow more sophisticated, you may find that it would be advantageous to obtain external sources of information for use within your extension. With such external information, it is possible to create user interfaces on the fly based upon user selections, pull down files from your server for use within an extension like an update to a JavaScript file, or even to modify records in a database. These are only a few of the many uses of external data that can be incorporated into an extension in the Dreamweaver environment. In Part I of this tutorial, we used MMHttp.getFile() to pull the RSS feed from the Community MX server, and created a UI within a command based upon the contents of the RSS file. One problem that can occur with MMHttp.getFile() is that slow network connections, or nonexistent connections, can cause Dreamweaver to hang until the attempted connection times out, which happens in about 20 seconds. There is a workaround to this, which we will examine in Part II.

Sending and Receiving Data within Dreamweaver Extensions - Part I
Reader Level: Reader Level

As your extensions grow more sophisticated, you may find that it would be advantageous to obtain external sources of information for use within your extension. With such external information, it is possible to create user interfaces on the fly based upon user selections, pull down files from your server for use within an extension like an update to a JavaScript file, or even to modify records in a database. These are only a few of the many uses of external data that can be incorporated into an extension in the Dreamweaver environment. This first part of this tutorial covers pulling the RSS feed down from the Community MX server and creating a UI within a command based upon the contents of the RSS file.

Dissecting the Login User Server Behavior
Reader Level: Reader Level

Dreamweaver MX makes it very easy to create a page where your users can log in to your website. In this tutorial, you'll find out how one simple server behavior can not only provide this functionality, but can also restrict access to certain pages based on the user's predefined access level.

Using Flash Elements in Dreamweaver MX 2004
Reader Level: Reader Level

One of the coolest new features of Dreamweaver MX 2004 is Flash Elements. In this tutorial, we will insert the Image Viewer Flash Element into a Dreamweaver MX 2004 document, and edit its parameters using the new Tag inspector. Image Viewer enables you to create image slide shows embedded in Flash Player 7, complete with captions, hyperlinks, and transitions. This tutorial contains Camtasia videos which will play through the Flash Player.

Controlling a Gradient Page Background with CSS
Reader Level: Reader Level

Page backgrounds make a big difference in the way your web page is perceived when someone first arrives. In this tutorial we'll look at a simple but elegant way to give your page a smooth, non-tiling gradient background using Fireworks. Then we'll apply the image with CSS using Dreamweaver.

Importing a Tag Library to add new Code Hints to Dreamweaver
Reader Level: Reader Level

Not having to hand code so much is probably one of the main reasons that you are using Dreamweaver, it makes life easier. And with extensibility being built into Dreamweaver, you can make things easier, even if you do have to do some hand coding. Here's where adding new Code Hints to Dreamweaver can really give you a productivity boost. Adding a Tag Library to Dreamweaver is a quick and easy method of adding a bunch of new Code Hints in one fell swoop.

Build a Cross Frame Fly Out Menu System Part II
Reader Level: Reader Level

Multilevel layer-based fly out menu systems are pretty common on the web today, and you can incorporate such a system fairly easily through a variety of methods, including a couple built into Dreamweaver MX. However, despite being pretty simple to implement, they can also be a great cause of frustration for some, especially those that have created their site with frames. This is Part II in a series that will walk you through the process of creating a cross-frame layer based menu system for your site.

Setting the SelectedIndex of an asp:DropdownList
Reader Level: Reader Level

Dive deeper into Dreamweaver MX and ASP.NET with this tutorial showing how to populate a DropdownList from a database, set the SelectedIndex of the dropdown, and retrieve specific information from the database based on either the dropdown's SelectedIndex or a query string. Throw in some additional info regarding order of events and data binding in ASP.NET and you've got one interesting ap!

Fun with the DataGrid tag, Part 3
Reader Level: Reader Level

The ASP.NET DataGrid is a data-bound list control that uses a table to display and/or modify information. In this three-part tutorial, we'll take a look at creating DataGrids using Dreamweaver's DataGrid server behavior. You'll learn how to customize the look of the DataGrid and make it editable. In addition, you'll pick up some useful tips regarding the inter-relation between Dreamweaver's custom DataSet tag and the DataGrid control. In part 1, we'll go over setting up your Dreamweaver site, connecting to the database, creating the data source for the DataGrid, and creating a simple DataGrid. Part 2 describes several techniques you can use to customize the appearance of the DataGrid. And Part 3 will cover making your DataGrid editable.

Email a Forgotten Password in ColdFusion Free!
Reader Level: Reader Level

You've done it... I've done it. We've all signed up at a website and had to create a username and a password for ourselves, only to forget them months or perhaps even minutes later. Most sites allow you to have your password emailed to you automatically. That's what this tutorial will go over: emailing a user their password using some very simple ColdFusion code. All of the action will take place on the log-in page, so your user never has to leave the log-in page.

Fun with the DataGrid tag, Part 2
Reader Level: Reader Level

The ASP.NET DataGrid is a data-bound list control that uses a table to display and/or modify information. In this three-part tutorial, we'll take a look at creating DataGrids using Dreamweaver's DataGrid server behavior. You'll learn how to customize the look of the DataGrid and make it editable. In addition, you'll pick up some useful tips regarding the inter-relation between Dreamweaver's custom DataSet tag and the DataGrid control.
In part 1, we'll go over setting up your Dreamweaver site, connecting to the database, creating the data source for the DataGrid, and creating a simple DataGrid. Part 2 describes several techniques you can use to customize the appearance of the DataGrid. And Part 3 will cover making your DataGrid editable.

Creating multiple link styles
Reader Level: Reader Level

A common question that arises for new users of Dreamweaver relates to the use of multiple link styles in a single page. You've seen them on other sites, so they must be possible, right? The trick is simply knowing a little about using Cascading Style Sheets to control your links, and how the styles are applied in Dreamweaver.

Rollover Buttons with Animated GIFs
Reader Level: Reader Level

Ever want to add just a little bit extra to a page design—something that will set it apart from the mundane? Animated GIFs can be a great way to add some interesting effects to navigation objects, making it possible to really draw attention to the buttons. All it takes is a little planning and creating this kind of effect can be fun and easy.

Experimenting with the Set Text of Layer Behavior
Reader Level: Reader Level

So you want to create a online photo album, but don't want to use pop-up windows to display the full size images. Problem is, putting all those full size images on the same page makes the file size huge and slows the download to a crawl. Well have no fear, with the help of a seldom mentioned Dreamweaver behavior it can be accomplished!

Fun with the DataGrid tag, Part 1
Reader Level: Reader Level

The ASP.NET DataGrid is a data-bound list control that uses a table to display and/or modify information. In this three-part tutorial, we'll take a look at creating DataGrids using Dreamweaver's DataGrid server behavior. You'll learn how to customize the look of the DataGrid and make it editable. In addition, you'll pick up some useful tips regarding the inter-relation between Dreamweaver's custom DataSet tag and the DataGrid control.
In part 1, we'll go over setting up your Dreamweaver site, connecting to the database, creating the data source for the DataGrid, and creating a simple DataGrid. Part 2 describes several techniques you can use to customize the appearance of the DataGrid. And Part 3 will cover making your DataGrid editable.

Using a ColdFusion Custom Tag as a Site Template Part 3
Reader Level: Reader Level

ColdFusion custom tags allow you to build a flexible template for your site that will feed every page on the site. Part 1 of this series showed the basic concepts of the custom tag and how to use one as a site template. The tutorial addressed the setup and implementation of a custom tag, and showed how to supply a title to the document dynamically. Part 2 showed you how to add other features to this template, such as JavaScript, CSS, and meta tags. Part 3 will show how to incorporate a table layout or a div layout in setting up your template.

Creating the database connection for your ASP.NET application
Reader Level: Reader Level

One of the very first hurdles to cross when developing a new dynamic ASP.NET application is creating the connection to your database. In this tutorial you'll learn how to make both a SQL Server connectin and an OLE DB connection in Dreamweaver. You'll see how Dreamweaver takes you through a series of dialogs prompting you for information, provides a mechanism for you to test the connection, and writes the required code to your web.config file.

Creating XML Documents with ColdFusion
Reader Level: Reader Level

Learn how to create an xml file by passing a cfquery over your data, see how it can be easily exported and written to your machine and then reimported back into access to create a database table.

Using a ColdFusion Custom Tag as a Site Template Part 2
Reader Level: Reader Level

ColdFusion custom tags allow you to build a flexible template for your site that will feed every page on the site. Part 1 of this series showed the basic concepts of the custom tag and how to use one as a site template. The tutorial addressed the setup and implementation of a custom tag, and showed how to supply a title to the document dynamically. Part 2 will show you how to add other features to this template, such as JavaScript, CSS, and meta tags.

Advanced User Authentication with .NET and Dreamweaver, Part 2 Free!
Reader Level: Reader Level

This tutorial takes you step-by-step through the implementation of Forms-based Authentication using ASP.NET, Macromedia's custom DataSet tag, SQL Server 2000, and C#. Part 1 shows you how to set up a simple authentication scheme with a single type of user. Part 2 goes further. You'll learn how to examine the user's role to enable/disable access to your site's protected content.

Advanced User Authentication with .NET and Dreamweaver, Part 1 Free!
Reader Level: Reader Level

This tutorial takes you step-by-step through the implementation of Forms-based Authentication using ASP.NET, Macromedia's custom DataSet tag, SQL Server 2000, and C#. Part 1 shows you how to set up a simple authentication scheme with a single type of user. Part 2 goes further. You'll learn how to examine the user's role to enable/disable access to your site's protected content.

Using a ColdFusion Custom Tag as a Site Template Part 1
Reader Level: Reader Level

ColdFusion developers have had Custom Tags in their arsenal of tricks since the early days of ColdFusion. With CFMX, the tag has made it even easier to use custom tags on your pages. With the introduction of ColdFusion Components (CFC) in CFMX, the custom tag has taken a back seat to the versitility of CFCs, but some things are ideally suited to the ColdFusion Custom Tag API. This article will address one use of a ColdFusion custom tag: building a flexible template for your site that will feed every page on the site.

Check for duplicate database entries
Reader Level: Reader Level

You may have a database in which you have duplicate entries in a particular column. This may be by design, or possibly by accident. If you've inherited the site from someone else, you may not be aware of this duplicate data. Or perhaps you are aware, but you'd like to see what or where this data is. This tutorial will allow you to build a page that lists only duplicate entries from a column in your database.

Preventing duplicate database entries in ColdFusion
Reader Level: Reader Level

If you need a Username to be unique when a user registers on your website, this article shows two simple ways to insure that they cannot select a name that is already being used. These techniques can be used to prevent the creation of duplicate database entries in any database.

Populating a select list using cfdirectory
Reader Level: Reader Level

Have you ever need to pull the contents of a directory within your site and make it available to you visitor via a select list? Well, ColdFusion provides an easy way to do it using the <cfdirectory> tag.

Using CFDirectory to Get Multiple File Types
Reader Level: Reader Level

While the cfdirectory is a very powerful and helpful tag, it does have one flaw. You can only filter the files gathered with the tag by a single file type. So if you have a folder containing both .jpg and .gif files there is no way to get them all at once. Well, with a little help from ColdFusion's query of queries feature we can overcome this problem.

Emailing file attachments with ColdFusions cfmail and cfmailparam tags
Reader Level: Reader Level

Learn how to allow your viewers to send you file attachments through your web site forms. Shows you how to upload the file and create a variable for storing the file until it's called for forwarding it on to its destination.

Build a Cross Frame Fly Out Menu System Part I
Reader Level: Reader Level

Multilevel layer-based fly out menu systems are pretty common on the web today, and you can incorporate such a system fairly easily through a variety of methods, including a couple built into Dreamweaver MX. However, despite being pretty simple to implement, they can also be a great cause of frustration for some, especially those that have created their site with frames. This tutorial will walk you through the process of creating a cross-frame layer based menu system for your site.

ColdFusion - CFML Basics - Part 3
Reader Level: Reader Level

Part 3 in a series of articles that will take you through the basic tags used in the CFML language. Providing you with an explanation of the tag along with examples. This installment will compare the <cfquery> tag to ColdFusion's 'shorthand' methods of inserting and updating records; the <cfinsert> and <cfupdate> tags.

The CFML Basics Series:
ColdFusion - CFML Basics - Part 1
ColdFusion - CFML Basics - Part 2
ColdFusion - CFML Basics - Part 3

Styling CSS Buttons (Part 1)
Reader Level: Reader Level

So you think you're ready to hop on the CSS styling bandwagon? Many people are finding that decreased page load time and quick site wide changes are attractive draws to making the leap. And rightly so. In this tutorial I'll cover three different ways to style simple CSS buttons.

Using a database to display images dynamically Free!
Reader Level: Reader Level

Let's say you have a repeat region and you want to display a unique picture with each record. There's really no way you can do that without using your database to hold information about the image you want to use. In this tutorial, you'll learn how to use your database and a repeat region to dynamically display your images. We'll even go over how to display an alternate image if there is no reference to it in your database.

ColdFusion - CFML Basics - Part 2
Reader Level: Reader Level

Part 2 in a series of articles that will take you through the basic tags used in the CFML language. Providing you with an explanation of the tag along with examples. This installment covers the <cfquery> tag.

The CFML Basics Series:
ColdFusion - CFML Basics - Part 1
ColdFusion - CFML Basics - Part 2
ColdFusion - CFML Basics - Part 3

Reconnecting StudioMX Help Files for Macintosh Users Free!
Reader Level: Reader Level

For a reason beyond me, in many Macintosh OSX installations of the StudioMX line, the help files appear to be missing. They're really there. In this short tutorial, I'll show you where they are and how to access them through your computers Help system.

Image Protection with Auto-Watermarking
Reader Level: Reader Level

There's not much you can do to keep someone from stealing content from your Web site, especially those beautiful graphics you worked so hard on. You can, however, at least deter would-be thieves with a copyright notice - one that is automatically imprinted on all of your valuable images without touching the originals.

Customizing the Site Window in Dreamweaver Free!
Reader Level: Reader Level

Sometimes you need more information at your fingertips than Dreamweaver provides on its own in the Site window. This tutorial shows how to customize the look of the Site columns in the Site window to meet your own needs and the needs of a particular site.

Preparing DMX to work with CSS
Reader Level: Reader Level

Integrating TopStyle to work with Dreamweaver MX, get the full power of CSS at your finger tips quickly and easily.

Using the Google API from ColdFusion
Reader Level: Reader Level

Learn to build Google searches right into your own ColdFusion applications using the Google Web Service API.

CFFILE: Uploading files to your server with ColdFusion
Reader Level: Reader Level

Learn how to to use multipart/formdata in your forms for transferring files from your hard drive to your server. This tutorial shows how you can use ColdFusion to transfer varying types of files and how you can set permissions to restrict the types of files that are uploaded.

Defining a Site in DreamweaverMX - The Advanced Tab
Reader Level: Reader Level

In the first part of this tutorial we covered setting up a static site in DWMX using the Basics Tab in the Site Definition window. In this second part, we will be setting up, step by step, a fictitious ColdFusion site using the Advanced Tab.

Displaying Alternate Text if Recordset is Empty
Reader Level: Reader Level

If you've got an empty recordset, rather than have a big blank spot on your page where data should be, you can show whatever text you like, or even an image. Using CFIF statements and a recordcount variable, it's a nice cool breeze.

Fireworks: Rollovers Made Easy Free!
Reader Level: Reader Level

Have you been creating duplicate images in Fireworks just to create rollover effects? Using the Frames Panel within Fireworks can speed up this task!

Defining a Site in DreamweaverMX - The Basic Tab
Reader Level: Reader Level

Before you can start to develop your site in DreamweaverMX you need to define your site. The first part of this tutorial will walk you through setting up a static site, step by step, using the Basic Tab in the Site Definition window. In the second part we will go through setting up a dynamic site, using the Advanced Tab in the Site Definition window.

Adding a Horizontal Loop to DWMX's Repeat Region with ColdFusion
Reader Level: Reader Level

Dreamweaver provides a way to list multiple results from a recordset. Unfortunately it only enables a vertical or horizontal display of these results. Many times you may want, or need, to display your results in a horizontal and vertical manner. This tutorial will take you through the process of creating just such a page by building upon the built-in "Repeat Region" server behavior.

Creating Fluid Pages (Part Two)
Reader Level: Reader Level

You want your pages to look good at any resolution. You want to stay accessible to the largest crowd. But CSS positioning is scary isn't it? Is it? Take a look at this table-free tutorial. We'll explore both a static-width, centered approach and a more fluid, stretchy design. And the cool thing is -- both use the same html page. The difference is all in the stylin'. (Pssst... go ahead... click the "more" button.)

CSS starting points: multiple psuedo classes
Reader Level: Reader Level

A CSS starting point, this article will show you how to use multiple style sheets in your pages and how to protect older browsers from choking on certain CSS styles. In this tutorial we will cover how to create CSS buttons as well as creating three different link styles. We will also look at the styling of form elements and text content.

Disjointed Rollovers Free!
Reader Level: Reader Level

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

Forms Authentication & Authorization Series: Part 2
Reader Level: 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 in which ASP.NET provides many tools for the developer to sculpt their security strategies to take whatever form they desire. In part 2 we will investigate using the web.config file as the trusted source as well as how to encrypt your passwords in the web.config file.

Updating Multiple Records without CFGrid
Reader Level: Reader Level

Have you wanted to be able to update multiple records in a table in one fell swoop, but either didn't want, or know how, to use CFGrid? Well this tutorial will take you step by step through the process. I think you'll be surprised at how easy it is using ColdFusion.

Consuming the CMX Web Service with ColdFusion Free!
Reader Level: Reader Level

Community MX publishes a web service that will display information about the latest content available from the site. This service can be used by anyone who knows how to consume a web service. The Community MX web service utilizes a standard .wsdl file that can be consumed by any technology that can consume a web service. The web service is located at http://www.communitymx.com/services/cmxfeed.wsdl. The web service exposes 3 methods: getContent: grabs the latest content descriptions available from Community MX. searchContent: search the content at Community MX for relevant content getContentTypes: the latest content types are available as a list for your applications as well (articles, extensions, etc).

Create/Email a tab-delimited text file from a web page
Reader Level: Reader Level

Many programs require that you import data via a tab or comma-delimited text file. Now you can create one right from your web page and email it at the same time.

Clean Cross-Browser Table Borders
Reader Level: Reader Level

Creating nice, clean table borders that display consistently in all browsers should be easy... Actually, it is!

Creating Rounded Cornered Boxes
Reader Level: Reader Level

Don't be square! Whether you want to use rounded corners for a fixed size box or round a stretchy rectangle that can adjust to any size, we'll show you two simple methods of rounding the corners of your tables.

Zeroing page margins Free!
Reader Level: Reader Level

In this tutorial we will investigate how we can use dual style sheets to set our page margins to zero in the most common browsers we will come up against in today's online world. We will also take our CSS code and optimise it for performance and make it bandwidth friendly.......

The Newbie Series: Using DWMX's Set Navbar Image Behavior
Reader Level: Reader Level

In an earlier tutorial "Using DWMX's Swap Image Behavior" we looked at how to create simple 2 state rollovers. With this tutorial, we are going to kick it up a notch and create more complex 3 and 4 state rollovers using the Set Navbar Image behavior. DWMX makes creating these navbars a piece of cake. :-D

Email the Contents of a Form Using ColdFusion
Reader Level: Reader Level

Sending the results of a simple form from your web page using some simple ColdFusion code is much easier than you might imagine.

Creating a clickable wireframe navigation for site testing
Reader Level: Reader Level

Proving your navigational structure before you dig deep into the graphical design of your site is very important. Creating a clickable wireframe can help point out problem areas in navigation, or may prompt you - or the client - about a missing hyperlink. A little up front work can save you tons of time at the production stage.

The Newbie Series: The Dreamweaver MX Workspace
Reader Level: Reader Level

Intimidated by the Dreamweaver interface? It can be a bit overwhelming, but in this article we begin to break it down into "chewable" bits. Helping you to digest everything that Dreamweaver has to offer without getting into the "nuts and bolts" so to speak.

Creating a Multi-Page Form
Reader Level: Reader Level

Create a form that carries over several pages. This is useful for loan applications, lengthy registration pages, etc.

Creating An External Style Sheet In Dreamweaver MX Free!
Reader Level: Reader Level

How to create an external style sheet in dreamweaver and link it into your document.

Creating Fluid Pages (Part One)
Reader Level: Reader Level

Learn simple methods, using tables, to keep your design looking good at any monitor resolution.

The Newbie Series: Using DWMX's Swap Image behavior Free!
Reader Level: Reader Level

Making 2-state rollover navigation buttons using DWMX's Swap Image behavior is a piece of cake! In this tutorial we will walk you through placing your navigational buttons on your page and applying the Swap Image behavior to them to create a rollover.

Round Trip Editing in Fireworks and Dreamweaver
Reader Level: Reader Level

Work smarter, not harder! Tight integration between Dreamweaver and Fireworks can make you work go even faster and improve your productivity! Check out this tutorial and start taking advantage of Roundtrip Editing.