head Element (Cont'd)

layout

Layout information is included in the head element stored between <layout> and </layout> tags.
Window settings are included in the layout element and are set within <root-layout> tags. The user can set the height, width, and background color of the window that the presentation will take place in using "height," "width," and "background-color" attributes.
The location and size of media components are also specified in the layout element. There are two ways to specify the location of objects: absolute positioning and relative positioning.
- Absolute positioning specifies the location of objects relative to the upper left hand corner of the presentation window, (0,0). The location in which a component should be placed is then specified using a number of pixels from the left and top borders -- (125,50).
- Relative positioning specifies the location of objects relative to the presentation window's dimensions. The location in which a component should be placed would then be specified using percents from the left and top borders -- 20% and 40%.
Once the method of positioning is chosen, the location and size of a component is specified within <region> tags using "left," "top," "width," "height," and "id" attributes. The "id" attribute simply assigns a unique id to the region.

If two regions overlay, a "z-index" attribute needs to be added to the region tags in order to specify which one is on top. The one with the greater z-index will be shown on top the other. If the regions have the same z-index, the first one listed will be below the other.

If a media object does not fit perfectly into its region, one can make it fit by using the "fit" attribute. In order to shrink the object to the size of the region, assign the value "meet" to "fit." In order to enlarge the object to fill the region, assign the value "fill" to "fit." In order to have the object slice a region, fill the region entirely even if it does not fit on the presentation window, assign the value "slice" to "fit." In order to allow a scroll bar for the region, assign "scroll" to "fit." The value "hidden" can also be assigned to "fit." If the media object is too small for the region, the rest of the region will be filled in with background color. If the media object is too big for the region, the remaining parts of the object will be clipped.

example

 <smil>
   <head> 
     <layout>
       <root-layout width = "400", height = "200", background-color = "white" /> 
       <region id = "reg1", left = "10", top = "20", width = "30", height = "50", z-index = "1" /> 
       <region id = "reg2", left = "5", top = "10", width = "40", height = "40", z-index = "2", fit = "fill" /> 
     </layout>
   </head>
   <body>
   .
   .
   .
   </body>
 </smil>