|
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
quatrième cours, nous allons utiliser une tuile pour le fond
de la page, une image et une musique.
Nous allons utiliser un script pour faire apparaitre l'image en fondu.
Matériel : - une tuile avec mosaïque sans jointure
par défaut
- une belle image ( tag ou cadre )
- 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 le nommer "cours4".
Ranger le matériel dans ce dossier.
Voici mon dossier "cours4" et son contenu.
 
2- Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous
Enregistrer cette page vierge dans le dossier "cours4" en n'oubliant
pas de la nommer.
3- Insertion de la tuile en fond de page.
Copier cette ligne
| <body
background="NomDeLaTuile.jpg"> |
Dans
Script Edit, mettre en surbrillance la première balise BODY
notée ainsi <body>, ( environ ligne 6)
Cliquer droit sur la balise en bleu et coller à la place.
Vous obtenez ceci
Changer NomDeLaTuile.jpg par le nom de votre tuile.
Par exemple, NomDeLaTuile.jpg devient tuile.jpg pour ma page.
4 - Insertion de la bordure et de la scrollbar.
Copier et coller ce code après la première balise
notée <Head>, ( environ ligne 3)
<style>
body{border-top:#XXXXXX
10px ridge;
border-bottom:#XXXXXX 10px ridge;
border-left:#XXXXXX 10px ridge;
border-right:#XXXXXX 10px
ridge;
scrollbar-3dlight-color:#XXXXXX;
scrollbar-arrow-color:#XXXXXX;
scrollbar-face-color:#XXXXXX;
scrollbar-shadow-color:#XXXXXX;
scrollbar-darkshadow-color:#XXXXXX;
scrollbar-heighlight-color:#XXXXXX;
scrollbar-base-color:#XXXXXX;
scrollbar-track-color:#XXXXXX;
</style> |
Cette
scrollbar est un peu plus compliquée que celle
utilisée pour les précédents scripts.
Nous ajoutons en même temps une bordure à notre
page,
puis
diverses couleurs pour la scrollbar ( ses facettes et ses ombres ).
Amusez vous à jouer avec les couleurs.
border-top
===> Bordure du haut
border-bottom
====> Bordure du bas
border-left===>
Bordure de gauche
border-right
===> Bordure de droite
5- Changer les #XXXXXX par les codes des couleurs assorties
à l'image et à la tuile.
Vous obtenez ceci
* Pour votre version personnelle, vous pouvez changer la forme de la bordure,
simplement en changeant le mot "ridge"
Voici quelques exemples ( la bordure est de couleur blanche)
ridge ====> 
groove ====> 
inset ===> 
outset ===> 
6- Titre de la page.
Entre les balises <title> et </title>,
écrire le titre de la page .
Pour mon exemple, j' ai donné comme titre "Cours 4", comme
cela
7- Insertion de la musique.
Copier cette ligne.
| <bgsound
src="NomDeLaMusique.mid" balance=0 loop=99 volume=0> |
Puis coller entre les 2 balises <head< et
</head>.
Sur ma page, je l' ai collé après le titre; comme
cela sur la ligne 20.
Changer NomDeLaMusique.mid par le nom de votre musique.
Pour mon exemple, NomDeLaMusique.mid devient music.mid, comme cela
8- Insertion de l'image et du script.
*insertion
de l'image
Copier et coller cette ligne entre
les balises <body> et </body> ( environ
à la ligne 24)
| <p
align=center class=ro><img src="NomDeLImage.jpg"
style="filter:revealtrans;visibility:hidden"
id=mar></p> |
Comme cela
Changer NomDeLImage.jpg pour le nom de votre image.
Pour mon exemple NomDeLImage.jpg devient cadre.jpg
Comme cela
* Insertion
du script qui va faire apparaitre l'image en fondu.
Copier et coller le script entre
les balises <body> et </body>
après l'insertion de l'image
, environ vers la ligne 25.
<script
language=vbscript>
ma=0
jo=0
sub
window_onload()
setinterval
"scroll",64
settimeout"start",3000
end sub
sub start()
cleartimeout
mar.filters(0).apply()
mar.filters(0).transition=12
mar.style.visibility="visible"
mar.filters(0).play(3.000)
end sub
sub
scroll()
end sub
</script> |
Comme cela
9 - Insertion du texte.
Comme nous l' avons vu au cours 2, il faut commencer par
définir, la police, sa taille et sa couleur.
Ici, je vais mettre un titre souligné en haut de ma page,
puis un texte sous l'image.
*
Le titre.
Copier et coller cette ligne
après la première balise body notée
ainsi <boby>, environ à la ligne 24
| <p
align="center"><font face="Script Mt Bold"
color="#652A03" size="8"> |
Comme
cela.
Ici, j' ai choisi que le texte soit centré ( p
align="center" ) . J'ai choisi la police
Script Mt Bold, taille 8, et couleur #652A03.
A vous de décider de votre police, taille et couleur.
Une fois la police définie, 2crire le titre comme nous l'
avons
vu au cours 2,
sous la ligne la définissant que vous venez de
coller.
Comme j' ai voulu le souligner, je l' ai ecris entre deux balises
<u> et </u>; comme cela
<u>Le
ciel</u>
Voici ce que j'obtiens en visualisant ma page.
Sur votre page, changer si besoin, la taille car elle varie selon la
police.
*
Le texte sous l'image.
J'ai voulu que le texte sous
l'image soit plus petit que le titre, c'est pour cela qu il faut
redéfinir la police et sa taille.
Copier et coller cette ligne sous l'insertion de l'image ( environ
ligne 27)
| <p
align="center"><font face="Script Mt Bold"
color="#652A03" size="6"> |
Comme cela.
Changer le nom de la police, la couleur et la taille.
Ecrire le texte, comme nous l' avons vu au cours 2.
10- Vous devez avoir ceci
11- Visionner la page .
12- Félicitation, vous avez terminé !!
13- Enregistrer la page puis l' heberger.
|
