|
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
Pour
ce neuvième cours, nous allons faire un script pour un
papier bas et son entête.
Il est aussi réalisable avec un tag assez grand.
Cliquer ici pour visualiser ma page
Matériel
:
- un papier bas en format jpg
- une entête assortie au papier
- une tuile de couleur unie
- une musique en format midi
* Vous pouvez aussi utiliser un beau tag assez large et
créer une entête assostie
Télécharger le
materiel ici
On
commence.
 |
Cette
flèche pour marquer votre ligne
Clic
gauche pour la déplacer
|
1 - Créer un nouveau dossier et le nommer "Cours9".
Ranger le matériel nécéssaire dedans.
Voici mon dossier Cours9 et son contenu.
 
2 - Ouvrir Script Edit.
Faire Fichier ===> Enregistrer sous
Et enregistrer la page vierge dans votre dossier Cours9 en n'oubliant
pas de la nommer.
3 - Les bordures, la scrollbar, la boite de texte et la police.
Pour commencer, nous allons definir les couleurs de la scrollbar, des
bordures, la boite de texte
, et la police utilisée.
Copier ce code
Puis le coller entre les deux balises HEAD, notées
<head> et </head>
J' ai collé le code sur la ligne 4.
Quelques explications afin que vous sachiez quoi modifier.
background-color:
#000000;
background-attachment:
fixed;
background-repeat:
repeat;
background-position:
left top;
border:
ridge 6px #C3C1C2;
scrollbar-base-color:
#C3C1C2;
scrollbar-track-color:
#C3C1C2;
scrollbar-highlight-color:
#C0C0C0;
scrollbar-shadow-color:
#4A4A4A;
scrollbar-arrow-color:
#4A4A4A; |
Ici
on définie la couleur du fond, les bodures
et
la scrollbar. |
.mess{
border:
dotted 5px #B0AEA1;
padding:10px;
text-align:center;
height:90px;
font-family:Papyrus;
font-size:12pt;
color:#000000;
overflow:auto;
width:800px;
filter:Alpha(Opacity=30);
background-color:#ffffff;
} |
Ici on définie la boite de
message et la police utilisée.
Pour la boite de message; nous utilisons une bordure en
pointillés ( dotted )
La taille de la boite de message est 90 pixels en hauteur et 800 pixels
de largeur
La couleur de fond de la boite de texte est blanche, mais,
l'opacité est modifiée
( filter:Alpha(Opacity=30);
background-color:#ffffff; ) |
Pour
votre version personnelle, amusez vous à modifier les
valeurs de la boite de texte, ou meme sa taille.
4 - Insertion de la tuile.
Pour ce cours, j' ai utilisé une tuile noire, mais si vous
le souhaitez, vous pouvez vous contenter
de garder la couleur de fond de votre page, telle définie au
début du code précedent.
Tout est en fonction de votre papier.
Mettre en surbrillance la première balise BODY,
notée <body>
Puis Copier et coller cette ligne à la place de la balise en
surbrillance.
| <body
background="tuile_noire.jpg"> |
Ce qui donne ceci
Changer si besoin le nom de la tuile par le nom de la tuile
utilisée.
5 - Insertion de l' entête, du papier et du texte.
Comme le script utilisé pour ce cours va agir sur tous ces
éléments; nous allons les installer sur la page en
même temps.
Copier et coller ce code sous l'insertion de la tuile ( environ ligne
37 )
Ce qui
donne ceci
Dans
ce code, vous avez remarqué les balises
<table> et
</table> , ce qui correspond à l'insertion
d'un tableau.
Ici, ce
tableau n' est pas visible, mais il contient 3
éléments.
| <img
src="entete.jpg"> |
On commence par
insérer l' entête |
<div
class=mess>
<div
style=>
Ecrire le
message ici
</div></div> |
Ici,
c'est la boite de texte avec notre message |
| <img
src="papier_bas.jpg"> |
Pour
finir, on insère le papier bas |
N'oubliez
pas de modifier les noms pour votre version.
A cette
étape, en visualisant la page, vous ne verrez rien.
C'est
normal.
On
continue.
6 -
Insertion du script.
Pour que
les éléments de votre page apparaissent, il faut
noter le script.
Copier
et coller ce script à la suite de ce que vous avez
déjà mis, et toujours entre les deux balises BODY.
Soit
environ à la ligne 66 ( tout depend de la longueur de votre
texte )
Maintenant,
vous pouvez déjà admirer votre page.
7 -
Insertion de la musique.
Pour
finir cette page, nous allons maintenant ajouter la musique.
Copier
et coller cette ligne sous l'insertion de la tuile ( après
la
première balise BODY, notée
<body>), soit environ
à la ligne 37.
|
<bgsound
src="True_Blue.mid" balance="0" volume="0" loop="-1">
|
Comme cela
Visionner
votre page.
Vous avez
terminé votre page de script.
Enregistrer
votre travail une dernière fois.
Il ne
reste plus qu'à héberger votre
matériel et votre page.
|