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:
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" style="position:absolute; left:50px; top:50px; width:550px; height:247px; z-index:1; background-color: #990000; layer-background-color: #990000; border: 1px none #000000;"></div> <div id="textregion" style="position:absolute; left:50px; top:300px; width:550px; height:60px; z-index:2; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"></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. |