|
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 seizième
cours, nous allons utiliser un grand tag ( ou un papier Top
redimmensionné ),
et 2 tuiles de fond assorties.
Cliquez ici pour visualiser ma page
Télécharger le
matériel ici
Matériel
:
- un tag ou un papier Top
( redimmensionné ) : largeur comprise entre 600 et 1000 pixels
(
selon votre résolution d'écran )
Vous trouverez le tutoriel de mon tag ici
-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 "Cours16".
Ranger le matériel utilisé dans ce dossier.
Voici mon dossier Cours 16 et son contenu.
 
2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous
Enregistrer cette page vierge dans le dossier Cours 16 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 , les boutons pour le 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 {
border: #615241 2px solid;
scrollbar-track-color: #615241;
scrollbar-base-color: #d8cdc6;
scrollbar-shadow-color: #d8cdc6;
scrollbar-arrow-color: #615241;
scrollbar-highlight-color: #615241;
}
.table {
border-right: #615241 1px solid;
filter: RevealTrans;
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width: 50%;
}
.pl1 {
position: absolute;
left: -1800px;
top: -1800px;
}
.pl {
filter: RevealTrans;
position: absolute;
left: -1800px;
top: -1800px;
visibility: hidden;
}
.knop{
border: #615241 3px solid;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: Comic Sans MS;
font-size: 13pt;
color: #615241;
filter: alpha(opacity=75);
background-color: #d8cdc6;
text-align:center;
}
.tekst {
border: #615241 3px solid;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=60)RevealTrans;
padding: 75px;
left: 0px;
position: absolute;
top: 0px;
font-family: Comic Sans MS;
font-size: 15pt;
color: #615241;
overflow: auto;
text-align: center;
background-Color: #d8cdc6;
}
</style> |
Comme cela.
** Explications **
border: #615241 2px solid;
scrollbar-track-color: #615241;
scrollbar-base-color: #d8cdc6;
scrollbar-shadow-color: #d8cdc6;
scrollbar-arrow-color: #615241;
scrollbar-highlight-color: #615241; |
Ici
on definit, la couleur de la scrollbar et les bordures autour de
la page. |
.knop{
border: #615241 3px solid;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: Comic Sans MS;
font-size: 13pt;
color: #615241;
filter: alpha(opacity=75);
background-color: #d8cdc6;
text-align:center; |
Ici
, on définit les boutons qui ouvrent puis ferment la boite
de texte: Couleur de fond, écriture et bordure |
tekst {
border: #615241 3px solid;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Alpha(Style=0, opacity=60)RevealTrans;
padding: 75px;
left: 0px;
position: absolute;
top: 0px;
font-family: Comic Sans MS;
font-size: 15pt;
color: #615241;
overflow: auto;
text-align: center;
background-Color: #d8cdc6; |
Ici on
définit la boite de texte : Couleur de fond ( avec
transparence), bordure et police pour le texte |
5- Insertion de la première tuile.
Mettre la première balise BODY notée
<BODY> en surbrillance ( bleu)
Copier puis coller cette ligne par dessus cette balise en surbrillance.
| <body bgColor=#d8cdc6 background="tuile2.jpg" scroll=no> |
Vous
obtenez ceci
Ici , pour mon exemple, ma tuile 2 est celle qui apparait la première sur la page.
Pour votre version, changer "tuile2.jpg" par le nom de votre tuile.
6 - Insertion de la seconde tuile.
Copier ce code.
<!--seconde tuile-->
<img class=pl1 id=picl
src="tuile1.jpg"> |
Puis coller le sous l'insertion de la tuile ( ligne 66 environ ), entre
les balises <body> et </body>
Comme cela
Modifier le nom de la tuile pour votre version.
7- Insertion du tag et de la boite de texte et ses boutons.
Nous allons insérer à la suite l'image centrale ( tag ou papier top ) ainsi que la boite de texte et les
boutons pour ouvrir et fermer.
Pour que tout cela soit centré sur la page, nous allons les insérer dans un tableau ( invisible )
* Attention*
Il est impératif de bien mettre la boite de texte aux dimmensions de l'image.
Copier et coller ceci à la suite de l'insertion de la seconde tuile, environ vers le ligne 69.
<table class=table id=tab><tr><td></td></tr></table>
<!--Image et sa taille-->
<img class=pl id=pic style="width: 648px; height: 448px"
src="MystereLea.jpg">
<!--Boite de texte ==>Taille identique a l image -->
<div class="tekst" id="mess" style="width: 648px; height: 448px;">
Votre message ici..
</div>
<button id="knop2" class="knop" width="35" height="175"
hidefocus="true"> i<br>m<br>a<br>g<br>e </button>
<button id="knop1" class="knop" width="35" height="175"
hidefocus="true"> t<br>e<br>x<br>t<br>e </button> |
Comme ceci:
Quelques explications
| <table class=table id=tab><tr><td></td></tr></table> |
Les balises <table> et </table>
definissent le tableau |
<!--Image et sa taille-->
<img class=pl id=pic style="width: 648px; height: 448px"
src="MystereLea.jpg"> |
L'image et ses dimmensions |
<!--Boite de texte ==>Taille identique a l image -->
<div class="tekst" id="mess" style="width: 648px; height: 448px;">
Votre message ici..
</div> |
La boite de texte aux mêmes dimmensions
que l'image, ainsi que le texte. |
<button id="knop2" class="knop" width="35" height="175"
hidefocus="true"> i<br>m<br>a<br>g<br>e </button>
<button id="knop1" class="knop" width="35" height="175"
hidefocus="true"> t<br>e<br>x<br>t<br>e </button> |
Les 2 boutons "image " et "texte" et leurs dimmensions.
Comme les boutons sont à la verticale, notez les balises <br> (saut de ligne ) entre les lettres |
Pour votre version, pensez à faire les modifications nécéssaires ( ex : taille des boutons, etc...)
8- Insertion du script
A la suite de tout cela ( environ ligne 85 ), placez ce code.
<script language=vbscript>
'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
'---------------------------------------------
'please leave all these lines in
'script gemaakt door JettyM augustus 2006
'www.molehofje.com
'tekst tussen deze lijnen aub laten staan
'---------------------------------------------
'/////////////////////////////////////////////
SetLocale("en-gb")
DIM sch, scw
a=0
n=0
pich=pic.offsetheight
picw=pic.offsetwidth
kw=knop1.width
kh=knop1.height
Sub Window_Onload()
scw=document.body.clientWidth
sch=document.body.clientHeight
tab.style.backgroundImage="URL("&picl.src&")"
tab.style.height=sch
pic.style.posTop=(sch/2)-(pich/2)
pic.style.posLeft=(scw/2)-(picw/2)
mess.style.posTop=(sch/2)-(pich/2)
mess.style.posLeft=(scw/2)-(picw/2)
knop1.style.left=(scw-kw)-20
knop1.style.top=(sch-kh)/2
knop1.style.width=kw
knop1.style.height=kh
knop2.style.left=(scw-kw)-20
knop2.style.top=(sch-kh)/2
knop2.style.width=kw
knop2.style.height=kh
window.SetTimeOut "show1", 200
End Sub
Sub show1()
ClearTimeOut
tab.filters(0).Apply()
tab.filters(0).Transition=6
tab.style.Visibility="visible"
tab.filters(0).Play(7.000)
window.SetTimeOut "show2", 6000
End Sub
Sub show2()
ClearTimeOut
pic.filters(0).Apply()
pic.filters(0).Transition=6
pic.style.Visibility="visible"
pic.filters(0).Play(7.000)
window.SetTimeOut "knop",7000
window.setTimeout "scroll", 7500
End Sub
sub scroll()
window.setInterval "scrollit", 64
end sub
sub scrollIt()
a=a+1
n=n-1
tab.style.backgroundposition=a&" "&a
document.body.style.backgroundPosition=n&" "&a
end sub
sub knop()
knop1.style.visibility="visible"
end sub
sub knop1_onclick()
mess.filters(1).Apply()
mess.filters(1).transition=7
mess.style.visibility="visible"
mess.filters(1).Play(7.000)
knop2.style.visibility="visible"
knop1.style.visibility="hidden"
end sub
sub knop2_onclick()
mess.filters(1).Apply()
mess.filters(1).transition=7
mess.style.visibility="hidden"
mess.filters(1).Play(7.000)
knop1.style.visibility="visible"
knop2.style.visibility="hidden"
end sub
sub Window_OnResize()
window.location.reload()
end sub
</script> |
Le script permet de faire apparaitre la seconde tuile, l'image et la boite de texte,
puis fait scroller les deux tuiles.
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="Evergreen.mid" volume=0 loop=99> |
Modifier "Evergreen.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.
|
|
|
|