|
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 quinzième
cours, nous allons utiliser un grand tag ( ou un papier Top redimmensionné ),
une tuile de fond et une bordure.
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 500 et 900 pixels
( selon votre résolution d'écran )
Vous trouverez le tutoriel de mon tag ici
-une
tuile
- une bordure
-
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 "Cours15".
Ranger le matériel utilisé dans ce dossier.
Voici mon dossier Cours 15 et son contenu.
 
2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous
Enregistrer cette page vierge dans le dossier Cours 15 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{
background-color: #000000;
background-attachment: fixed;
border: ridge 3px #514B4D;
scrollbar-base-color: #514B4D;
scrollbar-track-color: #B7A8AF;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #B7A8AF;
scrollbar-arrow-color: #000000;
text-align:center;
}
.offscrn{
left:-1800px;
top:-1800px;
position:absolute;
}
.knop{
background-color:#7E7377;
font-family:verdana;
font-size: 12pt;
color: #000000;
border: solid 1px #000000;
}
.mess{
filter: alpha(opacity=88);
background-color:#000000;
border: double 6px #000000;
font-family:Mistral;
font-size:18pt;
color:#7E7377;
</style> |
Comme cela.
** Explications **
background-color: #000000;
background-attachment: fixed;
border: ridge 3px #514B4D;
scrollbar-base-color: #514B4D;
scrollbar-track-color: #B7A8AF;
scrollbar-highlight-color: #000000;
scrollbar-shadow-color: #B7A8AF;
scrollbar-arrow-color: #000000; |
Ici on definit, la couleur de fond, la scrollbar, et les bordures autour de la page. |
.knop{
background-color:#7E7377;
font-family:verdana;
font-size: 12pt;
color: #000000;
border: solid 1px #000000; |
Ici
, on définit les boutons qui ouvrent puis ferment la boite de texte: Couleur de fond, écriture et bordure |
.mess{
filter: alpha(opacity=88);
background-color:#000000;
border: double 6px #000000;
font-family:Mistral;
font-size:18pt;
color:#7E7377;
.bg {
top:-1800px;
position:absolute;
left:-1800px;
} |
Ici on définit la boite de texte : Couleur de fond ( avec transparence), bordureet police pour le texte |
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.
| <body background="tuile.jpg" scroll="no"> |
Vous
obtenez ceci
Changer "tuile.jpg" par le nom de votre tuile.
6 - Insertion du tag
Copier ce code.
<!-- image et taille -->
<img src="GoticTag.jpg" width="654" height="454" id="pic" class="offscrn" style="visibility:hidden;"> |
Puis coller le sous l'insertion de la tuile ( ligne 41 environ ), entre
les balises <body> et </body>
Comme cela
Modifier le nom du tag, et sa taille pour votre version
7- Insertion des bordures
Copier ce code et coller le sous l' insertion du tag.
<!-- bordure et taille -->
<img src="bordure.jpg" width="100" height="308" id="bkg" class="offscrn">
<!-- Containers pour bordure_ Ne rien changer -->
<div id="jet1" class="offscrn" style="width: 10px; height: 10px; visibility:hidden;"></div>
<div id="jet2" class="offscrn" style="width: 10px; height: 10px; visibility:hidden;"></div> |
Comme ceci:
Modifier le nom de votre bordure et sa dimmension.
8- Insertion des boutons pour Ouvrir et Fermer la boite de texte.
A la suite de tout cela ( environ ligne 49 ), placez ce code.
<!-- Boutons pour texte et image -->
<button
id="but1" width="100" height="30" HIDEFOCUS="true" class="knop"
style="left:-1800px; top:-1800px; position:absolute; cursor:hand;
visibility:hidden; z-index:2;">Image</button>
<button
id="but2" width="100" height="30" HIDEFOCUS="true" class="knop"
style="left:-1800px; top:-1800px; position:absolute; cursor:hand;
visibility:hidden; z-index:2;">Texte</button> |
Vous avez la possibilité de modifier la taille des boutons :width="100" height="30
9- Insertion du texte
A la suite de tout ceci, on place le texte.
Copier et coller ce code à la suite ( environ ligne 52 )
<!-- Boite de texte -->
<div id="txt" class="mess" style="position:absolute; left:5%;
top:5%; width: 90%; height:90%; visibility:hidden; overflow:auto;
padding:15px;">Ecrire le message ici </div> |
Ecrire votre texte à la place de " Ecrire le message ici "
11- Insertion du script.
Pour finir, il faut insérer le script , ce qui va permettre de visualiser la page.
Copier et coller le script à la suite de tout ce que nous avons déjà placé.
<script language="VBScript">
'---------------------------
'Script written by Annem@rie
'http://www.annemaries.nl/
'januari 2005
'please leave these lines in
'---------------------------
Option Explicit
SetLocale("en-gb")
Dim doch, docw, j, m
j=0
m=0
jet1.style.backgroundImage="url("&bkg.src&")"
jet2.style.backgroundImage="url("&bkg.src&")"
sub window_Onload()
size_and_position
start
end sub
sub size_and_position()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
pic.style.left=(docw-pic.width)/2
pic.style.top=(doch-pic.height)/2
jet1.style.left=20
jet1.style.top=0
jet1.style.width=bkg.width
jet1.style.height=doch
jet2.style.left=docw-bkg.width-20
jet2.style.top=0
jet2.style.width=bkg.width
jet2.style.height=doch
but1.style.left=(docw-but1.width)/2
but1.style.top=doch-but1.height
but1.style.width=100
but1.style.height=30
but2.style.left=(docw-but1.width)/2
but2.style.top=doch-but1.height
but2.style.width=100
but2.style.height=30
txt.style.left=(docw-pic.width)/2
txt.style.top=(doch-pic.height)/2
txt.style.width=pic.width
txt.style.height=pic.height
jet1.style.filter="progid:DXImageTransform.Microsoft.Iris(enabled=1, irisStyle=diamond, motion=out)"
jet2.style.filter="progid:DXImageTransform.Microsoft.Iris(enabled=1, irisStyle=diamond, motion=out)fliph"
pic.style.filter="progid:DXImageTransform.Microsoft.Iris(enabled=1, irisStyle=diamond, motion=out)"
end sub
sub start()
jet1.filters(0).Apply()
jet1.style.visibility="visible"
jet1.filters(0).Play(3)
jet2.filters(0).Apply()
jet2.style.visibility="visible"
jet2.filters(0).Play(3)
window.setTimeout "showimage", 2500
end sub
sub showimage()
pic.filters(0).Apply()
pic.style.visibility="visible"
pic.filters(0).Play(3)
window.setTimeout "komop", 3000
end sub
sub komop()
window.setInterval "scrollit", 64
but2.style.visibility="visible"
end sub
sub but2_onclick()
txt.style.visibility="visible"
but1.style.visibility="visible"
but2.style.visibility="hidden"
end sub
sub but1_onclick()
txt.style.visibility="hidden"
but1.style.visibility="hidden"
but2.style.visibility="visible"
end sub
sub scrollit()
j=j+1
jet1.style.backgroundPosition=m&" "&-j
jet2.style.backgroundPosition=m&" "&j
end sub
sub window_Onresize()
size_and_position
end sub
</script> |
12 - Insertion de la musique
Pour finir notre page, il ne manque plus que la musique.
Copier et coller ce code entre les deux balises HEAD, notée <head> et </head>
| <bgsound src="herecom.mid" balance="0" volume="0" loop="-1"> |
Je l' ai placé sur la ligne 4.
Modifier "herecom.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.
|
|
|
|