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 18 ième cours, nous allons utiliser un grand tag ( ou un papier Top redimmensionné ),

 et 1 tuile assortie.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag ou un papier Top   ( redimmensionné )

-1 tuile assortie

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

Voici mon dossier Cours 18 et son contenu.

              

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

Enregistrer cette page vierge dans le dossier Cours 18 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 et  la scrollbar 

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

environ sur la ligne 4
<style>
Body {
Border: #000000 5px ridge;
Scrollbar-track-color: #000000;
Scrollbar-base-color: #000000;
Scrollbar-shadow-color: #646464;
Scrollbar-highlight-color: #646464;
Scrollbar-arrow-color: #646464;
margin:0px;
overflow-x:hidden;
text-align:center;
}
.mess {
font-family: Century Gothic;
font-size: 12pt;
font-weight: normal;
color:#000000;
text-align:center;
padding:5px;
width:600px;
height:225px;
overflow:auto;
}
.tab1{
border:ridge 3px #000000;
}
</style>




Comme cela.



** Explications **
Border: #000000 5px ridge;
Scrollbar-track-color: #000000;
Scrollbar-base-color: #000000;
Scrollbar-shadow-color: #646464;
Scrollbar-highlight-color: #646464;
Scrollbar-arrow-color: #646464;
margin:0px;
overflow-x:hidden;
text-align:center;		 Ici on definit, la bordure autour de la page et, les couleurs de la scrollbar
margin : vous pouvez mettre une marge en haut et bas de votre page ( ex 100px )
.mess {
font-family: Century Gothic;
font-size: 12pt;
font-weight: normal;
color:#000000;
text-align:center;
padding:5px;
width:600px;
height:225px;
overflow:auto;		 Ici on définit la place du texte sur la page.
tab1{
border:ridge 3px #000000;
}		 Ici on définit la bordure entre la tuile et la partie comprenant le tag et le texte.



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=#BEBEBE background="tuile.jpg">

Vous obtenez ceci



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


6 - Insertion du tag et du texte .
Copier ce code.
<table align=center class=tab1 cellspacing=5 width="84%" bgcolor=#BEBEBE>
<tr>
<td align=center id=div3 style="FILTER: progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=50)">

<!--Place Principale-->
<img src="Tag.jpg" id=pic1>
</td></tr>
<tr><td align=center>
<div class=mess>Ecrire votre message
</div>
</td></tr></table>
<br>


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

Comme cela




Quelques explications :
<table align=center class=tab1 cellspacing=5 width="84%" bgcolor=#BEBEBE>  Ici on definit un tableau dont la largeur fait 84 % de la page, et on definit la couleur de fond
<td align=center id=div3 style="FILTER: progid:DXImageTransform.Microsoft.Slide(slidestyle=HIDE,Bands=50)"> Cette partie va avec le script. On n' y touche pas. Elle sert à modifier les bandes qui s'appliquent sur le tag
<img src="Tag.jpg" id=pic1>  Ici on met le tag
</td></tr>
<tr><td align=center>
<div class=mess>Ecrire votre message
</div>
</td></tr>		  Puis on note le texte
</table> On n'oublie pas la balise pour fermer le tableau



7- Insertion du script

A la suite de tout cela ( environ ligne 45 ), placez ce script.
<script language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script (230) gemaakt door JettyM 10 november 2004
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
Sub Window_onload()
laatzien
End Sub

Sub laatzien()
div3.filters(0).Apply()
pic1.style.visibility="visible"
div3.filters(0).Play(8.000)
Settimeout "nogeens", 12000
End Sub

Sub nogeens()
div3.filters(0).Apply()
pic1.style.visibility="visible"
div3.filters(0).Play(8.000)
Settimeout "laatzien", 16000
End Sub


</script>

Pour modifier la vitesse , c'est la valeur de "Play" qu'il faut modifier.



9- Insertion de la musique.
Après les deux balises du titre notées <title> et </title>, copier et coller ce code.
<BGSOUND balance=0 src="music.mid" volume=0 loop=99>


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


13 - Votre page est terminée.

Vous pouvez visualiser votre page.

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