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 17 ième  cours, nous allons faire un script pour un tag ou un papier Top redimmensioné.


Cliquer ici pour visualiser ma page

Le tutoriel de mon tag est ici

Matériel :

 - un tag ou un papier Top redimmensionné.

- Une tuile assortie

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

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

Voici mon dossier Cours17 et son contenu.

        

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

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




3 - La scrollbar, la boite de texte et la police

Copier ce code
<style type="text/css">
body{
background-color: #D6E4D7;
border: inset 6px #000000;
scrollbar-base-color: #D6E4D7;
scrollbar-track-color: #D6E4D7;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;
}
.mess{
padding:10px;
text-align:center;
height:200px;
font-family:Papyrus;
font-weight:normal;
font-size:15pt;
color:#000000;
overflow:auto;
width:500px;
}

</style>


Puis le coller entre les deux balises HEAD, notées <head> et </head>

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



Quelques explications afin que vous sachiez quoi modifier.
background-color: #D6E4D7;
border: inset 6px #000000;
scrollbar-base-color: #D6E4D7;
scrollbar-track-color: #D6E4D7;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #000000;		 Ici, on choisit la couleur de la page, et les couleurs de la scrollbar.
.mess{
padding:10px;
text-align:center;
height:200px;
font-family:Papyrus;
font-weight:normal;
font-size:15pt;
color:#000000;
overflow:auto;
width:500px;
}		 Ici on définit la boite de texte et la police.
"padding" represente la distance entre la haut de la boite de texte et le texte.
"height" représente la hauteur de la boite de texte

Pour votre version, amusez vous à modifier ces données.

4 - Insertion de la tuile de fond.
Mettre en surbrillance la première balise BODY; notée <body>



Puis coller et copier ce code à la place.
.
<body background="tuile2.jpg">

Modifier pour votre version le nom de la tuile.

Ce qui donne ceci


 

5 - Insertion du tableau avec couleur de fond opacifiée, du tag et de la boite de texte .
Copier et coller ce code sous l'insertion de la bordure, soit environ sur la ligne 30 .
<!-- ici on met les bordures et la couleur de fond avec opacite comprise entre 0 et 100 -->
<table align="center" cellspacing="40" cellpadding="10" border="2" bordercolor="#000000" bgcolor="#5E655E" style="filter:alpha(opacity=80);">
<tr>
<td align="center">
<table align="center" cellspacing="40" cellpadding="10" border="1" bordercolor="#000000">
<tr>
<td align="center" bgcolor="#D6E4D7">

<!-- hoofdplaatje -->
<img src="Diablesse.jpg" style="position:relative;"></td>
</tr>
<tr>
<td align="center" bgcolor="#D6E4D7">
<div class="mess"> Texte<br>
ici</div>
</td></tr></table></td></tr></table>


Ce qui donne ceci

** Quelques explications **

<table align="center" cellspacing="40" cellpadding="10" border="2" bordercolor="#000000" bgcolor="#5E655E" style="filter:alpha(opacity=80);"> Cette partie concerne la couleur de la bordure et la couleur de fond dont l'opacité est mise à 80
<table align="center" cellspacing="40" cellpadding="10" border="1" bordercolor="#000000">
<tr>
<td align="center" bgcolor="#D6E4D7">		 Cette partie concerne la bordure et la couleur de fond sous le tag
<img src="Diablesse.jpg" style="position:relative;"></td> Ici on insère le tag
<td align="center" bgcolor="#D6E4D7">
<div class="mess"> Texte<br>
ici</div>		 Ici, c'est la boite de texte avec sa couleur de fond


Pour votre version, modifiez les couleurs et le nom du tag

Ecrire votre message..


6 - Insertion du script.

Le script va servir à faire scroller la tuile de fond.

Copier et coller le script à la suite de ce que nous venons d'inserer, soit environ vers le ligne 46.
<script language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script by JettyM
'www.molehofje.com
'Tekst tussen deze lijnen laten staan a.u.b.
'------------------------------------------
dim j, m
j=0
m=0

window.setInterval "scrollit", 64

sub scrollit()
j=j+1
document.body.style.backgroundPosition=j&" "&-j
end sub

</script>

Comme cela


Vous pouver modifier la vitesse et la direction.

window.setInterval "scrollit", 64 ====> Vitesse ( plus le chiffre est petit, plus la vitesse est grande )

j=j+1 ===> Direction du scroll ( script dejà vu lors du premier cours )

7 - Insertion de la musique.

Copier et coller ce code apres les deux balises TITLE notées <title> et </title>
<bgsound src="kiss.mid" balance="0" volume="0" loop="-1">
 
Comme cela



Modifier le nom de la musique pour votre version.

9- Titre de la page.

Entre les deux balises TITLE, écrire le titre de votre page.

Comme cela.

 

Votre page est terminée.

Enregistrer la une dernière fois, puis heberger la avec le matériel.

J' espère que ce cours vous a plu et surtout que vous vous êtes bien amusez.