Dreamweaver

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

This tutorial will take you through the following tasks:

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Embedding Flash Content, Demystified - Part 1: Introduction Free!
Reader Level: 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!
Reader Level: Reader Level

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The Spry Validation Confirm Control
Reader Level: Reader Level

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

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

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

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

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

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

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

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

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

Losing that Rollover Lag
Reader Level: Reader Level

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

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

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

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

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

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

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

User Authentication in Dreamweaver
Reader Level: Reader Level

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

Approximate download size: 4.7MB


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

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

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

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

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

Building a Reservation System From Discovery to Deployment - Part 2
Reader Level: 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

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

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

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

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

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

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

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

Approximate download size: 9.8MB

Basics: Top Ten Rules for Site and File Structure
Reader Level: 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.

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

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

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

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

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

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

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

Approximate download size: 1.8MB

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



Taking Madrid to Print Free!
Reader Level: Reader Level

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

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

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

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

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

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

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

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

Approximate download size: 17.8MB

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

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

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

Approximate download size: 1.5MB

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

Optimize Images in Dreamweaver
Reader Level: 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.



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

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

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

The PHP Insert Bar Explained
Reader Level: 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.

Dreamweaver CS3 - CSS Management
Reader Level: 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.

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

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

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

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

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

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

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

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

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



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

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

Final layout

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

Using Snippets Effectively in Dreamweaver 8
Reader Level: 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.

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

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

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

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

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

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

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



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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Importing Tabular Data Into Dreamweaver
Reader Level: 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.

Making Full Use of Bindings
Reader Level: Reader Level

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

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

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

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

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

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

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

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

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

CMX Table Sorter Extension for Dreamweaver
Reader Level: 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 Source Code Management Software: Part 4
Reader Level: Reader Level

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

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

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

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

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



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

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

Accessible Forms With Dreamweaver
Reader Level: Reader Level

Customer interaction through forms is vital. Are your forms accessible? Topics include making changes in Dreamweaver's preferences to help you build an accessible form, grouping form elements with fieldset and optgroup elements, choosing the appropriate input elements for disabled users, and keeping your label tags associated with your form elements.

Creating A Photo Blog in PHP: Part 1
Reader Level: Reader Level

Doesn't it seem that everyone and their grandma has a blog these days? Blog, blog, blog. That's all people talk about lately.

Today, you and I will use Dreamweaver, and a host of other tools, to start building a different kind of blog. A photo blog! Curious? Intrigued? Scared? Think you can't do it? I'll bet you Jim's camera that you can! And I'm going to show you how.

Let's get our photo phreak on!

Create a Web Photo Album With Dreamweaver and Fireworks
Reader Level: Reader Level

Use Dreamweaver and Fireworks to create a web photo album. Great for sites showcasing a lot of products. Dreamweaver creates a thumbnail page and links each thumbnail to a larger image on a separate page. This behavior is very easy to use, and a great time saver since Dreamweaver and Fireworks do all the work.

Dynamic Duo: JSP and MySQL
Reader Level: Reader Level

These days, no one would argue that a dynamic site is far more powerful, flexible, and scalable than a static site. But if you have a lot of static pages in your existing site, you might not know how to convert them in order to take advantage of the benefits of a dynamic site. This tutorial will show you how to do just that, by taking some existing static HTML pages, and converting them to Java Server Pages (JSP) using Dreamweaver MX 2004 and a MySQL database.

Get Connected
Reader Level: Reader Level

These days few web sites are left that aren't dynamic, and some might even be classified as true web applications. When you have a database backend, your site is much easier to update and maintain, because so much of its functionality can be automated. If you're in the process of creating a dynamic web site using Java Server Pages (JSPs), then using Dreamweaver to set up the connections will make the whole process that much simpler and quicker. This tutorial will guide you through the process of creating a database connection for a JSP site using Dreamweaver MX 2004 (DWMX 2004). Future articles and tutorials will cover related topics such as working with dynamic data in JSPs using Dreamweaver MX 2004 and setting up servers for JSP sites.

Extensioneering 101: Getting Started
Reader Level: Reader Level

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

The Basics of Flash Buttons and Navigation Bars Free!
Reader Level: Reader Level

You've designed a great Flash button, or a series of Flash buttons for a navigation bar, but now what? In this tutorial you'll learn the basics of working with Flash navigation objects, including the all-important step of making them actually work in your HTML pages.

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

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

Creating Button Sets In Fireworks
Reader Level: Reader Level

In this tutorial, we will look at how we can speed up repetitive tasks in Fireworks using copy and paste while building a navigation menu. We will also look at organising our png files into folders and look at the best methods for exporting our images for use within Dreamweaver.

Creating a Guestbook - Part I
Reader Level: Reader Level

Guestbooks are a way for people to leave comments on your website for other folks to see. In this series, we'll build a guestbook from the ground up. Part I will cover the very basics and at the end we will have a functional guestbook. Part II will cover a couple of advanced concepts to add more functionality to the guestbook, like disallowing "bad" words and supplying "Next" and "Previous" navigation links.

Exploring the Snippets Panel in Dreamweaver
Reader Level: Reader Level

Ever looked through the Snippets panel? If you haven't, you should. There are quite a few bits of code there that could not only save you development time, but make your repetitive tasks much simpler. For instance, you can place a button on your page that will close a popup window just by clicking one little line in the snippets panel. There's also a snippet that will create a very basic starter menu for you with just the click of a button. Those are just a couple of the many little gems you'll find in the Snippets panel. Let's take a closer look at the Snippets panel.

Gifs - Get Rid of That Jagged Edge
Reader Level: Reader Level

In this tutorial, we'll learn how to keep those jagged outlines from appearing on your transparent gif files. While transparent gifs can be difficult to get just right sometimes, the payoff is great; The extremely small file size and the clean integration with your web page can make quite a difference in how your page loads and how it looks. Let's learn how to use transparent gifs in a way that will give you good-looking gifs every time.

Hidden Gems: Insert Date in Dreamweaver
Reader Level: Reader Level

Dreamweaver has a little known gem that can insert and edit the date and time within your pages -- automatically. They'll be updated on your pages each time you edit and save from within Dreamweaver. If you use CSS to style the date/time, you can change the look of all dates in your documents for the entire site with one simple change to your CSS document. What could be easier?

From Designer to Developer--Part 1
Reader Level: Reader Level

If you're a visual person, you may have found the whole idea of learning about dynamic web development just too confusing and difficult to deal with. I know I'm in that category, but recently I decided to take the plunge in a big way and configure my Macintosh to do the kinds of basic web programming that I need for some upcoming projects. In this, the first in an ongoing series, you'll learn about the process of configuring the Apache web server and installing PHP on a Mac.

Setting Up A Testing Server For The PHP Server Model: Part II
Reader Level: Reader Level

In my previous article, we learned how to set up a testing server for the PHP server model. This allows you the opportunity to test your PHP pages locally for bugs and errors in your programming. We also learned how to set up Dreamweaver MX 2004 to use the MySQL testing server you've previously installed. In this second part, we will set up a Graphical User Interface (GUI) so that you can add new databases and tables to your newly installed local MySQL server to further extend your resources.

Dynamic Web Development - The Basics: Creating a Join and Log In Application.
Reader Level: Reader Level

In this tutorial we will use the native Dreamweaver behaviours to create a join and log in application for our users. We will design the database tables, and the insert and log in pages. As this tutorial only uses the native Dreamweaver behaviours the server-side language you use is irrelevant. We will let Dreamweaver insert all the code that is required and of course that code will be defined by your site definition. This tutorial contains video demos.

Dynamic Web Development - The Basics: The Application.cfm Template
Reader Level: Reader Level

In this tutorial, we will explore how to use the ColdFusion Application.cfm template to make our lives so much easier. We will also explore the tag and how to use and manage variables for our application from a single location.

Dynamic Web Development - The Basics: Filtering Recordsets
Reader Level: Reader Level

In this tutorial, we will learn how we can filter specific data from our database. We will look at doing this using both form and url variables. This tutorial contains video demos. In Part two of this mini-series we will look at catching errors that may be generated from missing recordset content.

Using the Log In Server Behavior
Reader Level: Reader Level

In this tutorial we will be learning about the standard Log In Server Behavior that ships with Dreamweaver. We will be looking at this Server Behavior in its basic form, in a language independent way. This tutorial is aimed at beginners who are new to Server side development and looking to to be able to show unique content on a user group by user group basis. Tutorial contains video demos.

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

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

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

The Insert Record Server Behavior in Dreamweaver MX 2004
Reader Level: Reader Level

In this first part of a two-part article, we are going to be looking at Data Insertion using a simple form that we will create in Macromedia Dreamweaver MX 2004. Inserting data from a form into a database is something we all have done at least once. For instance, signing up to get email alerts from CNN is a great example of inserting data into a database. Or filling out a form on a website to start a magazine subscription. However, the uses don't stop there. In fact, they are limitless.

Check New Username Server Behavior
Reader Level: Reader Level

A lot of people in the Dreamweaver forums ask "How can I make sure when someone registers on my website that their username is not the same as someone else's?" Server behaviors can save you time, sweat, energy and frustration. The Check New Username server behavior is one of those behaviors that has been a part of Dreamweaver since UltraDev, but folks glance by it somehow. In a few simple steps, you'll learn how to use this server behavior, and also how to modify it a bit to offer greater flexibility.

Dissecting the Login User Server Behavior
Reader Level: Reader Level

Dreamweaver MX makes it very easy to create a page where your users can log in to your website. In this tutorial, you'll find out how one simple server behavior can not only provide this functionality, but can also restrict access to certain pages based on the user's predefined access level.

Absolute vs. Relative Paths Free!
Reader Level: Reader Level

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

Dreamweaver Templates - an Introduction
Reader Level: Reader Level

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

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

Email a Forgotten Password in ColdFusion Free!
Reader Level: Reader Level

You've done it... I've done it. We've all signed up at a website and had to create a username and a password for ourselves, only to forget them months or perhaps even minutes later. Most sites allow you to have your password emailed to you automatically. That's what this tutorial will go over: emailing a user their password using some very simple ColdFusion code. All of the action will take place on the log-in page, so your user never has to leave the log-in page.

Customizing an Email Link Free!
Reader Level: Reader Level

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

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

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

Weaving a Web Dream, with Dreamweaver Free!
Reader Level: Reader Level

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

Using the CSS Styles Panel Free!
Reader Level: Reader Level

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

Experimenting with the Set Text of Layer Behavior
Reader Level: Reader Level

So you want to create a online photo album, but don't want to use pop-up windows to display the full size images. Problem is, putting all those full size images on the same page makes the file size huge and slows the download to a crawl. Well have no fear, with the help of a seldom mentioned Dreamweaver behavior it can be accomplished!

Creating the database connection for your ASP.NET application
Reader Level: Reader Level

One of the very first hurdles to cross when developing a new dynamic ASP.NET application is creating the connection to your database. In this tutorial you'll learn how to make both a SQL Server connectin and an OLE DB connection in Dreamweaver. You'll see how Dreamweaver takes you through a series of dialogs prompting you for information, provides a mechanism for you to test the connection, and writes the required code to your web.config file.

CMX CF Random Image
Reader Level: Reader Level

CMX CF Random Image is a Server Behavior that will display a random image on your page every time the user revisits or refreshes the page you apply the behavior to. It's a very simple behavior that only asks for the name of the folder that contains the images you want to randomly display on the page.

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

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

Preventing duplicate database entries in ColdFusion
Reader Level: Reader Level

If you need a Username to be unique when a user registers on your website, this article shows two simple ways to insure that they cannot select a name that is already being used. These techniques can be used to prevent the creation of duplicate database entries in any database.

ColdFusion Row Colors Free!
Reader Level: Reader Level

The CF Row Colors server behavior will allow you to easily add alternating row colors to your repeat region.

ColdFusion - CFML Basics - Part 3
Reader Level: Reader Level

Part 3 in a series of articles that will take you through the basic tags used in the CFML language. Providing you with an explanation of the tag along with examples. This installment will compare the <cfquery> tag to ColdFusion's 'shorthand' methods of inserting and updating records; the <cfinsert> and <cfupdate> tags.

The CFML Basics Series:
ColdFusion - CFML Basics - Part 1
ColdFusion - CFML Basics - Part 2
ColdFusion - CFML Basics - Part 3

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

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

Defining a Site in DreamweaverMX - The Advanced Tab
Reader Level: Reader Level

In the first part of this tutorial we covered setting up a static site in DWMX using the Basics Tab in the Site Definition window. In this second part, we will be setting up, step by step, a fictitious ColdFusion site using the Advanced Tab.

Fireworks: Rollovers Made Easy Free!
Reader Level: Reader Level

Have you been creating duplicate images in Fireworks just to create rollover effects? Using the Frames Panel within Fireworks can speed up this task!

Defining a Site in DreamweaverMX - The Basic Tab
Reader Level: Reader Level

Before you can start to develop your site in DreamweaverMX you need to define your site. The first part of this tutorial will walk you through setting up a static site, step by step, using the Basic Tab in the Site Definition window. In the second part we will go through setting up a dynamic site, using the Advanced Tab in the Site Definition window.

Disjointed Rollovers Free!
Reader Level: Reader Level

It happens to all of us at some point; You've gotten bored with plain old rollovers on your nifty menu... You want to add a little something, like maybe rolling over one of your buttons and having it trigger another image swap elsewhere on your page. In this tutorial, we'll go over how to do that, and even how make a picture appear where there wasn't one before. All using the Swap Image behavior.

The Newbie Series: Using DWMX's Open Browser Window Behavior
Reader Level: Reader Level

Using DWMX's built-in Open Browser Window behavior to create pop-up windows is a snap! In this tutorial we will go through the steps necessary to create a popup window using a thumbnail as the trigger.

Updating Multiple Records without CFGrid
Reader Level: Reader Level

Have you wanted to be able to update multiple records in a table in one fell swoop, but either didn't want, or know how, to use CFGrid? Well this tutorial will take you step by step through the process. I think you'll be surprised at how easy it is using ColdFusion.

Clean Cross-Browser Table Borders
Reader Level: Reader Level

Creating nice, clean table borders that display consistently in all browsers should be easy... Actually, it is!

Zeroing page margins Free!
Reader Level: Reader Level

In this tutorial we will investigate how we can use dual style sheets to set our page margins to zero in the most common browsers we will come up against in today's online world. We will also take our CSS code and optimise it for performance and make it bandwidth friendly.......

The Newbie Series: The Dreamweaver MX Workspace
Reader Level: Reader Level

Intimidated by the Dreamweaver interface? It can be a bit overwhelming, but in this article we begin to break it down into "chewable" bits. Helping you to digest everything that Dreamweaver has to offer without getting into the "nuts and bolts" so to speak.


Creating An External Style Sheet In Dreamweaver MX Free!
Reader Level: Reader Level

How to create an external style sheet in dreamweaver and link it into your document.

Creating Fluid Pages (Part One)
Reader Level: Reader Level

Learn simple methods, using tables, to keep your design looking good at any monitor resolution.

The Newbie Series: Using DWMX's Swap Image behavior Free!
Reader Level: Reader Level

Making 2-state rollover navigation buttons using DWMX's Swap Image behavior is a piece of cake! In this tutorial we will walk you through placing your navigational buttons on your page and applying the Swap Image behavior to them to create a rollover.