HOME - SMIL: Version 2.1 vom 30.06.2005 © Wolfgang von Keitz


Vorwort
Grundlagen

Layout

Zeit
Bild, Text und Ton
SMIL und HTML
Referenz
Beispiele
Anhang
Quellen

2. Layout

2.3. Das <root-layout>-Element

Während das <layout>-Element lediglich den Beginn und das Ende des Layout-Abschnitts im SMIL-Dokument festlegt, werden mit dem <root-layout>-Element grundlegende Parameter des Layouts definiert. Zum Beispiel legt man mit <root-layout width="..." height="..." background-color="..." /> unter anderem Größe und Hintergrund des Fensters fest, in dem die Multimediaobjekte präsentiert werden sollen.

Im folgenden Beispiel wird ein Fenster mit einer Breite von 300 Pixeln und einer Höhe von 200 Pixeln definiert:

<smil>
 <head>
  <layout>
   <root-layout width="300" height="200" background-color="white" />
  </layout>
 </head>
 <body>
.....
 </body>
</smil>

Als Hintergrundfarbe der Präsentationsfläche wird die Farbe "weiß" festgelegt. Versucht man dieses Beispiel im Realplayer abzuspielen, wird man eine Fehleranzeige erhalten, da bislang kein Multimediaobjekt spezifiziert wurde. Es ist zwar möglich, Multimediaobjekte ohne Layoutdefinition abzuspielen; umgekehrt ist es jedoch nicht möglich, ein Layout ohne Multimediaobjekt sichtbar werden zu lassen.

Nachdem wir uns in unserer ersten SMIL-Anwendung mit dem <body>-Teil beschäftigt haben, erweitern wir dieses Beispiel um den <head>-Teil. Während der <body>-Teil die Elemente enthält, die die zeitliche Präsentation der Multimediaobjekte steuern, werden im <head>-Teil die Elemente abgelegt, die nichts mit dem zeitlichen Ablauf der Präsentation zu tun haben. Dies sind vor allem Layout-Elemente.

In unserer erweiterten Anwendung soll das Bild "bild.jpg" präsentiert werden:

<smil>
<head> <layout>
<root-layout width="320" height="224" background-color="white" />
</layout> </head> <body> <img src="bild.jpg" /> </body> </smil>

In der ersten Zeile wird mit <smil> die Anwendung eingeleitet. Danach folgt der erste Teil einer SMIL-Anwendung, der <head>-Teil. Im <head>–Teil befinden sich die Layout-Angaben. Layout-Angaben werden mit <layout> eingeleitet. In der folgenden Zeile werden dann die Layout-Vereinbarungen für das Playerfenster getroffen Dies erfolgt über das root-layout-Element. Die Layout-Vereinbarungen werden mit dem </layout>-Element abgeschlossen. Der <head>-Teil wird wiederum mit dem </head>–Element abgeschlossen. Beim Test dieses Beispiels wird man feststellen, dass der Hintergund schwarz bleibt. Dies hängt damit zusammen, dass wir noch kein <region>-Element spezifiziert haben. Die Hintergundfarbangaben des <root-layout>-Elements beziehen sich also immer auf ein <region>-Element. Wie <region>-Elemente spezifiziert werden, wird auf der folgenden Seite dargestellt.

zurueck top weiter