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 33 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 : prenez un tag de taille assez grande

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

Ranger le matériel utilisé dans ce dossier.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 33 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 {
border: #XXXXXX 1px solid;
scrollbar-track-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
}
.taba {
border: #XXXXXX 1px solid;
}
.tabb {
background-color: #XXXXXX;
filter: alpha(opacity=50);
}
.pl {
filter: progid:DXImageTransform.Microsoft.Slide(Bands=6) progid:DXImageTransform.Microsoft.Wheel;
}
.tekst {
padding: 15px;
font-family: Papyrus;
font-weight: bold;
font-size: 15pt;
color: #000000;
height: 220px;
background-color: #XXXXXX;
text-align: center
}

</style>




Comme cela.




5- Insertion de la tuile de fond.


Mettre la première balise body en surbrillance, notée <body>, puis coller ce code à la place.

<body bgColor=#D2BCAF background="tuile.jpg">


Vous obtenez ceci




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


6 - Insertion du tag et de la boite de texte.

Nous allons maintenant insérer le tag et la boite de texte, incorporés tous deux dans un tableau, reconnaissable grace à la balise TABLE.

Copier et coller ce code à la suite, environ ligne 37.

<table class=taba cellSpacing=1 cellPadding=0 align=center>
<tr><td align=center>
<table class=tabb cellSpacing=44 cellPadding=0 align=center>
<tr><td id=tab1 align=center>

<!--image-->
<img class=pl id=pic style="visibility: hidden; position: relative"
src="Tag.jpg"></td></tr>

<!--Zone de texte de la même largeur que l' image-->
<tr><td style="width: 700px">
<div class=tekst>
<div>Votre texte ici

<br>
</div></div>

</td></tr></table>
</td></tr></table>





Pensez à modifier le tag ( nom et dimmension ) .

Placer votre texte et modifier si besoin la police et / ou sa taille selon le texte souhaité.


7- Insertion  du script


Copier et coller ceci à la suite de l'insertion du tag , environ vers la ligne 56


<script language=VBScript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'januari 2007
'please leave these lines in
'---------------------------

Option Explicit
SetLocale("en-gb")

Dim a,n,direct,tm,maxtm

REM text statusbar
window.status="tutorial -sharifa- by L&K, tube Yoka, stationery & script by Annem@rie"

REM amount of time before scroll direction changes
maxtm=75

Const dirDownR=0
Const dirDownL=1
Const dirUpL=2
Const dirUpR=3

a=0
n=0
tm=0
direct=dirDownR

sub window_Onload()
tab1.style.backgroundImage="url("&pic.src&")"
window.setTimeout "kom1", 1000
end sub

sub kom1()
pic.filters(0).Apply()
pic.style.visibility="visible"
pic.filters(0).Play(8)
window.setTimeout "kom2", 9500
end sub

sub kom2()
pic.filters(1).Apply()
pic.filters(1).spokes=2
pic.style.visibility="hidden"
pic.filters(1).Play(8)
window.setTimeout "kom1", 9500
end sub

window.setTimeout "scrollit", 9000

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

sub scroll()
select case direct
case dirDownR
a=a+1
n=n+1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirDownL
end if
case dirDownL
a=a-1
n=n+1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirUpL
end if
case dirUpL
a=a-1
n=n-1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirUpR
end if
case dirUpR
a=a+1
n=n-1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirDownR
end if
case else
window.status="unexpected case value"
end select
document.body.style.backgroundPosition=a&" "&n
end sub

</script>

 



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.