Joseph Lowerys Beyond Dreamweaver

When I first started investigating SMIL, I saw an immediate parallel between SMIL regions and Dreamweaver layers . Both are used for layout purposes and both have similar attributes: id , top , left , width , height , z-index , and background color . Dreamweaver layers have the major benefit of being extremely easy to draw out and position. With regions, you either have to figure out the pixel measurements by hand or play a protracted guessing gameor both. Wouldn't it be nice if you could draw your SMIL layout using Dreamweaver layers and then convert them to regions?

With the help of Dreamweaver's extensibility power, now you can. To facilitate the conversion, I created an extension called Convert Divs to Regions, shown as Bonus Listing 3-A (03_ConvertDivs2Regions.mxp), on this book's Web site. Here's how it works:

1. Open a blank HTML page.

2. Use Dreamweaver's Draw Layer tool to drag out a layer.

3. Give the layer the same name you want the region to have.

4. Re- size and position the layer to match the placement and dimensions of the region.

   For precise positioning, use the Left, Top, Width and Height values of the Property inspector.

5. If necessary, adjust the z-index property on the Property inspector.

6. Choose a background color for the layer from the Bg Color color picker.

7. Repeat steps 26 for every region needed until all layers are drawn and positioned properly. Save the file.

8. Open a new or previously saved SMIL document.

9. Choose Commands > Convert Divs to Regions and select the just saved layer layout file (see Figure 3.4).

   Figure 3.4. The Convert Divs to Regions extension turns Dreamweaver into a SMIL layout tool.

When Convert Divs to Regions executes, all of the parameters from each of the <div> tags is added to a newly created <region> tag in the SMIL <layout> area. For example, the following tags

<div id="videoregion" ></div> <div id="textregion" ></div>

are converted to these tags

<region id="videoregion" left="50px" top="50px" width="550px" height="247px" z-index="1" backgroundColor=" #990000" /> <region id="textregion" left="50px" top="300px" width="550px" height="60px" z-index="2" backgroundColor=" #000000" />

It is my hope that this utility will make coding SMIL pages within Dreamweaver easier.