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 sixième cours, nous allons utilisé un gif, une musique et une tuile.

Choisissez un gif assez grand ( pour le mien, j' ai utilisé un tube que j' ai enregistré en gif)

Cliquez ici pour visualiser ma page

Télécharger le matériel ici


1- Créer un nouveau dossier.

Le nommer "Cours6" et ranger le matériel dedans.

Voici mon dossier "Cours6" et son contenu.

   

2 - Ouvrir Script-Edit.

Faire Fichier ===> Enregistrer sous et enregistrer la page dans le même dossier que le matériel, en n'oubliant pas de la nommer.



3 - Préparation de la page.

Nous allons mettre une bordure, définir les couleurs de la  scrollbar, et définir la boite de message pour le texte ( avec sa scrollbar, et sa couleur de fond ).

Copier et coller ceci  entre les deux balises HEAD, notées <head> et <head>.

Par exemple, je l' ai mis juste sous les deux balises TITLE ( environ ligne 4)

Comme cela 

Maintenant, voici les modifications à faire

<style type="text/css">
body{
background-color: #XXXXXX;
background-attachment: fixed;
border: ridge 10px #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
}		  Dans cette partie, mettre les couleurs de la scollbar de la page et
de la bordure ( vous pouvez changer sa taille)
.mess{
overflow:auto;
background-color:#XXXXXX;
border: double 10px #XXXXXX;
text-align:center;
font-family:Script Mt Bold;
font-weight:bold;
font-size:14pt;
color:#XXXXXX;
padding:12px;
width:350px;
height:400px;
right:0px;
top:0px;
position:absolute;
visibility:hidden;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}

</style>		 Cette partie concerne la boite de texte:
- mettre sa couleur de fond,  la couleur de la bordure
- définir la police ( nom de la police, taille, couleur..)
- dimmension de la boite de texte

4- Insertion de la tuile.

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

Copier et coller cette ligne à la place de la balise <body> en surbrillance.

<body background="tuile.jpg" scroll=no>

Changer tuile.jpg par le nom de votre tuile.

Vous obtenez ceci

5 - Insertion du gif

Copier et coller cette ligne sous l'insertion de la tuile ( ligne 42 environ )

<img class="offscrn" id="pic" src="NomDuGif.gif">

Changer "NomDuGif.gif" par le nom de votre gif

Vous obtenez ceci

6 - Le message de la boite de texte.

Copier et coller cette ligne sous l'insertion du gif ( environ ligne 43 )

<div class="mess" id="mess">Ecrivez votre message ici</div>

Puis écrivez votre message.

Faire  "Enter" ou "Entrée" sur votre clavier pour sauter une ligne.

A cette étape, si vous visualisez votre page, vous ne voyez que votre tuile et la bordure.

7 - Insertion du script.

Copier et coller le script sous l'insertion de votre message, entre les balises <body> et </body>  

( environ ligne 47 )


Voici les changements à faire

'largeur image
picw=368
'hauteur image
pich=388		 Indiquer la hauteur et la largeur de votre gif
'largeur boite texte
messw=350
'hauteur boite texte
messh=400		 Indiquer les dimmensions de la boite de texte
mess.style.postop=sch/2-messh/2
mess.style.posleft=2*gap+picw
mess.style.visibility="visible"
mess.style.filter="alpha(opacity=85)"		  vous pouvez changer l'opacité de la couleur de fond de la boite de texte
Clearinterval (thi)
thi=Setinterval ("scroll",64)		 Ici, cela concerne, la vitesse de défilement de la tuile
Sub circle()
ClearTimeOut(th)
A=A+0.09
R=R+0.09
ppl=R*cos(A)+ccw
ppt=R*sin(A)+cch
pic.style.Left=ppl
pic.style.Top=ppt
if R=>20 then th=SetTimeOut ("circleb", 50) else th=SetTimeOut ("circle", 50)
End Sub

Sub circleb()
ClearTimeOut(th)
A=A+0.09
R=R-0.09
ppl=R*cos(A)+ccw
ppt=R*sin(A)+cch
pic.style.Left=ppl
pic.style.Top=ppt
if R=<5 then th=SetTimeOut ("circle", 50) else th=SetTimeOut ("circleb", 50)
End Sub
 Cette partie concerne le mouvement donné
au gif.
Vous pouvez modifier quelques valeurs, mais je ne vous le conseille pas, car le mouvement risque de ne pas etre beau
Sub scroll()
j=j-1
f=f-1
document.body.style.backgroundposition=j&" "&f
End Sub		 Concerne le sens de défilement de la tuile 

8 - Insertion de la musique

Copier et coller cette ligne derrière la première balise HEAD, notée <head>
<bgsound src="NomDeLaMusique.mid" balance="0" volume="0" loop="-1">

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

Vous obtenez ceci



9 - Insertion du titre.

Entre les balises Title, notées <title> et </title>, donner un nom à votre page.



10 - Visualiser votre page.

Les scrollbars de la page peuvent ne pas apparaitre, cela est en fonction des dimmensions de gif et de la boite de texte.

Vous avez terminé.

Enregistrer une dernière fois votre page dans le dossier avec son matériel.



Félicitation!

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