Cours 25

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 25 ième cours, nous allons utiliser une tuile, une bordure et une petite image en format png..

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un image en format png ou gif

- une tuile

- une bordure assortie

- 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 "Cours25".

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 25 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 25 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 , la position de la bordure

Copier ce code, puis coller le entre les deux balises HEAD, notée <head> et </head>,

environ sur la ligne 4

</style>

Comme cela.

** Explications **

BORDER: #XXXXXX 3px double;
SCROLLBAR-FACE-COLOR: #XXXXXX;
SCROLLBAR-TRACK-COLOR: #XXXXXX;
SCROLLBAR-BASE-COLOR: #XXXXXX;
SCROLLBAR-ARROW-COLOR: #XXXXXX;
SCROLLBAR-highlight-COLOR: #XXXXXX;

Ici on definit, la couleur de la scrollbar et la bordure autour de la page ( forme ==> double et couleur )

.message{
border: dotted 5px #XXXXXX;
font-family: Papyrus;
font-size: 26 pt;
font-weight:normal;
color: #000000;
overflow:auto;
padding:15px;
text-align:center;
position: absolute;
left: 5%;
top: 5%;
height: 90%;
width: 90%;
filter:Alpha(Opacity=65);
background-color:#XXXXXX;
visibility: hidden;

Ici on définit la boite de texte :

La bordure, la couleur avec le filtre pour baisser l'opacité, la police ( taille, couleur, etc .. )

Pensez à mettre les codes de couleur.
Pour votre version, essayer de modifier les valeurs.

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.

Vous obtenez ceci

Modifier le nom de la tuile si besoin pour votre version.

6 - Insertion de la bordure

Copier ce code.

<img id="bkg" class="offscrn" src="bordure.jpg" width="283" height="325">

<div id="container" class="offscrn" style="width: 10px; height: 10px; border-left: 10px #XXXXXX double; border-right: 10px #XXXXXX double;">
</div>

Puis coller le sous l'insertion de la tuile ( ligne 43 environ ), entre les balises <body> et </body>

Comme cela

Modifier le nom de la bordure et sa dimmension.

Pensez à faire les modifications nécéssaires sur le container de la bordure ( couleurs et /ou dimmension ).

7- Insertion de la boite de texte et de l'image en gif ou png.

A la suite de tout ceci, nous allons insérer la boite de texte et notre petite image.

Copier et coller ce code.

<div id="txt" class="message">Ecrivez votre message</div>

<img id="jrf" class="offscrn" src="chat.png" width="188" height="216">

Comme ceci:

Modifiez le nom de l'image et sa dimmension pour votre version..

8 - Insertion du script.

A la suite de ceci, nous allons insérer le script qui va agir sur tous les élements de la page.

Copier et coller ce code à la suite; soit environ sur la ligne 53

<script language="VBScript">

'------------------------------------------
'please leave all these lines in
'Script gemaakt door JettyM maart 2005
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'------------------------------------------

Option Explicit
SetLocale("en-gb")

REM tekst statusbalk
window.status=" ~~~ Script and design JettyM ~~~ "

Dim docw, doch, c, d, pw, pw2w, pw2h, b, spacer

'-------Gebruiker instellingen---------
REM hieronder de breedte van de border
b=10
REM ruimte rond de tekst
spacer=50
'------Einde gebruiker instellingen-------

c=0
d=0
pw=bkg.width
pw2w=jrf.width
pw2h=jrf.height

sub window_onload()
On Error Resume Next
docw=document.body.clientWidth
doch=document.body.clientHeight
container.style.backgroundImage="URL("&bkg.src&")"
container.style.borderRightWidth=b&"px"
container.style.borderLeftWidth=b&"px"
container.style.left=spacer
container.style.top=0
container.style.height=doch
container.style.width=pw+b*2
txt.style.top=spacer
txt.style.height=doch-spacer*2
txt.style.left=pw+b*2+spacer*2
txt.style.width=docw-(pw+b*2+spacer*3)
txt.style.visibility="visible"
jrf.style.top=doch-(pw2h+5)
jrf.style.left=docw-(pw2w+5)
end sub

window.setInterval "scrollit", 64

sub scrollit ()
c=c+1
container.style.backgroundPosition=d&" "&-c
document.body.style.backgroundPosition=c&" "&d
end sub

sub window_onresize()
window_onload
end sub

</script>

9 - Insertion de la musique.

Après les deux balises du titre, copier et coller ce code.

Modifier le nom de la musique.

10 - Votre page est terminée.

Vous pouvez visualiser votre page.

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