Cours 32

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 nouveau cours , nous allons utiliser trois tuiles différentes , un tag et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag ou une image de taille moyenne en format png ou gif ou jpg.

- 3 tuiles : 2 tuiles unies pour le fond de la page et une tuile à motif qui va scroller .

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

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 32 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 32 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

Comme cela.

** Explications **

background-color: #XXXXXX; border: solid 2px #XXXXXX; scrollbar-base-color: #XXXXXX; scrollbar-track-color: #XXXXXX; scrollbar-highlight-color: #XXXXXX; scrollbar-shadow-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.
.div2{ border: solid 2px #XXXXXX; left:-1800px; top:-1800px; position:absolute; z-index:-1;	Ici on définit la couleur des bordures des containers contenant la tuile qui va scroller.
mess{ border: double 3px #XXXXXX; font-family:"Trebuchet MS"; font-size: 12pt; font-weight: normal; color: #XXXXXX; width:600px; height:145px; padding:10px; overflow:auto;	Ici on définit la hauteur de la boite de texte et la police

Pensez à mettre les codes de couleur.

5- Insertion de la tuile de fond

Mettre en surbrillance la première balise BODY, notée comme cela <body>

Puis coller ce code à la place

Vous obtenez ceci

Modifier le nom de la tuile pour votre version.

6 - Insertion des deux autres tuiles.

Copier ce code et collez le à la suite .

<img src="tuilescroll.jpg" id="bkg1" class="offscrn">

<img src="tuile2.jpg" id="bkg2" class="offscrn">

<div style="width:10px; height:10px;" class="div2" id="jet1"></div>
<div style="width:10px; height:10px;" class="div2" id="jet2"></div>
<div style="width:10px; height:10px;" class="div2" id="jet3"></div>
<div style="width:10px; height:10px;" class="div2" id="jet4"></div>
<div style="width:10px; height:10px;" class="div2" id="jet5"></div>
<div style="width:10px; height:10px;" class="div2" id="jet6"></div>

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

Comme cela

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

A la suite de tout ceci, nous allons insérer la boite de texte pour votre message ainsi que l' image.

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

<table align="center" cellspacing="20" cellpadding="0">
<tr>
<td align="center">

<img src="Image.jpg"></td></tr>
<tr>
<td align="center">

<div class="mess" id="txt">Ecrire le texte ici</div></td>
</tr></table>

Comme ceci:

Pensez à écrire votre texte.

Pour votre version, modifier le nom de votre image.

10 - Insertion du script.

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

Copier et coller ce code

'------------------------------------------
'please leave all these lines in
'www.molehofje.com
'script gemaakt door JettyM
'tekst tussen deze lijnen aub laten staan
'------------------------------------------

Option Explicit
SetLocale("en-gb")

window.status=" ~~~ Script & stationery JettyM ~~~ "

Dim docw, doch, sW1, sH1, sW2, sH2, sW3, sH3, sW4, sH4, sW5, sH5, sW6, sH6, j, m
j=0
m=0

sub window_onload()
On Error Resume Next
docw=document.body.clientWidth
doch=document.body.clientHeight
sW1=docw*0.06
sH1=doch*0.96
sW2=docw*0.06
sH2=doch*0.86
sW3=docw*0.06
sH3=doch*0.76
jet1.style.backgroundImage="url("&bkg1.src&")"
jet2.style.backgroundImage="url("&bkg1.src&")"
jet3.style.backgroundImage="url("&bkg1.src&")"
jet4.style.backgroundImage="url("&bkg1.src&")"
jet5.style.backgroundImage="url("&bkg1.src&")"
jet6.style.backgroundImage="url("&bkg1.src&")"
txt.style.backgroundImage="url("&bkg2.src&")"
jet4.style.filter="fliph"
jet5.style.filter="fliph"
jet6.style.filter="fliph"
jet1.style.width=sW1
jet1.style.height=sH1
Jet1.style.top=(doch-sH1)/2
jet1.style.left=0
jet2.style.width=sW2
jet2.style.height=sH2
Jet2.style.top=(doch-sH2)/2
jet2.style.left=docw*0.05
jet3.style.width=sW3
jet3.style.height=sH3
Jet3.style.top=(doch-sH3)/2
jet3.style.left=docw*0.10
jet4.style.width=sW1
jet4.style.height=sH1
Jet4.style.top=(doch-sH1)/2
jet4.style.left=docw-sW1
jet5.style.width=sW2
jet5.style.height=sH2
Jet5.style.top=(doch-sH2)/2
jet5.style.left=docw-sW2-docw*0.05
jet6.style.width=sW3
jet6.style.height=sH3
Jet6.style.top=(doch-sH3)/2
jet6.style.left=docw-sW3-docw*0.10
end sub

window.setInterval "scrollit", 64

sub scrollit()
j=j+1
jet1.style.backgroundPosition=j&" "&-j
jet2.style.backgroundPosition=j&" "&m
jet3.style.backgroundPosition=j&" "&j
jet4.style.backgroundPosition=j&" "&-j
jet5.style.backgroundPosition=j&" "&m
jet6.style.backgroundPosition=j&" "&j
end sub

sub window_onresize()
window_onload
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.