Cours 13

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 treizième cours, nous allons utiliser deux gifs , une tuile et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un gif ( pour mon exemple, c'est le Père Noel ): le mien a une dimmension de 230 *178 pixels .

Pour cela, j' ai seulement utilisé un tube, enregistré en gif dans Animation Shop

-une tuile

- une barre en format gif ou png

- une musique en format midi ( moins lourd )

Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer

1 - Créer un nouveau dossier et nommer le "Cours13".

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 13 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 13 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 - Les bordures, la boite de texte, la scrollbar et la position des gifs.

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

<STYLE>
BODY {
BORDER-left:#B7241D 10px outset;
BORDER-right:#B7241D 10px inset;
BORDER-top:#B7241D 10px outset;
BORDER-bottom:#B7241D 10px inset;
}
.div1 {
BORDER:#FFFFFF 8px double;
PADDING:7px;
FONT-FAMILY:Mistral;
FONT-SIZE:14pt;
COLOR:#253E3B;
BACKGROUND-COLOR:#ffffff;
SCROLLBAR-BASE-COLOR:##253E3B;
SCROLLBAR-ARROW-COLOR:#253E3B;
left:0px;
top:0px;
height:320px;
width:220px;
position:absolute;
overflow:auto;
z-index:9;
filter: Alpha(Opacity=50);
}
.img {
top:-1800px;
position:absolute;
left:-1800px;
filter:revealtrans;
visibility:hidden;
}
.img2 {
top:-1800px;
position:absolute;
left:-1800px;
filter:revealtrans fliph (enabled=1);
visibility:hidden;
}
.stok {
top:-1800px;
position:absolute;
left:-1800px;
visibility:hidden;
}
.bg {
top:-1800px;
position:absolute;
left:-1800px;
}
</STYLE>

Comme cela.

** Explications **

BORDER-left:#B7241D 10px outset; BORDER-right:#B7241D 10px inset; BORDER-top:#B7241D 10px outset; BORDER-bottom:#B7241D 10px inset	Ici, on definit les bordures autour de notre page.
.div1 { BORDER:#FFFFFF 8px double; PADDING:7px; FONT-FAMILY:Mistral; FONT-SIZE:14pt; COLOR:#253E3B; BACKGROUND-COLOR:#ffffff; SCROLLBAR-BASE-COLOR:##253E3B; SCROLLBAR-ARROW-COLOR:#253E3B; left:0px; top:0px; height:320px; width:220px; position:absolute; overflow:auto; z-index:9; filter: Alpha(Opacity=50); }	Ici , on définit la boite de texte: _ la police _ sa couleur _sa taille _ les couleurs de la scrollbar _ les dimmensions de la boite de texte _ sa couleur de fond _ l'opacité de la couleur de fond
.img { top:-1800px; position:absolute; left:-1800px; filter:revealtrans; visibility:hidden; } .img2 { top:-1800px; position:absolute; left:-1800px; filter:revealtrans fliph (enabled=1); visibility:hidden; } .stok { top:-1800px; position:absolute; left:-1800px; visibility:hidden; } .bg { top:-1800px; position:absolute; left:-1800px; }	Ici, cela concerne la position des images que nous allons insérer. Ne changez rien!

5- Insertion de la tuile.

Mettre la première balise BODY notée <BODY> en surbrillance ( bleu)

Copier puis coller cette ligne par dessus cette balise en surbrillance.

Vous obtenez ceci

Changer "tuile.jpg" par le nom de votre tuile.

6 - Insertion des gifs.

Copier ce code.

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

Comme cela

Modifier le nom des gifs pour votre version.

Pour mon exemple "barre1.png" est la barre

et "noel2.gif" est le gif du Père Noel.

7- Insertion du texte.

Copier ce code et coller le sous l' insertion des gifs ( environ ligne 60 )

<Div class=div1 id=text align=center>Texte ICI</div>

Comme ceci:

Modifiez " Texte ICI " par le texte que vous désirez écrire.

8- Insertion du script.

A la suite de tout cela ( environ ligne 61 ), placez ce script.

** Note **

Le script a plusieurs effets :

- il va faire défiler la tuile de fond

- il va faire apparaitre la barre et son double.

- il va faire apparaitre le gif ainsi que son double par progressivité.

A ce stade là, vous pouvez déjà visualiser votre page.

9- Insertion de la musique.

Copier et coller ce code entre les deux balises Head

Je l' ai placé sous les deux balises TITLE, comme cela ( environ sur la ligne 4 )

11- Votre page de script est terminée.

Enregistrer votre travail, puis héberger votre page ainsi que votre matériel.