Cours 31

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 31 ième cours, nous allons utiliser un grand tag ,une tuile assortie et une bordure.

Pour ma page, en guise de bordure, j' ai utilisé une image en png

Cliquez ici pour visualiser ma page

Télécharger le matériel ici

Matériel :

- un grang tag

- une tuile

- une bordure

- une musique

Cette flèche pour marquer votre ligne

Clic gauche pour la déplacer

1 - Créer un nouveau dossier et nommer le "Cours31".

Ranger le matériel utilisé dans ce dossier.

Voici mon dossier Cours 31 et son contenu.

2 - Ouvrir Script Edit.

Faire Fichier ===> Enregistrer sous

Enregistrer cette page vierge dans le dossier Cours 31 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 scrollbar, les boutons et zone de texte

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

environ sur la ligne 4

Comme cela.

** Explications **

body{ background-color: #XXXXXX; border: ridge 2px #XXXXXX; scrollbar-base-color: #XXXXXX; scrollbar-track-color: #XXXXXX; scrollbar-highlight-color: #XXXXXX; scrollbar-shadow-color: #XXXXXX; scrollbar-arrow-color: #XXXXXX;	Ici on definit, la bordure autour de la page, la couleur de fond , et les couleurs pour la scrollbar
.knop{ border-top:ridge 1px #XXXXXX; border-right:ridge 1px #XXXXXX; border-left:ridge 1px #XXXXXX; font-family:verdana; font-weight:normal; font-style:italic; font-size:10pt; color:#XXXXXX; background-color:#XXXXXX;	Ici on définit le bouton : couleur et taille de la bordure, police, couleur de fond.
.message{ border-top: double 3px #XXXXXX; border-right: double 3px #XXXXXX; border-left: double 3px #XXXXXX; font-family: Verdana; font-size: 12pt; font-weight:bold; color: #XXXXXX; background-color:#XXXXXX;	Ici on définit la zone de texte : bordure, couleur, police ...

5- Insertion de la tuile et de la bordure

Mettre la première balise BODY notée <BODY> en surbrillance ( bleu)

Copier puis coller cette ligne par dessus cette balise en surbrillance.

<img src="bordure.png" width="70" id="bkg" class="offscrn">

Vous obtenez ceci

Pour votre version, pensez à changer la taille ( largeur ) de votre bordure.

6 - Insertion de l' image principale, des boutons, et la zone de texte

Copier ce code.

<img src="Tag.png" width="800" height="600" id="pic" class="offscrn">

<div id="container" class="offscrn" style="width: 10px; height: 10px;">
</div>

<div id="txt" class="message" style="overflow:auto; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:30px; text-align:center; position: absolute; left: 5%; top: 5%; height: 90%; width: 90%; visibility:hidden;"> Ecrire le message ici </div>

<BUTTON language="VBScript" id="knop2" class="knop" width="180" height="22" style="text-align:center; cursor:hand; position:absolute; left:-1800px; top:-1800px; visibility:hidden;" hideFocus onclick=hidetext()> Fermer le message </BUTTON>
<BUTTON language="VBScript" id="knop1" class="knop" width="180" height="22" style="text-align:center; cursor:hand; position:absolute; left:-1800px; top:-1800px; visibility:hidden;" hideFocus onclick=showtext()> Message </BUTTON>

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

Comme cela

Quelques explications :

<img src="Tag.png" width="800" height="600" id="pic" class="offscrn">	Insertion de l' image avec sa dimmension.
<div id="txt" class="message" style="overflow:auto; padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:30px; text-align:center; position: absolute; left: 5%; top: 5%; height: 90%; width: 90%; visibility:hidden;"> Ecrire le message ici </div>	Insertion de la zone de texte et du texte
<BUTTON language="VBScript" id="knop2" class="knop" width="180" height="22" style="text-align:center; cursor:hand; position:absolute; left:-1800px; top:-1800px; visibility:hidden;" hideFocus onclick=hidetext()> Fermer le message </BUTTON> <BUTTON language="VBScript" id="knop1" class="knop" width="180" height="22" style="text-align:center; cursor:hand; position:absolute; left:-1800px; top:-1800px; visibility:hidden;" hideFocus onclick=showtext()> Message </BUTTON>	Insertion des 2 boutons

7- Insertion du script

A la suite de tout cela ( environ ligne 62 ), placez ce script.

'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
'---------------------------------------------
'please leave all these lines in
'Script gemaakt door JettyM mei 2006
'www.molehofje.com
'Tekst tussen deze lijnen aub laten staan
'---------------------------------------------
'/////////////////////////////////////////////

Option Explicit
SetLocale("en-gb")

Dim doch, docw, pW, pH, bW, space, txtw, txth, txtl, txtt, LP, kW, kH, j, m, speed
j=0
m=0
pW=pic.width
pH=pic.height
bW=bkg.width
kW=knop1.width
kH=knop1.height
LP=space

'-------User Settings-------------
REM space between edge window en scrolling image
space=10

REM speed show textbox
speed=10

REM text statusbar
window.status=" ~~~ Script and stationery JettyM ~~~ "

REM width textbox
txtw=350

REM width textbox
txth=400

'------end of User Settings-------

sub window_Onload()
On Error Resume Next
doch=document.body.clientheight
docw=document.body.clientwidth
container.style.backgroundImage="URL("&bkg.src&")"
container.style.left=space
container.style.top=0
container.style.height=doch
container.style.width=bW
pic.style.left=(docw-pW)/2+(space+bW)/2
pic.style.top=(doch-pH)/2
txtt=doch
txtl=(docw-txtw)/2+(space+bW)/2
txt.style.left=txtl
txt.style.top=txtt
txt.style.width=txtw
txt.style.height=txth
txt.style.filter="alpha(opacity=80)"
txt.style.visibility="visible"
knop1.style.left=(docw-kW)/2+(space+bW)/2
knop1.style.top=doch-kH
knop1.style.width=kW
knop1.style.height=kH
knop1.style.visibility="visible"
knop2.style.left=(docw-kW)/2+(space+bW)/2
knop2.style.top=doch-kH
knop2.style.width=kW
knop2.style.height=kH
end sub

window.setinterval "scrollit", 64

sub scrollit()
j=j+1
container.style.backgroundPosition=m&" "&-j
end sub

sub showtext()
txtt=txtt-2
txt.style.top=txtt
txt.style.left=txtl
if txtt=<(doch-txth) then settimeout "halt", speed else settimeout "showtext", speed
knop1.style.visibility="hidden"
knop2.style.visibility="hidden"
end sub

sub halt()
knop2.style.visibility="visible"
end sub

sub hidetext()
txtt=txtt+2
txt.style.top=txtt
txt.style.left=txtl
if txtt=>doch then settimeout "halt2", speed else settimeout "hidetext", speed
knop1.style.visibility="hidden"
knop2.style.visibility="hidden"
end sub

sub halt2()
knop1.style.visibility="visible"
end sub

sub window_Onresize()
window_onload
end sub
</script>

9- Insertion de la musique.

Après les deux balises du titre notées <title> et </title>, copier et coller ce code.

Modifier "Votre-Music.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.