Cours 24

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 24 ième cours, nous allons utiliser un tag, ainsi qu'une tuile, et une bordure assortie au tag, et un gif.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag

- une tuile

- une bordure assortie

- un gif

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

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 24 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 24 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, la boite de texte, la scrollbar , la position de la bordure

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 3px double;
SCROLLBAR-FACE-COLOR: #XXXXXX;
SCROLLBAR-TRACK-COLOR: #XXXXXX;
SCROLLBAR-BASE-COLOR: #XXXXXX;
SCROLLBAR-ARROW-COLOR: #XXXXXX;
SCROLLBAR-highlight-COLOR: #XXXXXX;
}
.off {
LEFT: -1800px; POSITION: absolute; TOP: -1800px;
}
.fl {
LEFT: -1800px; POSITION: absolute; TOP: -1800px; visibility: hidden;
}
.tab {
LEFT: 5px; POSITION: absolute; TOP: -5px; HEIGHT: 1px;
}
.tekst {
LEFT: 0px;
POSITION: absolute;
TOP: 0px;
visibility: hidden;
BORDER: #XXXXXX 5px double;
PADDING: 20px;
FONT-FAMILY: Comic Sans MS;
FONT-SIZE: 14pt;
COLOR: #XXXXXX;
text-align: center;
OVERFLOW: auto;
FILTER: progid:DXImageTransform.Microsoft.Alpha (style=0, opacity=60);
BACKGROUND-COLOR: #XXXXXX
}

</STYLE>

Comme cela.

** Explications **

BORDER: #XXXXXX 3px double; SCROLLBAR-FACE-COLOR: #XXXXXX; SCROLLBAR-TRACK-COLOR: #XXXXXX; SCROLLBAR-BASE-COLOR: #XXXXXX; SCROLLBAR-ARROW-COLOR: #XXXXXX; SCROLLBAR-highlight-COLOR: #XXXXXX;	Ici on definit, la couleur de la scrollbar et la bordure autour de la page ( forme ==> double et couleur )
.tab { LEFT: 5px; POSITION: absolute; TOP: -5px; HEIGHT: 1px;	Ici attention : on définit la position de notre bordure qui va scroller. "LEFT:5px " correspond à un espace entre le bord de votre page et votre bordure. Si vous ne souhaitez pas d' espace, mettez 0 à la place.
.tekst { LEFT: 0px; POSITION: absolute; TOP: 0px; visibility: hidden; BORDER: #XXXXXX 5px double; PADDING: 20px; FONT-FAMILY: Comic Sans MS; FONT-SIZE: 14pt; COLOR: #XXXXXX; text-align: center; OVERFLOW: auto; FILTER: progid:DXImageTransform.Microsoft.Alpha (style=0, opacity=60); BACKGROUND-COLOR: #XXXXXX	Ici on définit la boite de texte : Couleur de fond ( avec transparence), bordure et police pour le texte

Pensez à mettre les codes de couleur.
Pour votre version, essayer de modifier les valeurs.

5- Insertion de la tuile.

Mettre la première balise BODY notée <BODY> en surbrillance ( bleu)

Copier puis coller cette ligne par dessus cette balise en surbrillance.

Vous obtenez ceci

Modifier le code de couleur pour le fond de page et le nom de la tuile.

6 - Insertion du tag.

Copier ce code.

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

Comme cela

Modifier le nom du tag, ainsi que ses dimmensions.

7- Insertion du gif.

Nous allons insérer le gif.

Copier et coller ce code à la suite.

Comme ceci:

Modifiez le nom du gif et sa dimmension.

8 - Insertion de la bordure qui va scroller.

A la suite de ceci, nous allons positionner la bordure.

Copier et coller ce code à la suite; soit environ sur la ligne 44.

Comme ceci:

Pour votre version, pensez à faire les modifications nécéssaires ( ex :nom et dimmension de la bordure)

Attention : la largeur de votre tableau doit être de la même largeur que votre bordure.

9 - Insertion de la boite de texte.

A la suite de tout cela ( environ ligne 50 ), placez ce code.

<DIV class=tekst id=mess style="WIDTH: 628px; HEIGHT: 200px">
<DIV>Ecrire le texte ici

</DIV></DIV>

Ecrivez votre texte.

J' ai mis la boite de texte de la même largeur que le tag; mais vous pouvez modifier pour votre version.

9- Insertion du script.

A la suite, nous allons insérer le script qui va agir sur divers éléments de la page.

Copier et coller le script à la suite, soit environ vers la ligne 55.

<SCRIPT language=VBscript>
'--------------------------------
'script made by Annem@rie
'http://www.annemaries.nl/
'please don't remove these lines
'1 april 2006
'--------------------------------

Option Explicit
SetLocale("en-gb")

Dim scw,sch,th,pich,picw,messh,messw,tablew,gaph,picheight,messheight,tab1height,n,e,ox,oy,Rx,Ry,A,dA,fl,maxtm

REM snelheid op en neer gif
REM decimal value less than 1
dA=0.06

REM flip images? no = 0 yes = 1
fl=1
'------- end of User Settings -------

maxtm=100
A=0

picw=pic.offsetwidth
pich=pic.offsetheight
messw=mess.offsetwidth
messh=mess.offsetheight
tablew=table.offsetwidth
gaph=50*3+pich+messh

n=0
e=0

Sub Window_Onload()
scw=document.body.clientwidth
sch=document.body.clientheight
document.body.style.overflowX="hidden"
table.style.backgroundImage="URL("&rand.src&")"
pic.style.posLeft=(scw/2)-(picw/2)+tablew/2
pic.style.posTop=50
pic.style.height=1
mess.style.posLeft=(scw/2)-(messw/2)+tablew/2
mess.style.posTop=50*2+pich
mess.style.height=1
REM circle center from left
ox=scw*0.56
REM circle center from top
oy=sch*0.30
REM x radius
Rx=scw*0.30
REM y radius
Ry=sch*0.15
SetTimeOut "groeitab", 1000
End sub

Sub groeitab()
tab1height=tab1height+2
table.style.height=tab1height
if tab1height=>gaph then SetTimeOut "showm", 10 else SetTimeOut "groeitab", 5
End Sub

Sub showm()
ClearTimeOut
SetTimeOut "groei1", 4000
SetTimeOut "groei2", 1000
End Sub

Sub groei1()
mess.style.visibility="visible"
messheight=messheight+2
mess.style.height=messheight
if messheight=>messh then SetTimeOut "help", 10 else SetTimeOut "groei1", 5
End Sub

Sub groei2()
pic.style.visibility="visible"
picheight=picheight+2
pic.style.height=picheight
if picheight=>pich then SetTimeOut "verder", 10 else SetTimeOut "groei2", 5
End Sub

Sub help()
ClearTimeOut
End Sub
sub vliegen()
window.setInterval "anime", 25
end sub

sub anime()
pl.style.visibility="visible"
A=A+dA

if fl=1 then
if A>=6.28*4 then
A=0
elseif A>=6.28*2 then
pl.style.filter="flipH(enabled=1)"
elseIf A>=0 and A<6.28*2 then
pl.style.filter="flipH(enabled=0)"
else
A=A
end if
else
pl.style.filter="flipH(enabled=0)"
end if
pl.style.left=ox+Rx*cos(A/4)-pl.width/2
pl.style.top=oy+Ry*sin(A)-pl.height/2
end sub

Sub verder()
SetTimeOut "vliegen", 100
th=setinterval("scroll", 64)
End Sub

Sub scroll()
n=n
e=e-1
table.style.backgroundposition=n&" "&e
End Sub

Sub Window_OnResize()
window.location.reload()
End Sub

</SCRIPT>

10 - Insertion de la musique.

Après les deux balises du titre, copier et coller ce code.

Modifier le nom de la 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.