Dreamweaver

The CMX JumpStart Catalog Update 2009 Free!
by Sheri German - 10-Nov-09
Reader Level:

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

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

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

Introducing CMX JumpStart Black Forest Free!
by Sheri German - 30-Oct-09
Reader Level:

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

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

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

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

CMX JumpStart: The Black Forest
by Adrian Senior - 30-Oct-09
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
by Adrian Senior - 26-Oct-09
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
by Sheri German - 15-Oct-09
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.

Introducing CMX JumpStart Berlin Free!
by Sheri German - 23-Sep-09
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
by Adrian Senior - 23-Sep-09
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.

Extending Dreamweaver CS4: Part 5 - Phatfusion Image Menu
by Adrian Senior - 18-Sep-09
Reader Level:

In Part 5 of this series on Extending Dreamweaver CS4 we will be looking at the Phatfusion Image Menu widget from the Adobe web site. The Phatfusion Image Menu widget is a stylish, intuitive and visually appealing navigation system. A default set of images are provided to get you up and running. You can, of course, create your own and build on the amount of menus available to your users.

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

PHP Undo Delete Button in Dreamweaver
by Paul Davis - 03-Sep-09
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
by Adrian Senior - 19-Aug-09
Reader Level:

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

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

Introducing CMX JumpStart: Stelvio Pass - Gallery Free!
by Sheri German - 19-Aug-09
Reader Level:

Let's take a car ride along the highest paved mountain pass in the Eastern Alps, the Stelvio Pass of Italy. Then let's take some great shots along the route and when we get home, place them on a web page in a stunning gallery format, courtesy of the free Adobe Lightbox, to share with our friends and family. Guess what? That's exactly what Adrian Senior did for the the latest JumpStart, CMX JumpStart Stelvio Pass - Gallery.

Displaying Horizontal List Navigation in Dreamweaver's Design View
by Adrian Senior - 12-Aug-09
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.

YouTube Extension
by Paul Davis - 24-Jul-09
Reader Level:

This extension will insert the needed code so you can embed a YouTube video on your web page.

The CSS Starter Page Series - Part 9: Working with the Conditional Comment
by Sheri German - 22-Jul-09
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

Extending Dreamweaver CS4: Part 4 - Digg This!
by Adrian Senior - 14-Jul-09
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
by Sheri German - 26-Jun-09
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

Extending Dreamweaver CS4: Part 3 - Phatfusion SortableTable
by Adrian Senior - 26-Jun-09
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

Extending Dreamweaver CS4: Part 2 - jQuery UI Calendar
by Adrian Senior - 19-Jun-09
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!
by Adrian Senior - 18-Jun-09
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
by Adrian Senior - 17-Jun-09
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

The Adobe BrowserLab Web Service Free!
by Sheri German - 16-Jun-09
Reader Level:

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

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

Introducing CMX JumpStart Siberia Free!
by Sheri German - 11-Jun-09
Reader Level:

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

CMX JumpStart: Siberia
by Adrian Senior - 11-Jun-09
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
by Adrian Senior - 10-Jun-09
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!
by Adrian Senior - 05-Jun-09
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

A Beginner's Guide to Spry - Part 5: Spry Menu Bar
by Adrian Senior - 03-Jun-09
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

A Beginner's Guide to Spry - Part 3: The Spry Accordion
by Adrian Senior - 15-May-09
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
by Adrian Senior - 15-May-09
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!
by Sheri German - 07-May-09
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
by Adrian Senior - 07-May-09
Reader Level:

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

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

A Beginner's Guide to Spry - Part 2: The Spry Collapsible Panel
by Adrian Senior - 05-May-09
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
by Adrian Senior - 30-Apr-09
Reader Level:

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

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

Introducing CMX JumpStart Isle of Skye Free!
by Sheri German - 30-Apr-09
Reader Level:

National Geographic rated it the fourth best island in the world. It is the second largest island in Scotland, with a coastline strewn with peninsulas and bays. And now, it's a first class design for the latest CMX JumpStart, CMX JumpStart Isle of Skye.

CMX JumpStart Isle of Skye is a centered, fixed-width layout with features that work well for a business site. There is a highlighted style for a promotional paragraph above the two-column main content region. There is an extended area for displaying images that express your business model. A print style sheet includes your business contact information so that it is not lost when a visitor prints out any page of the site. Your logo appears next to the popular accessible Sliding Door tabbed navigation. And best of all, this is one of the easiest JumpStarts to modify! Once you edit the PNG file and export the slices to the defined Dreamweaver site, the changes you'll need to make to the CSS file are minimal.

Embedding Flash Content, Demystified - Part 1: Introduction Free!
by David Stiller - 29-Apr-09
Reader Level:

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

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

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

A Beginner's Guide to Spry - Part 1: The Spry Tooltip Widget Free!
by Adrian Senior - 22-Apr-09
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

Introducing CMX JumpStart Landeck Free!
by Sheri German - 16-Apr-09
Reader Level:

CMX JumpStart Landeck is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, some eye catching images. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to blend its image into the background color.

CMX JumpStart: Landeck
by Adrian Senior - 16-Apr-09
Reader Level:

Welcome to the Landeck JumpStart!

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

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

The Landeck JumpStart

A Beginner's Guide to Dreamweaver Templates - Part 5: Nested Templates
by Adrian Senior - 08-Apr-09
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
by Adrian Senior - 01-Apr-09
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
by Paul Davis - 24-Mar-09
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
by Adrian Senior - 23-Mar-09
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 Demise of Dreamweaver Has Been Greatly Exaggerated Free!
by Kim Cavanaugh - 20-Mar-09
Reader Level:

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

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

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

A Beginner's Guide to Dreamweaver Templates - Part 2: Editable Attributes
by Adrian Senior - 19-Mar-09
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
by Adrian Senior - 18-Mar-09
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

Introducing CMX JumpStart Lima Free!
by Sheri German - 13-Mar-09
Reader Level:

Peru's archaeological heritage and great natural beauty make it a popular travel destination for thousands of visitors each year. Most of them visit Lima, Peru's cultural and business center. The latest CMX JumpStart, CMX JumpStart Lima, will also become an artistic center - for designers. With its neutral color scheme, modern design, and elegant simplicity, it will be a JumpStart you can use again and again to almost instantly create a new site.

CMX JumpStart Lima is a centered, two-column, fixed-width layout that makes extensive use of background images to produce its space age design. The left column navigation is constructed from an unordered list. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a subtle blend whose visual appeal makes a great substitute for the navigation buttons in Gordon's original Mercury Design Element.

That's right - if this design looks familiar, it should. Adrian Senior coded it from Gordon Mackay's Design Element Mercury.

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

CMX JumpStart: Lima
by Adrian Senior - 13-Mar-09
Reader Level:

Welcome to the Lima JumpStart.

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

JumpStart Lima

The Spry Validation Confirm Control
by Adrian Senior - 10-Mar-09
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
by Paul Davis - 06-Mar-09
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

Favourite Extensions - Part 3: The TFM Progress Bar Free!
by Adrian Senior - 06-Mar-09
Reader Level:

Extensions are code snippets that we can install into Dreamweaver. They automate the writing of specific code or perhaps even install a complete design layout, as in the case of the CMX JumpStarts. Whatever the extension has been designed to do, you can be sure it is going to be a huge time saver.

In this occasional series I will be covering extensions that I have found to be particularly useful in saving both time and money by automating tasks that I perform on a regular basis. The TFM Progress Bar isn't an extension that I use a great deal, but it does provide great functionality in specific circumstances. In short the TFM Progress Bar provides a visual indication to your users while they upload a file, the bigger the file size the more important this extension becomes.

The Favourite Extensions Series:
Favourite Extensions - Part 1: Tom Muck's Sniplets
Favourite Extensions - Part 2: Massimo's CF Insert Bar Plus
Favourite Extensions - Part 3: The TFM Progress Bar

Dreamweaver's Swap Image Behaviour Free!
by Adrian Senior - 04-Mar-09
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!
by Paul Davis - 26-Feb-09
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
by Adrian Senior - 24-Feb-09
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.

Preparing for the Adobe Certified Associates Exam for Web Design: Part 2
by Kim Cavanaugh - 30-Jan-09
Reader Level:

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

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

Preparing for the Adobe Certified Associates Exam for Web Design: Part 1
by Kim Cavanaugh - 28-Jan-09
Reader Level:

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

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

From Screen to Print: Creating a Print CSS in Dreamweaver Free!
by Stephanie Sullivan - 12-Jan-09
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!

Introducing CMX JumpStart: The New Forest Free!
by Sheri German - 08-Jan-09
Reader Level:

Where can you stay in a five-star hotel or bed-and-breakfast, experience all kinds of wildlife, visit gardens and museums, go biking, and even get married? How about England's newest National Park The New Forest, where there is, it seems, something for everyone? There is also something for everyone in the latest CMX JumpStart, CMX JumpStart: The New Forest.

CMX JumpStart The New Forest is a centered, two-column or three-column, 770 pixel liquid and fixed-width layout. The content is constrained for optimal line lengths of text, but the outer divs are flexible and expand to the user's window size. The two tier navigation uses the infamous Sliding Door technique for its main navigation. The left column navigation is constructed from an unordered list, which has a generous amount of bottom padding to accommodate a decorative background image. The right column of the three-column version provides space for more content, or, as in our JumpStart, an eye catching image. The header div uses the Fireworks Fade Image (Auto Vector Mask in CS4) command to create a blend of images that has great visual appeal.

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

CMX JumpStart: The New Forest
by Adrian Senior - 08-Jan-09
Reader Level:

Welcome to The New Forest JumpStart!

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

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

Approximate download size: 4.4MB

Dreamweaver's Form Validation Behavior
by Paul Davis - 18-Dec-08
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
by Adrian Senior - 11-Dec-08
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.

Hide Your Body!
by Paul Davis - 04-Dec-08
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
by Adrian Senior - 26-Nov-08
Reader Level:

Welcome to the Nairobi JumpStart!

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

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

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

Nairobi is a JumpStart not to be missed!

Introducing CMX JumpStart Nairobi Free!
by Sheri German - 26-Nov-08
Reader Level:

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

Quick Shot: Alternate Table Row Coloring
by Paul Davis - 19-Nov-08
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!
by Sheri German - 11-Nov-08
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

It's Goodbye and Good Riddance to .style1 in Dreamweaver CS4 Free!
by Kim Cavanaugh - 07-Nov-08
Reader Level:

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

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

The CSS Starter Page Series - Part 1: Faux-Column Images Free!
by Sheri German - 30-Oct-08
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

Introducing CMX JumpStart Tokyo Free!
by Sheri German - 16-Oct-08
Reader Level:

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

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

CMX JumpStart: Tokyo
by Adrian Senior - 16-Oct-08
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:

Centering a Wrapper - by John Gallant & Holly Bergevin
Create Columns with Floats by Zoe Gillenwater
Do You Want To Do That With CSS? - Floating Clear- by John Gallant & Holly Bergevin
CMX Internet Explorer Conditional Comment Extension by Paul Davis
Making CC & DT style sheets work for you by Adrian Senior
CSS Tricks: Using Descendant Selectors to Control the Number of Columns by Stephanie Sullivan

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!
by Sheri German - 29-Sep-08
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!
by Sheri German - 16-Sep-08
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!
by Tom Muck - 09-Sep-08
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).

The Complete JumpStart Catalog 2008 Update Free!
by Sheri German - 02-Sep-08
Reader Level:

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

Pagination in Dreamweaver
by Paul Davis - 27-Aug-08
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!
by Sheri German - 21-Aug-08
Reader Level:

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

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

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

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

CMX JumpStart: Phoenix
by Adrian Senior - 21-Aug-08
Reader Level:

Welcome to the Phoenix JumpStart!

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

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

User Authentication in Dreamweaver
by Paul Davis - 14-Aug-08
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!
by Tom Muck - 13-Aug-08
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
by Adrian Senior - 07-Aug-08
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.

Introducing CMX JumpStart Prague Free!
by Sheri German - 07-Aug-08
Reader Level:

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

Add, Edit and Delete Records with PHP and Dreamweaver - Video
by Paul Davis - 29-Jul-08
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!
by Sheri German - 25-Jul-08
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!
by Sheri German - 21-Jul-08
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

Building a Reservation System From Discovery to Deployment - Part 4
by Paul Davis - 15-Jul-08
Reader Level:

In this part of the series, we will convert the Sterling Jumpstart to the template we want to use for the reservation project.

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

Dreamweaver for GoLive Users: Part Four Free!
by Sheri German - 07-Jul-08
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

Introducing CMX JumpStart: The Lake District Free!
by Sheri German - 20-Jun-08
Reader Level:

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

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

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

CMX JumpStart: The Lake District
by Adrian Senior - 20-Jun-08
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
by Sheri German - 19-Jun-08
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 CS4 Public Beta: Subversion Integration Free!
by Tom Muck - 03-Jun-08
Reader Level:

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

Dreamweaver CS4 Public Beta: The Coding Improvements Free!
by Paul Davis - 30-May-08
Reader Level:

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

Dreamweaver CS4 Public Beta: What's New? - Part 3 Free!
by Sheri German - 29-May-08
Reader Level:

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

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

Dreamweaver CS4 Public Beta: What's New? - Part 2 Free!
by Sheri German - 28-May-08
Reader Level:

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

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

Dreamweaver CS4 Public Beta: What's New? - Part 1 Free!
by Sheri German - 27-May-08
Reader Level:

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

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

Dreamweaver CS3 Code View
by Paul Davis - 20-May-08
Reader Level:

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

Dreamweaver for GoLive Users: Part Two Free!
by Sheri German - 15-May-08
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

Introducing CMX JumpStart Bordeaux Free!
by Sheri German - 14-May-08
Reader Level:

It's May, and for many of us that means lots of end-of-year events. School concerts, graduations, award ceremonies, last meetings till the fall...we celebrate these endings and look forward to the easy lifestyle of summer. Many of our celebrations are accompanied by parties - delicious food, and sometimes a special wine. What more preeminent center of great wine is there than Bordeaux, France? And to that region we dedicate our latest JumpStart design, CMX JumpStart Bordeaux.

CMX JumpStart Bordeaux features an accessible split level navigation system. The main navigation is a series of tabs that use the Sliding Door method as described by Douglas Bowman. The sub navigation is an unordered list based system, and both navigation systems provide clear "you are here" page markers. The design is a two column layout fixed at 740px wide and utilizes gradients on various page areas. Of course Bordeaux meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements, too.

CMX JumpStart: Bordeaux
by Adrian Senior - 14-May-08
Reader Level:

Welcome to the Bordeaux JumpStart.

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

Baltimore: Developing a CSS Starter Page Part Four
by Sheri German - 08-May-08
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!
by Sheri German - 28-Apr-08
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
by Jim Babbage - 15-Apr-08
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
by Steven Seiller - 14-Apr-08
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é
by Adrian Senior - 10-Apr-08
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.

Introducing CMX JumpStart Malé Free!
by Sheri German - 10-Apr-08
Reader Level:

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

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

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

Baltimore: Developing a CSS Starter Page Part Three
by Sheri German - 09-Apr-08
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
by Sheri German - 02-Apr-08
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
by Paul Davis - 27-Mar-08
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
by Jim Babbage - 18-Mar-08
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

Introducing CMX JumpStart Sydney Free!
by Sheri German - 06-Mar-08
Reader Level:

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

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

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

CMX JumpStart: Sydney
by Adrian Senior - 06-Mar-08
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
by Sheri German - 05-Mar-08
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
by Paul Davis - 25-Feb-08
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
by Sheri German - 20-Feb-08
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
by Steven Seiller - 05-Feb-08
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
by Sheri German - 01-Feb-08
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!
by Jim Babbage - 31-Jan-08
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.

Building a Reservation System From Discovery to Deployment - Part 3
by Paul Davis - 28-Jan-08
Reader Level:

In Part Three of this series, the design starts to take shape, some modifications to the prior setup for the new information is included.

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

Handy Form Snippets Free!
by Ray West - 25-Jan-08
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
by Adrian Senior - 24-Jan-08
Reader Level:

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

Introducing CMX JumpStart Stirling Free!
by Sheri German - 24-Jan-08
Reader Level:

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

Case Study: How to Customize a JumpStart Free!
by Steven Seiller - 22-Jan-08
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!
by Paul Davis - 14-Jan-08
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
by Tom Green - 21-Dec-07
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
by Paul Davis - 06-Dec-07
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.

Building a Reservation System From Discovery to Deployment - Part 2
by Paul Davis - 05-Dec-07
Reader Level:

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

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

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

Pods
by Tom Muck - 29-Nov-07
Reader Level:

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

Quick Shot - Form Styling Free!
by Paul Davis - 28-Nov-07
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!
by Jim Babbage - 26-Nov-07
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.

Building a Reservation System - From Discovery to Deployment: Part 1 Free!
by Paul Davis - 20-Nov-07
Reader Level:

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

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

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

Using File Comparison for Team Environments
by Tom Muck - 19-Nov-07
Reader Level:

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

HTML Reports in Dreamweaver - Part 2
by Paul Davis - 15-Nov-07
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
by Jim Babbage - 13-Nov-07
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

Basics: Top Ten Rules for Site and File Structure
by Tom Muck - 08-Nov-07
Reader Level:

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

CMX JumpStart: Playa Blanca
by Adrian Senior - 01-Nov-07
Reader Level:

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

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

Approximate download size: 1.8MB

Introducing CMX JumpStart: Playa Blanca Free!
by Sheri German - 01-Nov-07
Reader Level:

I admit it: this JumpStart city necessitated that I do a little geography lesson. Adrian Senior, creator of the latest CMX JumpStart Playa Blanca gave me clues to googling for Playa Blanca information in the introduction to his article:

While not exactly a city, Playa Blanca is a beautiful town that can be found on the southern tip of Lanzarote. Lanzarote is one of a group of small volcanic islands that despite sitting off the African coast come under Spanish sovereignty.

All right! A beautiful beach resort that brought me back to my summer trip in Hawaii. Now on to the latest JumpStart....Playa Blanca is a centered, two-column, fixed-width layout with header and footer, but it is a more complex variation of that common layout type. It uses a series of nested divs that create the illusion of the secondary navigation effect that bleeds the appropriate button into the related content region. Of course Playa Blanca meets the W3C standards for CSS and XHTML, as well as the WAI accessibility requirements.

HTML Reports in Dreamweaver - Part 1
by Paul Davis - 31-Oct-07
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

Dreamweaver Report - Recently Modified
by Paul Davis - 26-Oct-07
Reader Level:

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

How to Apply the longdesc Attribute in Dreamweaver
by Zoe Gillenwater - 23-Oct-07
Reader Level:

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

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

Quick Shot - Adding Accessibility To A Form With Validation Free!
by Paul Davis - 23-Oct-07
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...

CMX Google Map Extension
by Paul Davis - 19-Oct-07
Reader Level:

Getting a Google Map on your site just got a whole lot easier! This extension for Dreamweaver v8 and CS3 with your Google Map API key and a few key strokes later you have a Google Map with your location all ready to go! No need to know JavaScript to use Google Maps!

Honolulu - Developing a CSS Starter Page: Part Two
by Sheri German - 17-Oct-07
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!
by Adrian Senior - 16-Oct-07
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
by Jim Babbage - 11-Oct-07
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
by Jim Babbage - 04-Oct-07
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
by Sheri German - 01-Oct-07
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
by Paul Davis - 21-Sep-07
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
by Adrian Senior - 20-Sep-07
Reader Level:

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

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

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

Approximate download size: 2MB

Introducing CMX JumpStart Madrid Free!
by Sheri German - 20-Sep-07
Reader Level:

Madrid, Spain, capital of Spain and one of Europe's major political and financial centers, is home to some of the most captivating museums and cultural events in the world. Like the atmosphere that pervades the city, we are pleased to introduce the equally warm and vibrant CMX JumpStart Madrid!

Madrid is a three-column, elastic layout that includes a background image in the content region that uses the background attachment property set to a value of fixed, an expandable header region, and a dual navigation system. The main navigation consists of an inline unordered list at the top of the design, and vertical sub navigation buttons in the left column. As with all the CMX JumpStarts, Madrid meets the W3C standards for CSS and XHTML, as well as for WAI and 508 accessibility.

Creating a Master/Detail Pageset on One Page Using AJAX
by Tom Muck - 19-Sep-07
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
by Zoe Gillenwater - 14-Sep-07
Reader Level:

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

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

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

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

Defining a Site in Dreamweaver CS3, Advanced Tab Free!
by Paul Davis - 30-Aug-07
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
by Sheri German - 29-Aug-07
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

Dreamweaver's Accessibility Preferences
by Zoe Gillenwater - 27-Aug-07
Reader Level:

You may have the best of intentions when it comes to making your web pages accessible, but all of us can forget to add an alt attribute or label element here or there. If you're using Dreamweaver (from version MX 2004 onward), you can customize it to remind you about these accessibility enhancements every time you insert one of a number of common elements, as well as help you insert the needed attributes or elements. While this won't help you make your web pages more accessible if you don't know how to properly choose the values for these attributes and elements, it does serve as a handy reminder for those that are already familiar with accessibility best practices.

In this article, you'll learn:

what elements Dreamweaver provides with accessibility prompts
how to set your preferences so that it will prompt you about these elements every time
what each prompt looks like and what accessibility changes it produces in your markup

We won't be focusing on the benefits and guidelines for each of these accessibility enhancements, but rather on how Dreamweaver helps facilitate them. Because of this, this tutorial is best suited for those already familiar with accessibility requirements and how to meet them. References to other articles providing this background information are supplied throughout the article, if you need to brush up in any of the areas covered.

Defining a Site in Dreamweaver CS3, Basic Tab Free!
by Paul Davis - 24-Aug-07
Reader Level:

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

Introducing CMX JumpStart Palm Springs Free!
by Sheri German - 16-Aug-07
Reader Level:

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

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

CMX JumpStart: Palm Springs
by Adrian Senior - 16-Aug-07
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

Optimize Images in Dreamweaver
by Paul Davis - 10-Aug-07
Reader Level:

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

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

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

The Dreamweaver Web Standards Lesson Plan Series - Part Eleven
by Sheri German - 31-Jul-07
Reader Level:

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

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

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

Create a Simple Database Web Search - Part 1
by Tom Muck - 26-Jul-07
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
by Sheri German - 20-Jul-07
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

Introducing CMX JumpStart Washington, D.C. Free!
by Sheri German - 12-Jul-07
Reader Level:

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

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

CMX JumpStart: Washington, D.C.
by Adrian Senior - 12-Jul-07
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 PHP Insert Bar Explained
by Paul Davis - 03-Jul-07
Reader Level:

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

Playing Nice with Dreamweaver -- Making Code and Design View More Useful
by Tom Muck - 02-Jul-07
Reader Level:

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

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

The Dreamweaver Web Standards Lesson Plan Series Part Nine
by Sheri German - 26-Jun-07
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.

TODCon 9 Session - Tabbed Content Switching Using JavaScript & AJAX Techniques Free!
by Paul Davis - 15-Jun-07
Reader Level:

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

Spry Table Free!
by Chaz Chumley - 11-Jun-07
Reader Level:

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

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

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

The Dreamweaver Web Standards Lesson Plan Series Part Eight
by Sheri German - 07-Jun-07
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

Create a Table-less Horizontal Looper in PHP
by Tom Muck - 05-Jun-07
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.

Spry Repeat List
by Chaz Chumley - 24-May-07
Reader Level:

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

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

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

The Dreamweaver Web Standards Lesson Plan Series Part Seven
by Sheri German - 23-May-07
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

Approximate download size: 1MB

Feed Tools in Dreamweaver 8 and CS3: RSS and XSL Free!
by Tom Muck - 22-May-07
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
by Zoe Gillenwater - 18-May-07
Reader Level:

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

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

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

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

Approximate download size: 10MB

Introducing CMX JumpStart Tahoe Free!
by Sheri German - 18-May-07
Reader Level:

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

Tahoe uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design you may wish to use it for. Tahoe is a two column elastic layout, which means it expands in width based on the user's font size. This allows the overall proportions of the page to stay intact regardless of the visitor's window or font size. The design also features a subhead area, skip link, a styled list as a navigation menu, and floated images.

Spry Region and Repeat
by Chaz Chumley - 16-May-07
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!
by Stephanie Sullivan - 11-May-07
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!

Spry XML Data Set
by Chaz Chumley - 07-May-07
Reader Level:

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

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

Swap Image DOM Replacement!
by Paul Davis - 04-May-07
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!

Dreamweaver CS3 - CSS Management
by Chaz Chumley - 27-Apr-07
Reader Level:

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

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

Spry Tabbed Panels Free!
by Adrian Senior - 24-Apr-07
Reader Level:

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

The Dreamweaver Web Standards Lesson Plan Series Part Six
by Sheri German - 17-Apr-07
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
by Stephanie Sullivan - 13-Apr-07
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.

Dreamweaver CS3: Form Checking with Spry
by Adrian Senior - 12-Apr-07
Reader Level:

Dreamweaver CS3 contains some new and pretty nifty form checking capabilities. This form checking is just a small area of a new Dreamweaver section that comes under the name of Spry.

CMX Internet Explorer Conditional Comment Extension
by Paul Davis - 12-Apr-07
Reader Level:

Rapidly put Internet Explorer conditional comments in your web pages without looking it up every time for the syntax. This extension will insert conditional comments for Internet Explorer in a couple of clicks!

Saving Page Designs in Dreamweaver for Future Use
by Tom Muck - 10-Apr-07
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
by Sheri German - 09-Apr-07
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

Introducing CMX JumpStart Detroit Free!
by Sheri German - 05-Apr-07
Reader Level:

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

CMX Jumpstart: Detroit
by Adrian Senior - 05-Apr-07
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.

CMX Robot File Dreamweaver Extension
by Paul Davis - 02-Apr-07
Reader Level:

The CMX Robots.txt Creator will create a robots.txt file formatted according to the standards set for this type of file and save it to your local site. Quickly create your robots.txt files with this extension and stop worrying about the syntax!

CS3 Sneak Preview: Device Central Free!
by Adrian Senior - 29-Mar-07
Reader Level:

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

CS3 Sneak Preview: The CSS Panel Free!
by Adrian Senior - 28-Mar-07
Reader Level:

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

CMX Font Size Changer Extension
by Paul Davis - 15-Mar-07
Reader Level:

Change the font size on your webpage with the JavaScript code from this handy extension. Enter the font sizes you want and then click OK, everything else is done for you ... it really is that easy!

Anti-Spam Measures for PHP and ColdFusion - Part 2
by Tom Muck - 14-Mar-07
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 Mobile Internet - Part 5: Sniffing for Operating Systems
by Adrian Senior - 12-Mar-07
Reader Level:

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

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

The Dreamweaver Web Standards Lesson Plan Series - Part Four
by Sheri German - 01-Mar-07
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

Putting the Sting into the CMX San Francisco JumpStart
by Jim Babbage - 23-Feb-07
Reader Level:

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

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

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

Fireworks PNG

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

CSS

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

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

CMX JumpStart: Kansas City Free!
by Heidi Bautista - 20-Feb-07
Reader Level:

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

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

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

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

Kansas City JumpStart pages

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

Using Background Images in a Horizontal Band Design Free!
by Sheri German - 20-Feb-07
Reader Level:

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

The Mobile Internet - Part 4: Text Elements
by Adrian Senior - 15-Feb-07
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 Mobile Internet - Part 3: Background Images & A Different Breed of Mobile Browser
by Adrian Senior - 02-Feb-07
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
by Adrian Senior - 25-Jan-07
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

The CMX Mobile Device Reference Resource Free!
by Adrian Senior - 18-Jan-07
Reader Level:

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

The Mobile Internet - Part 1: An Introduction Free!
by Adrian Senior - 11-Jan-07
Reader Level:

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

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

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

The Complete JumpStart Catalog Update Free!
by Sheri German - 15-Dec-06
Reader Level:

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

Favourite Extensions - Part 2: Massimo's CF Insert Bar Plus Free!
by Adrian Senior - 07-Dec-06
Reader Level:

In this, the second look at extensions that can enhance your production time, we are going to look at Massimo Foti's CF Insert Bar Plus.

The extension enhances functionality that already exists within Dreamweaver by reducing cftry, cfoutput and cfdump to a single click.

The Favourite Extensions Series:
Favourite Extensions - Part 1: Tom Muck's Sniplets
Favourite Extensions - Part 2: Massimo's CF Insert Bar Plus
Favourite Extensions - Part 3: The TFM Progress Bar

Multiple Insert/Update in PHP - Part 2
by Tom Muck - 06-Dec-06
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
by Tom Muck - 27-Nov-06
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
by Sheri German - 22-Nov-06
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

Modify Dreamweaver to Create a Default Style Sheet
by Zoe Gillenwater - 15-Nov-06
Reader Level:

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

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

Editable Select Lists Using CMX AutoComplete
by Rob Williams - 25-Oct-06
Reader Level:

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

Let's Learn ColdFusion: Building a Simple Admin - Part 3
by Adrian Senior - 25-Oct-06
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
by Paul Davis - 23-Oct-06
Reader Level:

Learn to make a simple Dreamweaver Behavior.

Converting the Santorini JumpStart to Use Two Columns Instead of Three Free!
by Heidi Bautista - 18-Oct-06
Reader Level:

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

Favourite Extensions - Part 1: Tom Muck's Sniplets Free!
by Adrian Senior - 16-Oct-06
Reader Level:

We all have our favourite extensions and I'm no exception. Some people collect them and have extensions for everything whether they use them or not, and some folks have just a few. I fall into the latter category.

In this ocassional series I thought I would catalogue some of the extensions that I use on a regular basis. Extensions that speed up my productivity are a particular favourite of mine and Tom Muck's Sniplets extension is one such tool that I use a great deal. It isn't a commercial extension, it is absolutely free, costs nothing but your time to download and install it.

The Favourite Extensions Series:
Favourite Extensions - Part 1: Tom Muck's Sniplets
Favourite Extensions - Part 2: Massimo's CF Insert Bar Plus
Favourite Extensions - Part 3: The TFM Progress Bar

Using Snippets Effectively in Dreamweaver 8
by Zoe Gillenwater - 09-Oct-06
Reader Level:

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

CMX JumpStarts: Santorini Free!
by Heidi Bautista - 05-Oct-06
Reader Level:

Welcome to the next design in the CMX JumpStarts series, Santorini, a sun-kissed island in legendary Greece.

View of bay of Caldera, island of Santorini, in Greece.

The Santorini JumpStart is a three-column design that leverages the entire width of the browser. The center (main content) column widens and shrinks as the user resizes his window. But the two outer columns are fixed width so your links and extra info is always visible to the user.

As always, the Santorini CMX JumpStart can be used in any way you wish. commercial or personal, and includes several tutorials and an extension.
CMX JumpStart:Santorini.
Santorini is structured to be as hack-free and straightforward as possible. So, if you've been looking for a relatively painfree way of getting started with CSS layouts this may be just the JumpStart for you.

The source PNG included with Santorini is pretty simple too in that it doesn't have any complicated images that you need to slice up and shoehorn into the design. What you get with Santorini is a starter page that uses valid XHTML 1.0 Strict and CSS 3 markup and follows WAI and Section 508 accessibility guidelines making it ready for you to customize to suit your own requirements.

Approximate download size: 2.9MB

CMX Announces a JumpStart Contest and FREE JumpStart Free!
by Sheri German - 05-Oct-06
Reader Level:

The Greek island of Santorini is considered by some to be the location of the legendary Atlantis. Atlantis still fascinates and inspires everything from literature and art to movies and music. Now, as the latest Community MX JumpStart, we hope that Santorini will inspire your Web designs, too.

Santorini is our 18th JumpStart, and we think that this is a nice "coming of age" number. To celebrate, we're going to give Santorini away for free AND hold a JumpStart contest. Read on to learn more about our latest JumpStart and to get all the contest rules.

Create a Style Sheet in Dreamweaver 8
by Zoe Gillenwater - 11-Sep-06
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.

Images and Accessibility
by Adrian Senior - 07-Sep-06
Reader Level:

One of the more overlooked items in website design when considering accessibility features is the image. In this article we will look at how we can adapt the image markup to make it accessible to users who perhaps cannot see the image as you intended it to be seen.

Jotforms: Free and Easy Forms for Your Site Free!
by Kim Cavanaugh - 05-Sep-06
Reader Level:

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

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

PHP Formmail Spam Prevention
by Sheri German - 25-Aug-06
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.

Create a Quick Poll in PHP - Part 2
by Paul Davis - 16-Aug-06
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
by Zoe Gillenwater - 14-Aug-06
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.

Introducing CMX Jumpstart Greenville Free!
by Sheri German - 10-Aug-06
Reader Level:

The name Greenville evokes the radiant ambiance of gardens, nurseries, and landscapes. And that is just how Heidi Bautista paints it in our latest Community MX JumpStart: Greenville, NC. Let's take a closer look at this bloomingly lovely design to see what new treasure we've added to our JumpStart collection.

CMX JumpStarts: Greenville
by Heidi Bautista - 10-Aug-06
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
by Paul Davis - 01-Aug-06
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

JavaScript Dissecting - Automatic Shipping Address Code
by Paul Davis - 18-Jul-06
Reader Level:

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

Let's Learn ColdFusion: Part 4b - Building a Dynamic List Menu
by Adrian Senior - 12-Jul-06
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

CMX Insert SWFObject 1.4
by Paul Newman - 10-Jul-06
Reader Level:

SWFObject is an external JavaScript file, created by Geoff Stearns, that enables you to embed Flash movies into web pages using XHTML-compliant code. The CMX Insert SWFObject extension automatically inserts SWFObject code into Dreamweaver documents, and copies swfobject.js into the folder you specify. Now supports major, minor, and revision Flash Player detection. Requirements: Dreamweaver MX or higher, Flash Player

Automatic Shipping Address Fill-in with Dreamweaver and JavaScript
by Paul Davis - 07-Jul-06
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
by Heidi Bautista - 05-Jul-06
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.

Realtime Searching with CMX Table Sorter
by Rob Williams - 21-Jun-06
Reader Level:

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

Creating a Registration Page: Part 3
by Tom Muck - 21-Jun-06
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

Introducing CMX Jumpstart Orlando Free!
by Sheri German - 15-Jun-06
Reader Level:

Orlando, Florida. It's every kid's dream vacation spot. It's warm and sunny, and makes the world of school seem galaxies away. It's got theme parks galore that take them to galaxies far away. When most people think of Orlando, they probably think of Disney, Epcot, MGM Studios, and Sea World. Now there is also CommunityMX JumpStart Orlando to add to the list of Orlando attractions.

Orlando was designed by Chris Flick and coded by Zoe Gillenwater. Orlando uses valid XHTML 1.0 and CSS 2.1 markup and follows WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design for which you may wish to use it. Orlando is a two-column elastic layout that also features a subhead area, a styled list as a navigation menu, and floated images.

CMX JumpStarts: Orlando
by Zoe Gillenwater - 15-Jun-06
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!

Creating a Registration Page: Part 2
by Tom Muck - 07-Jun-06
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

Introducing CMX Jumpstart San Francisco Free!
by Sheri German - 01-Jun-06
Reader Level:

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

CMX JumpStart San Francisco for Students (and Anyone)
by Sheri German,John Gallant - 01-Jun-06
Reader Level:

We are pleased to introduce CMX JumpStart San Francisco, a great first CSS layout for students and experienced developers alike. Structured to be as hack free and straightforward as possible, this may be just the JumpStart for you if you have been holding back on CSS layouts so far. Like all JumpStarts, it uses valid XHTML and CSS as its foundation and is 508 and WAI compliant. This two-column, fixed-width layout, described rule by rule in the documentation article, makes a great learning tool.

Approximate download size: 4MB

What I Learned at TODCon 8 Free!
by Kim Cavanaugh - 31-May-06
Reader Level:

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

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

A Dreamweaver 8.0.2 Updater Free!
by Tom Green - 26-May-06
Reader Level:

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

Creating a Registration Page: Part 1
by Tom Muck - 23-May-06
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

Beating Spam On Your Contact Forms
by Adrian Senior - 03-May-06
Reader Level:

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

Creating Dreamweaver Extension Packages
by Tom Muck - 25-Apr-06
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.

Precisely Positioning div Tags in Your Page From Design View Free!
by Adrian Senior - 12-Apr-06
Reader Level:

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

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

CMX MapLink v1.0 - Server Behavior
by Joel Martinez - 11-Apr-06
Reader Level:

The CMX MapLink Server Behavior creates a link to Google Maps. You can use static values, or dynamic values from the data sources palette. The behavior creates a link around a selection (text, image, etc...)

The only parameters are: Address, City, State, Zip. US Addresses only (sorry international users).

ASP Server Behavior Only

Importing Tabular Data Into Dreamweaver
by Adrian Senior - 06-Apr-06
Reader Level:

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

Creating a ZIP File Backup of Your Website in ASP.NET
by Heidi Bautista - 05-Apr-06
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
by Tom Muck - 31-Mar-06
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.

Introducing CMX JumpStart Modifications Free!
by Sheri German - 30-Mar-06
Reader Level:

With our growing repertoire of JumpStarts, there are now layouts to fit a wide range of design requirements. Still, sometimes a particular JumpStart is just what you are looking for - if only you could fix one or two little details. If only the navigation had been on the right instead of left. Or what if that left DIV had been floated rather than set to position absolute? And what if instead of a fixed-width, centered layout, the JumpStart had been fluid?

We often see such sentiments on the forums, and thought it might be helpful to respond with articles that show how to modify some of our existing JumpStarts to give you a wider variety of options without having to go in and code the tweaks yourself. Towards that end, we give you CMX JumpStart Playacar, Mexico.

Changing Continents and Layouts - Modifying the Paris Jumpstart to Make Playacar, Mexico
by Jim Babbage - 30-Mar-06
Reader Level:

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

This article covers the following:

A list of what is included in the CMX JumpStarts: Playacar download
A list of the bundled tutorials that teach the theory behind the layout
Directions for creating the effects in the Fireworks PNGs
Demos of live pages

Approximate download size: 9.3MB

Modifying the Machu Picchu JumpStart to Work with Short Pages
by Zoe Gillenwater - 16-Mar-06
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
by Tom Muck - 15-Mar-06
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!
by Tom Muck - 09-Mar-06
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.

Introducing CMX Jumpstart Minneapolis Free!
by Sheri German - 03-Mar-06
Reader Level:

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

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

CMX JumpStarts: Minneapolis
by Gordon Mackay - 03-Mar-06
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.

JumpStart Comparison Chart Free!
by Heidi Bautista - 02-Mar-06
Reader Level:

CMX JumpStarts are a quick and sure way to get your new site up and running fast. But how do you decide when there are so many great choices?

The JumpStart Comparison Chart lists all the JumpStarts available at Community MX. The QuickPick Feature table provides a thumbnail of the main JumpStart page, a short list of features and techniques demonstrated in JumpStart, the cost (always free to members), the layout, including the number of columns, and a link to full JumpStart description.

The full descriptions include everything from the QuickPick Feature table plus thumbnails of all pages, links to download the JumpStart and to related articles, the publish date and author(s), and the list of tutorials included with each JumpStart.

Since each of us absorb information different ways, please also check out The Complete JumpStart Catalog. It also describes each of the JumpStarts but in a much more conversational manner. It's especially valuable if you need more information about the features listed in the Comparison Chart.

Convert an Existing Site to Use ASP.NET Master Pages and Themes
by Heidi Bautista - 22-Feb-06
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

Investigating Drag-and-Drop For Use in Content Managements Systems: Part 2
by Danilo Celic - 13-Feb-06
Reader Level:

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

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

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

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

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

An XHTML, CSS and Accessible Form Template
by Adrian Senior - 06-Feb-06
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.

Using the Default Documents to Speed Up Your Work Flow Free!
by Adrian Senior - 31-Jan-06
Reader Level:

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

Adding WYSIWYG to Textareas: Part 1
by Gordon Mackay - 17-Jan-06
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
by Danilo Celic - 04-Jan-06
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.

Alpha Video and HTML: How did they do that? Free!
by Tom Green - 03-Jan-06
Reader Level:

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

The Style Rendering Toolbar: Displaying Additional Elements
by Adrian Senior - 03-Jan-06
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.

Redesigning the Inverness JumpStart
by Heidi Bautista - 23-Dec-05
Reader Level:

All JumpStarts boast flexibility and the Inverness Blog JumpStart is no exception. In this article you'll see how I reskinned the site with only minor modifications to the CSS and source PNG and NO changes to the original html file at all! A true reskinning operation. Check out how I changed the feel of the site: from cool Scottish Highlands to warm tropics at sunrise.

All my CSS changes are commented (the majority of which are simply color changes). The source PNG continues to use the original slice names (okay, I did add a couple of new slices). And the article takes you step by step through my changes.

Redesigning the Inverness JumpStart
by Zoe Gillenwater - 23-Dec-05
Reader Level:

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

Creating a Simple Blog: Part 6
by Tom Muck - 22-Dec-05
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.

Creating a Simple Blog: Part 1 22-Mar-04
Creating a Simple Blog: Part 2 30-Mar-04
Creating a Simple Blog: Part 3 14-Apr-04
Creating a Simple Blog: Part 4 25-May-04
Creating a Simple Blog: Part 5 26-Apr-05

Introducing CMX Jumpstart Inverness Free!
by Sheri German - 21-Dec-05
Reader Level:

We are pleased to announce Community MX JumpStart Inverness, a design you can use to create your own Web blog. CMX JumpStart Inverness was designed and coded by new CMX partner Gordon Mackay. It is a centered, two-column, fixed-width design that makes use of background images to achieve its faux column appearance. The page is constructed using valid XHTML 1.0 Strict markup and formatted using valid CSS 2.1 styling. Inverness also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. Read on to find out what the Inverness package includes and how you can make it your own.

CMX JumpStarts: Inverness
by Gordon Mackay - 21-Dec-05
Reader Level:

Welcome to the latest CMX JumpStart— Inverness.

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

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

There is nothing terribly complicated about the majority of blog designs. They all share a few common components as part of their index pages:

A summary of latest posts.
A selection of latest posts with snippets of the post content.
A link that takes the user to the detail page for the post.
A link that takes the user directly to a form that allows them to comment on the post.
A list of links to other blogs that the site's owner thinks his users will find interesting.

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

This CMX JumpStart includes reference to all of these.

The Complete JumpStart Catalog Free!
by Sheri German - 20-Dec-05
Reader Level:

We now have a healthy portfolio of JumpStarts, and sometimes so much choice can be overwhelming. This article outlines the features of all the JumpStarts, offers guidance in choosing the right JumpStart for your project, and provides a complete catalog of our first thirteen JumpStarts.

Redirecting Users When Logging In
by Danilo Celic - 12-Dec-05
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.

PHP and the Filesystem Part 1: Directories
by Rob Williams - 08-Dec-05
Reader Level:

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

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

Show and Hide Content Based on User Access Levels Free!
by Danilo Celic - 23-Nov-05
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.

A CSS Web Design Case Study: Constructing a Personal Site - XHTML/CSS Construction Part 2
by Zoe Gillenwater - 22-Nov-05
Reader Level:

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

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

Using Disk Files As the Data Source for a DropDownList, ListBox, CheckBoxList, or RadioButtonList
by Heidi Bautista - 18-Nov-05
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.

Introducing CMX JumpStart Cairo Free!
by Sheri German - 17-Nov-05
Reader Level:

We are excited to announce CMX JumpStart Cairo, Egypt. It was designed and coded by Adrian Senior, and makes extensive use of lush gradients and glows. It is a centered, two-column, fixed-width design, and, like all CMX Jumpstarts, is constructed using valid XHTML 1.0 markup and CSS 2.1 styling. Cairo also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design. This article will introduce you to what Cairo includes in its bundle, as well as show you an example site created from its source PNG and CSS/XHTML files.

CMX JumpStarts: Cairo
by Adrian Senior - 17-Nov-05
Reader Level:

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

Using Swap Image with a Select List/Menu - Part 2
by Danilo Celic - 14-Nov-05
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.

Structured Forms using CMX AJAX Form Submit
by Rob Williams - 04-Nov-05
Reader Level:

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

Using the Dreamweaver 8 Image Viewer
by Tom Green - 03-Nov-05
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
by Zoe Gillenwater - 27-Oct-05
Reader Level:

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

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

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

Introducing CMX Jumpstart Traverse City Free!
by Sheri German - 27-Oct-05
Reader Level:

Traverse City, Michigan is one of those hidden gems that tourists sometimes stumble across by lucky chance. With over 180 miles of Lake Michigan shoreline as well as a host of lakes and bays, beach lovers can enjoy lots of sailing and sunbathing.

Traverse City was designed by Linda Rathgeber-Stewart and coded by Zoe Gillenwater. It is a centered, fixed-width design with both a two-column and three-column page from which to choose. The two-column layout also includes a styled data table. The pages are constructed using valid XHTML 1.0 markup and formatted using valid CSS 2.1 styling. Traverse City also follows the WAI and Section 508 accessibility guidelines to provide you with a solid foundation for any design.

CMX AJAX Loader: Beyond the Basics
by Rob Williams - 24-Oct-05
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 the MM:If Custom Control on ASP.NET pages
by Heidi Bautista - 20-Oct-05
Reader Level:

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

Using CFCs as Sources of Data for Queries in Dreamweaver 8
by Danilo Celic - 14-Oct-05
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.

Comparing Files in Dreamweaver 8
by Heidi Bautista - 13-Oct-05
Reader Level:

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

Adding Flash Video to Dreamweaver 8 Free!
by Tom Green - 12-Oct-05
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.

CMX AJAX Form Submit Extension
by Rob Williams - 11-Oct-05
Reader Level:

The CMX AJAX Form Submit Behavior for Dreamweaver and Dreamweaver MX 2004 allows you to use AJAX technology to submit form information to a server-side processing script and receive the results back without having to reload the page.

Teaching Dreamweaver Part 2 Free!
by Sheri German - 11-Oct-05
Reader Level:

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

Designing with Gradients and Glows
by Adrian Senior - 05-Oct-05
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.

Better Coder Tools in Dreamweaver 8
by Heidi Bautista - 30-Sep-05
Reader Level:

As an ASP.NET developer, one of my pet peeves with Dreamweaver MX 2004 (and earlier) was lack of a great code editor. Dreamweaver 8 goes a long way towards rectifying that deficiency. In this article, we'll explore some of the enhancements that are going to make your (coding) life easier.

The best part (in my opinion) is the code collapsing/expansion functionality in the Coder toolbar. Read on to learn about more handy improvements.

CMX AJAX Loader Extension
by Rob Williams - 27-Sep-05
Reader Level:

The CMX AJAX Loader behavior allows you to dynamically load new XHTML/XML from your web server and insert it into any element on the current page without requiring the user to perform a full refresh. By eliminating full page refreshes you can improve both the performance of your site and the end user's experience. Now you can start enjoying the benefits of AJAX technology without having to worry about the complicated scripting that makes it work!

Teaching Dreamweaver the Web Standards Way Free!
by Sheri German - 23-Sep-05
Reader Level:

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

Rotating Images with Dreamweaver and JavaScript Free!
by Danilo Celic - 21-Sep-05
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
by Rob Williams - 14-Sep-05
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.

Introducing CMX Jumpstart Machu Picchu Free!
by Sheri German - 12-Sep-05
Reader Level:

Machu Picchu, Peru: a rediscovered ruin, a sacred ceremonial city of the Incas, a place of ethereal beauty, and now also a Community MX JumpStart. CMX JumpStart Machu Picchu, designed and coded by Adrian Senior, was built specifically to take advantage of the new Style Rendering Toolbar in Dreamweaver 8. It includes style sheets for the screen, print and handheld media types.

Read on to learn more about this centered, two-columnm, fixed-width, Web Standards compliant CSS layout.

CMX Jumpstart: Machu Picchu
by Adrian Senior - 12-Sep-05
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.

Investigating Drag-and-Drop For Use in Content Management Systems: Part 1 - Drag-and-Drop Lists
by Danilo Celic - 08-Sep-05
Reader Level:

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

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

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

CMX Text Field Auto Complete Extension
by Rob Williams - 06-Sep-05
Reader Level:

The CMX Auto Complete Behavior for Dreamweaver and Dreamweaver MX 2004 allows you to quickly and easily add fully customizable "auto complete" functionality (think Google Suggest) to any text or textarea input field on a web page. The "auto complete suggestions" box can easily be customized using CSS to integrate seamlessly into your page design and automatically sizes and positions itself for each input/textarea; no knowledge of JavaScript of the complexities of AJAX required!

CMX Insert FlashObject 1.2 (Dreamweaver Extension)
by Paul Newman - 25-Aug-05
Reader Level:

FlashObject is an external JavaScript file, created by Geoff Stearns, that enables you to embed Flash movies into web pages using XHTML-compliant code. The CMX Insert FlashObject extension automatically inserts FlashObject code into Dreamweaver documents, and copies flashobject.js into the folder you specify. Now supports major, minor, and revision Flash Player detection.

Requirements: Dreamweaver MX or higher, Flash Player

This extension has been updated 7/10/06. The updated version is available here.

Creating the Print Style Sheet for Vienna: Part Two
by Sheri German - 17-Aug-05
Reader Level:

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

Using the asp:Calendar Control - Part 3
by Heidi Bautista - 16-Aug-05
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

The CSS Styles Panel in Dreamweaver 8: A Sneak Peek Free!
by Zoe Gillenwater - 12-Aug-05
Reader Level:

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

Dreamweaver 8 Style Rendering Toolbar - A Sneak Peek Free!
by Adrian Senior - 10-Aug-05
Reader Level:

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

Visualize This: Great New Design Tools in Dreamweaver 8
by Kim Cavanaugh - 09-Aug-05
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
by Sheri German - 29-Jul-05
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
by Heidi Bautista - 25-Jul-05
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
by Linda Rathgeber-Stewart - 22-Jul-05
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
by Heidi Bautista - 13-Jul-05
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
by Sheri German - 08-Jul-05
Reader Level:

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

Redesigning the Vienna JumpStart
by Linda Rathgeber-Stewart - 08-Jul-05
Reader Level:

Vienna isn't famous just for composers. It's well known throughout Europe for its coffee houses. This variation on the Vienna Jumpstart attempts to capture the ambiance of Viennese coffee houses. Bonus: an authentic Austrian Strusel recipe. :-)

Redesigning the Vienna JumpStart
by Jim Babbage - 07-Jul-05
Reader Level:

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

Reconstructing Vienna: The Markup
by Sheri German - 07-Jul-05
Reader Level:

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

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

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

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

Introducing JumpStart Vienna Free!
by Kim Cavanaugh - 06-Jul-05
Reader Level:

It wouldn't be much of a stretch to call Vienna the cultural capital of Europe. With its long history as the home to such cultural icons as Franz Schubert and Johann Strauss, as well as the numerous museums and its world-famous opera house, Vienna has long been known as a city where culture and sophistication are the norm. It's no wonder then that for our latest JumpStart design we turned to our own cultural maven—Sheri German—for the creation of a design that is as stylish as the city it is named after.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and validating for 508 and WAI, we have a number of special features in Vienna. The three-column layout has two outer columns with fixed widths, a fluid center column for content, and a very cool fluid header and footer. The two-column layout has a fixed-width left column and fluid right column. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field, and if your server provides PHP and MySQL, you can follow Sheri's bundled article Creating a Search Engine with iSearch to make a working search engine for your site. So far, reasonably cool, right? But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold. As with all our JumpStarts, Vienna was tested extensively in all major browsers. You can view the screenshots here

CMX JumpStart: Vienna
by Sheri German - 06-Jul-05
Reader Level:

Last summer we took a trip to Germany and Austria with our son's orchestra director. My favorite city was Vienna, Austria. So it is only natural that I should choose Vienna for my city as I "change hats" from JumpStarts marketer to JumpStarts creator. I am particularly pleased and excited to offer our latest CMX JumpStart: Vienna.

In addition to the use of valid XHTML 1.0 and CSS 2.1, and in addition to validating for 508 and WAI, we have a number of special features in Vienna. This three column layout has two outer columns with fixed widths, a fluid center column for content, and fluid header and footer. There are also unordered lists for navigation: one for the main navigation, one for the sub navigation, and one for the footer navigation. We have also added a search field into an area that is at the top of the page outside the main centered layout. So far, reasonably cool, right?

But hold on. We have something far more exciting to reveal with this JumpStart. We will introduce a new and revolutionary technique called Jello Mold that has an implied minimum and maximum width that works in Internet Explorer without the use of Javascript! Furthermore, this technique allows for fluid margins on the fluid centered layout that depend on the size of the user's window.

The download folder for this article includes a bundle of 11 articles (including two about Jello Mold technique), a starter page, an images folder, four style sheets (including design-time and print), a source png, the Vienna extension, an installation and usage guide, and this article as a PDF.

Exporting an Embedded Stylesheet to an External Stylesheet Using Dreamweaver MX 2004
by Jim Babbage - 28-Jun-05
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.

Using the ASP.NET Insert Record Server Behavior - Part 2
by Heidi Bautista - 10-Jun-05
Reader Level:

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

Introducing Jumpstart Vegas Free!
by Sheri German - 02-Jun-05
Reader Level:

We proudly introduce CMX JumpStart Vegas, designed by Fireworks expert Linda Rathgeber, and coded by CSS guru Stephanie Sullivan. Vegas includes a Flash slideshow, FlashObjects JavaScript for accessibility, sIFR for using custom fonts on your pages, a form with an often requested complex layout, and a golden design that does justice to the town that never sleeps. It's all there, ready for you to adapt it for your own sites.

CMX JumpStart: Vegas
by Stephanie Sullivan,Linda Rathgeber-Stewart - 02-Jun-05
Reader Level:

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

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

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

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

Using the ASP.NET Insert Record Server Behavior - Part 1
by Heidi Bautista - 31-May-05
Reader Level:

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

CMX Expiration Dates
by Danilo Celic - 24-May-05
Reader Level:

The CMX Expiration Dates extension allows you to set dates for files you work with that expire. If a page is beyond its expiration date, when you next start Dreamweaver this extension will let you know that you have a file to be edited. This functionality can be useful when you need to update a page (or set of pages) on an occasional basis, or even on an ongoing basis. For example, you may manage the company's knowledge management system, and you want to make sure that your content contributors are alerted when their content needs to be checked for "freshness" to ensure that the information contained on the pages they cover does not go stale, then the Expiration Date extension can help you acheive your goals. Or if your home page should be updated on Mondays to reflect the next set of featured products that arrived just this weekend, then you can set the expiration date for the home page for the upcoming Monday; then when you start Dreamweaver up on Monday morning, Dreamweaver will alert you to the fact that you need to update a file (in this case the home page). You can then edit that file, publish it. If desired, you can then set the expiration date for the file for the following Monday, to lather, rinse and repeat the cycle of updates as necessary.

ASP.NET Snippet - ShortenString
by Heidi Bautista - 13-May-05
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
by Zoe Gillenwater - 10-May-05
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.

CMX Insert FlashObject (Dreamweaver Extension)
by Paul Newman - 05-May-05
Reader Level:

FlashObject is an external JavaScript file, created by Geoff Stearns, that enables you to embed Flash movies into web pages using XHTML-compliant code. The CMX Insert FlashObject extension automatically inserts FlashObject code into Dreamweaver documents, and copies flashobject.js into the folder you specify.

Requirements: Dreamweaver MX or higher, Flash Player

An update to this extension was released on 8/25/05. The updated version is located here.

Creating a Simple Blog - Part 5
by Tom Muck - 26-Apr-05
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
by Danilo Celic - 26-Apr-05
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:

Application session Commands: Startup and Shutdown Commands
Document related events: Opening a document, before saving a document, and after saving a document.
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
by Paul Newman,Zoe Gillenwater - 21-Apr-05
Reader Level:

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

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

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

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

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

Introducing CMX Jumpstart New Orleans Free!
by Sheri German - 21-Apr-05
Reader Level:

The suspense has been building around the release of our next JumpStart, and now it's here: Jazzy JumpStart New Orleans, a hybrid CSS/Flash layout that should appeal to anyone needing to build a music site. Its inspiration is derived from two sources: the sites of Sony artists such as Vladimir Horowitz, Joshua Bell, Louis Armstrong, and The Isley Brothers where Flash and frames combine, and content scrolls in a fixed-area; and the recent acquisition of our own "CMX artist" the jazzy, bluesy Umoja String Quartet, whose site will be hosted on Community MX in the upcoming weeks.

Read on to find out more about this feature-rich JumpStart that includes an MP3 Player that uses wmode, FlashObject for accessibility, scrolling content, functional forms, and a fully editable source PNG.

Passing Data Between Dreamweaver Commands
by Danilo Celic - 12-Apr-05
Reader Level:

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

Extensioneering 101: Objects - Part 3
by Danilo Celic - 05-Apr-05
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

Introducing the CMX CSS Snippet Collection - Part One
by Sheri German - 01-Apr-05
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part one of the collection into the Dreamweaver Snippets panel, and a tutorial that explains the problems and solutions that the hacks correct.

Part One of the CMX CSS Collection includes the following:

Caio Hack
Anti-Caio Hack
IE Mac only
IE Mac only 2
Hide from Mac
Holly Hack
Box Model Hack
Tan Hack
Tan Hack and Anti-Mac combined
6 IE Conditionals for all IE, 5.0, 5, 5.5, gte 5.5, and 6

Read on and bust those bugs!

Introducing the CMX CSS Snippet Collection - Part Two
by Sheri German - 01-Apr-05
Reader Level:

CSS Positioning layouts are hot, and many people are trying to make the transition from the mostly reliable, but non-semantic, table-based layouts we've all used for years. CSS 2.1 provides great features for laying out pages, and the specs for CSS 3 indicate that some day the future of design on the web will be ever brighter indeed.

We here at CMX try to make the learning curve as painless as possible with our many CSS tutorials and articles. Now we'd like to offer you a diagnostic tool that spares you some typing and memorizing. We are proud to introduce the CMX CSS Snippets Collection. Snippets, as you may well be aware, are bits of reusable code that paste as blocks or around selections with the click of an insert button.

This article includes an extension for installing part two of the collection into the Dreamweaver Snippets panel, and a list that explains the problem and then the solution that each snippet corrects.

Our Snippets in Part Two include the following:

Win IE fully clickable CSS buttons
Win IE text inheritance in tables
Win IE double float margin
Win IE three pixel gap bug
Win IE three pixel gap bug part 2
Win IE missing image bug
IE word wrap
IE expanding boxes and too wide images
Set text size on the body
Set font-size and family on multiple selectors for NS4
Zero margins on multiple elements
Clearing element for floats
Easy clearfix for floats
Floating an image to the left
Floating an image to the right
Clearing a float after an image
Centered layouts that work

Read on and bust those bugs!

PHP Site Simplification with Application.php
by Tom Muck - 15-Mar-05
Reader Level:

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

CMX Table Sorter Extension for Dreamweaver
by Rob Williams - 14-Mar-05
Reader Level:

The ability for users to re-organize tabular data to better suit their individual requirements has become an almost expected attribute of digital data. Many web sites currently provide this ability by relying on server-side coding and database queries to constantly re-sort the data before it's transferred to the client. This causes both increased server load and inconvenient delays for users as they wait for the data to be reloaded.

The CMX Table Sorter behavior allows you to provide those same sorting abilities for your HTML table without having to waste time and resources on server-side sorting methods.

This extension has been updated 6/27/06. Please download the zipfile and replace the old extension with the newer one.

Using Swap Image with a Select List/Menu - Part 1
by Danilo Celic - 02-Mar-05
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
by Linda Rathgeber-Stewart - 17-Feb-05
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
by Zoe Gillenwater - 14-Feb-05
Reader Level:

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

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

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

To help you master the techniques used to design and construct the files, Venice comes bundled with the following tutorials:

Using Masks in Fireworks MX by Jim Babbage
Do You Want To Do That With CSS? — Centering a Wrapper by John Gallant and Holly Bergevin
Flowing and Positioning: Two Page Models by John Gallant and Holly Bergevin
Float The Theory by John Gallant and Holly Bergevin
CSS An Introduction Part Two: Background Images by Adrian Senior
Recreating Macromedia's Layout by Zoe Gillenwater
Styling CSS Buttons (Part 2) by Stephanie Sullivan
Styling Forms: Fieldset and Legend by Stephanie Sullivan
Using Classes and IDs Effectively by Zoe Gillenwater
Do You Want To Do That With CSS? — Align Elements Left and Right by John Gallant and Holly Bergevin

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

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

JumpStart Venice: An Introduction Free!
by Sheri German - 14-Feb-05
Reader Level:

Valentine's Day is one of my favorite holidays of the year. It's fanciful and lighthearted, and I don't feel the pressure of the big holidays like Christmas or Easter. I can daydream about a romantic rendezvous, such as a gondola journey through the canals of Venice on a moonlit night. Though I can't make that a reality, I can pretend while exploring the latest CMX JumpStart.

CMX is proud to announce its sixth JumpStart, Venice, which includes both two and three column, fixed-width, rounded corner layouts in its home and form pages. Like all CMX JumpStarts, it is based on Web standards with valid CSS2 and XHTML 1.0 Transitional markup, and it passes WAI and 508 accessibility checkpoints. We've created a video to give you an overview of the design and functionality of Venice.

Using DropdownLists, CheckBoxes, and TextBoxes in an Editable ASP.NET DataGrid
by Heidi Bautista - 09-Feb-05
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."

Liverpool JumpStart with .NET
by Heidi Bautista - 31-Jan-05
Reader Level:

Ah yes, Liverpool, not only a great JumpStart, but now you can have it with ASP.NET support. In addition to a valid CSS2 and XHTML 1.0 Transitional, WAI and 508 Accessible CSS layout, you also get a dynamic ASP.NET login application. The original release of the Liverpool JumpStart comes bundled with ColdFusion, PHP, and ASP and uses Dreamweaver's built-in User Authentication Server Behaviors. Unfortunately, Dreamweaver doesn't boast similar server behaviors for ASP.NET. To help make up for that lack, here's a special tutorial just for you ASP.NET coders. I've taken the original Liverpool JumpStart pages and added the necessary ASP.NET code. The result: an out-of-the-box ASP.NET login solution combined with a versatile layout. What could be better? :-)

Included in the support files are the CF, ASP and PHP versions of the Liverpool JumpStart. There is a link at the end of the article that will allow you to download just the .NET version if you prefer, as well as a link to download the bundled tutorials that were included with the original Liverpool JumpStart.

The .NET version of Liverpool is available as a no charge upgrade to purchasers of the original Liverpool JumpStart. If you would like to receive the .NET version, please send us an email and we will send you the .NET files. Please be sure to include your name and the email address that is associated with the PayPal account used to make the purchase.

Run Dreamweaver on Linux
by Thomas Pletcher - 25-Jan-05
Reader Level:

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

CMX JumpStart: Liverpool
by Adrian Senior - 20-Jan-05
Reader Level:

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

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

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

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

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

Announcing CMX JumpStart: Liverpool Free!
by Sheri German - 20-Jan-05
Reader Level:

It was the early sixties, and all the world was in a frenzy over a new group from Liverpool, England called The Beatles. They revolutionized rock 'n' roll music, and the world has never been the same. Maybe the Web Standards movement doesn't stir quite that much excitement, but it is changing the Web world all the same. And because we "love you, yeah, yeah, yeah" we're here to help you join the revolution.

Community MX is pleased to announce the release of its fifth CMX JumpStart: Liverpool. This time we're giving you more than a CSS layout, however. We're also giving you a dynamic ColdFusion login application built with Dreamweaver's User Authentication server behaviors that will allow you to quickly and easily edit the login.

This article will tell you all about what this fantastic package includes--bundled tutorials, an authentication system, a two-column, fixed width layout (with a little bit of a twist), original PNG files, and more.

Access Level and Login For PHP
by Tom Muck - 19-Jan-05
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!
by Adrian Senior - 18-Jan-05
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
by Danilo Celic - 14-Jan-05
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.

CMX Flash Video Player (Dreamweaver Extension)
by Paul Newman - 13-Jan-05
Reader Level:

This Flash Element for Dreamweaver MX 2004 enables you to quickly insert the CMX Flash Video Player into an HTML document. Using Dreamweaver's Tag inspector, you can browse to an FLV file on your computer, and define player settings such as autoPlay, bgColor, flvURL, and volume.

In addition, CMX Flash Video Player is resizable and you can preview it in Design view. Requires Flash Player 7.

Includes: CMXFLVPlayer_dw.mxp, demo files, sample videos, PDF

Creating Dependent Dropdown Lists with Dreamweaver MX04 and ASP.NET - Part 2
by Heidi Bautista - 11-Jan-05
Reader Level:

Make smarter ASP.N

Latest New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CMX Learning Guides

Dreamweaver

Latest New Content

Search CMX

Latest Free Content

View All Free Content

Accessibility

CMX Learning Guides

Dreamweaver

View All
Free Content