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 23 ième cours, nous allons utiliser un tag assez grand et une tuile assortie.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag : attention, pour ce cours, il faut un tag sans démarcation ni bordure sur les cotés ( vois mon modèle )

-1 tuile assortie au tag


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

Voici mon dossier Cours23 et son contenu.

              

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

Enregistrer cette page vierge dans le dossier Cours 23 en n'oubliant pas de la nommer.

3 - Nommer la page.

Entre les deux balises <title> et </title>, écrire le titre de votre page.

4 - La scrollbar, la boite de texte, la police

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

environ sur la ligne 4
<style type=text/css>
body {
background-color: #XXXXXX;
scrollbar-track-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
}
.offs {
left: -1800px; position: absolute; top: -1800px
}
.tekst {
padding-top: 30px;
padding-bottom: 30px;
font-family: Papyrus;
font-weight: bold;
font-size: 18pt;
color: #000000;
visibility: hidden;     
overflow: auto;
position: absolute;
left: 5%;
top: 5%;
height: 90%;
width: 90%;
background-color: #XXXXXX;
text-align: center;
}
</style>



Comme cela.



** Explications **
background-color: #B4B0A7;
scrollbar-track-color: #AEAC9F;
scrollbar-base-color: #AEAC9F;
scrollbar-shadow-color: #B4B0A7;
scrollbar-arrow-color: #000000;
scrollbar-highlight-color: #000000;		 Ici on définit, la couleur de la scrollbar  et du fond de page
.tekst {
padding-top: 30px;
padding-bottom: 30px;
font-family: Papyrus;
font-weight: bold;
font-size: 18pt;
color: #000000;
visibility: hidden;    
overflow: auto;
position: absolute;
left: 5%;
top: 5%;
height: 90%;
width: 90%;
background-color: #AEAC9F;
text-align: center;
}		 Ici on définit la boite de texte et la police

- padding top = espacement du texte par rapport au haut de la page
-padding bottom = espacement par rapport au bas

Pensez à mettre les codes de couleurs

5- Insertion de la tuile de fond.

Sous le première balise BODY, notée <body>, copier et coller cette ligne. ( environ ligne 38 )
<!--tuile de fond-->
<img class=offs id=bg src="tuile1.jpg">

Vous obtenez ceci




Pour votre version, changer "tuile1.jpg" par le nom de votre tuile.


6 - Insertion du tag.
Copier ce code.
<!--Tag et sa hauteur-->
<img class=offs id=pic src="Tag.png" height=450>

<div class=offs id=back></div>

<div class=offs id=cont style="visibility: hidden"></div>


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

Comme cela



Modifier le nom du tag et la hauteur pour votre version.


7- Insertion  de la boite de texte et du texte.

Copier et coller ceci à la suite de l'insertion du tag , environ vers le ligne 47.
<!--Boite de texte-->
<div class=tekst id=mess width="350">
Ecrivez votre message ici

</div>


Comme ceci:




Pour votre version, amusez vous à modifier sa largeur

8- Insertion du script

A la suite de tout cela ( environ ligne 51 ), placez ce script.
<script language=vbscript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'augustus 2007
'please leave these lines in
'---------------------------

Option Explicit
SetLocale("en-gb")

Dim scw,sch,back1,messw,pich,sp,a,n,e
    
messw=mess.width
pich=pic.height    
sp=15

mess.style.filter="progid:DXImageTransform.Microsoft.Iris() Alpha( Style=0, Opacity=50);"
cont.style.filter="progid:DXImageTransform.Microsoft.Iris();"
back.style.filter="Alpha( Style=0, Opacity=50);"    

Set back1=document.body

a=0
n=0
e=0

back1.style.backgroundImage="URL("&bg.src&")"
back.style.backgroundImage="URL("&bg.src&")"
cont.style.backgroundImage="URL("&pic.src&")"    

sub Window_OnLoad()
size_and_position
window.setTimeout "kom", 400
end sub

sub size_and_position ()
scw=back1.clientWidth
sch=back1.clientHeight
back.style.left=0
back.style.top=0
back.style.width=scw
back.style.height=sch
cont.style.left=0
cont.style.top=(sch-pich)/2
cont.style.width=scw
cont.style.height=pich
mess.style.left=(scw-(messw+sp))
mess.style.top=0
mess.style.width=messw
mess.style.height=sch
end sub

sub kom()
window.clearTimeout
cont.filters(0).Apply()
cont.style.visibility="visible"
cont.filters(0).IrisStyle="diamond"
cont.filters(0).Motion="in"
cont.filters(0).Duration=5.000
cont.filters(0).Play()
window.setTimeout "verschijn", 5000
end sub

sub verschijn()
window.clearTimeout
mess.filters(0).Apply()
mess.style.visibility="visible"
mess.filters(0).IrisStyle="diamond"
mess.filters(0).Motion="in"
mess.filters(0).Duration=5.000
mess.filters(0).Play()
window.setTimeout "scrollit", 5000
end sub

sub scrollit()
window.setInterval "scroll", 64
end sub

sub scroll()
a=a+1
n=n-1
e=e
cont.style.backgroundPosition=n&" "&e
back1.style.backgroundPosition=a&" "&a
back.style.backgroundPosition=n&" "&a
end sub

sub window_onresize()
size_and_position
end sub

</script>


Quelques explications

mess.style.filter="progid:DXImageTransform.Microsoft.Iris() Alpha( Style=0, Opacity=50);"
cont.style.filter="progid:DXImageTransform.Microsoft.Iris();"
back.style.filter="Alpha( Style=0, Opacity=50);"    		 Mode d'apparition du tag et de la boite de texte, ainsi que l'opacité de la tuile de fond et de la couleur de fond de la boite de texte
mess.style.left=(scw-(messw+sp)) Ici, vous pouvez placer la boite de texte à droite ou à gauche
window.setInterval "scroll", 64 Vitesse de scroll de la tuile


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


Modifier "Votre_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.