Cours 27

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 cours 28 , nous allons utiliser une tuile, un tag , un ou deux gifs et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag en format png ou gif ou jpg.

- une tuile

- un ou deux petits gifs

- 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 "Cours28".

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 28 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

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

3 - Nommer la page.

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

4 - La couleur de fond , les bordures, la boite de texte, la scrollbar

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

environ sur la ligne 4

<STYLE>BODY {
background-color: #XXXXXX;
margin: 10px;
border: #XXXXXX 3px ridge;
SCROLLBAR-BASE-COLOR: #XXXXXX;
SCROLLBAR-ARROW-COLOR: #XXXXXX
}
.tab1{
border: #XXXXXX 5px ridge;
}
.td{
border: #XXXXXX 1px ridge;
background-Color: #XXXXXX
}
.tekst {
PADDING: 10px;
FONT-FAMILY: Comic Sans MS;
color: #000000;
FONT-SIZE: 14pt;
OVERFLOW: auto;
HEIGHT: 200px;
TEXT-ALIGN: center
}

</STYLE>

Comme cela.

** Explications **

background-color: #XXXXXX; margin: 10px; border: #XXXXXX 3px ridge; SCROLLBAR-BASE-COLOR: #XXXXXX; SCROLLBAR-ARROW-COLOR: #XXXXXX	Cette partie concerne le couleur de fond de page, la bordure autour de la page et la couleur de la scrollbar.
.tab1{ border: #XXXXXX 5px ridge; } .td{ border: #XXXXXX 1px ridge; background-Color: #XXXXXX }	Ici on définit la couleur des deux bordures intérieures de la page
.tekst { PADDING: 10px; FONT-FAMILY: Comic Sans MS; color: #000000; FONT-SIZE: 14pt; OVERFLOW: auto; HEIGHT: 200px; TEXT-ALIGN: center }	Ici on définit la hauteur de la boite de texte et la police

Pensez à mettre les codes de couleur.

Pour votre version, essayer de modifier les valeurs.

5- Insertion de la tuile.

Copier puis coller cette ligne par entre les deux balises BODY notée <body> et </body>, environ sur la ligne 31.

Vous obtenez ceci

Modifier le nom de la tuile si besoin et sa dimmension pour votre version.

6 - Insertion du tag

Copier ce code et collez le à la suite du précedent.

<IMG src="Tag.png" width="640" height="500"></DIV></MARQUEE>
<BR><BR><BR><BR>

Puis coller le sous l'insertion de la tuile ( ligne 33 environ ), entre les balises <body> et </body>

Comme cela

Comme vous pouvez le voir, le tag est inclu dans un tableau ( TABLE ) , de plus il va scroller ou défiler ( balise MARQUEE ).

Modifier le nom du tag et sa dimmension pour votre version.

7- Insertion de la boite de texte.

A la suite de tout ceci, nous allons insérer la boite de texte pour votre message.

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

<MARQUEE class=tekst style=" WIDTH: 640px" scrollAmount=1 scrollDelay=60 direction=up loop=infinitief>

<DIV align=center>Texte ici

<BR>

</DIV></MARQUEE>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE>

Comme ceci:

Pensez à écrire votre texte.

Pour votre version, modifier la largeur de la boite de texte en fonction de la largeur de votre tag.

8 - Insertion du ou des gifs

A la suite de ceci, nous allons positionner notre gif.

Copier et coller ce code à la suite ( environ ligne 54 )

<IMG id=pic1 style="LEFT: -1800px; POSITION: absolute; TOP: -1800px"
src="papillon.png" width="80" height="61">

Si vous le desirez , vous pouvez utiliser 2 gifs différents.

Pic 1 = gif de droite et Pic 2 = gif de gauche

Pour votre version, pensez à bien écrire les bonnes dimmensions

9 - Insertion du script.

Pour finir, nous allons rajouter à la suite le script.

Copier et coller ce code

<SCRIPT language=VBScript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'juli 2003
'please leave these lines in
'---------------------------

Dim scw,sch,th,pich,picw,ccw,cch,A,AE,R,R1,th1,cc2w,cc2h,A2,AE2,R2,R3,th2

picw=40
pich=70
A=6.28
AE=6.28
R=17
R1=0
A2=6.28
AE2=6.28
R2=17
R3=0

Sub Window_Onload()
scw=document.body.clientwidth
sch=document.body.clientheight
tab2.style.backgroundImage="URL("&bg.src&")"
document.body.style.backgroundImage="URL("&bg.src&")"
ccw=(scw-picw)-118
cch=(sch/2)-(pich/2)
R1=(sch/2)-(pich/2)
cc2w=110
cc2h=(sch/2)-(pich/2)
R3=(sch/2)-(pich/2)
ClearTimeOut(th1)
th1=SetTimeOut("circle", 10)
ClearTimeOut(th2)
th2=SetTimeOut("circle2", 10)
End sub

Sub circle()
ClearTimeOut(th1)
A=A-0.02
AE=AE-0.08
ppic1w=R/2*cos(A*8)+ccw
ppic1h=R1*sin(AE/10)+cch
pic1.style.posLeft=ppic1w
pic1.style.posTop=ppic1h
th1=SetTimeOut("circle", 30)
End Sub
Sub circle2()
ClearTimeOut(th2)
A2=A2-0.02
AE2=AE2-0.08
ppic2w=R/2*cos(A2*8)+cc2w
ppic2h=R1*sin(AE2/10)+cc2h
pic2.style.posLeft=ppic2w
pic2.style.posTop=ppic2h
th2=SetTimeOut("circle2", 30)
End Sub

Sub Window_onresize()
window.location.reload()
End Sub

</SCRIPT>

Dès à présent , vous pouvez visualiser votre page.

10 - Insertion de la musique.

Copier et coller ce code après les deux balises TITLE

Modifier music.mid par le nom de votre musique pour votre version.

Vous avez terminé.

Vous pouvez visualiser votre page.

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