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 22 ième cours, nous allons faire une page pour présenter un tag.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- 1 tag

-2 tuiles assorties

- 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 "Cours22".
Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 22 et son contenu.

                  

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

Enregistrer cette page vierge dans le dossier Cours 22 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 les bordures intérieures

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

environ sur la ligne 4
<STYLE>
BODY {
BORDER:#XXXXXX 10px groove;
SCROLLBAR-BASE-COLOR:#XXXXXX;
SCROLLBAR-ARROW-COLOR:#XXXXXX}

.TAB1 {
BORDER:#XXXXXX 5px ridge;
BACKGROUND-COLOR:#XXXXXX;}

.TAB2 {
BORDER:#XXXXXX 8px outset;}

.TD1 {
FONT-FAMILY:Papyrus;
FONT-WEIGHT:normal;
FONT-SIZE:14pt;
COLOR:#XXXXXX;}

</STYLE>


Indiquez bien les codes de couleurs

Comme cela.



** Explications **
BODY {
BORDER:#XXXXXX 10px groove;
SCROLLBAR-BASE-COLOR:#XXXXXX;
SCROLLBAR-ARROW-COLOR:#XXXXXX}		 Ici on definit, la bordure autour de la page et, les couleurs de la scrollbar
.TAB1 {
BORDER:#XXXXXX 5px ridge;
BACKGROUND-COLOR:#XXXXXX;}		 Ici on définit la boite de message : la couleur de la bordure et du fond
.TAB2 {
BORDER:#XXXXXX 8px outset;}		 Ici on définit la bordure  de centre de la page
.TD1 {
FONT-FAMILY:Payrus;
FONT-WEIGHT:normal;
FONT-SIZE:14pt;
COLOR:#XXXXXX;}
 Ici on definit la police : nom, couleur et taille



5- Insertion de la tuile et définition de la couleur du fond de page
Mettre la première balise BODY notée <BODY> en surbrillance ( bleu)



Copier puis coller cette ligne par dessus cette balise en surbrillance.
<BODY bgColor=#XXXXXX background="Tuileclaire.jpg">

Vous obtenez ceci



Pour votre version, changer la couleur et le nom de la tuile.


6 - Insertion de la seconde tuile qui scrolle
Copier ce code.
<img src="Tuilefoncee.jpg" style="top:-1800px; position:absolute; left:-1800px; width:100px; height:200px" id=back1>


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

Comme cela



Pour votre version, changer le nom de la tuile.

7- Insertion de l'image centrale et de la boite de texte

Nous allons insérer l'image centrale et la boite de texte à l' intérieur d'un tableau.

Copier et coller ce code à la suite de l'insertion des 2 tuiles ( environ ligne 28 )
<table class=tab2 id=tab2 align=center cellspacing=30 width=800>
<tr>
<td align=center>

<!-- image centrale -->
<Img src="tag.jpg"></td></tr>
<tr>
<td class=TD1 align=center>

<!-- boite de texte -->
<div class=TAB1 style="width:600px; height:200px; overflow:auto; padding:6px;">Texte ici</div></td></tr>
</td></tr></table>

Comme cela.



Pensez à écrire votre messsage.

9- Insertion du script.
A la suite de tout ceci, nous insérons le script.
<script language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script (19) gemaakt door Jetty
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
tab2.background=back1.src

x=0
y=0
a=0
b=0


Setinterval "scroll", 64

Sub scroll()
x=x+1
y=y+1
a=a-1
b=b-1
document.body.style.backgroundposition=x&" "&y
tab2.style.backgroundposition=a&" "&b
End Sub

</script>

Vous pouvez dès maintenant visualiser votre page et voir vos 2 tuiles scroller.


13 - Insertion de la musique.

A la suite des balises TITLE pour le titre, copier et coller ce code pour insérer la musique.
<BGSOUND balance=0 src="music.mid" volume=0 loop=99>

Pour votre version, modifier le nom de la musique.


 Votre page est terminée.

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