Dreamweaver

In "Let It Snow, Man" (MXDJ Vol. 2, issue 12), I used Fireworks to create all the essential ingredients for our frozen friend. We then exported the pieces using Export as CSS Layers. This gave us a starting HTML page (generated by Fireworks) and all of our graphics in absolutely positioned DW layers (DIVs).

In this article we will work in Dreamweaver and use the Drag Layer behavior to create a Web page where you can move all the snowman pieces together and build your own snowman online. The Drag Layer behavior uses Dynamic HTML (DHTML) to make your page interactive.

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

Layers Can Be Such a Drag . . . or Not
We have a certain amount of prep work to do here before we create our draggable layers. To begin with, due to old coding there are some issues with the Drag Layer behavior in itself, as pointed out by CMX's Danilo Celic in one of his CMXtraneous Blogs, Dreamweaver Drag Layer behavior broken in Mozilla with valid doctype. In a nutshell, the Drag Layer behavior doesn't work in standards-compliant Mozilla browsers. With a big thank you to Danilo, here's what you need to do in order to fix the problem.

You need to locate the Drag Layer JavaScript file ({dw install folder}/Configuration/Behaviors/Actions/Drag Layer.js). On my Windows XP Pro system, this is found in: C:/Program Files/Macromedia/Dreamweaver MX 2004/Configuration/Behaviors/Actions/Drag Layer.js. If you're not on Windows XP Pro, Danilo has also kindly blogged the Dreamweaver Configuration files locations.

1.  In Drag layer.js go to line 161 and change it from:

else if (NS6){style.left = newLeft; style.top = newTop;}

to:

else if (NS6){style.left = newLeft+'px'; style.top = newTop+'px';}

2.  Then go down to line 174 and change it from:

else if (NS6) {style.left = MM_targL; style.top = MM_targT;}

to:

else if (NS6) {style.left = MM_targL+'px'; style.top = MM_targT+'px';}

The first change allows the specified layer to be dragged, and the second change allows the layer to snap to a location when dropped if that option is selected within the Drag Layer behavior dialog. Notice that in both cases all we added was the unit of measure (px) to the values being assigned.

3.  Close and restart Dreamweaver and it should happily add in the correct code to run in valid pages for Mozilla.

With that little task out of the way, let's do a little under-the-hood work on the HTML page created by Fireworks.

Please note that even with these changes, the Drag Layer behavior does not function in the Safari browser.

Turning a Fireworks HTML Page into an XHTML-Compliant Page
While Fireworks can generate HTML, it doesn't do the best job in the world. First, the page doesn't have a doctype. Also, Fireworks will generate img name attributes for all our graphics based on the name of each layer. The img name="" attribute causes Internet Explorer a bit of grief, and as a result the page won't work as we want it to. Rather than start from scratch, we can touch up the Fireworks-created Web page and make it suitable for our needs.

Note: Due to a bug in Internet Explorer 6 the name attribute causes the layers not to be draggable, even though they are in some other browsers. By replacing the name attribute with the alt attribute, you eliminate this problem and make your page more accessible.

Before we go any further we will do a Find and Replace for this attribute, and change it from name to alt. XHTML compliancy requires that all images have an alt attribute, even if it is left blank.

If you wish, you can edit the alt attributes later, giving each graphic a better description. However, for the purposes of this page ­ which is really a visual experience ­ I think the basic alt text will suffice.

1.  In Dreamweaver, go to Edit>Find and Replace. Use these settings.

• FIND IN combo box: Current document
• SEARCH combo box: Source code
• FIND text box: img name=
• REPLACE text box: img alt=

Figure 1 shows the indicated settings.

2.  Choose Replace All and DW will cycle through your HTML code, making the changes for you. This is a whole lot easier than searching on your own!

3.  With basic alt tags set, let's now convert this page to an XHTML-compliant page. Dreamweaver makes this step quite easy too.

4.  Switch to Code View for a moment to see what happens when you do the next couple of steps. Look at the beginning of the code. It should resemble what you see in Listing 1, line spaces and all.

5.  Notice that there is no doctype. Go to File > Convert > XHTML. Look at the code again. Line 1 of the code now begins with a transitional doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xHTML">

6.  Our last step is to remove the line spacing in the <head> area. Go to COMMANDS > APPLY SOURCE FORMATTING. The blank lines in your code disappear.

7.  Save your page.

Tweaking the Page
You may recall that in my previous article I had you export a JPG slice for our gradient background. If you look at the current page in Dreamweaver, you will notice that the slice is not currently being used. Our snowman sits in a winter wonderland of whiteness. Let's use that background slice. We can do this in a couple of ways:

• We can create a new DW layer (AP div), set the Z-index so the new layer is at the bottom, and then apply the background slice as a repeating image.
• We can set the background image for the page to use this slice.

The main difference between these two choices is that the first option would contain the background within the div/layer. The second option would fill the entire page, and continue to repeat both vertically and horizontally unless we use CSS to limit the repetition.

I also envision this background to be the frame for our winter picture, so in my case I will use the background slice within a newly created layer.

1. Select the Layout tab from the Insert Bar (see Figure 2).
2. Choose the Draw Layer icon.
3. Move your cursor onto the page, then click and drag to drag an empty layer. Don't worry about size or position.
4. When you have drawn the layer, click on its border to select it. The Properties Inspector will display attributes for the layer.
5. Set the T and L values to 0.
6. Set the W value to 760px.
7. Set the H value to 420px.
8. Set the Layer ID to bkg.
9. Browse for the bkg.jpg image slice we created in Part 1. Figure 3 shows the setting I have in my Properties Inspector.
10. Go to the Layers Panel in DW. If it is not visible, go to Window > Layers (F2). Note that our new layer is at the top of the Z-index, obscuring all of our other snowman pieces.
11. Click on the bkg layer and drag it all the way down to the bottom of the Layer Panel. Now when the layer is deselected our snowman will appear on top of the background.

Snowman Goes to Pieces ­ Full Story at 11
With our background layer in place, it's time to take Frosty apart. One of the reasons I wanted to use the FW-generated HTML page is that it gives us the final position of each snowman piece and has all the layers in place with the right Z-index. We could have done all this from scratch ­ creating all the necessary layers (as we did with the background layer) ­ but why make all that extra work for ourselves when we don't have to?

What we will do next is set the Drag Layer behavior for each layer, and then move the pieces underneath or to the right of the background.

1. To start, select the body tag from the Tag Selector. You must apply this behavior to the body tag, rather than to the individual layers (see Figure 4).
2. Go to the Behaviors panel (see Figure 5) and click on the Add Behavior icon.
3. Choose the (yes, you guessed it) Drag Layer behavior.

   If the Drag Layer behavior is greyed out, you will need to choose the Show Events for menu item, and choose IE 6.0. This will make the drag behavior accessible.

4. When the dialog box opens, select the hat layer from the Layer dropdown menu.
5. Click the Get Current Position button to have DW apply the hat's x and y coordinates.
6. Optional: Set a value of 20 pixels for the Snap within the option if you want the snowman pieces to snap into place when they get near your original location (see Figure 6).
7. Click on the Advanced tab.
8. For the While Dragging option, make sure the Bring Layer to Front box is checked and then choose Restore Z-index from the combo box.
9. Click OK (see Figure 7).

   I recommend that you not set the Restore Z-index option for the eyes. They are rather hard to reselect once they've been placed because the hat and nose layers overlap them somewhat.

   You can add your own custom JavaScript message boxes to encourage your users as they move each piece into place.

10. Select the hat layer and drag it off to the right of or underneath your background layer.
11. Select the body tag again and repeat the above procedure. You will need to do this for each layer that you want to make draggable.

You don't have to reposition the layer right after adding each iteration of the behavior. Go ahead and add all the Drag Layer behaviors, then jumble up the pieces of your snowman afterwards.