Cours8

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 huitième cours, nous allons utiliser un papier top , une tuile, un gif et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un papier : pour cette page, il faut un papier sans démarcation sur les cotés ( droite et gauche),

car le papier va défiler sur le haut de la page.

Si vous désirez faire le même papier que mon exemple; le tutoriel se trouve ici

-une tuile assortie au papier.

- un gif ( oiseaux, papillons , etc ...)

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

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 8 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 8 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 scrollbar, les bordures et la définition de la police utilisée.

Copier ce code, puis coller le après les balises contenant le titre.

Comme cela.

Changer les codes de couleurs notés comme cela #XXXXXX par les codes des couleurs que vous souhaitez.

Modifier la police, sa taille et la couleur pour obtenir avoir celle que vous désirer.

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 "NomDeLaTuile" par le nom de votre tuile.

Par exemple, sur ma page "NomDeLaTuile" devient "tuile"

6 - Insertion du papier.

Copier ce code.

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

Comme cela

Maintenant, modifier si besoin le nom du papier et noter sa hauteur.

Par exemple; mon papier se nomme "papier.jpg" et sa hauteur est 350 pixel.

Il est donc noté ainsi

La ligne du dessous, il ne faut pas la changer.

Elle sert à placer le papier afin qu il défile grace au script.

7- Insertion du gif.

Copier ce code et coller le sous l' insertion du papier. ( environ ligne 42 )

Comme ceci:

Sur cette ligne

Noter le nom de votre gif.

Par exemple; le mien se nomme "oiseau.gif"

Sur la ligne du dessus

top 300 correspond à la distance en pixel entre le gif et le haut de la page.

left:0px signifie que le gif part sur le bord de gauche

Scrollamount="3" correspond à la vitesse de votre gif

direction="right" signifie que le gif defile vers la droite

8- Insertion du texte.

A la suite de tout cela ( environ ligne 47 )

, noter copier et coller ce code afin d' écrire le texte souhaité.

<div id="txt" class="message" style="top: 10px;">Noter ici votre texte</div>

Comme cela

Ecrire le texte à la place de "Noter votre texte ici".

9- Insertion du script.

Pour pouvoir visionner notre page, il faut maintenant insérer le scripts.

Copier le script ci dessous.

Puis coller le à la suite de votre méssage ( environ ligne 62 ).

Vous pouvez visualiser votre page.

10- Pour finir la page, nous allons insérer la musique;

Copier cette ligne.

Puis coller la après le titre de votre page, comme cela

Changer "NomDeLaMusique" par le nom de votre musique.

Pour mon exemple; "NomDeLaMusique" devient "fever".

11- Votre page de script est terminée.

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