Cours Visual Basic Script : Connie Shultza en français

scrollbar-face-color:#9F6865;
scrollbar-highlight-color:#645653;
scrollbar-3dlight-color:#9F6865;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9F6865;
scrollbar-arrow-color:#645653;
scrollbar-track-color:#9F6865;
Finissez toujours chaque ligne de code dans ce secteur avec  ;Assurez-vous de mettre le : et  - Où il faut aussi.NOTE presonnelle ( Mickaëla): actuellement les 7 codes mentionnés ci dessus ne sont plus d'usage ...en fait 3 suffisent amplement...voir 2, pour le même effet.Nous avons fini le style sur le corps et devons ajouter  sous le code des scrollbars ceci }Cela vous donnera un plein code de style pour le corps ( BODY) et  qui ressemblera a ....<STYLE>
BODY {
BORDER-RIGHT: #9F6865 7px inset;
BORDER-TOP: #9F6865 7px outset;
BORDER-LEFT: #9F6865 7px outset;
BORDER-BOTTOM: #9F6865 7px inset;
scrollbar-face-color:#9F6865;
scrollbar-highlight-color:#645653;
scrollbar-3dlight-color:#9F6865;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9F6865;
scrollbar-arrow-color:#645653;
scrollbar-track-color:#9F6865;
}

.d2{top:410px;
left:100px;
position:absolute;
height:240px;
width:340px;
BACKGROUND-COLOR: #df57a3;
BORDER-RIGHT: #9F6865 5px inset;
BORDER-TOP: #9F6865 5px outset;
BORDER-LEFT: #9F6865 5px outset;
BORDER-BOTTOM: #9F6865 5px inset;
}
Nous allons calculer où la mettre du sommet, en prenant la distance de la première division supérieure du sommet qui était 50px, nous y ajoutons la hauteur de la première division qui contient l'image, qui était 340px sur mon stat. Maintenant nous voulons un peu d'espace entre les deux divisions donc nous ajoutons un peu d'espace mort. J'ai ajouté 20px. Cela m'a donné 50+340+20=410 donc ma division est placée à  410px du sommet. La gauche est pareil que l'autre division qui est en plus du stat. (Attention vous ne devez pas faire le vôtre comme je l'ai fait, c'est un exemple et  c'est selon les dimensions de votre image ). Je connais  la largeur parce que je veux que ce soit la même largeur que la division supérieure. Je connais la hauteur parce que je veux que ma zone de texte soit grande de 200px et cela signifie que je tiens compte de ma frontière sur la division et mes frontières sur la zone de texte et figure ensuite mes 10px qui serons en haut et an bas de la zone de texte, je devrais avoir une grandeur de  240px pour cette division. Les frontières seront de la même taille que les autres frontières, mais ne doivent pas être du  même type ou de couleur.Ensuite nous allons mettre  le style pour notre division de zone de texte. Cette particule de code va donner  la taille de la zone de texte , Nous pouvons la faire à la taille de notre image  ou la taille que nous voulons . Nous devons alors ajouter la quantité de pixels que les frontières prendront aussi; pour moi, les frontières sont de 5 px de large donc j'ai dû ajouter 10 px à la largeur aussi bien que 10px à la hauteur de la zone de texte. Ce code de style dira à la division où être placée à l'intérieur de la division dans laquelle elle a été placée aussi. Souvenez-vous nous devons seulement dire à quelle distance du sommet de la division extérieure parce que c'est cette division qui contient notre texte à l'intérieur de l'autre division. Nous voulons montrer 10px de la plus grande division  autour de cette division donc nous la mettons 10px du sommet et 10px à gauche. Le style pour cette division dira aussi quelle fonte utiliser, quelle couleur , la taille et l'aligner au centre. Vous ne devez pas mettre le nom de fonte dans le cours cette fois-ci et vous utiliserez la taille en pts donc vous mettrez juste dans la taille de fonte ce que vous aimez ou comme vous le voyez dans OE. J'utilise 14pt pour le mien parce que c'est ce que j'aime. Cette particule de code va aussi dire au PC de faire une couleur de fond et avoir un scrollbar dans cette zone de texte  , c'est  le  overflow: auto qui le dit au PC. Ce code dira au  PC quelle couleur faire pour les scrollbars. Nous voulons aussi avoir le texte non dirigé entièrement au bord de la zone de texte donc nous utiliserons un peu de code qui capitonnera la zone de texte. Cela donnera un peu d'espace entre le texte et le bord de la boîte. Vous pouvez aussi ajouter le poids et aussi le style de fonte à ce secteur du scénario. Ainsi si vous voulez le texte bold ou le texte italic  la commande va ici aussi.  La particule entière de code pour le style sur cette zone de texte  ressemblera a..... Souvenez-vous nous avons nommé notre classe de division de zone de texte tx1 .tx1{top:10px;
left:10px;
position:absolute;
height:210px;
width:310px;
BACKGROUND-COLOR: #c0c0c0;
BORDER-RIGHT: #000000 5px double;
BORDER-TOP: #000000 5px double;
BORDER-LEFT: #000000 5px double;
BORDER-BOTTOM: #000000 5px double;
FONT-FAMILY: arial;
FONT-SIZE: 14pt;
FONT-WEIGHT: BOLD;
FONT-STYLE: ITALIC;
COLOR: #35423a;
TEXT-ALIGN: center;
OVERFLOW: auto;
PADDING: 10px;
scrollbar-face-color:#9F6865;
scrollbar-highlight-color:#645653;
scrollbar-3dlight-color:#9F6865;
scrollbar-darkshadow-color:#000000;
scrollbar-shadow-color:#9F6865;
scrollbar-arrow-color:#645653;
scrollbar-track-color:#9F6865;
}
Ensuite nous allons mettre le style pour notre dernière division. C'est la class d3 celui qui soutiendra notre zone de texte au bas de l'écran. Pensez à cette division comme à une planche et les deux divisions qui  contiennent le texte seront placées sur cette division ou planche. Cela vous donnera un certain espace entre le fond(bas) des deux divisions qui contiennent le texte et le bord de l'écran. Cette fois nous voulons seulement dire à la division où se mettre et de quelle taille elle doit être. Nous ne voulons pas de frontière ou couleur sur cette division. Nous ne voulons pas que cela se voit du tout. L'ordinateur pensera que nous voulons la voir, mais comme il n'y aura aucunes frontières et aucunes couleurs de fond, la division sera invisibile.  Nous ne pouvions pas l'utiliser dans la  dernière leçon parce que la zone de texte n'était juste qu'une hauteur. Dans cette leçon , à cause de l'overflow:auto; la zone de texte ne grandit pas du tout quand nous écrivons. Nous voulons d'abord savoir où mettre la division, à gauche c'est facile, la mettre juste dans le même endroit que la division qui contient la division de zone de texte à gauche de l'écran, calculons le sommet nous ajoutons la distance le d2 qui est placée au sommet de l'écran ajoutons la hauteur de la division d2 et mettons ensuite la division d3 . La hauteur de cette dernière division est comme vous le souhaitez. Voici le plein code pour la dernière division..d3{
top:650px;
left:100px;
position:absolute;
height:20px;
width:340px;
}

[color=red][b]Cours 3 (b)
Traduction Mickaëla P
      ©Connie Schutza Hill 2003
      All rights reserved[/b][/color]

ici c'est le cours en anglais de Connie de 1 à 20

http://www.flexit-design.dk/gitte/connie.htm

[color=steelblue]

[b]Leçon 3 b, les tables.


Note

Ne jamais mettre  la position absolue sur une table qui a une zone de texte .

Maintenant nous connaissons toute la substance que nous devons ajouter à cette balise de table.

Voici à quoi la balise ressemblera quand vous la mettrez dans votre script pour ouvrir votre table...

<TABLE class=tb1 cellSpacing=30 cellPadding=10 width=450 align=center>

La balise finale qui va avec cette balise  ressemble a...

</TABLE> Cette balise dit au PC que nous avons fini avec la table et  tout ce qui va à l'intérieur de la table devra aller entre la balise ouvrante<TABLE> Et la balise de fermeture </TABLE> ..

Les tables sont composées de rangées de cellules. Ces cellules tiennent les images et le texte dans la table. Il y a bien sûr des balises pour dire au PC ce que nous voulons dans ces rangées et cellules. Elles ressemblent à ceci et elles ont aussi des balises finales qui correspondent à la balise ouvrante.

<TR> Cela ouvre une nouvelle rangée de table. La rangée de table court de gauche à droite sur la table.

</TR> C'est la balise finale de la rangée de table  . Cette balise  dit au PC que nous avons fini avec cette rangée et n'ajouterons pas plus de cellules à cette rangée. Les balises , pour les cellules, vont dans chaque rangée de la table entre ces deux étiquettes.

<TD> Cela ouvre une  cellule dans la rangée de table.  TD veut dire "Table Data" ("Données de Table")et dans notre cas , les données vont être des images ou le texte....

</TD>  C'est bien sûr la balise finale qui dit au PC que nous n'allons pas mettre de substance à l'intérieur de cette cellule. Ces balises vont entre l'ouverture et la fermeture de rangée de table.<TR>.

Ce sont toutes les nouvelles balises que nous verrons dans cette leçon.

-------------------------------------------------2-------------------------------------------------

Commencez votre script

Commencez votre scénario  comme toujours avec les balises HTML, head, body. Puis le Background  et la balise midi aussi. Nous savons ,aussi, déjà que nous voulons un scrollbars coloré qui avoisine le corps du stat donc nous mettrons  notre balise de style de body aussi. Donc votre scénario devrait ressembler tout de suite à ceci .. (Vous n'aurez pas le même REM que le mien. .)

<html>

<head>

<title>Untitled</title>

<!--Ce scénario a été écrit pour la Leçon 3 tables par Connie et traduit par Micky-->

<style>

Body{

BORDER-RIGHT: #E8D4C0 7px inset;

BORDER-TOP: #E8D4C0 7px outset;

BORDER-LEFT: #E8D4C0 7px outset;

BORDER-BOTTOM: #E8D4C0 7px inset;

scrollbar-face-color:#E0C4A8;

scrollbar-highlight-color:#F0DCC8;

scrollbar-3dlight-color:#D8BCA0;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#B8A080;

scrollbar-arrow-color:#F0DCC8;

scrollbar-track-color:#E0C4A8;

}

</STYLE>

</HEAD>

<!--Le Background va ici  dans la balise de corps (body)comme une ligne-->

<BODY bgcolor=#E0C4A8 background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/imagefond.jpg">

<!--Fichier Midi ici-->

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



</body>

</html>

-------------------------------------------------3--------------------------------------------------

Ici nous commencerons notre table.

Directement au-dessous de la balise  bgsound nous commençons notre table donc nous devons mettre notre balise de table d'ouverture dans le scénario maintenant....

<TABLE class=tb1 width=450px align=center cellpadding=10 cellspacing=30>

Ensuite nous voulons nous assurer que nous n'oublierons pas d'ajouter notre balise de table finale donc nous la  mettons  dans le script juste avant la balise  body  finale( </BODY>) directement à la fin du scénario....

</TABLE>

Puis nous ouvrons notre première rangée dans la table. C'est juste après  la balise  de table ouvrante, nous  mettons cette balise:

<TR><!--C'est la rangée de table 1-->

Ensuite nous ouvrons une cellule dans la rangée de table et nous devrons ajouter la classe id , le nom pour cette cellule et centrer ce que nousallons mettre à l'intérieur de la cellule..Donc voici à quoi la balise de cellule ouvrante ressemblera.

<TD class=tb2 align=center><!--La cellule de table 1 tient l'image 1 ici-->

Maintenant nous devons mettre dedans notre balise d'image car la cellule contiendra une image. Cette balise ressemblera à celle-ci..

<IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papiers à lettre/lmage1td1.jpg">

 Et parce que nous avons fini avec cette cellule, nous la fermons avec la balise finale

</TD>

 Nous voulons une autre cellule à côté de celle ci  dans la même rangée donc ouvrons maintenant une nouvelle cellule avec une balise de cellule 'ouvrante. De nouveau nous centrons les choses dans la cellule et nous allons avoir notre classe id en place. Nous pouvons utiliser la même classe id pour cette cellule comme nous avons fait sur le premier, ou si vous voulez des frontières différentes sur cette cellule vous pouvez y mettre une classe id différente. Dans mon cas je les veux tous semblable donc j'utiliserai la même classe id pour toutes les cellules dans la table. Donc notre balise de cellule d'ouverture sera comme notre première balise de cellule d'ouverture.

<TD class=tb2 align=center><!--La cellule de table 2 tient le TEXTE 1 ici-->

La cellule dans laquelle nous voulons juste mettre une zone de texte , nous ajoutons alors notre division pour notre zone . Cette division aura besoin d'une classe id, j'ai nommé la mienne tx1. Assurez-vous de fermer votre division avec la balise finale

<DIV class=tx1>text 1</DIV>

Maintenant nous avons fini avec tout ce qui entre dans cette cellule donc nous la fermons avec notre balise de cellule finale..

</TD>

Nous voulons encore une autre cellule dans cette rangée , ouvrons de nouveau une cellule, elle aura la classe id et nous devrons la centrer tout à l'intérieur de cela , voici à quoi elle ressemble......

<TD class=tb2 align=center><!--La cellule de table 3 tient l'image 2 ici-->

Comme  cette cellule contiendra une autre image nous ajouterons maintenant notre balise d'image....

<IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettre/lmage2td3.jpg">

Nous pouvons maintenant fermer notre cellule parce que nous avons fini avec l'addition de choses et nous pouvons aussi fermer notre rangée de table parce que nous ne voulons pas plus de cellules dans cette rangée..

</TD></TR>

Jusqu'ici votre script entier devrait ressembler à celui- ci...

<html>

<head>

<title>Untitled</title>

<!--Ce scénario a été écrit pour la Leçon 3 tables par Connie et traduit par Micky-->

<style>

Body{

BORDER-RIGHT: #E8D4C0 7px inset;

BORDER-TOP: #E8D4C0 7px outset;

BORDER-LEFT: #E8D4C0 7px outset;

BORDER-BOTTOM: #E8D4C0 7px inset;

scrollbar-face-color:#E0C4A8;

scrollbar-highlight-color:#F0DCC8;

scrollbar-3dlight-color:#D8BCA0;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#B8A080;

scrollbar-arrow-color:#F0DCC8;

scrollbar-track-color:#E0C4A8;

}

</STYLE>

</HEAD>

<!--Background tient ici la balise BODY comme une ligne-->

<BODY bgcolor=#E0C4A8 background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmagefond.jpg">

<!--Fichier Midi ici-->

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

<!--départ table ici-->

<TABLE class=tb1 width=450px align=center cellpadding=10 cellspacing=30>

<TR><!--C'est la rangée de table 1-->

<TD class=tb2 align=center><!--La cellule de table 1 tient l'image 1 ici--><IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmage1td1.jpg"></TD>

<TD class=tb2 align=center><!--La cellule de table 2 tient le TEXTE 1 ici--><DIV class=tx1>text 1</DIV></TD>

<TD class=tb2 align=center><!--La cellule de table 3 tient l'image 2 ici--><IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmage2td3.jpg"></TD></TR>



</TABLE>

</body>

</html>

Maintenant sauvegardez votre script et voir dans l'aperçu s'il semble correct. Il devrait avoir des bords sur l'extérieur de l'écran entier, le Scrollbars coloré devrait se voir du côté droit de l'écran aussi. Vous devriez y voir vos images et une boîte avec le texte de mot et votre fond  en place. Vous ne verrez pas d'autres frontières parce que nous n'avons pas ajouté les renseignements de balise de style pour la table et les cellules encore. Votre cellule de boîte de texte semblera plus petite que les deux autres cellules actuellement aussi. Si ce n'est pas ce que vous voyez, vérifiez votre script avec la copie de celui ci , ci-dessus, et voir si vous pouvez trouver ce qui ne va pas.

---------------------------------------4------------------------------------

Nous commencons la rangée deux maintenant.

Pour ajouter une autre rangée à notre table nous mettrons juste dans la balise de rangée de table ouvrante comme auparavant....

<TR><!--C'est la rangée de table 2-->

C'est maintenant le temps pour nous pour ajouter une cellule à cette rangée de table. Nous le ferons  comme auparavant, mais parce que je veux une zone de texte dans cette cellule j'ajouterai la division de zone de texte ,je veux aussi que toutes mes zones de texte aient des couleurs différentes et des fonts différents donc je devrais donner un nouveau nom de classe id à cette zone de texte . J'ai utilisé tx2 sur celle-ci. Fermez maintenant la division et la cellule parce que c'est tout ce qui entre dans cette cellule. La pleine balise ressemblera à ça..

<TD class=tb2 align=center><!--La cellule de table 4 tient le TEXTE 2 ici-->

<DIV class=tx2>text 2</DIV>

</TD>

Il est temps d'ajouter une autre cellule ,celle-ci aura une image donc devra avoir la balise d'image, après cela  nous fermerons de nouveau la balise de cellule quand nous aurons fini avec celle-ci. La pleine balise est ci-dessous..

<TD class=tb2 align=center><!--La cellule de table 5 tient l'image 3 ici-->

<IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmage3td5.jpg"></TD>

Il est maintenant temps pour nous d'ajouter notre dernière cellule à cette rangée de  table. Nous le ferons  comme auparavant, mais parce que je veux une zone de texte dans cette cellule j'ajouterai la division de zone de texte, je donnerai de nouveau une nouvelle classe à la division id donc il peut y avoir des couleurs différentes que les autres .. cette fois j'ai utilisé tx3. Fermez maintenant la division et la cellule parce que c'est tout ce qui entre dans cette cellule. Vous fermez aussi la rangée de table parce que nous avons maintenant fini avec la rangée. La pleine balise ressemblera à celle-ci..

<TD class=tb2 align=center> <!--La cellule de table 6 contient le TEXTE 3 ici--> <DIV class=tx3>text 3</DIV></TD></TR>

Maintenant votre script devrait ressembler à celui-ci..

<html>

<head>

<title>Untitled</title>

<!--Ce script a été écrit pour la Leçon 3 tables par Connie et traduit par Micky-->

<style>

Body{

BORDER-RIGHT: #E8D4C0 7px inset;

BORDER-TOP: #E8D4C0 7px outset;

BORDER-LEFT: #E8D4C0 7px outset;

BORDER-BOTTOM: #E8D4C0 7px inset;

scrollbar-face-color:#E0C4A8;

scrollbar-highlight-color:#F0DCC8;

scrollbar-3dlight-color:#D8BCA0;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#B8A080;

scrollbar-arrow-color:#F0DCC8;

scrollbar-track-color:#E0C4A8;

}

</STYLE>

</HEAD>

<!--Le Background ou fond sur la meme ligne de la balise body-->

<BODY bgcolor=#E0C4A8 background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmagefond.jpg">

<!--Fichier Midi ici-->

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

<!--départ de  table ici-->

<TABLE class=tb1 width=450px align=center cellpadding=10 cellspacing=30>

<TR><!--C'est la rangée de table 1-->

<TD class=tb2 align=center><!--La cellule de table 1 de l'image 1 ici--><IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmage1td1.jpg"></TD>

<TD class=tb2 align=center><!--La cellule de table 2 du TEXTE 1 ici--><DIV class=tx1>text 1</DIV></TD>

<TD class=tb2 align=center><!--La cellule de table 3 de l'image 2 ici--><IMG src="C:/Program Files/fichiers communs Files/Microsoft Shared/papier à lettres/lmage2td3.jpg"></TD></TR>

<TR><!--C'est la rangée de table 2-->

<TD class=tb2 align=center><!--La cellule de table 4 du TEXTE 2 ici--><DIV class=tx2>text 2</DIV></TD>

<TD class=tb2 align=center><!--La cellule de table 5 de l'image 3 ici--><IMG src="C:/Program Files/fichier communs Files/Microsoft Shared/papier à lettres/lmage3td5.jpg"></TD>

<TD class=tb2 align=center><!--La cellule de table 6du TEXTE 3 ici--><DIV class=tx3>text 3</DIV></TD></TR>

</TABLE>

</body>

</html>

Maintenant regarder votre stat ,vous verrez  les trois images , les trois zones de texte et vous verrez qu'ils forment deux lignes à travers votre écran. Si ce n'est pas ce que vous voyez, comparez votre script à celui ci-dessus et trouvez ce qui manque ou n'importe quel types . [/b]
[/color]