|
|
XHTML+SMIL
|
XHTML+SMIL l��t dich SMIL Code in ein g�ltiges XHTML Dokument schreiben. TIMING, Animation, �bergang und andere SMIL Elemente zu deinen Webseiten hinzuf�gen. einfach beachten, da� ab heutiger Tag Internet Explorer>5.5 die einzige Datenbanksuchroutine der Wahl ist.
|
Eine einfache Weise des Erkl�rens des XHTML+SMIL Profils ist, indem sie sagt, welche SMIL Module nicht enth�lt
Plan-Modul: Das SMIL 2.0 Planmodul ist nicht enthalten. Das XHTML/CSS Planmodell liefert Planfunktionalit�t.
Verbindung des Moduls: Das SMIL 2.0 verbindenmodul ist nicht enthalten, da XHTML die Verbindung von Funktionalit�t liefert.
Struktur-Modul: Das SMIL 2.0 Strukturmodul ist nicht enthalten, w�hrend das XHTML Dokument definiert wird, um die Wirt Sprache zu sein, und also liefert die gleichwertigen Elemente und die Semantik.
Metainformation Modul: Das SMIL 2.0 Metainformation Modul ist nicht enthalten, da XHTML Metadatenfunktionalit�t liefert.
Die SMIL Module, die dann gelassen werden, sind:
- Animation-Modul
- Zufriedener Steuermodul
- Mittel-Objektmodul
- TIMING und Synchrounisierung Modul
- Zeit Handhabungen Modul
- �bergang bewirkt Modul
Dieses sollten Module genug sein, zum mit zu spielen, da die �fehlende� Modulfunktionalit�t v�llig in XHTML/CSS gest�tzt werden.
|
Namespace elements are included with a
SMIL namespace declaration:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:smil="http://www.w3.org/2001/SMIL20">
|
HTML+TIME
|
HTML+TIME basiert auf dem (X) HTML+SMIL Profil. Es ist Implementierung Microsofts im Internet Explorer und verwendet das Verhalten des Elements time2. Ein anderes namespace wird benutzt, aber es hat viel des funcionality, das f�r XHTML+SMIL beschrieben wird. Das Verbinden der Elemente mit dem Verhalten time2, das ein CSS Kategorie Attribut verwendet, gibt uns diese minimale Akte:
|
<html xmlns:t="urn:schemas-microsoft-com:time">
<head>
<?import namespace="t" implementation="#default#time2">
<style>.t {behavior: url(#default#time2)}</style>
</head>
<body>
</body>
</html>
|
Unter ist die Quelle f�r die Darstellung Herrn Zebra, die im Einleitung Abschnittabschnitt eingef�hrt wurde. Der grosse Unterschied ist Bildschirmaufbau, da das SMIL Planmodul nicht enthalten ist. Stattdessen verwendete ich CSS Inline-Art, um Bildschirmaufbau zu beschreiben. Ich beschlo� auch, die Textelemente mit <p> einzuschlie�en, anstatt, sie einzuschlie�en als Textakten.
|
<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<STYLE>
< .time {behavior: url(#default#time2);}>
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">
</HEAD>
<BODY width="640" height="560" bgcolor="#FFFFFF">
<t:par>
<t:audio src="audio/Mr._Zebra.mp3" alt="Mr. Zebra perfomed by
Tori Amos" dur="19.6s"/>
<img class="time" src="images/zebra.jpg" alt="a zebra" width="640"
height="480" dur="18s" style="position: absolute; left: 0px; top: 0px;
width: 640px; height: 480px;"/>
<p class="time" dur="8s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF" >
Hello Mr. Zebra</p>
<p class="time" begin="10s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF">
Ratatouille Strychnine</p>
<p class="time" begin="13s" style="position: absolute; left: 0px;
top: 480px; width: 640px; height: 80px; background-color:#FFFFFF" >
sometimes she's a friend of mine</p>
<img class="time" src="images/sweater.jpg" alt="a sweater" begin="4s"
style="z-index:1; position: absolute; left:500px; top:360px; width:140;
height:120"/>
<img class="time" src="images/snow2_oil.jpg" alt="snow" begin="5.5s"
style="z-index:1; position: absolute; left:500px; top:240px; width:140;
height:120"/>
<img class="time" src="images/snow1_oil.jpg" alt="snow" begin="6s"
style="z-index:1; position: absolute; left:500px; top:120px; width:140;
height:120"/>
<img class="time" src="images/snow1_charcoal.jpg" alt="snow"
begin="6.5s" style="z-index:1; position: absolute; left:500px;
top:0px; width:140; height:120"/>
<img class="time" src="images/zebra_swirl80.jpg" alt="a swirled zebra"
begin="18s" style="position: absolute; left: 0px; top: 0px;
width: 640px; height: 480px;"/>
</t:par>
</BODY>
</HTML>
|
|
|
Keywords: xhtml examples,
xhtml tutorial,
smil player,
smil tutorial,
xhtml example,
smil example,
smil multimedia,
xhtml editor,
mms smil,
w3c xhtml,
xml xhtml,
text xhtml,
xhtml xslt,
smil text,
xsl xhtml,
xhtml svg,
xhtml dtd,
xhtml reference,
xhtml tags,
xhtml cdata,
xhtml namespace,
xhtml template,
xhtml stylesheet,
xhtml attributes,
xhtml javascript,
embed xhtml,
layout xhtml,
xhtml code,
xhtml tag
xhtml element,
xhtml document,
xhtml attribute,
css xhtml,
using xhtml
|