Cours 11

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

Pour ce onzième cours, nous allons faire un script pour un papier simple.

Cliquer ici pour visualiser ma page

Matériel :

- un papier simple

- un petit gif

- une musique en format midi

Télécharger le materiel ici

On commence.

Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer

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

Ranger le matériel nécéssaire dedans.

Voici mon dossier Cours 11 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Et enregistrer la page vierge dans votre dossier Cours 11 en n'oubliant pas de la nommer.

3 - Les bordures, la scrollbar, et le texte.

Pour commencer, nous allons definir les couleurs de la scrollbar, des bordures, puis la police utilisée pour le texte .

Copier ce code

<STYLE> BODY { BACKGROUND-FIXED: yes; BORDER-RIGHT: #000000 5px inset; BORDER-LEFT: #000000 5px outset; BORDER-TOP: #000000 5px outset; BORDER-BOTTOM: #000000 5px inset; SCROLLBAR-ARROW-COLOR: #53090A; SCROLLBAR-FACE-COLOR: #4F0506; SCROLLBAR-TRACK-COLOR: #53090A; } .look1 { position:absolute; left:600px; top:5px; font-family:Renaissance; font-weight:bold; font-size:16pt; color:#F9E0BC; text-align:center; } </STYLE>

Puis le coller juste après la première balise HEAD, notée <head>

J' ai collé le code sur la ligne 3.

Pour votre version, ne pas oublier de changer les couleurs des bordures, scrollbar et texte.

4 - Insertion du papier.

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

Puis Copier et coller cette ligne à la place de la balise en surbrillance.

Ce qui donne ceci

Changer si besoin par le nom de votre papier.

5 - Insertion du texte.

Copier et coller ce code sous l'insertion du papier ( environ ligne 30 )

<div class=look1 align="left" valign="top">
<br>Ecrire le texte ici
</div>

Ce qui donne ceci

6 - Insertion du script pour le papier.

Nous réutilisons ici un script déjà vu au premier cours.

Copier et coller ce script à la suite de ce que vous avez déjà mis, et toujours entre les deux balises BODY.

Soit environ à la ligne 32 ( tout depend de la longueur de votre texte )

<script language="vbscript">
x=0
y=0
x1=0
y1=0
x2=0
y2=0
x3=0
y3=0

Sub Window_Onload()
Clearinterval (tvo)
tvo=Setinterval ("scroll", 64)
end sub

Sub scroll()
x=x+0
y=y+1
document.body.style.backgroundPosition=x&" "&y
End sub
Sub window_onresize()
window.location.reload()
End Sub
</script>

Ce qui donne ceci

7 - Insertion du gif.

Maintenant, nous allons inserer le gif qui va tomber sur la page.

Nous insérons le gif juste après le script du papier.

Copier et coller ce code environ vers la ligne 57

Ce qui donne ceci

Changer pour votre version anim.gif par le nom de votre gif.

8 - Insertion du script du gif.

Copier et coller le script, juste après l'insertion du gif, soit environ sur la ligne 60.

<SCRIPT language=JavaScript1.2> var no = 5; // snow number var speed = 10; // smaller number moves the snow faster var snowflake = snowtemp.src; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 1024, doc_height = 800; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = 800; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()",speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = 800; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()",speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> </SCRIPT>

Dans ce script, vous pouvez augmenter le nombre de gifs ou bien diminuer.

var no = 5 ===> Modifie le nombre de gifs.

var speed = 10 ===> modifie la vitesse

9- Insertion de la musique.

Copier et coller ce code après les deux balises TITLE, soit environ sur la ligne 26

.Comme cela

Changer music.mid par le nom de votre musique.

10 - Titre de votre page.

Pour finir, entre les deux balises TITLE notées <title> et </title>, écrire le nom de votre page.

Comme cela

Vous avez terminé votre page de script.

Enregistrer votre travail une dernière fois.

Il ne reste plus qu'à héberger votre matériel et votre page.