Cours Visual Basic Script : Connie Shultza en français

Traduction par Mickaëla P
©Connie Schutza Hill 2003
Tous droits réservés

Lesson 6 a

Bienvenue à la leçon 6

Cette fois nous apprendrons à ajouter des balises "Marquee" à nos
tables. Ces Balises sont amusantes et très faciles.
---------------------------------Ce que nous avons besoin pour cette
leçon---------------------------
1. Une image principale. Assurez-vous d'utiliser une image du domaine
publique ou une de vos propres photos .
2. Deux petites images pour mettre dans les balises "marquee". J'ai
utilisé des images de même largeur, cependant vous pouvez utiliser des
largeurs différentes si vous le souhaitez . Mes petites images sont 103px
de larges.
3. Un midi.
4. une Tuile background .
5. HTML Kit ou Blocnote.
--------------------------------Codes couleurs dans la
leçon--------------------------
Pendant la leçon,si vous voyez quelque chose dans cette couleur bleue
brillante c'est juste pour attirer votre attention sur cette balise.
Les choses en bleu foncé seront là pour vous montrer à quoi votre script
doit ressembler à cette endroit dans la leçon. Cela vous aidera à voir ce
qui vous manque si vous vous heurtez à un problème dans la leçon .
Quoi que ce soit en vert est la nouvelle particule de scénario que vous
ajouterez . Vous pourrez alors vérifier à quoi le plein scénario doit
ressembler en vous déplaçant au secteur bleu foncé qui suivra toujours
le secteur vert.
Les lignes rouges sont juste pour trier les sections de la leçon .
J'ajouterai des numéros à ces lignes donc vous pourrez mieux savoir ou
vous en êtes.
------------------------------------------1-------------------------------------------
Les nouveaux codes que nous utiliserons pour cette leçon
<MARQUEE>cette balise est une voie rapide est simple de mettre un peu
d'animation dans votre papeterie , bien sûr cette balise d'ouverture a une
balise finale qui ressemble a... </MARQUEE>
UN EXEMPLE
Tous les codes ci-dessous sont placés dans la balise marquee ouvrante ,
ils sont nécessaires pour faire travailler votre balise.
Les trois codes ci-dessous disent dans quelle direction vous souhaitez les
faire aller .
La balise "marquee" se dirigera ( par défaut ) de gauche à droite sans un
de ces codes dans le scénario.
direction=up Celui-ci se dirige du bas au sommet
direction=down Celui-ci se dirige du sommet au bas
direction=right Celui-ci se dirige de gauche à droite

Les deux codes ci-dessous disent au PC comment nous voulons que la balise
"marquée" se comporte . Elle défilera juste si vous ne mettez pas un de
ces autres codes de comportement , si vous préférez qu'elle défile ne pas
mettre de code du tout dans la balise .
behavior="alternate" Ce code la fait aller d'un côté à l'autre ou du
sommet au bas, selon la direction que vous avez choisi. Si vous voulez que
cela aille d'un côté à l'autre , vous n'avez pas besoin d'une direction
parce que la balise fonctionnera par défaut .
behavior="slide" Aucune direction n'est nécessaire sur celui-ci , il
arrive du coté droit et se déplace sur la gauche comme s' il était par
défaut. Si vous voulez qu'il entre d'une autre façon alors vous devrez
mettre la direction. Vous pouvez aussi vouloir ajouter le remplissage à
côté de la cellule où cet auvent s'arrêtera ainsi il ne n'ira pas jusqu'au
bord ,il s'arrêtera et restera au centre.
scrollamount=1 C'est pour indiquer la vitesse ,en pixel, de déplacement du
texte dans le rouleau . Un nombre plus petit fera des à-coup dans les
rouleaux de texte, mais il se déplacera plus lentement à travers la page.
La plupart des personnes le mettent à 1 comme cela il ne saute pas
pendant le défilement du texte .
scrolldelay=80 Celui ci indique , en nombre de millisecondes ,la vitesse
du rouleau . Plus ce nombre est bas , plus rapide sont les rouleaux de
texte. La plupart des personnes les mettent entre 60 et 80 donc il est
facile de lire le texte avant qu'il ne défile du secteur de la zone de
texte.
loop=2 Celui ci indique le nombre de répétition, -1 pour répéter
indéfiniment. Si vous n'utilisez pas de boucle du tout, votre "marquee" se
répétera toujours car il se retrouvera par "défaut". Cependant si vous ne
voulez pas que cela se répète pour toujours, alors ajoutez la boucle à
votre scénario. Le seul "MARQUEE" qui ne se répète pas sans le code de
boucle est le behavior=slide. il ne fait qu'une seule course à moins que
vous ne lui dites d'en faire plus . Je ne l'ai pas utilisé dans mon
scénario mais je voulais vous en faire part pour que vous puissiez
l'utiliser ,ainsi vous saurez comment faire. Ce code entre dans la balise
"marquee" ouvrante.
Si vous voulez mélanger votre direction et le comportement dans un marquee
vous aurez deux commandes dans cette balise . Une pour la direction et une
pour le comportement. Vous pouvez changer la direction d'en haut ou d'en
bas si vous aimez.
<MARQUEE class=mar2 behavior="alternate" direction="right">text</MARQUEE>
Vous pouvez aussi ajouter la hauteur et la largeur à votre balise
"marquee" et ajoutez des balises de style donc je donne toujours un nom
de classe id à mon "marquee".
-----------------------------------------------2-------------------------------------------
Bien parlons un peu des balises "MARQUEE" .
Une balise "marquee" peut avoir un texte ou une image ou les deux.
Soyez conscient que si vous mettez les deux , le texte suivra au bord du
bas de l'image et pas dans le centre de l'image. Donc vous ne pourrez pas
utiliser une très grande image .
Nous pouvons même faire défiler notre texte dans la zone de texte avec un
"marquee" et mettre la vitesse de défilement du texte .
Une "marquee" peut s'accorder à une cellule de table ou vous pouvez la
placer sur l'écran c'est la même voie qu'une division ou une image en
utilisant la position : absolute; left:
Les balises "Marquée" sont un amusement et ne sont pas dur , vous
devriez aimer cette leçon.
---------------------------------------------3---------------------------------------------------
Commençons notre script.
Commencez votre script avec ce que nous connaissons déjà . Les étiquettes
de HTML, tête, titre, style, corps et balises du son. Ajoutez aussi les
balises de style que vous savez ,par avance , que vous utiliserez, dans
ce scénario les normes seront le style de table, le style de cellule, le
style d'image et parce que notre division de zone de texte n'est pas
normale ne les ajoutez pas cette fois ci, avant que je ne vous donne les
codes pour cela dans la leçon. Bien sur donner à votre table un nom de
classe id , donnez lui sa largeur , son alignement sur l'écran , le
cellspacing et le cellpadding. Rappelez-vous de donner un nom de classe ID
à toutes les cellules ,les balises "marquee" et images jusqu'à la fin du
scénario même si j'oublie de vous dire de le faire. Même si vous n'ajoutez
pas de style à votre script pour cette partie du scénario, le nom de la
classe id n'endommagera rien dans le script en étant dans celui ci. J'ai
souvent le nom d'id dans mon scénario et n'ajoute pas ensuite le style,
mais il est là dans le cas où je veux l'ajouter plus tard si je réutilise
le scénario et peux y faire quelques changements.
-----------------------------------------------4----------------------------------------------
Votre scénario devrait ressembler a....
<html>
<head>
<title> </title>

<style>
Body{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#A5011B;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#A5011B;
scrollbar-track-color:#ffffff;
}
.tb{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
background color: #ffffff;
}
.tc{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}
.phto{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}

</style>
</head>

<BODY bgColor=#FFFFFF onload="window.status='. . . . . . . Stat et Script
par votre nom . . . . . . . '" background="C:/Program Files/fichiers
communs/Microsoft Shared/papier à lettres/tuile here.jpg">

<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
Shared/papier à lettres/Midi here.mid" volume=0 loop=infinite>

</body>
</html>
---------------------------5----------------------
Maintenant nous commençons notre table.
Ouvrons une table, une rangée et la première cellule. Rappelez-vous de
mettre dedans votre nom de classe id et dire aux cellules de s'aligner au
centre. Je ne veux pas mettre quoi que ce soit dans ma première cellule
mais je veux que mes frontières se voient ainsi j'ajoute la balise de
saut de ligne qui ressemble à
et ensuite je ferme ma cellule. Cela
fait croire à votre ordinateur qu'il y a quelque chose à l'intérieur de
la cellule et donc il nous montrera les frontières, sans cela vos
frontières ne se verront pas.

Ensuite nous ouvrons une autre cellule et ouvrons notre "Marquee", comme
je vais donner un nom de classe id , j'ajoute le style aussi, je dois
dire à la balise comment se comporter et cela ira à l'intérieur de la
balise ouvrante. Je sais que je veux que mon "Marquee" fasse la commande
de glissade sur cette cellule donc j'ai mis dans le comportement :
behavior="slide". Ceci est à l'intérieur de la balise Marquée ouvrante.
Je veux du texte dans cette balise donc j'ajoute le mot "texte" au
scénario, ce mot va directement après la fermeture de la balise ouvrante
et directement avant la balise finale fermante. Nous mettrons toutes les
informations sur la taille , la couleur et la fonte dans les balises de
style un peu plus tard dans la leçon. Comme nous avons fini avec cela nous
mettons les balises fermantes du "marquee" et de la cellule .

Ma dernière cellule ressemble à une autre cellule vide comme la premiere
que j'ai mis dans le scénario et parce que c'est la dernière cellule de
la rangée je ferme ma table actuellement.

Dernière édition par le Jeu 13 Oct - 22:20, édité 1 fois

<MARQUEE class=mar
behavior="slide">Text</MARQUEE>

Traduction par Mickaëla P
©Connie Schutza Hill 2003
Tous droits réservés

Cours 6 C

-------------------------------------------------12-------------------------------------------
Votre scénario devrait ressembler a....
<html>
<head>
<title> </title>

<style>
Body{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#A5011B;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#A5011B;
scrollbar-track-color:#ffffff;
}
.tb{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
background color:#ffffff;
}
.tc{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}
.phto{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}

</style>
</head>

<BODY bgColor=#FFFFFF onload="window.status='. . . . . . . Stat et Script
par votre nom. . . . . . . '" background="C:/Program Files/fichiers
communs/Microsoft Shared/papier à lettres/tuile here.jpg">

<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
Shared/papier à lettres/Midi here.mid" volume=0 loop=infinite>

<MARQUEE class=mar behavior="slide">Texte
ici</MARQUEE>

<MARQUEE class=mar2
behavior="alternate">text </MARQUEE>

<MARQUEE class=mar3 direction=up><IMG
src="C:/Program Files/fichiers communs/Microsoft Shared/papier à
lettres/image.jpg"></MARQUEE> <IMG ALT="artist name" class=phto
src="C:/Program Files/fichiers communs/Microsoft Shared/papier à
lettres/image.jpg"> <MARQUEE class=mar3
direction=down><IMG src="C:/Program Files/fichiers communs/Microsoft
Shared/papier à lettres/image.jpg"></MARQUEE>

</body>
</html>

Traduction par Mickaëla P
©Connie Schutza Hill 2003
Tous droits réservés

Cours 6 C

----------------------------------------------13----------------------------------------------
Maintenant ajoutons nos balises de style pour nos balises "Marquee".
Bien si nous faisions un aperçu de notre stat maintenant vous verriez que
tout est en désordre parce que le PC ne sait pas encore de quelle largeur
sont nos "Marquee". Donc nous allons ajouter nos balises de style
"Marquee" au scénario maintenant pour qu'il soit parfait... lol
D'abord nous mettrons dans la balise de style notre premier "Marquee".
Cela se met dans le sommet du scénario entre les balises d'ouverture et
de fermeture de "style" comme vous le savez déjà , j'ai commencé le coté
droit pour le mien après mon balise de style d'image parce que c'est
dans cet ordre que j'écris presque toujours mes scénarios, mais l'ordre
n'importe peu tant qu'il est dans le secteur de styledu script. Nous
devons dire au PC la grandeur de ce "Marquee" et nous devons lui dire
aussi la largeur , parceque celui-ci contient le texte j'ai juste utilisé
100 % pour la largeur. Nous disons aussi au PC quelle fonte utiliser, la
couleur de celle ci et sa taille et l'aligner au centre.
Je ne veux pas que ce texte touche le haut de la cellule alors j'ai mis
3px dans la remplissage pour le sommet . Je ne veux pas que cette cellule
soit trop grande c'est pourquoi je l'ai seulement fait de 3. Ensuite,
parce que cette cellule contient la balise Marqueé de glissade et que cela
écrase le texte au bord gauche et à l'arrêt, je fais un peu de
remplissage à gauche aussi car cela aide à centrer mon texte quand il
s'arrête. C'est une chose à laquelle vous devrez jouer pour trouver
votre nombre magique. En raison du texte dans ma balise Marquée, j'ai
besoin d'un remplissage de 15px donc je l'ai j'ai mis dans la remplissage
( padding-left ), voici à quoi la balise de style pour mon "Marquee"
supérieur ressemble.
.mar{
height:10px;
width: 100%;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
text-align: center;
padding-top:3px;
padding-left: 15px;
}
Le deuxième "Marquee" dans mon stat contient le texte aussi mais celui-ci
a seulement besoin du sommet capitonnant ainsi voici à quoi le code pour
le style du deuxième ressemblera.
.mar2{
height:10px;
width: 100%;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
text-align: center;
padding-top:3px;
}
Les deux grandes cellules "Marquee" sont les mêmes sur mon scénario et je
sais de quelle largeur les faire parce qu'elles sont de la même largeur
que mes images à l'intérieur des "Marquee". Je dois évaluer la hauteur et
reviendrai alors pour l'ajuster . Si je fais des "Marquee" trop grandes,
elles feront la cellule qui contient l'image principale trop grande et il
y aura des trous dessus et dessous de l'image principale. Si je les fais
trop court, elles entreront trop bas dans la cellule ou s'arrêteront
dans la cellule. C'est juste un jeu de supposition, Il faut jouer avec la
hauteur avant que vous ne soyez heureux avec l'apparence de votre
papeterie.
.mar3{
height: 670px;
width: 103px;
}
Je sais déjà que je vais mettre ma zone de texte dedans comme une autre
"Marquee" . Je veux qu'elle soit de 150px de grandeur et je connais
toute la substance comme la fonte, la taille de fonte et la couleur et que
je veux une couleur de fond , tandis que je suis ici dans ce secteur du
scénario je vais donc ajouter le style pour la balise " Marquee" de texte.
Je veux que cette balise s'avoisine ainsi je l'ajoute au style de cette
"Marquee". Remarquez sur cette zone de texte il n'y a pas : overflow auto.
C'est parce que nous n'en avons pas besoin car nous n'aurons pas de
scrollbars parce que le texte va défiler seul dans tout cela . Voici à
quoi mon style pour la balise " Marquee" de zone de texte ressemblera.
.martx{
background color:#ffffff;
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
padding:10;
text-align: center;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
height:150px;
width: 100%;
}
-----------------------------------------------14---------------------------------------------
Votre scénario devrait ressembler a....
<html>
<head>
<title> </title>

<style>
Body{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#A5011B;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-shadow-color:#ffffff;
scrollbar-arrow-color:#A5011B;
scrollbar-track-color:#ffffff;
}
.tb{
BORDER-RIGHT: #DC0224 8px inset;
BORDER-TOP: #DC0224 8px outset;
BORDER-LEFT: #DC0224 8px outset;
BORDER-BOTTOM: #DC0224 8px inset;
background color:#ffffff;
}
.tc{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}
.phto{
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
}
.mar{
height:10px;
width: 100%;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
text-align: center;
padding-top:3px;
padding-left: 15px;
}
.mar2{
height:10px;
width: 100%;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
text-align: center;
padding-top:3px;
}
.mar3{
height: 670px;
width: 103px;
}
.martx{
background color:#ffffff;
BORDER-RIGHT: #DC0224 7px double;
BORDER-TOP: #DC0224 7px double;
BORDER-LEFT: #DC0224 7px double;
BORDER-BOTTOM: #DC0224 7px double;
padding:10;
text-align: center;
FONT-FAMILY: BlackChancery;
FONT-SIZE: 14pt;
COLOR: #A5011B;
height:150px;
width: 100%;
}
</style>
</head>

<BODY bgColor=#FFFFFF onload="window.status='. . . . . . . Stat et Script
par Votre Nom . . . . . . . '" background="C:/Program Files/fichiers
communs/Microsoft Shared/papier à lettres/tuile here.jpg">

<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
Shared/papier à lettres/Midi here.mid" volume=0 loop=infinite>

<MARQUEE class=mar
behavior="slide">Text</MARQUEE>

<MARQUEE class=mar2
behavior="alternate">text </MARQUEE>

<MARQUEE class=mar3 direction=up><IMG
src="C:/Program Files/fichiers communs/Microsoft Shared/papier à
lettres/image.jpg"></MARQUEE> <IMG ALT="artist name" class=phto
src="C:/Program Files/fichiers communs/Microsoft Shared/papier à
lettres/image.jpg"> <MARQUEE class=mar3
direction=down><IMG src="C:/Program Files/fichiers communs/Microsoft
Shared/papier à lettres/image.jpg"></MARQUEE>

</body>
</html>
---------------------------------------------------15---------------------------------------
Sauvegardez et faites un aperçu de votre script.
Vous devriez voir vos deux premières rangées comme auparavant et vous
devriez aussi voir votre rangée suivante qui contient la "Marquee",
l'image principale et l'autre "Marquee". Votre image principale aura trop
d'espace au-dessus et en-dessous d'elle mais c'est normal pour le moment.
C'est parce que nous devons encore mettre notre zone de texte dans le
script et elle descendra l'image principale pour que prennent l'espace
supplémentaire dans ce secteur.
---------------------------------------------16----------------------------------------------
Maintenant nous ajoutons notre zone de texte.
Nous devons ouvrir notre rangée suivante et notre cellule suivante. Nous
devons aussi ouvrir notre balise "marquee". Nous devons dire à la balise
combien de défilement de texte nous voulons , sa vitesse ,ainsi que sa
direction . Nous mettons tout cela dans la balise MARQUEE ouvrante et
n'oublions pas de mettre dedans le nom de la classe id . Ansuite nous
mettons le mot " texte" après > et ensuite nous fermons avec la balise
"Marquee" fermante, la cellule et la rangée.
Voici le plein code pour cette rangée du scénario.

» java script / visual basic script / VML
» scroll (script)
» Trucs
» cours de peinture (français & anglais)
» Français