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

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un tag : Taille assez grande ( minimum 700 pixels de large et 500 pixels de hauteur )


- 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 "Cours23".
Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours30 et son contenu.

              

2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 30 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 - Les bordures, le fond de page, la scrollbar et la zone 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 {
border: 1px solid #XXXXXX;
background-color: #XXXXXX;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#XXXXXX, endColorstr=#XXXXXX, GradientType=0, enabled=1);
scrollbar-track-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;
}
.tab {
border: 40px solid #XXXXXX;
visibility: hidden;
left: -1800px; position: absolute; top: -1800px;
}
.lijn1{
background-color: #XXXXXX;
visibility: hidden;
left: -1800px; position: absolute; top: -1800px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80 style=3)
progid:DXImageTransform.Microsoft.Wave(add=0,lightstrength=10,phase=50,strength=10,freq=15)
}
.lijn2{
background-color: #XXXXXX;
visibility: hidden;
left: -1800px; position: absolute; top: -1800px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80 style=3)
progid:DXImageTransform.Microsoft.Wave(add=0,lightstrength=10,phase=0,strength=10,freq=15)
}
.offs {
left: -1800px; position: absolute; top: -1800px;
}
.knop{
border: 0px solid;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: "Times New Roman";
font-size: 18pt;
color: #000000;
background: none;
text-align:center;
}
.tekst {
border: 3px solid #XXXXXX;
z-index:6;
padding: 75px;
font-family: "Times New Roman";
font-size: 17pt;
font-weight: bold;
color: #000000;
left: 5%;
position: absolute;
top: 5%;
visibility: hidden;
overflow: auto;
height: 90%;
width: 90%;
background-Color: #XXXXXX;
text-align:center;
}
</style>



Comme cela.



** Explications **
border: 1px solid #XXXXXX;
background-color: #XXXXXX		 Ici on définit, la couleur de la petite bordure autour de la page et la couleur du fond de page.
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#XXXXXX, endColorstr=#XXXXXX, GradientType=0, enabled=1); Ici on définit le dégradé qui va s'appliqué à la page
scrollbar-track-color: #XXXXXX;
scrollbar-base-color: #XXXXXX;
scrollbar-shadow-color: #XXXXXX;
scrollbar-arrow-color: #XXXXXX;
scrollbar-highlight-color: #XXXXXX;		 Ici on définit les couleurs de la scrollbar
.tab {
border: 40px solid #XXXXXX;
visibility: hidden;		 Ici on définit la couleur de la bordure qui encadre le tag.
.lijn1{
background-color: #XXXXXX;
visibility: hidden;
left: -1800px; position: absolute; top: -1800px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80 style=3)
progid:DXImageTransform.Microsoft.Wave(add=0,lightstrength=10,phase=50,strength=10,freq=15)
}
.lijn2{
background-color: #XXXXXX;
visibility: hidden;
left: -1800px; position: absolute; top: -1800px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80 style=3)
progid:DXImageTransform.Microsoft.Wave(add=0,lightstrength=10,phase=0,strength=10,freq=15)
}		 Ici on définit la couleur des petites lignes ondulées qui vont apparaitre à droite et à gauche du tag
.knop{
border: 0px solid;
cursor:hand;
position:absolute;
left:-1800px;
top:-1800px;
visibility:hidden;
font-family: "Times New Roman";
font-size: 18pt;
color: #000000;
background: none;
text-align:center;		 Ici on définit le bouton pour afficher la zone de texte ou l' image
.tekst {
border: 3px solid #XXXXXX;
z-index:6;
padding: 75px;
font-family: "Times New Roman";
font-size: 17pt;
font-weight: bold;
color: #000000;
left: 5%;
position: absolute;
top: 5%;
visibility: hidden;
overflow: auto;
height: 90%;
width: 90%;
background-Color: #XXXXXX;
text-align:center;
}		 Ici on définit la zone de texte.

Pensez à mettre les codes de couleurs

5- Insertion du tag; et de la boite de texte

Sous le première balise BODY, notée <body>, copier et coller cette ligne. ( environ ligne 71 )

<div class="tab" id="tb"></div>

<!--Image et sa taille-->
<img class="offs" id="pic" style="visibility: hidden;" src="Tag.jpg" width="880" height="698">

<table class="lijn1" id="t1" cellSpacing="0" cellPadding="0" width="4"><tr><td></td></tr></table>
<table class="lijn2" id="t2" cellSpacing="0" cellPadding="0" width="4"><tr><td></td></tr></table>
<table class="lijn1" id="t3" cellSpacing="0" cellPadding="0" width="4"><tr><td></td></tr></table>
<table class="lijn2" id="t4" cellSpacing="0" cellPadding="0" width="4"><tr><td></td></tr></table>

<!--boite de texte-->
<div class="tekst" id="mess">Votre message ici...

</div>

<button id="knop2" class="knop" width="175" height="35" hidefocus="true"> image </button>
<button id="knop1" class="knop" width="175" height="35" hidefocus="true"> texte </button>
<div class="offs" id="faux" style="width: 100%; height: 100%"></div>

Vous obtenez ceci




Pour votre version, changer le nom du tag et sa dimmmension.

6 - Insertion du script
Copier ce code.

<script language=vbscript>
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'oktober 2008
'please leave these lines in
'---------------------------

option explicit
SetLocale("en-gb")

Dim docw,doch,picw,pich,kw,kh,bw,F1,F2,t1h

F1="revealTrans"
F2="alpha(opacity=75)"

picw=pic.offsetwidth
pich=pic.offsetheight
kw=knop1.width
kh=knop1.height
bw=10
t1h=1

sub window_onLoad()
window.setTimeout "start1", 500
go
size_and_position
end sub

sub size_and_position ()
docw=document.body.clientWidth
doch=document.body.clientHeight
document.body.style.overflowX="hidden"
if document.body.clientHeight>(pich+bw*14) then doch=document.body.clientHeight else doch=(pich+bw*14)
pic.style.left=docw/2-picw/2
pic.style.width=picw
pic.style.top=doch/2-pich/2
pic.style.height=pich
mess.style.left=docw/2-picw/2
mess.style.width=picw
mess.style.top=doch/2-pich/2
mess.style.height=pich
tb.style.left=docw/2-picw/2-bw*4
tb.style.width=picw+bw*8
tb.style.top=doch/2-pich/2-bw*4
tb.style.height=pich+bw*8
t1.style.top=doch/2-pich/2
t1.style.left=docw/2-picw/2-bw*3
t2.style.top=doch/2-pich/2
t2.style.left=docw/2-picw/2+picw+8
t3.style.top=doch/2-pich/2+pich-pich/2+3
t3.style.left=docw/2-picw/2-bw*3
t4.style.top=doch/2-pich/2+pich-pich/2+3
t4.style.left=docw/2-picw/2+picw+8
faux.style.top=(pic.height+bw*12)
faux.style.height=bw*2
faux.style.left=0
knop1.style.left=docw/2-picw/2+(picw/2-kw/2)
knop1.style.top=doch/2-pich/2+pich+2
knop1.style.width=kw
knop1.style.height=kh
knop2.style.left=docw/2-picw/2+(picw/2-kw/2)
knop2.style.top=doch/2-pich/2+pich+2
knop2.style.width=kw
knop2.style.height=kh
end sub

sub start1()
pic.style.filter=F1
pic.filters(0).Apply()
pic.filters(0).transition=17
pic.style.visibility="visible"
pic.filters(0).Play(3.000)
tb.style.filter=F1
tb.filters(0).Apply()
tb.filters(0).transition=19
tb.style.visibility="visible"
tb.filters(0).Play(3.000)
knop1.style.visibility="visible"
window.setTimeout "grow", 3500
end sub

Sub grow()
t1h=t1h+2
t1.style.visibility="visible"
t2.style.visibility="visible"
t3.style.visibility="visible"
t4.style.visibility="visible"
t1.style.height=t1h
t2.style.height=t1h
t3.style.height=t1h
t4.style.height=t1h
if t1h>pich/2 then SetTimeOut "shrink",10 else SetTimeOut"grow",10
End Sub
Sub shrink()
t1h=t1h-2
t1.style.height=t1h
t2.style.height=t1h
t3.style.height=t1h
t4.style.height=t1h
if t1h<10 then SetTimeOut "grow",10 else SetTimeOut"shrink",10
End Sub
sub go()
end sub

sub knop1_onclick()
mess.style.filter=F2
mess.style.visibility="visible"
knop2.style.visibility="visible"
knop1.style.visibility="hidden"
end sub
sub knop2_onclick()
mess.style.visibility="hidden"
knop1.style.visibility="visible"
knop2.style.visibility="hidden"
end sub

sub window_onresize()
size_and_position
end sub

</script>


Puis coller à la suite ( toujours entre les balises <body> et </body>


7- 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="Music.mid" volume="0" loop="infinite">


Modifier "Music.mid" par le nom de votre musique.


8 - Votre page est terminée.

Vous pouvez visualiser votre page.

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