| Exemple 2 : image
et texte s'enchaînent
le code du fichier smil est le suivant
<smil>
<head>
<meta name="title" content="Image et texte s'enchaînent..."
/>
<layout> <root-layout width="330"
height="300" />
<region id="i" top="20" left="90" width="150" height="60" z-index="1"/>
<region id="t1" top="100" left="5" width="330" height="400" z-index="2"/>
<region id="t2" z-index="3"/>
</layout>
</head>
<body>
<seq>
<par>
<a href="http://real-and-smil.com" show="new">
<img src="http://monsite.com/monimage.jpg" region="i" fill="freeze"
/></a>
<text src="texte.rt" region="t1" begin="3" fill="freeze"/>
</par>
<text src="texte2.rt" region="t2" begin="1" fill="freeze"/>
</seq>
</body>
</smil>
Le premier éléments intéressant de ce fichier
est de montrer qu'il est possible d'enchâsser les balises
seq et par. C'est-à-dire que la présentation se découpe
en deux grandes parties. Comme vous avez pu le voir une image est
jouée avec un texte dessous puis une partie du code est présenté.
On a donc entre les balises seq image+texte1 puis texte2. Mais image+texte
1 doivent être joué simultanément on les place
entre des balises par. Ce principe n'a pas de limite, on pourrait
imaginer que la partie parallèle se découpe elle même
en sous partie séquentielle...
Le second élément intéressant est de remarquer
que l'image est linkée et à très peu de chose
près de manière identique qu'en html.
<a href="http://real-and-smil.com" show="new"> <img src="http://monsite.com/monimage.jpg"
region="i" fill="freeze" /></a>
le show="new" à la même fonction que le
class="blank" en html c'est-à-dire qu'il indique
que la page doit être ouverte dans une nouvelle fenêtre.
Les layouts son donc des zones définies dans l'espace. Elle
peuvent être exprimée en pixel ou en pourcentage. le
root-layout définit la taille de l'ensemble de la présentation.
Les attributs possible pour une région sont :
top= distance au bord supérieur
down= distance au bord inférieur
left= distance au bord gauche
right= distance au bord droit
with= la largeur
height= la hauteur
on les définis dans la partie head
<region id="t1" top="100" left="5" width="330" height="400"
z-index="2"/>
par un identifiant unique ici t1. Ensuite dans la partie body il
suffit de rappeler la region : region="t1"
suite du tutorial =>>
-
-
Le tutorial basé sur quatre exemples (applications)
commentés
-
-
-
-
-
-
-
-
|
Vos avis et remarques sur cette rubrique
|
[1]  |
|
