|
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
dix-neuvième
cours, nous allons utiliser un grand tag , et
2 tuiles de fond assorties : une tuile pour le fond, et une tuile qui
va scroller.
Cliquez ici pour visualiser ma page
Télécharger le
matériel ici
Matériel
:
- un Tag
Vous trouverez le tutoriel de ce tag dans la section 3 du forum Janaly
-2
tuiles assorties au tag ou au papier
-
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 "Cours19".
Ranger le
matériel utilisé dans ce dossier.
Voici mon
dossier Cours 19 et son contenu.
 
2 -
Ouvrir Script Edit.
Faire
Fichier ===> Enregistrer sous
Enregistrer
cette page vierge dans le dossier Cours 19 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 - La scrollbar, les bordures et la boite de texte
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: #9ebbc1;
border: ridge 3px #447bb1;
scrollbar-base-color: #9ebbc1;
scrollbar-track-color: #9ebbc1;
scrollbar-highlight-color: #447bb1;
scrollbar-shadow-color: #447bb1;
scrollbar-arrow-color: #447bb1;
margin:0px;
}
.mess{
border: ridge 1px #447bb1;
padding:8px;
text-align:center;
height:150px;
font-family:Papyrus;
font-weight:bold;
font-size:12pt;
color:#16177c;
overflow:auto;
width:550px;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}
.randjes{
border: #447bb1 1px ridge;
}
</style> |
Comme cela.
** Explications **
background-color: #9ebbc1;
border: ridge 3px #447bb1;
scrollbar-base-color: #9ebbc1;
scrollbar-track-color: #9ebbc1;
scrollbar-highlight-color: #447bb1;
scrollbar-shadow-color: #447bb1;
scrollbar-arrow-color: #447bb1; |
Ici
on definit, la couleur de la scrollbar et les bordures autour
de
la page. |
.mess{
border: ridge 1px #447bb1;
padding:8px;
text-align:center;
height:150px;
font-family:Papyrus;
font-weight:bold;
font-size:12pt;
color:#16177c;
overflow:auto;
width:550px; |
Ici
on définit la boite de texte : couleur et taille de la bordure,
police et couleur du texte, ainsi que les dimmensions de la boite de
texte ( ex 150 * 550 ) |
.randjes{
border: #447bb1 1px ridge; |
Ici on
définit la bordure qui encadrera les tuiles : taille et couleur |
Pour votre version, modifier la dimmension de la boite de texte ou des bordures.
5- Insertion des deux tuiles
Nous allons commencer par placer les deux tuiles.
Copier ces deux lignes
<!-- tuile de fond -->
<img src="tuile.jpg" class="offscrn" id="hud">
<!-- tuile qui scrolle -->
<img src="tuile2.jpg" class="offscrn" id="rid"> |
Puis coller les sous la première balise BODY, notée <body>, comme ceci :
Pour votre version, modifier le nom des tuiles.
6 - Insertion de l'image et de la boite de texte.
L'image centrale et le texte sont insérés dans un tableau.
Copier ceci, et coller le à la suite de l'insertion des deux tuiles ( environ ligne 47 )
<div style="left:0px; top:15px; position:absolute; width:100%">
<table id="tab1" align="center" width="90%" cellspacing="5" class="randjes">
<tr><td align="center">
<table id="tab2" align="center" width="100%" cellspacing="25" class="randjes">
<tr><td align="center">
<table id="tab3" align="center" width="100%" cellspacing="5" class="randjes">
<tr><td align="center">
<table id="tab4" align="center" width="100%" cellspacing="25" class="randjes">
<tr>
<td align="center" rowspan="2" id="td1" width="75" class="randjes"
style="visibility:hidden;
filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=25,
enabled=0);">
</td>
<td align="center">
<!-- image -->
<img src="Freedom.jpg" id="pic1" style="visibility:hidden;
filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle=SPIN,
enabled=1);">
</td>
<td align="center" rowspan="2" id="td2" width="75" class="randjes"
style="visibility:hidden;
filter:progid:DXImageTransform.Microsoft.Pixelate(maxSquare=25,
enabled=0);">
</td></tr>
<tr><td align="center">
<div class="mess">
Votre message ici
</div></td></tr></table></td></tr></table></td></tr></table></td></tr></table>
</div> |
Comme cela
Modifier le nom de la tuile pour votre version, et écrire votre texte.
7- Insertion du script
A la suite de ceci, nous allons placer le script, toujours entre les 2 balises BODY.
Copier et coller le script à la suite de ce que vous venez de placer ( environ ligne 71 )
<script language=vbscript>
'------------------------------------------
'please leave all these lines in
'Script (19) gemaakt door Jetty
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------
Dim j, m
j=0
m=0
Sub Window_onload()
tab1.style.backgroundImage="URL("&rid.src&")"
tab2.style.backgroundImage="URL("&hud.src&")"
tab3.style.backgroundImage="URL("&rid.src&")"
tab4.style.backgroundImage="URL("&hud.src&")"
td1.style.backgroundImage="URL("&rid.src&")"
td2.style.backgroundImage="URL("&rid.src&")"
document.body.style.backgroundImage="URL("&hud.src&")"
laatzien
End Sub
Sub laatzien()
pic1.filters(0).Apply()
pic1.style.visibility="visible"
pic1.filters(0).Play(4.000)
td1.filters(0).Apply()
td1.style.visibility="visible"
td1.filters(0).Play(4.000)
td2.filters(0).Apply()
td2.style.visibility="visible"
td2.filters(0).Play(4.000)
setTimeOut "scrollit", 4100
End Sub
Sub scrollit()
setInterval "scroll",64
End Sub
Sub scroll()
j=j+1
td1.style.backgroundposition=j&" "&-j
td2.style.backgroundposition=-j&" "&-j
tab1.style.backgroundposition=j&" "&-j
tab3.style.backgroundposition=-j&" "&-j
End Sub
</script> |
Comme ceci:
Pour
l' harmonie de votre page, ne modifiez pas les chiffres du script, mais
rien ne vous empêche de jouer avec les chiffres pour voir les
effets différents que cela donne.
9- Insertion de la musique.
Après les deux balises du titre notées
<title> et </title>, copier et coller ce
code.
| <bgsound src="carrie.mid" balance="0" volume="0" loop="-1"> |
Modifier "carrie.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.
|
|
|
|