Constructing a SMIL Layout within 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.

    graphics/03fig04.gif

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.



Joseph Lowery's Beyond Dreamweaver
Joseph Lowerys Beyond Dreamweaver
ISBN: B000H2MWYS
EAN: N/A
Year: 2001
Pages: 87
Authors: Joseph Lowery

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net