Cours 27

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 27 ième cours, nous allons utiliser une tuile, un tag et une musique.

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag en format png ou gif ou jpg.

- une tuile

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

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 27 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 27 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

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

environ sur la ligne 4

</style>

Comme cela.

** Explications **

v\:* { behavior: url(#default#VML);}	Cette partie est impotante car elle concerne la bordure en arrondie pour la zone de texte.
body{ background-color: #XXXXXX; background-attachment: fixed; border: solid 2px #XXXXXX; scrollbar-base-color: #XXXXXX; scrollbar-track-color: #XXXXXX; scrollbar-highlight-color: #XXXXXX; scrollbar-shadow-color: #XXXXXX; scrollbar-arrow-color: #XXXXXX; }	Ici on définit la couleur de fond et les couleurs de la scrollbar
/hieronder lettertype, grootte etc/ .mess{ padding:3px; text-align:center; font-family:Papyrus; font-size:14pt; font-weight:normal; color:#000000; overflow:auto	Ici on définit la 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 nom de la tuile si besoin pour votre version.

6 - Insertion de la bordure qui scintille

Copier ce code.

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

Comme cela

Pensez à modifier la couleur de la bordure

7- Insertion du tag.

A la suite de tout ceci, nous allons insérer le tag.

Copier et coller ce code.

<img src="Tag.png" width="600" height="450" style="position:relative; visibility:hidden" id="pic">
</td></tr>
<tr>
<td align="center">

Comme ceci:

Pensez à modifier le nom et les dimmensions du tag pour votre version.

8 - Insertion de la boite de texte

A la suite de ceci, nous allons positionner la boite de texte.

Copier et coller ce code

<div id="poppy" style="position:relative; height:250px;">
<?xml:namespace prefix = v /><v:roundrect id="jet" style="position:absolute; height:250px; left:0px; top:0px; visibility:hidden;" arcsize = "0.2" coordsize

= "21600,21600" filled = "f" strokecolor = "#000000" strokeweight = "0.75pt"><v:fill></v:fill><v:stroke></v:stroke></v:roundrect>
<div id="son" class="mess" style="position:absolute; height:220px; left:5%; width:90%; top:15px; visibility:hidden;">
Texte ici</div>
</div></td></tr>
</table></td></tr></table></td></tr></table>

Pensez à inscrire votre message

9 - Insertion du script.

Pour finir, nous allons rajouter à la suite le script.

Copier et coller ce code

'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
'---------------------------------------------
'please leave all these lines in
'script (242) gemaakt door JettyM juni 2006
'www.molehofje.com
'tekst tussen deze lijnen aub laten staan
'---------------------------------------------
'/////////////////////////////////////////////

Option Explicit
SetLocale("en-gb")

Dim x, y, direct, tm, maxtm, hud

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

REM amount of time before scroll direction changes
maxtm=75
REM text statusbar
window.status=" ~~~ Script and stationery JettyM ~~~ "

x=0
y=0
tm=0
hud=pic.width
direct=dirDownR

sub window_onload()
jet.style.width=hud
son.style.width=hud-40
son.style.left=20
poppy.style.width=hud
poppy.style.visibility="visible"
son.style.visibility="visible"
jet.style.visibility="visible"
start
end sub

sub start()
pic.style.filter="progid:DXImageTransform.Microsoft.Pixelate(maxSquare=25, enabled=0)"
pic.filters(0).Apply()
pic.style.visibility="visible"
pic.filters(0).Play(4)
window.setTimeout "scrollen", 4100
end sub

sub scrollen()
window.setInterval "scrollIt", 64
end sub

sub scrollIt()
select case direct
case dirDownR
x=x+1
y=y+1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirDownL
end if
case dirDownL
x=x-1
y=y+1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirUpL
end if
case dirUpL
x=x-1
y=y-1
tm=tm+1
if tm>=maxtm then
tm=0
direct=dirUpR
end if
case dirUpR
x=x+1
y=y-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=x&" "&y
end sub

</script>

10 - Insertion de la musique.

Copier et coller ce code après les deux balises TITLE

Modifier music.mid par le nom de votre musique pour votre version.

Vous avez terminé.

Vous pouvez visualiser votre page.

Enregistrez la une dernière fois, puis hébergez la avec le materiel.