Recommandations :

  Quand vous allez ranger votre matériel, pensez à nommer vos tuiles, papiers ou musique en les renommant si besoin de façon à éviter les accents et les espaces. Faites aussi attention si vous mettez des majuscules, elles devront aussi être dans la source de votre page.




On commence

Pour ce 29 ième cours, nous allons utiliser un tag assez grand et une tuile assortie.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag : prenez un tag de taille assez grande

-1 tuile assortie au tag


- une musique en format midi




Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer



1 - Créer un nouveau dossier et nommer le "Cours26".
Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours26 et son contenu.

              

2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 29 en n'oubliant pas de la nommer.

3 - Nommer la page.

Entre les deux balises <title> et </title>, écrire le titre de votre page.

4 - La scrollbar, la boite de texte, la police, les boutons, les bordures et lignes

Copier ce code, puis coller le entre les deux balises HEAD, notée <head> et </head>,

environ sur la ligne 4

<style type="text/css">
body {
background-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
}
.off {
left: -1800px; position: absolute; top: -1800px
}
.tab {
border: #XXXXXX 1px solid;
filter: alpha(opacity=55);
background-color: #XXXXXX;
}
.lijn {
z-index: 5;
background-color: #XXXXXX;
position: absolute;
filter: RevealTrans;
visibility: hidden;
}
.img {
left: 0px; position: relative; top: 0px;
visibility: hidden;
}
.knop{
border: #XXXXXX 1px solid;
z-index: 6;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: Comic Sans MS;
font-size: 14pt;
color: #XXXXXX;
background-color: #XXXXXX;
text-align:center;
}
.tekst {
border: #XXXXXX 1px solid;
padding: 75px;
visibility:hidden;
left: 0px;
position: absolute;
top: 0px;
font-family: Papyrus;
font-weight: bold;
font-size: 15pt;
color: #XXXXXX;
overflow: auto;
background-color: #XXXXXX;
text-align: center;
}
</style>



Comme cela.



** Explications **
background-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;		 Ici on définit, la couleur du fond de page et les couleurs de la scrollbar
.tab {
border: #XXXXXX 1px solid;
filter: alpha(opacity=55);
background-color: #XXXXXX;		 Ici on définit la bordure et la couleur de fond du tableau qui va contenir le tag
.lijn {
z-index: 5;
background-color: #XXXXXX;
position: absolute;
filter: RevealTrans;
visibility: hidden		 Ici on définit la couleur des petites lignes qui vont apparaitre autour du tag
.knop{
border: #XXXXXX 1px solid;
z-index: 6;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: Comic Sans MS;
font-size: 14pt;
color: #XXXXXX;
background-color: #XXXXXX;
text-align:center;		 Ici, on définit la couleur des boutons "Image" et "Texte" et la couleur de leur bordure, ainsi que la police utilisée
.tekst {
border: #XXXXXX 1px solid;
padding: 75px;
visibility:hidden;
left: 0px;
position: absolute;
top: 0px;
font-family: Papyrus;
font-weight: bold;
font-size: 15pt;
color: #XXXXXX;
overflow: auto;
background-color: #XXXXXX;
text-align: center;		 Ici, on définit la boite de texte : bordure, couleur et police

Pensez à mettre les codes de couleurs

5- Insertion de la tuile de fond.

Mettre la première balise body en surbrillance, notée <body>, puis coller ce code à la place.

<body scroll=auto>

<!--Tuile-->
<img class=off id=back src="tuile.png">


Vous obtenez ceci




Pour votre version, changer "tuile.png" par le nom de votre tuile.


6 - Insertion du tag et de la boite de texte.
Nous allons maintenant insérer le tag et la boite de texte, incorporés dans un tableau.

Copier et coller ce code à la suite, environ ligne 68.

<table id=bg width="100%" height="100%" align=center>
<tr><td>
<table class=tab id=tb cellSpacing=50 cellPadding=0 align=center>
<tr><td>
<div style="left: 0px; position: relative; top: 0px; width: 100%; height: 100%">
<table class=lijn id=l1 style=" left: -25px; top: -50px;" cellSpacing=0 cellPadding=0>
<tr><td></td></tr></table>
<table class=lijn id=l2 style="right: -25px; top: -50px;" cellSpacing=0 cellPadding=0>
<tr><td></td></tr></table>
<table class=lijn id=l3 style=" left: -50px; top: -25px;" cellSpacing=0 cellPadding=0>
<tr><td></td></tr></table>
<table class=lijn id=l4 style="left: -50px; bottom: -25px;" cellSpacing=0 cellPadding=0>
<tr><td></td></tr></table>
<table cellSpacing=0 cellPadding=0 align=center>
<tr><td align=center>

<!--Image principale-->
<img class=img id=pic src="Tag.png" width="800" height="650">

<!--Boite de texte et sa dimension-->
<div class="tekst" id="mess" style=" width:800px; height:650px;">

<br><br>
Placer le texte ici
<br></div>

<button id="knop2" class="knop" width="150" height="35"
hidefocus="true"> image </button>
<button id="knop1" class="knop" width="150" height="35"
hidefocus="true"> texte </button>

</div>
</td></tr></table>
</td></tr></table>
</td></tr></table>



Comme cela



Pensez à modifier le tag ( nom et dimmension ) ainsi que les dimmensions de la boite de texte.

Placer votre texte .

Vous pouvez aussi modifier les dimmensions des boutons ainsi que leur nom.


7- Insertion  du script

Copier et coller ceci à la suite de l'insertion du tag , environ vers la ligne 105

<script language=vbscript>
'-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-
'Script written by Annem@rie
'http://www.annemaries.nl/
'januari 2008
'please don't remove these lines!!!!
'-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-

option explicit
SetLocale("en-gb")

Dim scw,sch,tbw,tbh,picw,pich,kw,kh

 

bg.style.filter="progid:DXImageTransform.Microsoft.Iris(duration=8, irisStyle=diamond, motion=in, enabled=l)"
knop1.style.filter="progid:DXImageTransform.Microsoft.Iris(duration=3, enabled=1, irisStyle=diamond, motion=out)"
pic.style.filter="progid:DXImageTransform.Microsoft.Iris(duration=3, enabled=1, irisStyle=diamond, motion=out)"
mess.style.filter="progid:DXImageTransform.Microsoft.Iris(duration=3, enabled=1, irisStyle=diamond, motion=out)alpha(opacity=75)"

picw=pic.offsetwidth
pich=pic.offsetheight
tbw=tb.offsetwidth
tbh=tb.offsetheight
kw=knop1.width
kh=knop1.height

Sub Window_OnLoad()
SetTimeout "kom1", 400
size_and_position
go
End Sub

sub size_and_position ()
scw=document.body.clientWidth
sch=document.body.clientHeight
l1.style.width=1
l1.style.height=tbh
l2.style.width=1
l2.style.height=tbh
l3.style.width=tbw
l3.style.height=1
l4.style.width=tbw
l4.style.height=1
knop1.style.left=picw/2-kw/2
knop1.style.top=pich+10
knop1.style.width=kw
knop1.style.height=kh
knop2.style.left=picw/2-kw/2
knop2.style.top=pich+10
knop2.style.width=kw
knop2.style.height=kh
end sub
sub kom1()
pic.filters(0).Apply()
pic.style.visibility="visible"
pic.filters(0).Play(5)
SetTimeOut "kom2", 5500
end sub
Sub kom2()
bg.filters(0).apply()
bg.style.backgroundImage="URL("&back.src&")"
bg.filters(0).play()
SetTimeOut "kom3", 5500
End Sub
sub kom3()
l1.filters(0).Apply()
l1.filters(0).transition=4
l1.style.visibility="visible"
l1.filters(0).Play(6.000)
l2.filters(0).Apply()
l2.filters(0).transition=5
l2.style.visibility="visible"
l2.filters(0).Play(6.000)
l3.filters(0).Apply()
l3.filters(0).transition=6
l3.style.visibility="visible"
l3.filters(0).Play(6.000)
l4.filters(0).Apply()
l4.filters(0).transition=7
l4.style.visibility="visible"
l4.filters(0).Play(6.000)
knop1.filters(0).Apply()
knop1.style.visibility="visible"
knop1.filters(0).Play(6.000)
end sub
Sub Go
End Sub
sub knop1_onclick()
mess.filters(0).Apply()
mess.style.visibility="visible"
mess.filters(0).Play(4)
knop2.style.visibility="visible"
knop1.style.visibility="hidden"
l1.filters(0).Apply()
l1.filters(0).transition=4
l1.style.visibility="hidden"
l1.filters(0).Play(6.000)
l2.filters(0).Apply()
l2.filters(0).transition=5
l2.style.visibility="hidden"
l2.filters(0).Play(6.000)
l3.filters(0).Apply()
l3.filters(0).transition=6
l3.style.visibility="hidden"
l3.filters(0).Play(6.000)
l4.filters(0).Apply()
l4.filters(0).transition=7
l4.style.visibility="hidden"
l4.filters(0).Play(6.000)
end sub
sub knop2_onclick()
mess.filters(0).Apply()
mess.style.visibility="hidden"
mess.filters(0).Play(4)
knop1.style.visibility="visible"
knop2.style.visibility="hidden"
l1.filters(0).Apply()
l1.filters(0).transition=4
l1.style.visibility="visible"
l1.filters(0).Play(6.000)
l2.filters(0).Apply()
l2.filters(0).transition=5
l2.style.visibility="visible"
l2.filters(0).Play(6.000)
l3.filters(0).Apply()
l3.filters(0).transition=6
l3.style.visibility="visible"
l3.filters(0).Play(6.000)
l4.filters(0).Apply()
l4.filters(0).transition=7
l4.style.visibility="visible"
l4.filters(0).Play(6.000)
end sub

sub window_onresize()
size_and_position
end sub

</script>

 


9- Insertion de la musique.
Après les deux balises du titre notées <title> et </title>, copier et coller ce code.
<!--Music-->
<bgsound balance=0 src="XXX" volume=0 loop=infinite>


Modifier "XXX" par le nom de votre musique.


13 - Votre page est terminée.

Vous pouvez visualiser votre page.

Enregistrez la une dernière fois, puis hébergez la avec le materiel.