Cours 26

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 26 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 "Cours26".

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours26 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

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

Comme cela.

** Explications **

border: #XXXXXX 2px solid; background-color:#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 bordure autour de la page, la couleur de la scrollbar et du fond de page
.mess { border:#XXXXXX 1px dotted; padding: 8px; font-family:"Comic Sans MS"; font-size:12pt; color:#XXXXXX; text-align:center; overflow:auto; background-color:#XXXXXX;	Ici on définit la boite de texte, sa bordure et sa couleur et la police

Pensez à mettre les codes de couleurs

5- Insertion de la tuile de fond.

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

Vous obtenez ceci

Pour votre version, changer "tuile.png" 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 deux containers.

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

<img src="tag.png" width="750" height="600" class="offscrn" id="mover" style="z-index: 4;">

<div class="offscrn" id="container" style="border-top: 2px solid #453a31; border-bottom: 2px solid #453a31; filter: revealtrans; visibility: hidden; width: 10px; height:10px;"></div>

<div class="offscrn" id="container2" style="border-left: #453a31 2px solid; border-right: #453a31 2px solid; filter: revealtrans; visibility: hidden; width:10px; height:10px;"></div>

<div class="mess" id="txt" style="filter: blendtrans alpha(opacity=60); left: 5%; visibility: hidden; width: 90%; position: absolute; top: 5%; height: 90%;"> Message ici </div>

Comme cela

Pensez à modifier le tag ( nom et dimmension ) et assortissez les couleurs de la bordure selon votre tuile.

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 46

<SCRIPT language="vbscript">
'------------------------------------------
'please leave all these lines in
'script by JettyM
'www.molehofje.com
'tekst tussen deze lijnen laten staan a.u.b.
'------------------------------------------

Dim doch, docw, moverH, moverW, spacerH, posL, posT, posK, dx, txtw, j, m
j=0
m=0
moverH=mover.height
moverW=mover.width
dx=3

'-------User Settings---------
REM border width of containers
b=2

REM width textbox
txtw=300

REM text statusbar
window.status=" ~~~ Script & stationery JettyM ~~~ "
'------end of User Settings-------

sub window_onload()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
spacerH=(docw-(moverW+txtw))/3
posT=(doch-moverH+b*2)/2
posL=docw
mover.style.left=posL
mover.style.top=posT
container.style.left=0
container.style.top=(doch-moverH)/2
container.style.height=moverH+b*2
container.style.width=docw
container2.style.left=spacerH*2+moverW
container2.style.top=0
container2.style.height=doch
container2.style.width=txtw
txt.style.top=(doch-moverH+b*2)/2
txt.style.left=spacerH*2+moverW+b
txt.style.width=txtw-b*2
txt.style.height=moverH
showme
end sub

sub showme()
container.filters(0).Apply()
container.filters(0).transition=6
container.style.visibility="visible"
container.filters(0).Play(3)
window.setTimeout "show2", 2500
end sub

sub show2()
container2.filters(0).Apply()
container2.filters(0).transition=5
container2.style.visibility="visible"
container2.filters(0).Play(2)
window.setTimeout "moveIt" , 2000
end sub

sub moveIt()
posL=posL-dx
if posL<=spacerH then setTimeout "showtxt", 1 else setTimeout "moveIt", 1
mover.style.left=posL
end sub

sub showtxt()
txt.filters(0).Apply()
txt.style.visibility="visible"
txt.filters(0).Play(4)
window.setTimeout "scroll", 4000
end sub

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

sub scrollit()
j=j+1
document.body.style.backgroundPosition=-j&" "&j
end sub

sub window_onresize()
window.location.reload()
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.

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