For newsletters to be successful logistically, they have to be easy to subscribe to and—just as importantly—unsubscribe from. With a straightforward entry and exit strategy, many online viewers, leery of incurring additional e-mail spam, will steer clear.
In this article, you’ll learn how to create a complete subscribe/unsubscribe application in PHP/MySQL with a standard Dreamweaver CS3 server and just one additional block of code. To use this application, a user signs up for a subscription on a site and receives a confirmation e-mail. The e-mail contains a link to unsubscribe, personalized for the user. In all, you’ll need to create five pages to achieve this functionality:

• Subscribe.php: This page is comprised of a basic form that gathers an e-mail address and inserts a new record into the MySQL database. After the record is inserted the page is redirected to confirm_subscribe.php.
• Confirm_subscribe.php: While the visitor sees a bit of text confirming his or her subscription on this page, a PHP function contained within e-mails the user a secondary confirmation, which contains a link to unsubscribe via the confirm_unsubscribe.php page.
• Error_subscribe.php: This is an error page that displays if the e-mail attempt was not successful; it also contains a link to the subscribe.php page so another attempt can be made.
• Confirm_unsubscribe.php: This page is displayed when the visitor requests to unsubscribe. It displays the user’s e-mail address and a form button to confirm the user’s wish to unsubscribe; when clicked the user’s record is deleted from the database and the visitor is redirected to the unsubscribe_complete.php page.
• Unsubscribe_complete.php: The final page in the application acknowledges that the user has unsubscribed.

Preliminary set-up

Before you dive into the page development, let me say a few words about the preliminary set-up.
This PHP application requires a simple MySQL database and a Dreamweaver connection, in addition to a dynamic PHP site set-up on your testing server.
To define a dynamic site follow these steps:

1. Open your Dreamweaver Site Definition dialog box (Sites > Manage Sites > Edit) and select the Testing Server category.
2. Choose PHP MySQL from the Server Model menu and set up your access. If you’re working with your own computer as a development system choose Local/Network from the Access list and select the path to the folder on your testing server.
3. Finally, set the URL to the proper address.

Here is a folder containing lesson files that you can download and follow along with.

The Subscription database consists of a single table, called subs, which in turn has three data columns: ID, SubEmail, and SubSubscriptions (see Figure 1 below).

The ID column is the primary key and uses an integer format that is automatically incremented. The SubEmail column has a text format and is intended to hold the subscribers e-mail addresses. The final column, SubSubscriptions is a Boolean field, intended to note whether a user is currently subscribed or not; a 1 indicates subscribed whereas a 0 means unsubscribed. Although this field is not used in this article in this way—unsubscribed records are deleted—it is included as a possible next step.

One enhancement of the described technique is to keep the user’s e-mail address on file, in case your site offers other e-mail opportunities than just the newsletter, and toggle the SubSubscriptions field as needed.

Figure 1

The SQL file for the Subscriptions database is included in the sample files that accompany this article . You can recreate it on your test server through any number of utilities, including phpMyAdmin, MySQL Control Center or MySQL Administrator.

When you’ve established your database, it’s time to create a connection to it in Dreamweaver. To do so, follow these steps:

1. Choose Window > Databases.
2. Click Add (+) and choose MySQL Connection from the menu.
3. In the MySQL Connection dialog box (see Figure 2 below), enter the name of your new connection in the Connection name field (for example, connSubscribe).
4. Enter an IP address or MySQL server name in the MySQL server field. If you’re working with a local development system, enter localhost.
5. Insert your user name and password in the appropriate fields.
6. Click Select to display the available databases; choose the desired one from the list.
7. Click Test to verify the connection; when the connection is successful, click OK.

Figure 2

With your PHP dynamic site, MySQL database, and Dreamweaver connection established, you’re ready to build the first page of the application.

Signing up for a subscription

The subscription page should be simple and clear. You want to keep any barriers to signing up as low as possible. The following example page has a single form field to gather the e-mail address and a submit button, clearly labeled Subscribe Me! (see Figure 3 below).

Figure 3

The text field is named txtEmail by selecting the page element and entering the name in the provided field on the far left of the Property inspector. The form action property is left blank, so the Dreamweaver Insert Record behavior can add its own code. One other form field is inserted into the form: a hidden field labeled SubSubscription with a value of 1. This hidden field will be used by the Insert Record server behavior to populate the identically named field in the database and indicate a subscription has been authorized. Remember that for this Boolean database column, 1 means subscribed.

Note: It’s always a good idea to validate your form fields. You can use the Dreamweaver Validate Form behavior or insert the Spry Validation Text Field if you prefer.

To apply the Insert Record server behavior, follow these steps:

1. From the Server Behaviors panel, choose Add (+) and, from the list, select Insert Record.
2. When the Insert Record dialog box opens, make sure that the current form is selected in the Submit values from list. In my example, I kept the default name, form1.
3. Choose your connection from the Connection list. Here, my connection is connSubscribe.
4. Select the table you want to insert your new record into from the Insert table list. My table is called subs.
5. In the Columns area, you only need to specify a form element for one of the database columns (see Figure 4 below):
   • Leave the first entry—’ID’ Is an Unused Primary Key—at its default settings.
   • Select the SubEmail entry and from the Value list, choose FORM.txtEmail and make sure Submit as is set to Text.
   • Keep the third entry (SubSubscribed) at its default settings. Because you named the hidden form element the same as the database column, Dreamweaver automatically made the assignment for you.
6. In the After inserting, go to field, enter confirm_subscribe.php.
7. Click OK and save your page.

Figure 4

Confirming the subscription

The subscription confirmation page is well-named as it carries out its self-named function in two ways. The text on the page lets your site visitors know that they have successfully signed up. It’s a great idea to personalize this acknowledgement by repeating their registered e-mail address. A simple Dreamweaver recordset and text binding is needed to accomplish this goal.

You can also use this space to let folks know that a second confirmation has been sent via e-mail with a link for unsubscribing. The text is simple to do in Dreamweaver; the e-mail function takes a bit of handcoding. The e-mail will take advantage of the previously inserted recordset.

Let’s start by adding the recordset to the page by following these steps:

Step 1: Open or create your confirm_subscribe.php page. The basic text on the page should be simple and straightforward as shown in Figure 5 below.

Figure 5

Step 2: From the Bindings panel, click Add (+) and choose Recordset from the list.

Step 3: When the Recordset dialog box opens (see Figure 6 below), make the following adjustments:

• Ensure that you’re in Simple mode and enter an appropriate name for the recordset in the Name field (for example, rsSubscriber).
• Choose your data source connection from the Connection list; mine is called connSubscribe.
• Select the table from the Table list, like subs.
• Leave all the columns selected and the filter at its default setting.
• From the Sort lists, choose ID Descending. Do not click OK just yet.

Figure 6

At this stage (see Figure 6 above), the recordset will return all the records and list the last one entered first; to verify this click Test. However, you don’t want all the records, you only want one. You can restrict the recordset to the number of records returned with a simple SQL phrase. For this type of customization, you’ll need to enter the Recordset Advanced mode.

Step 4: Click Advanced. You can see how your selections in the Simple mode are translated into SQL in the Advanced mode’s SQL section.

Step 5: Place your cursor at the end of the SQL code, after ORDER BY ID DESC and enter LIMIT 1 (see Figure 7 below).

Figure 7

Now, the recordset returns just the single record, which because the data is sorted by the automatically incremented ID field in descending order, is the one just inserted.

Step 6: Click OK to close the Recordset dialog box. Now that you have some dynamic data coming into the page, you can personalize it.

Step 7: In Design view, place your cursor in an appropriate spot to display the subscriber’s e-mail address, like right after the phrase “…e-mail address”. Add any necessary punctuation, such as a comma or parentheses. From the Bindings panel, expand the recordset entry, select SubEmail and click Insert (see Figure 8 below).

Figure 8

The dynamic text is added to the page.

Step 8: Save your page.

Now that you have a recordset available, you’re ready to insert the e-mail code. One of the great benefits of PHP is that it has an easy-to-use e-mail method built in. The mail() function looks like this:

mail(address, subject, message[, header[,parameters]])

The first three arguments (e-mail address, subject, and message) are mandatory. The header strings, which typically contains a from address and can also set the MIME type or list CC: and BCC: addresses, is optional. The parameter argument is also optional and is most frequently used for sending additional arguments to configure the output e-mail.

To make the actual function call readable, I like to set up a series of variables with the values assigned, like this:

$id = $row_rsSubscriber['ID'];
$to = $row_rsSubscriber['SubEmail'];
$subject = “Subscription confirmation”;

The first two variables, $id and $to, pull data from the just created recordset that will be incorporated into the e-mail. The third variable, $subject, simply sets the subject line of the message.
Some variables require a lengthy string. I like to use the PHP concatenation operator—the period—to build up the content for such variables, like this:

When the variable is fully declared, be sure to conclude with a semi-colon. Although you can send your message in plain text, I thought I’d show you how to send HTML e-mail in this technique. For HTML e-mail, you’ll need to add the needed HTML tags to achieve the proper formatting. It’s important to note the backslashes in the third code line above; they are used to escape the quotation marks within the “a” tag.
HTML e-mail also requires setting the e-mail header properly. In addition to defining the From address, you’ll also need to establish the MIME and content type, like this:

$headers = “From: Subscription Manager \r\n” .
“MIME-Version: 1.0\r\n” .
“Content-type: text/html; charset=UTF-8″;

The final portion of the code executes the mail() function, but does it in such a way that it redirects the browser to an error page if a problem is encountered. Here’s the code:

if (!mail($to, $subject, $body, $headers)) {
header( ‘Location: http://www.relativerealty.com/error_subscribe.php’ ) ;

The exclamation mark before the mail() function can be read as NOT, so if the function cannot be executed, the redirecting header() function comes into play.

Let’s put it all together now in the following steps.
Step 1: In the Server Behaviors panel, select the Recordset entry.
Step 2: Switch to Code view and press the left arrow to move your cursor outside the recordset code block. Press Enter (Windows) or Return (Mac) to create a new line.
Step 3: Enter the following code:

$id = $row_rsSubscriber['ID'];
$to = $row_rsSubscriber['SubEmail'];
$subject = "Subscription confirmation";
$body = "” .
“

Thank you for subscribing to our newsletter!

” .
“

To unsubscribe, click here.

” .
““;
$headers = “From: Subscription Manager \r\n” .
“MIME-Version: 1.0\r\n” .
“Content-type: text/html; charset=UTF-8″;
if (!mail($to, $subject, $body, $headers)) {
header( ‘Location: http://[YOUR SERVER & PATH HERE]/error_subscribe.php’ ) ;
}
?>

Make sure to substitute the placeholder phrases [YOUR SERVER & PATH HERE] with your own server information and the from address (someone@mycompany.com) with your own from address.

Step 4: Save your page.

To make sure this portion of the page is complete, let’s quickly create our error page.

Allowing for errors

The error page informs site visitors that there has been a problem with the process. It is triggered by the failure of the e-mail function. After informing folks of the problem, you can provide them a link to the subscription page to allow them to re-enter their e-mail addresses and try again (see Figure 9 below).

Figure 9

You can test your application at this point if you like. After publishing the pages to your Web server, go to subscribe.php and enter your e-mail address. The confirmation page will then display, assuming that everything went smoothly, and you will shortly receive your e-mail. If the error page is displayed, you know the e-mail function didn’t work properly and can start debugging.

Next, let’s build the page that handles unsubscribing.

Verifying an unsubscribe request

The confirm_unsubscribe page is very similar to the confirm_subscribe page. Both use recordsets to define a single record and both use a Dreamweaver server behavior to perform a record management function. When folks are subscribing, the server behavior inserts a new record; when they’re unsubscribing, a server behavior is used to delete their records.

Figure 10

The structure of the confirm_unsubscribe page will also remind you of its mirror image. Both contain a form with a submit button (see Figure 10 above). They also contain a hidden form element, but there the difference ends. The hidden form element is named ID and has a value that retrieves the ID passed from the URL string:

If you don’t want to type this code into the Value field of the Hidden Form element Property inspector, you can click Add (+) on the Bindings panel and choose URL Variable from the list. When the URL Variable dialog box appears, enter ID in the Name field and click OK. Then you can just insert ID from the Bindings panel into the Value field and Dreamweaver will write the code for you.

Also, you’ll notice that although there is space for the e-mail address, there is no form. Because you’re just displaying the data and not asking folks to update or insert it, you can use dynamic text.

Let’s continue work on the page by inserting the recordset with the following steps:

Step 1: Open confirm_unsubscribe.php.
Step 2: From the Bindings panel, click Add (+) and choose Recordset.
Step 3: In the Recordset dialog box (see Figure 11 below), make the following adjustments:

• Switch to Simple mode and enter a name for the recordset in the Name field; I named mine rsUnsub.
• Choose your data source connection from the Connection list; mine is called connSubscribe.
• Select the table from the Table list (for example, subs).
• Leave all the columns selected at its default setting.
• For the Filter settings, choose = for ID and ID for URL Parameter.
• This filter checks for a URL parameter named ID and restricts the recordset to whatever its matching value is. For example, if the URL that opened this page was something like http://myco.com/confirm_unsubscribe?ID=8, the recordset would just contain the record with an ID of 8.
• Leave Sort at its default setting and click OK.

Figure 11

Now, let’s take advantage of our recordset and bring in some dynamic text.
Step 4:Place your cursor in the table cell next to the E-mail address label and, from the Bindings panel, expand the Recordset entry. Select SubEmail and click Insert. The placeholder for dynamic text appears.

Step 5: Save your page.

Now add the server behavior, Delete Record.

Step 1: From the Server Behaviors panel, click Add (+) and choose Delete Record from the list.
Step 2: In the Delete Record dialog box (see Figure 12 below), make the following adjustments:

• Leave the First check if variable is defined list set to Primary key value.
  The check to make sure that the primary key value is defined is a way to ensure that the Submit button was clicked. You would choose another entry, like URL Parameter or Session Variable, only if you wanted to delete the record when the page loaded, without user interaction.
• Set the Connections and Table lists to connSubscribe and subs, respectively.
• Make sure the Primary key column list is set to ID.
• From the Primary key value list, choose Form Variable and enter the ID in the adjacent field.
  This is the hidden form field that, you’ll remember, you set to the URL parameter, ID.
• In the After deleting, go to field enter unsubscribe_complete.php.

Step 3: Click OK and save your page.

Figure 12

Just one last page to go—and it’s a simple one—so let’s get to it.

Completing the unsubscribe request

The unsubscribe_complete page is displayed when the record is deleted. The goal here is to let the visitor know that his or her request to unsubscribe has been honored and that the process is now complete. A simple text page, like the one shown in Figure 13 below, is sufficient.

Figure 13

With the application complete, you should post it to your testing server and begin testing. I’m sure you’ll think of other variations and enhancements you can add to this basic application. I hope it’s given you some idea of what’s possible with Dreamweaver CS3 and PHP as well as providing a solution to extending your Web reach.

About the author

Joseph Lowery’s books about the web and web-building tools are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages. He is the author of the recently published CSS Hacks and Filters as well as the Dreamweaver Bible and Fireworks Bible series from Wiley Publishing. He also wrote Design and Deploy Web Sites with Dreamweaver MX 2004 and Contribute 3 from Macromedia Press. In addition to co-authoring Dreamweaver MX 2004 Web Application Recipes with Eric Ott, he wrote the Dreamweaver MX Killer Tips series with Angela Buraglia.

As a programmer, Joseph contributed two extensions to the latest release of Fireworks and many extensions available for Dreamweaver. He has presented at Seybold in both Boston and San Francisco, Macromedia conferences in the United States and Europe, ThunderLizard’s Web World, and KW Media Group’s Mac Design Conference. Joseph is currently the Director of Marketing for WebAssist.

Dreamweaver includes a number of mechanisms for helping you to implement the accessibility standard in your webpages. In this step-by-step, you’ll see how to set up your system to take advantage of the accessibility mechanisms built into Dreamweaver. Understanding where potential violations are is just as important-and in the final section of this tutorial, you’ll learn how to run Dreamweaver’s interactive accessibility reports.

STEP 1: Setting Up Preferences

Dreamweaver can help keep you on the accessibility straight and narrow as you build your pages from the ground up. In Dreamweaver, select Dreamweaver>Preferences (or press the keyboard shortcut, Command-U [PC: Control-U]). When the Preferences dialog opens, switch to the Accessibility category. Select the checkbox for each of the page elements: Form Objects, Frames, Media, and Images. Click OK when you’re done. Although you can opt to enable accessibility options for just form objects or just images, for complete compliance it’s recommended that all options be selected.

STEP 2: Inserting Standard Images

The Section 508 accessibility requirement for images falls under the category of non-text elements. To enable the visually impaired to access your site, two methods are available: alt or longdesc attributes. Both are attributes of the image tag. From the Insert bar’s common category, click Image and pick STEP 2 Inserting Standard Images an image from the Select Image Source dialog. Click Choose; the Image Tag Accessibility Attributes dialog opens. Enter a short description in the Alternate Text field. If desired, enter an absolute URL to an HTML file with a longer description of the image in the Long Description field. Click OK.

STEP 3: Setting Empty Alt Values

Not all images on a webpage are intended to be identified by a screen reader-but all images do need an alt attribute regardless. Bullet and spacer images, for example, are typically intentionally ignored by the screen reader. Select the image and in the Alt field, choose Empty from the drop-down menu. With the image selected, switch to Code view and notice the image tag code now includes an attribute like this: alt=”". When a screen reader encounters an img tag with such an attribute, it skips over it.

STEP 4: Handling Flash and Other Media

Like images, Flash and other non-text media require an alternative description of the object under Section 508. The object tag, however, doesn’t offer an alt attribute, so the title attribute is used instead. To include a title in your Flash code, click the Media: Flash button in the Insert bar’s Common category. After you’ve selected your SWF file, the Object Tag Accessibility Attributes dialog is presented. Enter a short description of your Flash movie in the Title field.

STEP 5: Working with Form Field Labels

Online forms present special challenges to those who are using assistive devices. Dreamweaver provides three supplementary aids for each input tag form element inserted: a label, an access key, and a tab index. To automatically generate a label, insert a Text Field (or Text Area, Radio Button, Checkbox, or List/ Menu) from the Forms category of the Insert bar. When the Input Tag Accessibility Attributes dialog opens, enter the desired text in the Label fi eld. If your form uses a table with one column for labels, click the Attach Label Tag Using ‘For’ Attribute option.

STEP 6: Applying an Access Key and Tab Index

n addition to correctly identifying the form elements, you also want to provide helpful tools for navigating the form. Both the access key and tab index functions can help in this regard. In the open dialog, enter any letter in the Access Key field. The current field receives focus when the page visitor presses Option (PC: Alt) plus the specified key. In the Tab Index field, enter a number indicating the position of the current field should the user tab through the form; the tab sequence goes from lowest tab index to highest. Click OK when you’re done.

STEP 7: Finishing the Form

The text field is inserted at the current cursor position with the label next to it. Assuming your form design calls for a right-aligned column for labels, choose the <lable> tag in the Tag Selector and drag it into the leftmost column. After you’ve inserted all of the form elements and moved their associated labels, select all of the elements in the label column and apply the appropriate CSS style. When you insert the submit button, choose the No Label Tag option in the Input Tag Accessibility Attributes dialog, enter an Access Key letter and a Tab Index number, and click OK.

STEP 8: Adding Table Header Rows

Accessibility options for tables are always available, regardless of your Preferences settings. Section 508 guidelines calls for row and column headers to be identified for data tables. The standard way to accomplish this goal is to use table header tags, <th>, for cells with header information rather than the standard <td> cells. From the Common or Layout categories of the Insert bar, choose Table. In the Header section of the Table dialog, select Left, Top, or Both; click OK. If you examine the code of the inserted table, you’ll see <th> tags for every cell in your designated header.

STEP 9: Initiating Reports

At various stages of development, after completing a page and before pushing a site live, you’ll want to make sure your webpages are in compliance with Section 508-and correct any problems, if necessary. Dreamweaver includes a reports feature to help you get an overall picture of the site, including accessibility requirements. To gain access to a report, choose Window>Results or press F7. When the Results panel opens, click the Site Reports tab.

STEP 10: Setting Report Scope

Out of the box, Dreamweaver includes nine different reports. To select which reports to run, click the green arrow in the left of the Results panel. When the Reports panel opens, set the scope of the operation by choosing Entire Current Local Site from the Report On list; you can also examine a single page, fi les selected in the Files panel, or a chosen folder. Reports can be run singly or in combination with other reports. Check the Accessibility option to focus on compliance.

STEP 11: Defining Report Settings

Several of the report types, including Accessibility, allow the user to specify report parameters. With the Accessibility report option highlighted, click Report Settings. The Report Settings dialog allows you to enable or disable accessibility requirements in a number of ways. In our example, only Section 508 accessibility is required and, by default, additional standards are also enabled. To restrict the requirements, fi rst select W3C/WAI_accessibility and then click Disable. Then, highlight 508_accessibility and click Enable. To see which accessibility rules were successfully implemented, click Show “Passed” Tests. Click OK when you’re ready.

STEP 12: Running the Report

Now that the parameters are set, in the Reports dialog, click Run. The dialog closes and the site files are processed; you can follow the operation in the Results panel. When the report has been fully run, you’ll see a list of entries with a variety of symbols. The immediately identifiable problems are marked with a red X, while the more gray-area issues that require some consideration are noted with a question mark. You can sort the errors by file name, line number, or description.

STEP 13: Understanding Errors

A brief description accompanies each entry, like Non Spacer IMG with Valid ALT, followed by a reference to the accessibility code violated. Both Section 508 and WAI references are included, but only Section 508 errors are flagged. If you’re not sure what a particular entry’s problem is-or how to fix it-click the More Info icon on the left side of the Results panel. The Reference panel opens and displays a more in-depth discussion of the accessibility error, testing scenarios, and possible corrective actions to take.

STEP 14: Repairing Accessibility Issues

To fi x fl agged errors, doubleclick any entry to go to the code with the error. If necessary, Dreamweaver opens the referenced page and enters into Split view, with the code highlighted. One of the most common errors is the lack of a valid alt tag for a spacer or shim image. If your Results panel lists such an issue (shown as Spacer IMG with Valid ALT), you can begin to fix it by double-clicking the error entry. With the problem img tag selected, in the Property inspector, select from the Alt list. Save your page before rerunning the report.

This is the first of a series of tutorials diving into templates. The goal in this article is to demonstrate proper template-building technique from the ground up. With the rise of the Macromedia Web Publishing System and Contribute, Dreamweaver templates are increasingly important. Old-style templates with one giant editable region are insufficient when creating designs intended for the Contribute audience. In this tutorial, you’ll also see how to pinpoint your editable regions to maintain the designated styles while still allowing for complete user input.

STEP 1: Create Basic Page

Create or open a page from your site to base your template on. Target your template designs by fashioning templates to serve particular functions. In this example, we’ll be working with an Intranet newsletter specifically designed for a human resources department. Choose a page with a layout that’s representative of the type of template you want to make. Be sure the page you select includes most of the elements commonly found on these types of pages. For example, our newsletter includes a photo and a pull-quote, as well as the more common elements such as a logo and edition date.

STEP 2: Save as Template

To begin the process of converting a standard page into a template, choose File>Save As Template. In the Save As Template dialog, which lists all the templates in the current site, enter a meaningful name in the Save As field. This makes it possible for other content contributors working with your template designs to quickly identify the desired template. Dreamweaver then asks if you’d like to update links. Click Yes. Updating links within a template is crucial; it’s far better to let Dreamweaver manage your links than to try to figure it out yourself.

STEP 3: Mark Initial Editable Regions

Select the body section of the page where content is enclosed in <p> tags-don’t include any heading in your selection. From the Insert bar’s Common category, click Templates: Editable Region. In the New Editable Region dialog, enter a word or phrase in the Name field that accurately describes the content expected for the area and click OK. Replace the specific text for the current page with instructions that indicate the appropriate type of text, suggested length, and any special instructions. When you wrap an editable region around content with one or more <p> tags, that region can be expanded as needed.

STEP 4: Apply Precise Editable Regions

Switch to Split view so you can see both the page display and code. Select just heading content-make sure you don’t select the enclosing tags. From the Insert bar, click Templates: Editable Region, enter an appropriate title in the Name field of the dialog, and click OK to confirm your selection. By putting an editable region around just the text, you’re accomplishing two goals: first, the text entered will be styled as the initial design, and second, you’re ensuring that only one line of text will be used. An editable region within heading or paragraph tags can’t be expanded with more tags.

STEP 5: Style Template Placeholders

Wherever necessary, apply CSS classes to style content. Be sure to include instructions in the placeholder text that tell when the style is to be applied and how. For example, to demonstrate how to create a pull-quote, we both show and tell: a portion of the placeholder text is extracted and styled as a pull-quote and the placeholder content details the required steps. CSS classes should only be used where absolutely necessary; it’s better to apply an ID to a container and let the content be styled contextually.

STEP 6: Adding Images and Links to Templates

If images are used in the layout, replace them with placeholder images. Delete the image and then, from the Insert bar’s Common category, click Images: Image Placeholder. Set a generic name and the optimum dimensions in the Image Placeholder dialog.

Any links to other pages within the site should be applied by using either the Point to File feature in the Property inspector or the Select File dialog; hand-coding links often leads to an unfound page. The same procedure holds true for any images found in the template: all images or other dependent fi les should be saved outside the Templates folder.

STEP 7: Store the Template

Once you’ve added all the editable regions required and made sure the rest of the document in the locked areas is suitable, you’re ready to save your file. Choose File>Save. Because you’ve already established the file as a template, there’s no need to select Save as Template. Dreamweaver displays an alert informing you that you’ve placed an editable region inside a

or other block tag and that, consequently, new paragraphs can’t be made in this region. Click OK to acknowledge the information. (Unfortunately, this alert appears every time you save the template.)

STEP 8: Create Child Page

To begin the process of making a page based on the just-saved template, choose Window>Assets. In the Assets panel, select the Template category from the icons on the left side-Templates is the second icon from the bottom. Control-click (or Right-click if you have a two-button mouse) on the previously stored template’s name in the list area and choose New From Template in the shortcut menu. When the new child page appears, choose File>Save to store it. You can save the file anywhere in the site except in the Templates or Library folders.

STEP 9: Working with Child Pages

Make sure Invisible Elements is turned on so you can clearly see the editable regions’ names and outlines. If necessary, choose View>Visual Aids>Invisible Elements. Replace any generic placeholder text with the content for the specific page. When adding images within editable regions, scale them to the proper size (if needed) by resizing them visually to the proper dimensions and then choosing Optimize in Fireworks from the Property inspector. When the Optimize dialog opens, click the File tab to verify the new width and height and then choose Update. Save and close the file when you’re done.

STEP 10: Applying Template to Existing Page

Sometimes a page is already created and you just want to attach the page to a current template. This allows any updates to the template to be applied to all relevant pages. To handle this situation, open the unattached page and remove all elements except the page-specific content. From the Templates category of the Assets panel, drag-and-drop the desired template onto the page. The Inconsistent Region Names dialog opens to allow you to place existing content correctly. Select the Document body entry and choose the primary editable region from the pop-up menu; for Document head, choose Nowhere.

STEP 11: Cleaning Up Child Pages from Existing Files

Chances are you’re going to need to move content from the single editable region it was stored in to various other regions. Working in Split view, cut-and-paste content as needed. If there were any meta tags used in the previous unattached document, copy them and paste them in the editable region named head. Why didn’t we do that before? The Inconsistent Region Names dialog moves all the head content and not just meta tags. Save the file under the original name to replace the unattached version. Keep the file open for a later step.

STEP 12: Opening a Template for Alterations

The ease of creating new pages is only half the benefit derived from templates. The other advantage is that locked areas of any template-derived page can be modifi ed by editing a single file: the template. There are several ways you can open a template for editing. If you know the template’s name, you can open it from either the Files or the Assets panel by double-clicking on its name. Another approach is to open the file from the associated child page by choosing Modify>Templates>Open Attached Template.

STEP 13: Make Change and Save

Once the template has been opened, you can make any changes you’d like in either the locked or editable areas. Changes made to the locked regions are applied to all existing and future child pages; alterations made in editable regions are only applied to newly created child pages. After you’ve made all the desired updates, select File>Save and click OK to dismiss the editable region in block tag alert. When the Update Template Files dialog appears, listing all the child pages, click Update. After the operation is complete, click Close in the Update Pages dialog.

STEP 14: Verify

In this exercise, one child page was intentionally left open and the other closed so you could see the effects of a template update. If you switch to the open child page, you’ll notice that any changes to the template have been applied- here, a change to the newsletter tag line-but the file needs to be saved. Save the file to complete the update and then open the previously closed child page. Again, all template changes to the locked areas are now transferred to the child page. If any of your pages have been previously published, you’ll need to re-put them at this point.

Joseph Lowery is author of the Dreamweaver MX Bible and the Fireworks MX Bible series as well as co-author of the Dreamweaver Killer Tips series. His books are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages.