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


Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer



Pour ce cinquième cours, nous allons utiliser une tuile pour le fond de la page, un papier Top redimmensionné

( si besoin ) et une musique. Nous allons insérer une boite de texte, et un script .

Cliquez ici pour visualiser la page

Télécharger le matériel ici

Matériel : - un papier Top ( j' ai redimmensionné le mien à 800 pixels de largeur car c'est une animation )

- une tuile assortie à votre papier

- une musique.



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

Ranger le matériel nécessaire à votre page dans ce dossier.

Voici mon dossier Cours5 et son contenu.

 

2 - Ouvrir Script -Edit.

Faire Fichier ==> Enregistrer sous

et enregistrer cette page vierge dans votre dossier Cours 5 avec votre matériel, en n'oubliant pas de la nommer.



3 - Couleur de la bordure, de la scrollbar, et de la boite de texte.

Nous allons définir  les couleurs de la scrollbar, et la boite de texte dans laquelle nous allons écrire notre message.

Copier et coller ceci entre les deux balises <HEAD> et </HEAD>, environ, sur la ligne 3 ou 4,  comme ceci.

Puis taper sur la touche "ENTER" de votre clavier
<style type="text/css">
body{
border: ridge 5px #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
}
.mess{
border: double 3px #XXXXXX;
padding:10px;
text-align:center;
height:220px;
font-family:Script MT Bold;
font-weight:bold;
font-size:14pt;
color:#XXXXXX;
overflow:auto;
width:450px;
position:absolute;
filter:revealtrans alpha(opacity=50);
visibility:hidden;
background-color:#XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}


</style>

Maintenant, je vous explique ce qu'il faut changer
<style type="text/css">
body{   Ici, cela concerne la scrollbar et la bordure
border: ridge 5px #XXXXXX; <===   bordure de 5 pixels, noter sa couleur
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX; <=== Noter les couleurs de la scrollbar
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
}
.mess{ Ici, cela concerne la boite de texte
border: double 3px #XXXXXX; <===== Noter la couleur de la bordure de 3 pixels
padding:10px; <=== Espacement entre le haut de la boite de texte et le debut du texte
text-align:center;
height:220px;
font-family:Script MT Bold;
font-weight:bold; <=== Définition de la police utilisée
font-size:14pt;
color:#XXXXXX;
overflow:auto;
width:450px; <=== Largeur de la boite de texte ( modifier la pour votre version)
position:absolute;
filter:revealtrans alpha(opacity=50);
visibility:hidden;
background-color:#XXXXXX; <== Ici, noter les couleurs de la scrollbar de la boite de texte, et sa couleur de fond
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}


</style>

4 - Insertion de la tuile

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

Comme cela



Copier et coller cette ligne, en cliquant droit sur ce qui est en surbrillance.

Puis taper sur la touche "ENTER" de votre clavier
<body background="NomDeLaTuile.jpg">

Comme cela



Changer NomDeLaTuile, par le nom de votre tuile.

Par exemple, NomDeLaTuile.jpg  devient tuile.jpg



5 - Insertion du papier top.

Copier cette ligne.
<img src="NomduPapier.jpg" width="largeur" height="hauteur" style="filter:revealtrans; visibility:hidden" id="jrf" class="offscrn">

Et coller entre les deux balises Body, notées ainsi <body> et </body>, environ vers la ligne 45.

Puis taper sur la touche "ENTER" de votre clavier



Changer NomDuPapier.jpg par le nom de votre papier.

Par exemple, "NomDuPapier.jpg" devient "lumiere.gif"

Indiquer aussi les dimmensions : width = largeur en pixels et height = hauteur en pixels.



6 - La boite de texte.

Copier cette ligne.
<div class="mess" id="mess">
Ecrivez votre message ici
</div>

Et coller après l'insertion de l'image, soit environ vers la ligne 46.

Puis taper sur la touche "ENTER" de votre clavier



Puis écrire votre message.

Penser à la balise <br> pour les sauts de ligne.

7 - Insertion du script.

Copier et coller le script sous l'insertion de la boite de texte, avant la dernière balise body, notée </boby>
<script language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script (175) gemaakt door JettyM 20-2-2005
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------

Dim sch, scw, picw, pich, txtw

pich=jrf.height
picw=jrf.width
txtw=450

j=j
r=r
f=f

Sub Window_onload()
sch=document.body.clientheight
scw=document.body.clientwidth
messw=600
jrf.style.postop=0
jrf.style.posleft=scw/2-picw/2
mess.style.postop=pich+25
mess.style.posleft=scw/2-txtw/2
mess.style.width=txtw
settimeout "laatzien", 1000
End Sub

Sub scroll()
j=j
r=r+1
f=f-1
document.body.style.backgroundposition=r&" "&f
End Sub

Sub laatzien()
cleartimeout
jrf.filters(0).Apply()
jrf.filters(0).transition=13
jrf.style.visibility="visible"
jrf.filters(0).Play(5.000)
settimeout "lezen", 4000
End Sub

Sub lezen()
cleartimeout
mess.filters(0).Apply()
mess.filters(0).transition=14
mess.style.visibility="visible"
mess.filters(0).Play(4.000)
settimeout "scrollit", 4000
End Sub

Sub scrollit()
Setinterval "scroll",64
End Sub

Sub Window_onresize()
window.location.reload()
End Sub
</script>

Quelques explications.

Pour votre devoir, ne pas modifier ce qui est en vert.
txtw=450 Indiquer ici la largeur de la boite de texte
Sub scroll()
j=j
r=r+1
f=f-1		 Direction du scroll de la tuile de fond.
Amusez vous à changer les valeurs.
Sub laatzien()
cleartimeout
jrf.filters(0).Apply()
jrf.filters(0).transition=13		 Le chiffre 13, indique l' effet donné à votre image lors de l'apparition. Ne le changer pas pour ce cours
Sub lezen()
cleartimeout
mess.filters(0).Apply()
mess.filters(0).transition=14
mess.style.visibility="visible"		 Même chose pour la boite de texte.
Sub scrollit()
Setinterval "scroll",64		 Vitesse de defilement de la tuile de fond


8 - Insertion de la musique.

Copier cette ligne
<bgsound src="music.mid" loop="infinite">

Et la coller entre les deux balises HEAD, notées <head> et </head>, par exemple vers la ligne 4.



Changer "music.mid" par le nom de votre musique.

9 - Titre de la page.

Entre les deux balises <title> et </title>  noter le titre de votre page.

Comme cela.



10 - Visualiser votre page et enregistrer la une dernière fois.

Félicitation, vous avez terminé.

Il ne vous reste plus qu 'à héberger votre dossier et votre page.