Mots d'art & Scénarios

Poésie, littérature, pensées,
scripts d'art,
oeuvres de Ginette Villeneuve
 
AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Cours Visual Basic Script : Connie Shultza en français

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours Visual Basic Script : Connie Shultza en français   Mer 23 Mar - 20:57

Cours de Connie Shultza traduit par Mickaëla.

Merci.

cours 1 à 12


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

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

Désolée pour l'état étiré de ces messages, les scripts ont déformé le forum...

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 15:45, édité 11 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: page d'ouverture & explications   Jeu 24 Mar - 19:30

Bonjour,


Merci à M. et à Suzanne Bouchard pour leur aide.


Gi

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par le Jeu 13 Oct - 20:42, édité 11 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Intro   Jeu 24 Mar - 19:32


Code:
Ceci est un site d'enseignement pour ceux qui veulent apprendre à écrire des scripts qu'ils utiliseront dans les courriels animés. Ces leçons ont été écrites par Connie Schultza Hill sauf indications contraires, elles sont traduites par Mickaëla.

Connie garde tous les droits d'auteur sur ses leçons et les termes d'utilisation sont inscrits ci-dessous. Lisez s'il vous plaît et respectez ces règlements.

LES TERMES D'UTILISATION

Règle 1.

N'enlevez pas les noms dans les leçons et ne les revendiquez pas comme les vôtres.
Ces leçons ne peuvent être vendues de quelques manières que ce soient. Ne les ajoutez pas à un livre, un CD, un site ou un groupe ou une autre forme qui ne soit pas cent pour cent gratuite. Cela signifie également que si votre site offre une adhésion payante ce cours n'y est pas à sa place.

Règle 2.

Utilisez s'il vous plaît ces leçons et apprenez d'eux, partagez-les librement avec vos amis. Si vous désirez ouvrir un groupe "scripting" pour apprendre à d'autres personnes comment écrire des scripts qu'ils utiliseront dans leur courriels animés, et tant que votre groupe apprend ces leçons gratuitement et tant que vous offrez une adhésion gratuite vous pouvez utiliser ces leçons. Tout doit être cent pour cent gratuit c'est important.

Récapitulons :

Vous pouvez placer ces cours sur votre site s'il n'y a aucun frais pour le :
téléchargement
l'impression ou pour les pages utilisées
le "gravage", l'expédition ou le traitement du CD
l'adhésion pour le site.



Si vous avez un problème avec les règles et les TERMES D'UTILISATION de ces leçons, que vous venez de lire ne les téléchargez pas et ne les utilisez pas. Le téléchargement et leurs utilisations de n'importe quelle manière que ce soit signifie que vous êtes d'accord avec les Termes de ces leçons.

©Connie Schutza Hill 2003

Tous droits réservés




~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Le langage basique des scripts.

Pour les novices cette première leçon va sembler très longue et très compliquée. Mais avec un peu de pratique ce n'est pas si difficile . Le "scripting" parle à l'ordinateur dans un langage qu'il peut comprendre . Nous allons donc, apprendre ce langage pour que notre ordinateur travaille pour nous, la plupart du temps il travaille bien mais comme certains vous le diront rien n'est vraiment parfait dans le monde des ordinateurs..

Premièrement vous devez apprendre le langage de base de tous les scripts que nous utiliserons dans ces leçons. Voici une liste de ce que nous appelons les étiquettes ou les balises et leur signification.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

La première chose à comprendre est ce qu'est une balise. Une balise est une ligne de commande de HTML qui commence par< et fini avec > Elles sont le plus souvent par paire donc vous avez une balise de début et une balise de fin. La balise ouvrante sera quelque chose comme cela: et la balise finale ressemblera à ça: note: c'est toujours la même balise qu'à l'ouverture mais avec une barre oblique / devant le mot ou les lettres. Entre la balise d'ouverture et la balise de fermeture nous mettrons d'autres particules de codes et plus de balises. Maintenant que vous comprenez ce qu'est une balise , laissez-moi vous expliquer celles que nous utiliserons dans nos premières leçons et plus souvent dans les leçons à venir. Pour une lecture facile chaque code de balise sera associé à une couleur de texte. (ce qui ne sera pas nécessairement le cas ici)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



C'est la balise HTML .

La balise de début est placée en premier dans le script et la balise finale est la toute dernière qui se situe à la fin de ce même script . Nous mettrons tous les codes ou substances dans le script entre ces deux balises. Ce sont ces 2 balises qui indiquent à l'ordinateur que nous dirigeons le HTML.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



C'est la balise principale de tête .

La balise de début est toujours placée directement après la balise et celle de fin toujours directement avant la balise BODY ( de corps) à laquelle nous allons venir dans un moment. Cette balise contiendra toute les informations utilisées dans le script en entier. Elle contiendra votre information de "font" ( police) aussi bien que toutes les autres balises de style qui seront utilisées dans le script .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~




C'est la balise de style.

Ce jeu de balise contient les informations qui se composent de jolies frontières, de l'ascenceur, (scrollbar) et du texte dans le stationery (courriel animé). Il contient aussi les informations sur les tables , les images et le placement des éléments du stationery (courriel animé) . Nous ne l' utiliserons pas trop sur la première leçon mais il sera utilisé souvent dans l'avenir. Il est donc préférable de voir à quoi elle sert et où elle va. Ainsi quand nous arriverons à son utilisation , nous la connaîtrons déjà.

Cette paire de balise va entre les balises principales ( ).

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



C'est la balise corps .

Ces balises se placent après que la balise principale soit fermée ( ) et elles contiennent tout le reste du script. La balise de fermeture sera toujours juste avant la balise de fermeture finale .

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:11, édité 11 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 1   Jeu 24 Mar - 19:42

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

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

Code:
Ceci est un site d'enseignement pour ceux qui veulent apprendre à écrire des scripts qu'ils utiliseront dans les courriels animés. Ces leçons sont toutes écrites par Connie Schultza Hill sauf indications contraires, elles sont traduites par Mickaëla et la correction française pour ce forum : Mots d'art & Scénarios sera réalisée par Gi.

Connie garde tous les droits d'auteur sur ses leçons et les termes d'utilisation sont inscrits ci-dessous. Lisez s'il vous plaît et tenez-vous en à ces règlements.

LES TERMES D'UTILISATION

Règle 1.

N'enlevez pas les noms dans les leçons et ne les revendiquez pas comme les vôtres.
Ces leçons ne peuvent être vendues de quelques manières que ce soient. Ne les ajoutez pas à un livre, un CD, un site ou un groupe ou une autre forme qui ne soit pas cent pour cent gratuite. Cela signifie également que si votre site offre une adhésion payante ce cours n'y est pas à sa place.

Règle 2.

Utilisez s'il vous plaît ces leçons et apprenez d'eux, partagez-les librement avec vos amis. Si vous désirez ouvrir un groupe [i]"scripting" [/i]pour apprendre à d'autres personnes comment écrire des scripts pour vos courriels animés, et tant que votre groupe apprend ces leçons gratuitement et tant que vous offrez une adhésion gratuite vous pouvez utiliser ces leçons sur votre groupe.


Si vous avez un problème s'en tenant aux règles et aux TERMES D'UTILISATION pour ces leçons, ne les téléchargez pas  et ne les utilisez pas. Le téléchargement de ceux ci et leurs utilisations de n'importe quelle façon que ce soit signifie que vous êtes d'accord avec les Termes  de ces leçons.

©Connie Schutza Hill 2003

Tous droits réservés

---------------------------------------------------------------------------------------------------

Lesson 1

Cette leçon vous apprendra comment écrire un scénario de base. Votre stat fini aura une image, une zone de texte, une tuile de fond et un jeu de midi. Vous apprendrez comment placer l'image et la zone de texte où vous les voulez sur l'écran donc vous pouvez utiliser ce scénario de base pour écrire beaucoup d'autres jolis scénarios de papeterie.

Tout de suite nous ne sommes pas capables de rendre l'image et l'apparence de zone de texte pareil sur toutes les fixations d'écran ,s'il vous plaît, les faire juste sur votre PC et ne vous inquiéter pas ce qu'ils rendent . Ils seront différents suivant les résolutions mais cela importe peu pour le moment  . Nous apprendrons comment faire la même apparence de stats  sur tous les écrans plus tard dans les leçons, mais non tout de suite .. lol

Les articles dont vous aurez besoin pour cette leçon sont ci-dessous.

Un fichier Midi

Une image de votre choix et du domaine public.

Une tuile sans couture de fond( background)



Ouvrez votre HTML KIT ou le BLOC-NOTES.

Quand vous vous ouvrez le HTML KIT vous cliquez sur  nouveau fichier. Là vous verrez qu'un scénario est déjà fait et prêt pour  jouer avec. Désolé mais je vous demanderai maintenant de mettre en évidence le texte et de le supprimer , nous devons apprendre à l'écrire sur une page nue . Supprimez s'il vous plaît tout le texte sur le fichier maintenant. Merci beaucoup. Allez maintenant sur fichier,  nommez et sauvez votre scénario, assurez-vous de le sauver comme un fichier .html et dans  un dossier où vous saurez où le trouver plus tard. Tenez le fichier ouvert et écrivons notre script. A chaque fois que vous ajouterez une ligne de code au scénario ,sauvegardez le , si quelque chose arrive vous ne perdrez rien de votre scénario.

D'abord nous commençons le script avec notre balise  <HTML> .

Ensuite nous  mettons la balise de  fermeture</HTML> à la fin, en bas du scénario donc il est en place et ne sera pas oublié quand nous aurons fini. Assurez-vous de laisser de la place entre les 2 balises pour ajouter le reste du script.

Puis nous mettons la balise <HEAD> Et ajoutez la fermeture </HEAD> Assurez-vous de laisser de la place entre les 2 balises pour ajouter encore plus de particules de code .

Entre le<HEAD> et </HEAD> Mettre  votre balise de titre .

<TITLE> Lesson1</TITLE>

Maintenant nous sommes très fiers d'apprendre à écrire notre propre magie de scenario donc nous voulons signer celui-ci. Pour le moment nous utilisons la balise " rem" que nous allons mettre directement après les balises de titre et avant le</HEAD> .

<!--script ecrit par votre Nom-->

Maintenant nous plaçons la balise  body . Elle se place après </HEAD>

Souvenez-vous la balise (de corps) BODY  ressemble a...

<BODY> Ajoutez maintenant la balise de corps finale</BODY> À la fin du scénario juste avant la balise de fermeture</HTML> .

Bien nous allons ajouter quelques choses à la balise de corps ( BODY) lui-même. Ne vous inquiétez pas; c'est la substance vous avez vu auparavant si vous avez déjà joué avec des scripts  et des stats. Nous voulons d'abord ajouter une couleur au fond du stat donc nous mettrons cette particule de code dans la balise de corps s'ouvrant. Placez-le après le mot  BODY et avant le >

bgcolor=#F0BFF0

La balise BODY ressemble maintenant à ceci .....

<BODY bgcolor=#F0BFF0>

Maintenant sauvegardez ; faites un aperçu de votre stat et vous verrez une particule plate d'un stat et si vous avez utilisé le même numéro coloré que moi , vous aurez un contexte rose. Si c'est ce que vous voyez, donc c'est tout bon .Si ce n'est pas ce que vous voyez et avez utilisé le même numéro coloré que j'ai utilisé alors s'il vous plaît répètez  pas à pas  la leçon et  regardez de nouveau.

Maintenant nous ne voulons pas vraiment avoir juste un fond coloré sur ce stat donc ajoutons une tuile de fond. Cette particule de code entrera dans la balise d'ouverture<BODY> directement après bgcolor=#F0BFF0 Et avant le >

background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/IMAGE.jpg"

Assurez-vous de mettre le nom de votre tuile où il est dit IMAGE et s'assurer de votre  chemin où vous mettez vos fichiers de papeterie.

Votre balise de corps ( BODY) doit ressembler à cela..........

<BODY bgcolor=#F0BFF0 background="C:/Program Files/Common Files/Microsoft Shared/Stationery/IMAGE.jpg">

Assurez-vous que tout soit sur une ligne dans votre script ou cela ne fonctionnera pas. Maintenant que c'est en place dans le scénario s'il vous plaît faites un aperçu du  stat et assurez-vous que votre tuile de fond se voit.

Maintenant passons à la musique. J'ai horreur de travailler sans un peu de musique. lol Juste au-dessous de la balise BODY (de CORPS)  ajoutez la balise du son. Souvenez-vous elle ressemble a..

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

Tenez tout cela sur une ligne dans votre script et assurez-vous du nom du fichier ainsi que du  chemin du fichier soient tous les deux corrects. Faites un aperçu du  stat pour voir si votre midi travaille.

Ensuite nous voulons mettre notre image dans le scénario donc nous mettons la balise de l'image directement sous la balise du son. Souvenez-vous la balise d'image ressemble a.....



<img src="c:/program files/fichiers communs/microsoft shared/papier à lettres/lesson Image1.jpg">

Toujours bien s'assurer du  nom de fichier d'image et son chemin . Faites un aperçu,  Vous devriez voir l'image dans le coin gauche supérieur de votre stat. Cool non? LOL . Mais nous avons un petit problème ici  ,nous ne voulons pas vraiment que l'image  soit toujours dans ce coin en haut à gauche. Parfois nous le voudrons dans une autre endroit sur l'écran. Donc voyons ce que nous pouvons faire pour déplacer cette image autour de l'écran là où nous voulons vraiment qu'elle soit.



Disons que nous voulons que cette image soit à 100 pixels à gauche et 50 pixels du sommet. Nous devons le calculer pour le  dire au PC et qu'il  comprenne où nous voulons mettre cette image. Ainsi voici ce que nous ferons.

À l'intérieur de la balise d'image nous ajouterons un peu de code que le PC comprendra. Juste après le <img Et avant le > Nous allons  mettre cette particule de code.

style="top: 50px; left:100px; position:absolute; "

Cela dit au PC de placer le pixel en haut à gauche de l'image à 100 pixels à gauche et 50 pixels du sommet et le faire absolu. Cela fait votre balise d'image doit ressembler maintenant à celle ci-dessous.

<img style="top: 50px; left:100px; position: absolute; " src="c:/program files/common files/microsoft shared/stationery/lesson Image1.jpg">

Tenez tout ceci, de nouveau, s'il vous plaît , sur une ligne. Sauvegardez et faites un aperçu. Votre image ne devrait plus être juste dans le coin en haut à gauche.

Voici d'autres particules de code que vous pouvez utiliser au lieu du sommet et gauche , voir  ci-dessous

right and top                    (à Droite et en haut)

right and bottom              (à Droite et en bas)

left and bottom                  (à gauche et en bas)

Mais tous seront position:absolute et chacun utilisera le pixel de coin mentionné dans la commande pour le placement.

Nous avons presque fini avec ce scénario mais cela ne serait pas un stat sans une place pour taper une note à un ami , donc maintenant nous ajoutons notre zone de texte. Le texte sera tenu à l'intérieur du conteneur appelé une division , entre la balise d'ouverture et de fermeture . Souvenez-vous, elles ressemblent a.....

<DIV> </DIV>

Nous devons mettre dedans notre balise de fonte  pour que notre PC sache quelle fonte (écriture) diriger ,la taille ainsi que la couleur pour les faire travailler.

Souvenez-vous à quoi ressemble la balise de fonte  et qu'elle va entre l'ouverture et les balises  de division finales.

<FONT face="Black Chancery" size=4 color=#000000>texte ici</FONT>

Sauvegardez et faites un aperçu. Vous devriez avoir les mots" texte ici" dans le coin gauche supérieur. Maintenant de nouveau c'est là où OE( Outlook Express) met la division par défaut et ce n'est pas ce que nous  voulons donc nous devons maintenant dire au PC où mettre cette division. Alors nous ajouterons un peu de code cette fois dans  la balise de division d'ouverture.

Le code que nous ajouterons est le même code nous avons ajouté pour le placement d'image, mais avec des numéros différents parce que nous ne voulons pas le texte en plus sur notre image. lol Donc nous voulons le texte sous notre image. Pour découvrir où placer ce pixel en haut à gauche de la division nous devrons faire un peu de maths. D'abord nous prenons la quantité de pixels que l'image a du sommet qui est 50 puis ajoutons la hauteur de notre image qui dans mon cas est 300 pixels. Nous voulons aussi un peu d'espace entre l'image et le texte donc nous ajouterons 20 autres pixels à ce numéro ce qui  nous donne : 50+300+20 pour un total de 370 pixels.C'est le nombre que nous utiliserons pour le sommet sur la division. La gauche restera le même comme celui de l'image pour qu' ils s'alignent proprement. Voici alors le code fini que nous ajouterons dans la balise de division d'ouverture.

style="top: 370px; left:100px; position:absolute; "

Et voici le plein code de division ......

<DIV style="top: 370px; left:100px; position:absolute; " ><FONT face="Black Chancery" size=4 color=#000000>text here </FONT></DIV>

Sauvegardez et faites un aperçu .Le seul ennui que nous allons avoir  maintenant c'est que  la boîte de texte continuera de grandir à droite quand nous écrirons. Nous ne voulons pas que cela arrive et  nous devons alors maintenant dire au PC la  largeur que  nous voulons pour cette zone de texte . Donc nous ajoutons cette particule de code à la particule de style que nous avons juste ajouté au scénario. Nous voulons aussi une couleur de fond dans la zone de texte alors ajoutons cette autre particule de code qui suivra le code de largeur ci-dessous.



width: 300px; BACKGROUND-COLOR: #df57a3;

Cela se positionne dans le script directement après la position : absolu; et avant " . La balise de DIV doit maintenant ressembler a ceci..

<DIV style="top: 370px; left:100px; position:absolute; width: 300px; BACKGROUND-COLOR: #df57a3; " ><FONT face="Black Chancery" size=4 color=#000000>text ici </FONT></DIV>

Sauvegardez et aperçu .

Une dernière chose et cette leçon sera finie ; vos devoirs pour cette leçon seront inscrits ci-dessous. La plupart d'entre nous veulent que le texte soit centré dans la zone de texte. Il y a un code qui dira au PC de mettre le texte où nous le voulons. Il y a deux façons de le faire mais aujourd'hui nous ne couvrirons que  la particule de code que vous pouvez ajouter à la balise de division pour obtenir le texte où vous le voulez.

À l'intérieur de la balise DIV d'ouverture après le " et avant le > vous pouvez ajouter une des particules de code inscrit ci-dessous:

align=center                ( alignement au centre)

align=left                      ( alignement à gauche)

align=right                  (alignement à droite)

J'utilise le centre donc mon dernier changement dans la balise de division fait mon code comme ceci:

<DIV style="top: 370px; left:100px; position:absolute; width: 300px; BACKGROUND-COLOR: #df57a3; " align=center ><FONT face="Black Chancery" size=4 color=#000000>text here </FONT></DIV>

Bien c'est la fin de leçon 1. Vous avez maintenant devant vous un scénario de base que vous avez écrit et maintenant vous pouvez reprendre ce que vous avez appris et faire un scénario qui n'est pas comme celui-ci, mais ressemble à celui que vous voulez faire. Vous avez un pas dans le monde de la magie et dans les jours suivants ils vous apporteront le plein contrôle de cette magie qui apporte la vie aux stats  et font rêver sur les écrans . Lisez s'il vous plaît les devoirs inscrits ci-dessous et écrivez les scénarios qui feront des stats qui leur ressemble ceci afin de vous familiariser avec les codes.  N'utilisez pas s'il vous plaît de codes que vous n'avez pas eus dans la classe. C'est une chose que je veux vraiment souligner. Je sais qu'il n'est pas dur de prendre  un peu de code d'un scénario que quelqu'un d'autre a écrit et de l'ajouter à vos  propres scénarios. Mais ce n'est pas le but pour le moment . . nous apprendrons  à utiliser  chaque particule que je connais avec le temps.

s'il vous plaît faites les devoirs suivants.

Exercice 1

Écrivez un scénario et mettez l'image à gauche de l'écran et la zone de texte à droit de l'écran.

Exercice 2

Écrivez un scénario et mettez l'image dans le coin supérieur de l'écran avec la zone de texte dans le coin plus bas à gauche de l'écran.

Exercice 3

Écrivez un scénario et avec deux images dont l'une à gauche de l'écran et l'autre  à droite de l'écran.

Faites une zone de texte, placez la au-dessous des images et faites-la s'il vous plaît prendre la même quantité d'espace à travers l'écran comme les images . Donc la zone de texte commencera exactement sous la première image à gauche de l'écran et finira exactement à droite en dessous de la 2em image .

Dernier mais non le moindre, composez vos propres scripts.

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:10, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 2a   Dim 10 Avr - 16:56

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

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

Leçon 2a

Code:
C'est un site d'enseignement pour ceux qui veulent apprendre à écrire des scripts pour la papeterie d'email. Les leçons que vous utiliserez sont toutes écrites par Connie Schutza Hill sauf indication contraire et traduite et arrangée par moi , Mickaëla P. Connie  tient tous les droits d'auteur sur ces leçons et les TERMES D'UTILISATION sont inscrits dans la 1er leçon .



Il est très important de faire les leçons dans l'ordre qu'elles sont écrites ainsi vous les comprendrez mieux .

----------------------------------------------------------------------------

Nous voici  maintenant dans la leçon 2.

Dans cette leçon  nous ajouterons le style et la class aux scénarios. Cela vous permettra de décorer vos stats de jolies frontières. Nous ajouterons des frontières à la zone de texte, les images et le stat lui même ,Et aussi des scrollbars colorés, nous verrons comment empêcher la zone de texte de finir  sur le bord de l'écran et à mettre les images dans les Divisions . Je sais que cela va vousparaitre difficile pour apprendre mais vous constaterez que cela  va assez vite et qu'il est plutôt aisé de le faire.
Bien que nous allons utiliser  les codes des dernières leçons  nous ajouterons assez de nouveaux codes pour que vous donniez une nouvelle apparence à vos nouveaux scripts. Vous pouvez même juste faire des changements dans vos scénarios précédents. Bon  si vous êtes prêts à commencer, voyons de quoi nous avons besoin pour cette leçon .

Vous aurez besoin d'une image de domaine publique. une tuile de fond.
un midi et votre HTML le Kit ou bloc notes.
 
Lesson 2

D'abord parlons un peu du style et la class.Le style dit au PC d'ajouter la substance au stat et aussi où placer ces choses dans celui-ci , quelle fonte utiliser , taille et couleur de la police. Dans la dernière leçon nous avons utilisé ce que l'on connaît comme  style intégré. Cela veut dire qu'il est allé à l'intérieur de la balise  réelle pour la zone de texte ou d'image et qu'il était  dans la balise de fonte aussi. Dans la dernière leçon  le style a seulement dit à l'image où être placée sur le stat , de même qu'à la zone de texte , sa largeur  et sa couleur  aussi. Le style intégré ne sera plus utilisé  donc nous déplaçerons maintenant tout le style en haut entre les balises  <STYLE> </STYLE> .La vieille voie était très pratique parce que vous pouviez faire un nouveau style pour chaque élément du stat là à l'intérieur de la balise de l'élément. Si vous aviez deux zones de texte vous pourriez mettre un style différent pour chaque zone de texte dans la balise pour cette division. Quand nous avons tout déplacé en haut entre les balises <STYLE> </STYLE> . Il a fallu trouver une nouvelle façon de donner un style différent à chaque élément pour le stat. Et ce que l' on a trouvé de mieux s' appelle une" Class".La "class" est une particule de code de style qui concerne juste un élément ( image ou texte ) et vous permet ensuite d'écrire une nouvelle particule de style pour l'élément suivant dans le stat. Pour faire  travailler une "class", nous devons mettre un nom d' id ( identification) dans la balise de l'élément. Ainsi si vous avez deux zones de texte et vous ne voulez pas  qu'elles  aient le même style, vous aurez deux ids différentes, une pour chaque division. Ainsi chaque particule de style pour les images différentes ou les divisions aura un nom différent donc le PC sait quel style mettre à chaque division ou image. Je vous en montrerai plus dans la leçon, je veux juste vous expliquer un peu avant que nous ne la commencions



Dernière édition par Gi le Sam 22 Aoû - 17:09, édité 7 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 2b (suite de la leçon 2)   Mer 13 Avr - 19:00

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

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

Leçon 2 suite

Code:

Encore un chose , il y a plusieurs façons de tout écrire dans votre scénario. Certaines personnes commencent par le style d'abord, certaines font le scénario entier et retournent ensuite pour  ajouter le style . J'ai tendance à faire le mien au fur et à mesure . Donc nous irons dans les deux sens : des éléments du stat ,aux balises de style. Je préfère cette façon car je peux voir comment je travaille sur mon script . Vous développerez votre propre façon quand vous serez habitués à l'écriture des scripts. Pour le moment nous allons suivre ma voie et  ensuite vous choisirez la votre.Maintenant nous allons commencer la leçon .---------------------------------------------------------
Ouvrez votre HTML Kit ou bloc notes, cliquez sur  nouveau fichier et de nouveau, enlevez s'il vous plaît le texte que vous voyez sur ce fichier qui s'est juste ouvert. Si vous utilisez votre scénario de la semaine dernière, n'enlevez pas le texte , faites juste les changements nécessaires au scénario en suivant la leçon. Sauvegardez et nommez  votre nouveau script, assurez vous  de le sauver comme un fichier html dans un dossier où vous pouvez le trouver plus tard. Si  vous n' ajoutez que de nouvelles lignes à votre script sauvez le aussi, ainsi vous ne perdrez pas votre scénario dans le cas où quelque chose arrive, comme parfois les plantages de PC Lol.Le script de cette leçon  commence comme le scénario précédent ainsi ici nous allons:Mettre les balises  HTML là où elles doivent être.Mettre les balises principales à leur place .Maintenant nous arrivons pour mettre  nos balises  de Style. C'est nouveau donc voilà ou elles vont et à quoi elles ressemblent.Souvenez-vous :
<STYLE> </STYLE>
Et elles vont directement après vos balises<TITLE></TITLE> Mettre la balise  de style ouvrante  directement après la balise de titre finale </TITLE> Et mettre la balise de style finale</STYLE> juste avant l'étiquette principale finale </HEAD>Laissez une certaine place  entre les balises de style pour que nous puissions  la remplir .Cela fera la première partie de votre script comme cela.<HTML>
<HEAD>
<TITLE></TITLE>
<STYLE>
</STYLE></HEAD>
Mettez  votre balise  BODY , assurez vous  ensuite d' utiliser la pleine balise de celle ci  avec la tuile de fond. Et assurez-vous de mettre la balise de Body finale à la  fin même du scénario juste avant la balise HTML finale comme nous avons fait dans la dernière leçon.Souvenez-vous , Elle doit aussi être sur une ligne dans votre scénario.<BODY bgcolor=#F0BFF0 background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/IMAGE.jpg">Mettez ensuite votre balise de son .Souvenez-vous :
<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/NOM du MIDI.mid" volume=0 loop=infinite>Maintenant  Allez donc au sommet du scénario et nous commencerons à ajouter un peu de code entre nos balises de style.Nous voulons  dire au PC d'ajouter le style au corps ( BODY) de notre stat. Ce sera la couleur, la sorte et la taille des frontières que vous voyez qui va autour du bord extérieur du stat et ceux qui courent directement le long du bord de la fenêtre. Le style Body contiendra aussi votre joli scrollbar coloré.D'abord parlons de ces frontières ou bordures. Il y a beaucoup de types de frontières que nous pouvons utiliser. Certains travailleront sur le corps ( Body) et certains travailleront sur la division ( DIV) ou travailleront autour d'une image. Vous devrez juste les essayer pour vous donnez une idée de ce que cela donne. Voici une liste des frontières offertes pour l'utilisation.Inset
Outset
Solid
Ridge


Double
Dashed
Dotted
Groove

Pour vous donner un aperçu des frontières allez voir ICIBien ajoutons notre style à notre Body , de temps en temps nous nous y déplacerons et j'expliquerai comment ajouter le style à chacun des autres éléments tout en continuant à travailler sur le scénario de cette leçon.D'abord parce que c'est le style du Body que nous voulons c'est lui que nous mettrons en 1er en l'indiquant avec cette particule de code directement après la balise d'ouverture  <STYLE>BODY {

Remarquez le { Après le  mot BODY. Assurez-vous toujours de le mettre dans le script ou il ne travaillera pas et les frontières ne se montreront pas .Nous allons dire  maintenant au PC ce que nous voulons dans  le corps ( Body)  juste  après le { . BORDER-RIGHT: #9F6865 7px inset;BORDER-TOP: #9F6865 7px outset;
BORDER-LEFT: #9F6865 7px outset;
BORDER-BOTTOM: #9F6865 7px inset;

Les codes de frontières vraiment n'ont pas besoin de beaucoup d'explication, ils indiquent quelle frontière utiliser( border = bord) (right = droit), leur couleur et leur taille .Toujours mettre le : après le nom des frontières comme vous le voyez ci-dessus.Utilisez toujours le plein code pour la couleur incluant le #
[/B]


---->

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:12, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 2 c   Mer 13 Avr - 19:05

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

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

Bienvenue à la leçon 2c (suite).

Code:
Au lieu de mettre la taille en pixels vous pouvez utiliser thick ( épais) ou  thin (réduire) mais je pense vraiment que les px réels sont mieux. Cela vous permet  le plein contrôle sur la largeur de la frontière . Finissez toujours chaque ligne de code dans ce secteur avec le ;Remarquez que je  mélange des styles de frontière  sur le mien. J'aime le faire parce que j'ai constaté que quand j'utilise RIDGE, je fais deux frontières sombres et deux légères et les sombres étaient presque noirs parfois. Je ne l'ai pas aimé et ai constaté que si je mélange inset et outset, ils ressortent  de la même couleur. Cependant, parfois je fais deux frontières de couleur différentes donc c'est à vous de voir . Vous pouvez faire chaque couleur différente si vous voulez le faire . Il y a un tas d'amusement avec ce  jeu  de frontières. LolEnsuite nous voulons mettre des scrollbars colorés . Directement après  les frontières , mettez ces codes pour le scrollbars.

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;
}



Dernière édition par Gi le Sam 22 Aoû - 17:14, édité 7 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 2d (suite )   Mer 13 Avr - 19:08

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

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

Leçon 2d (suite )


Code:
Maintenant il est  grand temps d'évaluer tout le travail aussi faites un aperçu , assurez vous que vous voyez votre tuile de fond, vos frontières, scrollbars et entendez votre midi. Si tout est juste alors c'est parfait .Nous allons mettre d'abord notre image mais nous voulons que cette image aie une division avec une couleur de fond , ainsi nous allons commencer cette partie un peu différement de ce que nous avons fait  dans la dernière leçon. Nous allons ajouter du style à la division et à l'image et allons faire des choses un peu différentes . Nous commencerons par une division cette fois ci mise dans votre balise de division d'ouverture . Souvenez-vous elle ressemble a....<DIV>
Ne mettez pas encore la balise  de division finale parce que nous voulons mettre notre image à l'intérieur de cette division donc elle se montrera comme une apparence feuilletée, un peu  comme une table avec seulement une image. Ajoutez donc la balise  d'image ensuite, souvenez-vous :elle ressemble..<img src="c:/program files/fichiers communs/microsoft shared/papier à lettres/lesson_image1.jpg">Maintenant nous fermons la division et à la  fin même de votre balise d'image placez la balise  de division finale .</DIV>
Assurez-vous s'il vous plaît que vos > et  < soient sans espace entre la balise  de division finale et la fin de la balise  d'image parce que vous aurez un espace indésirable minuscule dans votre stat si vous laissez un trou minuscule entre les deux , donc c'est juste une bonne habitude à prendre  avec  eux .Maintenant ajoutons un peu de style à la division et à l'image , le PC saura ce que nous voulons lui ajouter et où placer la division et l'image .D'abord nous mettrons une  "class" d'identification dans la balise  de division entre le <DIV et > de la balise  de division d'ouverture  et mettre cette particule de codeclass=d1
Voilà ce que cela donne<DIV class=d1>
Maintenant nous allons  mettre une class d'identification dans notre balise d'image donc entre le <img et le src mettre cette particule de codeclass=p1
Voici le résultat ...<img class=p1 src="c:/program files/fichiers communs/microsoft shared/papier à lettres/lesson image1.jpg"> Et le plein code pour la division et la balise d'image combinée est ci-dessous..<DIV class=d1><img class=p1 src="c:/program files/fichiers communs/microsoft shared/papier à lettres/lesson Image1.jpg"></DIV>Ces deux particules de code disent au PC que la ligne de scénario de style va à tel élément du stat. Chaque" class" a une  (id) idendification différente pour empêcher le PC de mettre le faux style sur les éléments.Maintenant allons aux balises de style et mettons dans le style ce que nous voulons pour ces deux éléments du stat et ensuite nous ferons un aperçu pour nous assurer qu'il fonctionne comme nous le désirons...Sur la ligne en dessous de } Qui  fini la particule de style de corps et avant la fermeture</STYLE> Nous allons mettre cette particule de code..d1{
Cela dit au PC  à quel élément dans le stat appliquer cette particule de style . Assurez-vous de commencer le code avec le point et ensuite le nom d'id ( identification) qui dans ce cas est d1 et le faire suivre ensuite de {Maintenant  nous allons dire à la division où se placer sur l'écran ,  cela peut être mis dans le script comme  je l'ai tapé ici, aucun besoin de tenir tout cela sur une ligne.top:50px;
left:100px;
position:absolute;
Ensuite nous allons  dire à la division : la grandeur et la couleur  que nous désirons. Pour découvrir la taille il faut d'abord connaitre celle de notre  image. Alors nous ajoutons un peu sur chaque côté et sur le sommet et le bas pour voir combien de la division nous voulons montrer autour de notre image. Nous devrons aussi ajouter un peu de jeu pour les frontières que nous ajouterons à l'image et à la division aussi. Voici comment j'ai travaillé le mien .Dans mon cas l'image est de 300px de haut  et 300px de large. Je veux ajouter une  frontière de 5 pixels entièrement autour de mon image et la division, je veux avoir 10 pixels de la division se montrant sur tous les côtés de mon image. Donc je prends la largeur de l'image : 300, ajoutez 5px pour la gauche avoisinant l'image, 5 pour la droite de l'image, j'ajoute  5px pour la droite avoisinant  la division, j' ajoute  5 px pour la gauche avoisinant la division et 10 pour le côté droit de la division et 10 pour le côté gauche. Cela me donne cette particule de maths.300+5+5+5+5+10+10= 340 Cela me dit de rendre ma division 340px de large. Parce que mon image est carrée, je sais que la même hauteur est nécessaire mais vous feriez  de la même façon pour  trouver la hauteur si votre image n'est pas carrée.Maintenant nous ajoutons la hauteur et la largeur , c'est le code que nous voulons placer directement après la position : absolu dans le style d1.height:340px;
width:340px;
BACKGROUND-COLOR: #df57a3;
ici nous ajouterons nos frontières à la division.  juste après la particule de code vous avez ajouté dans le style mettez le code que vous voyez ci-dessous.BORDER-RIGHT: #9F6865 5px inset;
BORDER-TOP: #9F6865 5px outset;
BORDER-LEFT: #9F6865 5px outset;
BORDER-BOTTOM: #9F6865 5px inset;
Parce que c'est tout ce que nous voulons faire à notre division nous finirons maintenant cette classe de style, donc ajoutons la particule de code directement après la dernière frontière :}
Cela vous donnera une déclaration de style de class sur la division comme ceci....d1{
top:50px;
left:100px;
position:absolute;
height:340px;
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;
}
Si vous sauvez et faites un aperçu de votre stat tout de suite, vous verrez que la division est en place mais l'image ne va pas être dans le centre de notre division, parce que nous n'avons pas donné à l'image de style donc le PC  ne sait pas où la placer sur l'écran. elle est placée par  défaut .Nous allons donc  donner maintenant à notre image un certain style. Nous avons utilisé class=p1 pour notre class id d'image donc nous écrirons maintenant le style pour cette classe. Nous mettons cette particule de code directement après la fermeture de .d1} et avant l'étiquette de style finale..p1{
Ensuite disons à l'image où se mettre. Cette fois nous devons seulement lui dire où se placer à l'intérieur de la division parce que la division ressemble à une bouteille, l'image est à l'intérieur de la division donc elle ne va pas errer  toute seule. Nous ne la voulons pas juste directement sur le bord de la division, nous voulons la centrer à l'intérieur de la division . Souvenez-vous quand nous avons calculé la taille de la division nous avons tenu compte de 10px de la division montrant à droit, gauche, supérieur et le bas de l'image.  Donc cette particule de code ci dessous va ensuite dans la particule de style de class..top:10px;
left:10px;
position:absolute;
Ensuite nous devons dire au PC la  grandeur de  notre image, Donc nous ajoutons la largeur et la hauteur de l'image sera directement après la position:absolute;height:300px;
width:300px;
Nous voulons maintenant ajouter des frontières à notre image donc nous mettons celles ci dans la particule de style ; parce que c'est la dernière chose que  nous allons faire à cette particule de style nous fermerons la déclaration de style de class. Cette fois je veux  ma frontière soit double ajoutez-le si vous le souhaitez à votre scénario.
BORDER-RIGHT: #9F6865 5px double;
BORDER-TOP: #9F6865 5px double;
BORDER-LEFT: #9F6865 5px double;
BORDER-BOTTOM: #9F6865 5px double;
}
Votre pleine déclaration de class d'image  ressemblera maintenant.....p1{
top:10px;
left:10px;
position:absolute;
height:300px;
width:300px;
BORDER-RIGHT: #000000 5px double;
BORDER-TOP: #000000 5px double;
BORDER-LEFT: #000000 5px double;
BORDER-BOTTOM: #000000 5px double;
}
Sauvez votre scénario et faites un aperçu  voilà votre division est là où vous voulez qu'elle soit , la division a une frontière , une couleur et l'image est centrée  à l'intérieur de la division avec  une frontière aussi. vous apprenez de plus en plus magie et comment la contrôler. Vous devriez être heureux maintenant parce que vous faites du bon travail avec cette leçon.Je sais que cela prend un peu de temps mais nous avons presque fini. Nous sommes prêts à nous déplacer à la zone de texte maintenant et mettre de nouveau une division donc nous pourrons avoir une apparence sur la zone de texte pour correspondre à ce que nous avons sur l'image. Cette fois nous allons aussi ajouter le scrollbar à notre zone de texte donc la boîte ne continuera pas à grandir quand nous écrirons. Le scrollbar coloré peut être d' une couleur différente de celui du corps du stat. Nous faisons toujours correspondre  les couleurs de nos barres  avec la zone de texte parce que parfois ce n'est pas les mêmes couleurs que le restant du stat. Reculez  dans le corps du scénario et mettons dedans notre division  de zone de texte.Directement après  la division qui contient l'image nous allons mettre  une autre division. Nous devrons lui donner une class id comme auparavant, mais avec un nom différent donc elle peut avoir des couleurs de frontière différentes et être de taille différente et être placée dans un endroit différent sur l'écran. Donc nous appellerons cette division d2. Mettez cela dans votre scénario. Et souvenez-vous ne fermez pas encore  cette division parce que nous voulons ajouter une autre division dans cette division.<DIV class=d2>
Ensuite nous allons mettre  notre division qui contiendra notre texte, cette division aura besoin d'une class id aussi et aura besoin de son propre nom de class . Parce que celle-ci est pour mon texte je ne la nommerai pas d . Je la nommerai tx1 donc je sais qu'elle contient le texte. Nous mettons alors ce code dans notre script  juste après la dernière division.<DIV class=tx1>

Souvenez-vous : j'ai dit que nous faisons au mieux donc nous mettrons toujours le mot texte dans notre scénario où se trouve celui-ci. Parcequ'il nous laisse voir d'un coup d'oeil à quoi notre texte ressemble et s'il est où nous le voulons , si la fonte et la taille sont correcte ou non. Maintenant mettez le  mot texte directement après la division dans le scenario.texte

Nous allons maintenant fermer la division qui contient le texte aussi bien que la division qui contient la division de zone de texte donc  mettez dans le scénario....</DIV></DIV>
Cela nous donne le plein code que vous voyez ci-dessous...
<DIV class=d2><DIV class=tx1>text</DIV></DIV>
[/b][/color]


Dernière édition par Gi le Sam 22 Aoû - 17:38, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 2 (suite & fin)   Lun 2 Mai - 0:32

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

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


Leçon 2 (suite & fin)

Code:
Rappelez-vous de la  dernière leçon , notre zone de texte avait été placée directement sur le bas de l'écran. Cette fois-ci  nous allons apprendre le tour qui l'empêchera de ce coller en bas . Nous allons nous déplacer  de temps en temps aux balises de style supérieures et ajouter nos dernières particules de style et enfin terminer cette leçon.Le tour est d' ajouter une autre division à notre stat après la division de texte. Celle-ci aura besoin d'une class Id aussi parce que nous devons lui dire où elle doit être placée, autrement elle sera dans le coin en haut à gauche .Donnons lui le nom de classe  id : d3.Votre code ira directement après la dernière particule de code nous avons ajouté au scénario, il ressemble à ....<DIV class=d3></DIV>
Maintenant retournons aux balises  de style et mettons  le style de classe pour ces trois divisions..La première division est celle qui contient la division de zone de texte . Rappelez-vous le nom de la classe id  cette division est d2 donc nous commençons notre code directement après la dernière particule de code de style avant la balise de style finale. Nous voulons lui dire où être placée, sa couleur , quel genre de frontières avoir et quelle est sa taille  ,

notre  code ressemblera à celui-ci.

.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;
}
Nous avons maintenant fini notre leçon 2. Vous avez encore fait un nouveau  pas dans le monde de la  magie et avez gagné encore plus de contrôle sur les éléments qui composent un stat. Vous  connaissez aussi maintenant assez de code pour  inventer quelques merveilleux scénarios originaux. Vos devoirs suivent.

---------------------------------------------------------------------

Devoirs
Exercice 1
Faites un stat avec la zone de texte et l'image à l'intérieur d'une grande division.Exercice2
Ajoutez le style à certains de vos scénarios de la dernière leçon . Vous pouvez leur ajouter des divisions si vous aimez,  amusez vous juste en les faisant  différents.Exercice 3.Expérimentez les codes que vous connaissez jusqu'ici et inventez des scénarios que vous voulez faire.  Ayez juste un peu d'amusement avec ce que vous connaissez.

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:21, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 3 a   Lun 2 Mai - 1:20

Cours 3 a
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved




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

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


Code:
Bienvenue à la leçon 3.

Pour cette leçon vous aurez besoin de ceci :
1 tuile de fond
3 images du domaine public, vos  photos ou images ou peintures personnelles.
Un Midi
Un kit de HTML ou le bloc-notes

Cette leçon de script construira une table avec trois images et trois zones de texte.

------------------------------------------------------------------------------------------------------

Cette semaine nous commencerons à écrire des scénarios de table. Les tables sont bien sophistiquées pour tous les scénarios. Elles sont là où vous voulez qu'elles soient  et  peuvent être écrites pour se voir sur chaque écran. Elles peuvent être de fantaisies ou plates . Je fais les choses un peu différemment pour voir si cela vous aidera à comprendre mieux ce que je fais et  vous rendre plus facile la leçon . Sur cette leçon nous aurons le texte supplémentaire plus coloré . J'espère qu'il vous donnera une meilleure compréhension de ce que nous travaillons pour voir  un résultat final sur la leçon. J'ajoute aussi un  tas de commentaires à l'intérieur du scénario donc vous pouvez voir d'un coup d'oeil ce que vous travaillez ,ainsi il y a un tas de REM de déclarations cette fois.Pendant la leçon. Si vous voyez quelque chose de cette couleur bleue brillante c'est pour attirer  votre attention sur cette balise.Ce qui est en  bleu foncé est là pour vous montrer à quoi votre script doit ressembler ,là à 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.Tout ce qui est en vert  est la  nouvelle particule du script que vous ajouterez et devrez regarder. De cette particule  vous pouvez vous assurer que vous travaillez correctement et  pouvez alors vérifier le scénario qui  doit ressembler jusqu'ici en se déplaçant au secteur bleu foncé suivant qui suivra toujours en vert.Les lignes rouges trient les sections de la leçon donc je peux me maintenir au niveau où je suis comme je veux . J'ajouterai des numéros à ces lignes , vous pourrez mieux  savoir ou vous en êtes. Je noterai aussi pourquoi chaque section est en rouge pour que cela vous aide .

--------------------------------------------1--------------------------------------------------

Les nouvelles balises que  nous couvriront dans cette leçonNous allons commencer des tables aujourd'hui mais d'abord nous devons comprendre les nouvelles balises que  nous utiliserons et comment les utiliser.Notre première nouvelle balise est appelée balise de Table et elle ressemble.à ...<TABLE>Cela ouvre une table dans le script. À l'intérieur de cette balise de table d'ouverture nous devrons mettre l'information qui dit à la table où elle doit etre , combien d'espace entre l'image et le mur de la cellule et combien d'espace mettre entre chaque cellule dans la table aussi bien que la  largeur et notre class id Regardons comment dire ces choses à notre PC. D'abord notre classe d'identification, Nous l'avons travaillé  dans la dernière leçon. Ce sont  les frontières ou nous avons ajouté  nos divisions. Cela  travaille pour les tables comme pour les divisions. Ensuite cellule Espacement ,  L'attribut CELLSPACING permet de définir en pixels l'espace de séparation des cellules. C'est l'espace qui sera entre chaque cellule dans la table. Ca ressemblera dans le scénario à : cellSpacing=30

Vous pouvez utiliser n'importe quel nombre, c'est suivant votre goût et si vous voulez le secteur plus large, mettez un nombre  plus grand ,ou si vous ne voulez pas qu'il soit  si large faire un nombre plus petit.Ensuite Remplissage de cellule.

 L'attribut CELLPADDING permet de définir en pixels l'espace séparant le bord des cellules de leur contenu. . Dans le scénario voici à quoi il  ressemble: cellPadding=10  Ce nombre peut être n'importe quel numéro , toujours suivant ce que vous désirez , ajustez-le pour convenir à votre goût.Ensuite nous avons la largeur  C'est assez facile, cela dit au PC comment faire le largeur de votre table. La ligne de code du scénario:  width=450 . Il y a deux façons de le faire,quelques personnes utilisent le % et d'autres juste un nombre. J'utilise un nombre qui corresond à la largeur en pixels que je veux pour ma table. Utilisez un nombre parce que c'est plus facile à contrôler quand le stat est fini .  Maintenant si vous mettez la table à 60 % , celle ci  grandira pour remplir 60 % de l'écran sur chaque PC pour voir votre stat. Si votre résolution est 600X800 ,Cela va sembler grand sur vos fixations, mais, avec une résolution 1024X768  la table va être  plus grande parce votre table va avoir de très larges espaces entre l'image et les frontières de la table et cela ne sera pas tès joli . C'est pourquoi j'utilise toujours un nombre. Aussi comment calculer ce nombre ? Ce n'est pas aussi dure qu'il le semblerait. La plupart du temps c'est la même largeur que mon image.Si j'ai deux images à travers, j'ajoute la largeur des deux images et fais la table de cette largeur. La meilleure façon de l'évaluer c'est de jouer avec les numéros de largeur quand vous avez fini avec cette leçon. Changez-le juste et considérez le stat et ensuite vous pouvez voir quels changements il fait dans celui-ci.Ensuite nous avons l'alignement  Cela dit à la table où elle doit  placée . Nous n' utiliserons pas de position absolue parce que les tables sont conçues pour se déplacer ainsi elles sembleront normales  sur tous les écrans.  Nous pouvons les mettre dans un secteur de l'écran precis dans le centre , à gauche ou à droite en écrivant une de ces choses.

align=center    ( centre)align=right        (droite)aligh=left          (gauche)

J'aime bien être dans le centre donc j'utilise align=center

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:17, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 3b, les tables.   Lun 2 Mai - 1:33

Code:
[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]

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par le Ven 18 Nov - 23:47, édité 7 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 3c   Lun 2 Mai - 2:12

Cours 3 (c)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved


Leçon 3c
4------------------------------------

Code:
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 ..

------------------------------------5-----------------------------------------

Bien  nous avons fini avec cette partie et maintenant nous devons juste ajouter un certain style pour nos cellules, zones de texte et notre table..

Nous avions apris le style à la dernière leçon donc vous savez comment faire cette partie mais nous allons  ici  nous rafraîchir la mémoire de  ce que nous avons appris...

 D'abord nous ajouterons notre style pour notre table. Souvenez-vous nous avons nommé cette classe id comme tb1 donc maintenant nous ajouterons des frontières au style de notre table..

Au début du scénario, entre l'ouverture<style> et la fermeture</style> , directement après  style body nous allons mettre  nos renseignements de style tb1. Nous voulons seulement des frontières et la couleur de fond sur cette partie. Rappelez-vous de mettre la période ( {  ) avant la tb1 ,le PC saura que c'est seulement pour être utilisé sur les choses avec le nom de cette classe id .. Voici à quoi la pleine balise ressemblera..

.tb1{ border-top: #F0DCC8 8px solid;

border-left: #D8B898 8px solid;

border-right: #F0DCC8 8px solid;

border-bottom: #D8B898 8px solid;

background color=#E0C4A8;

}

 

Votre  scénario devrait maintenant  ressembler à..

<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;

}

.tb1{ border-top: #F0DCC8 8px solid;

border-left: #D8B898 8px solid;

border-right: #F0DCC8 8px solid;

border-bottom: #D8B898 8px solid;

background color=#E0C4A8;

}

 

</STYLE>

</HEAD>

<!--Background (fond) tient ici dans la 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 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/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 4duTEXTE 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/fichiers communs/Microsoft Shared/papier à lettres/lmage3td5.jpg"></TD>

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

</TABLE>

</body>

</html>

 Si vous regarder votre stat maintenant vous verrez la table maintenant avec  des frontières et  là une couleur de fond sur la table.. Ce sera aussi dans les cellules parce qu'elles sont dans la table mais nous pouvons la changer car la couleur de fond des cellules n'est pas la même que  la table.. Tout de suite votre table ressemble à un grand bouton.

----------------------------------------6-------------------------------------

 Maintenant nous allons ajouter le style pour nos cellules de table...

Juste directement après les renseignements de style .tb1 nous ajouterons les renseignements pour le style de nos cellules de table. J'ai nommé la mienne classe tb2. Une chose que je veux dire ici c'est  que vous pouvez nommer cette classe id comme vous le voulez. Quelques personnes utilisent la partie de leur nom pour la classe id, les nomment surtout pour savoir avec quelle partie du scénario elles travaillent . Je change les noms de ma classe id  sur la plupart de tous mes scénarios, cela dépend juste de ce que je veux quand j'écris le scénario..lol Parce que j'ai voulu que toutes mes cellules aient  la même frontière et couleurs de fond ,je leur ai toutes donné la même  classe id et aurai seulement besoin d'une étiquette de renseignement pour elles. Si vous voulez que les vôtres soient différentes vous aurez besoin d'un nouveau nom de  classe id pour chaque cellule et vous devrez l'écrire  dans la balise de renseignements de style dans le secteur de votre scénario. J'ai aussi utilisé des couleurs différentes à mes frontières. Si vous utilisez une une couleur clair et une sombre vous verrez votre table en 3D. Vous ne devez pas utiliser deux couleurs, n'hésitez pas à n'en utiliser seulement qu'une ,vous pouvez voir que chaque bord à une couleur différente .

Voici  tous mes renseignements de balise pour les cellules....

.tb2{ border-top: #B8A080 8px double;

border-left: #F0DCC8 8px double;

border-right: #B8A080 8px double;

border-bottom: #F0DCC8 8px double;

background color=#D8BCA0;

}

Votre  script ressemblera à celui ci..

<html>

<head>

<title>Untitled</title>

<!--Ce scénario a été écrit pour la Leçon 3 tables par Connieet 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;

}

.tb1{ border-top: #F0DCC8 8px solid;

border-left: #D8B898 8px solid;

border-right: #F0DCC8 8px solid;

border-bottom: #D8B898 8px solid;

background color=#E0C4A8;

}

.tb2{ border-top: #B8A080 8px double;

border-left: #F0DCC8 8px double;

border-right: #B8A080 8px double;

border-bottom: #F0DCC8 8px double;

background color=#D8BCA0;

}

</STYLE>

</HEAD>

<!--Background (fond) ici sur la ligne  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 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/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 del'image 3 ici--><IMG src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/lmage3td5.jpg"></TD>

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

</TABLE>

</body>

</html>

Visionnez votre stat et vous verrez maintenant des frontières et des couleurs de fond sur vos cellules
.[/b][/color]

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:16, édité 5 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours de Connie Shultza : Leçon 3d   Lun 2 Mai - 2:13

Cours 3 (d)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved




Leçon 3d

7-----------------------------------------

Code:
Addition de style aux zones de texte.

Dans ce scénario j'ai trois divisions de zone de texte et j'ai voulu avoir la liberté de changer la couleur de fonte , la taille , les couleurs de fond et scrollbars sur chacune de ces divisions donc je leur ai données chacune une classe différente id. Maintenant dans le secteur de style du scénario nous allons écrire en haut les renseignements de style pour chacune de mes zones de texte. Comme auparavant dans la dernière leçon ces renseignements de style tiendront les renseignements de fonte aussi bien que la taille de la zone de texte. Nous voulons que la taille soit  la même que nos images pour que  notre table reste agréable et propre. Mes images font toutes 150 par 150, je ferai toutes mes zones de texte pareil .. Remarquez sur ces divisions nous n'avons pas de position c'est parce qu'elles sont à l'intérieur d'une table et que la table flottera. Donc nous n'avons pas besoin de  leur dire où elles doivent être, elles le  savent pour rester dans cette cellule de table où nous les avons mis. Ainsi voici les pleins codes pour ces trois divisions de zone de texte..

 

.tx1{

background color=#8AD4FC;

scrollbar-face-color:#8AD4FC;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#75B5D7;

scrollbar-darkshadow-color:#2C4451;

scrollbar-shadow-color:#669CBA;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#8AD4FC;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Tahoma;

FONT-SIZE: 12pt;

COLOR: #8A297F;

height:150px;

width: 150px;

}

.tx2{

background color=#FFD48F;

scrollbar-face-color:#FFD48F;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#E2AC7F;

scrollbar-darkshadow-color:#5A4432;

scrollbar-shadow-color:#C0926C;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#FFD48F;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Comic Sans MS;

FONT-SIZE: 14pt;

FONT-STYLE: ITALIC;

COLOR: #6E5B28;

height:150px;

width: 150px;

}

.tx3{

background color=#8AD48F;

scrollbar-face-color:#8AD48F;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#8AB88F;

scrollbar-darkshadow-color:#3C503E;

scrollbar-shadow-color:#6E9372;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#8AD48F;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Lucida Handwriting;

FONT-SIZE: 14pt;

COLOR: #5E9651;

height:150px;

width: 150px;

}

Cela vous donnera un script qui ressemble à ceci..

<html>

<head>

<title>Untitled</title>

<!--Ce scénario a été écrit pour la Leçon 3 tables par Connieet traduis 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;

}

.tb1{ border-top: #F0DCC8 8px solid;

border-left: #D8B898 8px solid;

border-right: #F0DCC8 8px solid;

border-bottom: #D8B898 8px solid;

background color=#E0C4A8;

}

.tb2{ border-top: #B8A080 8px double;

border-left: #F0DCC8 8px double;

border-right: #B8A080 8px double;

border-bottom: #F0DCC8 8px double;

background color=#D8BCA0;

}

.tx1{

background color=#8AD4FC;

scrollbar-face-color:#8AD4FC;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#75B5D7;

scrollbar-darkshadow-color:#2C4451;

scrollbar-shadow-color:#669CBA;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#8AD4FC;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Tahoma;

FONT-SIZE: 12pt;

COLOR: #8A297F;

height:150px;

width: 150px;

}

.tx2{

background color=#FFD48F;

scrollbar-face-color:#FFD48F;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#E2AC7F;

scrollbar-darkshadow-color:#5A4432;

scrollbar-shadow-color:#C0926C;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#FFD48F;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Comic Sans MS;

FONT-SIZE: 14pt;

FONT-STYLE: ITALIC;

COLOR: #6E5B28;

height:150px;

width: 150px;

}

.tx3{

background color=#8AD48F;

scrollbar-face-color:#8AD48F;

scrollbar-highlight-color:#FFFFFF;

scrollbar-3dlight-color:#8AB88F;

scrollbar-darkshadow-color:#3C503E;

scrollbar-shadow-color:#6E9372;

scrollbar-arrow-color:#FFFFFF;

scrollbar-track-color:#8AD48F;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Lucida Handwriting;

FONT-SIZE: 14pt;

COLOR: #5E9651;

height:150px;

width: 150px;

}

</STYLE>

</HEAD>

<!--Background (fond) ici sur la ligne de body-->

<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>

<!--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 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/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/fichiers communs/Microsoft Shared/papier à lettres/lmage3td5.jpg"></TD>

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

</TABLE>

</body>

</html>

Sauvegardez et visionnez votre stat, cela devrait être bien beau maintenant avec les couleurs derrière le texte et les fontes différentes dans chaque cellule. Nous avons fini avec la leçon 3 .. maintenant pour les devoirs..

Voici l'exemple de cette leçon ICI

---------------------------------------8-----------------------------------

Un bout rapide d'abord..

Si vous voulez une cellule vide dans votre table, une sans image et aucun texte mais vous voulez que vos frontières se voient... Mettez juste la taille que vous souhaitez dans la balise TD .. comme cela..

<td class=tb2 height=150px width=150px>

 Ajoutez alors cette balise entre l'ouverture et la fermeture  des balises TD , la cellule ne montrera pas les frontières.. <BR>

La pleine balise  ressemblera..

<TD class=tb2 height=150px width=150px><BR></TD>

---------------------------------------9-----------------------------------

Devoirs.

1. Écrivez un script de table avec autant de cellules et rangées que vous aimez et vous assurer pour avoir au moins une cellule qui contient une division de zone de texte..

2. Juste le jeu avec ce que vous avez appris dans cette leçon. Amusez-vous et aimez la magie des tables.

Il y a toujours beaucoupà faire dans les tables et nous entrerons dans de nouvelles parties de tables à la leçon suivante donc vous devrez très bien connaître cette leçon , pour ne pas avoir trop de nouvelle substance à la prochaine leçon..

Il y a une chose que je veux vraiment que vous vous souveniez de scripting, tant que les travaux de scénario  ne font pas  fermer OE et que  le stat ressemble à ce  que vous vouliez , c'est que votre script  est correct.  Exprimez  vous donc avec vos scénarios et vos stats. C'est pourquoi j'essaye de pas vous dire quel genre de scénario écrire pour des devoirs. Je vous laisse libre de vous exprimer .  C'est ce qui est à l'intérieur de vous qui doit sortir et dire hé regardez celui-ci je l'ai imaginé. C'est ce que scripting est .... puis partagez votre magie avec le monde

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:39, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 4a   Lun 2 Mai - 2:18

Code:
Bienvenue à la leçon 4.

Dans cette leçon nous allons apprendre trois nouvelles choses. D'abord nous apprendrons comment ajouter un message à la fenêtre de statut.

Nous apprendrons comment ajouter un deuxième fichier son à notre scénario.

Puis nous allons apprendre comment combiner des cellules en ligne pour faire des cellules de tailles différentes dans la rangée. Ce script construira une table de 4 cellules qui aura deux images sur la rangée supérieure et une zone de texte dans la rangée de bas.Vous aurez un fichier midi et un jeu de fichier wav ,un message de fenêtre de statut avec les frontières normales et scrollbars. J'espère que vous vous amuserez avec cette leçon.

----------------------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 devrait 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----------------------------------------

De quoi vous aurez besoin pour cette leçon

1. HTML Kit ou bloc-notes ou autre de votre choix.

2. 2 images du domaine public ou personnel . Assurez-vous qu'elles soient de la même hauteur.

3. 1 tuile Sans couture pour le Fond

4. 1 fichier Midi

5. 1 fichier wav pas trop lourd .

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

Les nouveaux codes que nous couvriront

colspan=2 L'attribut COLSPAN permet de définir le nombre de colonnes de tableau que devra occuper la cellule. Cet attribut dit au PC de combiner deux ou plusieurs cellules de suite dans une cellule. Il est ajouté à la cellule de table<TD> .Celui-ci dit de combiner 2 cellules, mais si vous voulez en combiner plus ,vous changez juste le numéro qui correspond aux cellules que vous voulez faire dans une cellule.

onload="window.status='. . .message ici. . . ' " Ce code dit au PC de mettre votre message dans la fenêtre de statut en bas de l'écran ( dans la barre ) dans OE ( outlook Express) ou dans IE ( Internet Explorer). Ce code doit être écrit comme vous le voyez sauf celui qui dit le message ici, c'est là où vous mettrez votre nom et message. Cette particule de code entrera dans la balise de corps pour le moment et plus tard quand nous apprendrons le VBS nous l'enlèverons de la balise de corps et le mettrons dans le VBS. Tout de suite il est pratique d'avoir cette ligne dans votre scénario .

<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/wav File.wav" volume=0 loop=1>

C'est la deuxième balise du son. Celle-ci tient un fichier wav au lieu d'un midi et c'est la seule différence, juste l'extension de fichier. Cependant le PC jouera en même temps tant le fichier midi que le fichier wav .

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

Début de notre script..

Commencez votre scénario de comme d'habitude avec HTML, HEAD, TITLE, STYLE et les balises de corps( BODY) . Ajoutez le style pour le corps parce que nous en aurons besoin dans le scénario et mettez à l'arrière-plan la tuile aussi bien que la balise du son midi. Votre script devrait ressembler à celui-ci .

<html>

<head>

<title> </title>

<!--Scénario par Votre nom ici-->

<style>

Body{

BORDER-RIGHT: #7A4F2F 7px inset;

BORDER-TOP: #7A4F2F 7px outset;

BORDER-LEFT: #7A4F2F 7px outset;

BORDER-BOTTOM: #7A4F2F 7px inset;

scrollbar-face-color:#7A4F2F;

scrollbar-highlight-color:#C2B0A2;

scrollbar-3dlight-color:#8B5D3C;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#C2B0A2;

scrollbar-track-color:#7A4F2F;

}



</style>

</head>

<!--La tuile de fond ce tient ici sur une ligne-->

<BODY bgColor=#FFFFFF background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/BG Tile.jpg">

<!--Fichier Midi ici-->

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

</body>

</html>

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par le Lun 2 Mai - 2:35, édité 1 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 4b   Lun 2 Mai - 2:25

Code:
Bienvenue à la leçon 4.

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

Maintenant ajoutons le message de fenêtre de statut.

D'abord regardons le code et ce qu'il dit de faire à l'ordinateur .

onload="window.status='. . .message ici. . . ' "

Le code commence par le mot onload. C'est lui qui dit au PC de diriger et d'ouvrir cette particule de code dès que la papeterie s'ouvre .

Le signe = signifie que le code peut commencer à lancer ce qui suit le signe =( c.à.d ici c'est window.status ) quand les courses du stat sont égales .

Les marques " " entourent la commande qui court quand le stat s'ouvre.

window.status Cela dit juste au PC de mettre le message où nous voulons qu'il soit, c'est à dire dans le bas de la fenêtre dans la barre d'état.

Un autre = cette fois, celui-ci, dit au PC que le statut de fenêtre doit montrer ce qui suit le signe égal = ( ici c'est bien sûr. . .message ici. . . ).

Remarquez ensuite que nous avons une marque de citation simple ( ' ). C'est parce que la première de la commande est entourée par la marque de citation double normale. L'ordinateur doit savoir que la commande principale est dans la citation double et la mineur ou la deuxième commande est dans les marques de citation simples.

La chose suivante sont les points, ceux-là peuvent être remplacés par quelque chose d'autre ( fantaisie genre ** ou ~~ etc..) que vous aimez. Puis vous mettez votre message , le nom de l'artiste de l'image ou votre nom . Nous ajoutons ensuite les citations doubles pour dire au PC que nous avons fini avec la commande entière.

Cette ligne entière de code entre dans la balise de contexte de corps ( BODY) et vous devrez toujours la tenir sur une ligne donc rappellez vous de bien le faire pour qu'il ne se montre sur plus d'une ligne.

Voici la voie de votre balise de contexte de corps quand vous aurez fini d' ajouter le code de fenêtre de statut..





--------------------Votre script devrait ressembler à celui-ci ---------










Body{

BORDER-RIGHT: #7A4F2F 7px inset;

BORDER-TOP: #7A4F2F 7px outset;

BORDER-LEFT: #7A4F2F 7px outset;

BORDER-BOTTOM: #7A4F2F 7px inset;

scrollbar-face-color:#7A4F2F;

scrollbar-highlight-color:#C2B0A2;

scrollbar-3dlight-color:#8B5D3C;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#C2B0A2;

scrollbar-track-color:#7A4F2F;

}















----------------------------------------------------------5------------------------

Ensuite nous ajoutons notre deuxième fichier de son.

Cette balise vraiment ne doit pas être expliquée. elle est la même que celle que nous utilisons habituellement seulement maintenant vous pouvez avoir deux sons dans un script , un midi et un wav . Ce code va directement au-dessous de votre autre code de musique, ajoutez-le au scénario maintenant..



-------Votre scénario devrait maintenant ressembler à ceci----------











Body{

BORDER-RIGHT: #7A4F2F 7px inset;

BORDER-TOP: #7A4F2F 7px outset;

BORDER-LEFT: #7A4F2F 7px outset;

BORDER-BOTTOM: #7A4F2F 7px inset;

scrollbar-face-color:#7A4F2F;

scrollbar-highlight-color:#C2B0A2;

scrollbar-3dlight-color:#8B5D3C;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#C2B0A2;

scrollbar-track-color:#7A4F2F;

}













_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Lun 17 Aoû - 20:50, édité 2 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 4 a   Lun 2 Mai - 2:28

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

Leçon 4
Bienvenue à la leçon 4.

Code:
Dans cette leçon nous allons apprendre trois nouvelles choses. D'abord
      nous apprendrons comment ajouter un message à la fenêtre de statut.
      Nous apprendrons comment ajouter un deuxième fichier du son à notre
      scénario.
      Puis  nous allons apprendre comment combiner des cellules en ligne pour
      faire des cellules de taille différentes dans la rangée. Ce script 
      construira une table de 4 cellules qui aura deux images sur la rangée
      supérieure et une zone de texte dans la rangée de bas.Vous aurez un
      fichier midi et un jeu de fichier wav ,un message de fenêtre de statut
      avec les frontières normales et scrollbars. J'espère que  vous vous
      amuserez avec cette leçon.
      ----------------------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 devrait
      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----------------------------------------
      De quoi vous aurez besoin pour cette leçon
      1. HTML Kit ou bloc-notes ou autre de votre choix.
      2. 2 images du domaine public ou personnel . Assurez-vous qu'elles soient
      de la même hauteur.
      3. 1 tuile Sans couture pour le Fond
      4. 1 fichier Midi
      5. 1 fichier wav pas trop lourd .
      ---------------------------------------------2----------------------------------------
      Les  nouveaux codes que nous couvriront
      colspan=2 L'attribut COLSPAN permet de définir le nombre de colonnes de
      tableau que devra occuper la cellule. Cet attribut dit au PC de combiner
      deux ou plusieurs cellules de suite dans une cellule. Il est ajouté à la
      cellule de table<TD> .Celui-ci dit de combiner 2 cellules, mais si vous 
      voulez en combiner plus ,vous changez juste le numéro qui  correspond  aux
      cellules que vous voulez faire dans une cellule.
      onload="window.status='. . .message ici. . . ' " Ce code dit au PC de
      mettre votre message dans la fenêtre de statut en bas de l'écran ( dans la
      barre ) dans OE ( outlook Express) ou dans IE ( Internet Explorer). Ce
      code doit être écrit comme vous le voyez sauf  celui qui dit le message
      ici, c'est là où vous mettrez votre nom et message. Cette particule de
      code entrera dans la balise de corps pour le moment et plus tard quand
      nous apprendrons le  VBS nous l'enlèverons de la balise  de corps et le
      mettrons dans le VBS. Tout de suite il est pratique d'avoir cette ligne
      dans votre scénario .
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/wav File.wav" volume=0 loop=1>
      C'est la deuxième balise du son.  Celle-ci tient un fichier wav au lieu
      d'un midi et c'est la seule différence, juste l'extension de fichier.
      Cependant le PC jouera en même temps  tant le fichier midi que le fichier
      wav .
      -------------------------------------------3-----------------------------------------
      Début de notre script..
      Commencez votre scénario de comme d'habitude avec HTML, HEAD, TITLE, STYLE
      et les balises de corps( BODY) . Ajoutez le style pour le corps parce que
      nous en aurons besoin dans  le scénario et mettez à l'arrière-plan la
      tuile aussi bien que la balise du son  midi. Votre script devrait
      ressembler à celui-ci .
      <html>
      <head>
      <title> </title>
      <!--Scénario par Votre nom ici-->
      <style>
      Body{
      BORDER-RIGHT: #7A4F2F 7px inset;
      BORDER-TOP: #7A4F2F 7px outset;
      BORDER-LEFT: #7A4F2F 7px outset;
      BORDER-BOTTOM: #7A4F2F 7px inset;
      scrollbar-face-color:#7A4F2F;
      scrollbar-highlight-color:#C2B0A2;
      scrollbar-3dlight-color:#8B5D3C;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#502B10;
      scrollbar-arrow-color:#C2B0A2;
      scrollbar-track-color:#7A4F2F;
      }
     
      </style>
      </head>
      <!--La tuile de fond ce tient ici sur une ligne-->
      <BODY bgColor=#FFFFFF background="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/BG Tile.jpg">
      <!--Fichier Midi ici-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Midi File.mid" volume=0 loop=infinite>
      </body>
      </html>
      ---------------------------------------------------4-----------------------------------------
      Maintenant  ajoutons le message de fenêtre de statut.
      D'abord regardons le code et ce qu'il dit de faire à l'ordinateur .
      onload="window.status='. . .message ici. . . ' "
      Le code commence par le mot onload. C'est lui qui dit au PC de diriger et
      d'ouvrir cette particule de code dès que la papeterie s'ouvre .
      Le signe = signifie que le code peut commencer à lancer ce qui suit le
      signe =( c.à.d ici c'est window.status ) quand les courses du stat sont
      égales .
      Les marques  " " entourent la commande qui court quand le stat s'ouvre.
      window.status Cela dit juste au PC de mettre le message où nous voulons
      qu'il soit, c'est à dire dans le bas de la fenêtre dans la barre d'état.
      Un autre = cette fois, celui-ci,  dit au PC que le statut de fenêtre doit
      montrer ce qui suit le signe égal = ( ici c'est bien sûr. . .message ici.
      . . ).
      Remarquez ensuite que nous avons une marque de citation simple ( ' ).
      C'est parce que la première de la commande est entourée par la marque de
      citation double normale. L'ordinateur doit savoir que  la commande
      principale est dans la citation double et la mineur ou la deuxième
      commande est dans les marques de citation simples.
      La chose suivante sont les points, ceux-là peuvent être remplacés par
      quelque chose d'autre ( fantaisie genre ** ou ~~ etc..) que  vous aimez.
      Puis vous mettez votre message , le nom de l'artiste de l'image ou votre
      nom . Nous ajoutons ensuite les citations doubles pour dire au  PC que
      nous avons fini  avec la commande entière.
      Cette ligne entière de code entre dans la balise de contexte de corps (
      BODY) et vous devrez toujours la tenir sur une ligne donc  rappellez vous
      de bien le  faire pour qu'il  ne se montre sur plus d'une ligne.
      Voici la voie de votre balise de contexte de corps  quand vous aurez fini
      d' ajouter le code de fenêtre de statut..
      <BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message
      ici. . . . . ' " background="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/BG Tuile.jpg">
     
      --------------------Votre script devrait ressembler à celui-ci ---------
     
      <html>
      <head>
      <title> </title>
      <!--Scénario par Votre nom ici-->
      <style>
      Body{
      BORDER-RIGHT: #7A4F2F 7px inset;
      BORDER-TOP: #7A4F2F 7px outset;
      BORDER-LEFT: #7A4F2F 7px outset;
      BORDER-BOTTOM: #7A4F2F 7px inset;
      scrollbar-face-color:#7A4F2F;
      scrollbar-highlight-color:#C2B0A2;
      scrollbar-3dlight-color:#8B5D3C;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#502B10;
      scrollbar-arrow-color:#C2B0A2;
      scrollbar-track-color:#7A4F2F;
      }
     
      </style>
      </head>
      <!--La tuile de fond ce tient ici tout sur une ligne-->
      <BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message
      ici. . . . . '" background="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/BG Tile.jpg">
      <!--Fichier Midi ici-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Midi File.mid" volume=0 loop=infinite>
     
      </body>
      </html>
      ----------------------------------------------------------5------------------------
      Ensuite nous ajoutons notre deuxième fichier de son.
      Cette balise vraiment ne doit pas être expliquée. elle est la même que
      celle que nous utilisons habituellement seulement maintenant vous pouvez
      avoir deux  sons dans un script , un midi et un wav . Ce code va
      directement au-dessous de votre autre code de musique, ajoutez-le  au
      scénario maintenant..
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/wav File.wav" volume=0 loop=1>
      -------Votre scénario devrait maintenant ressembler à ceci----------
      <html>
      <head>
      <title> </title>
      <!--script par votre nom ici-->
      <style>
      Body{
      BORDER-RIGHT: #7A4F2F 7px inset;
      BORDER-TOP: #7A4F2F 7px outset;
      BORDER-LEFT: #7A4F2F 7px outset;
      BORDER-BOTTOM: #7A4F2F 7px inset;
      scrollbar-face-color:#7A4F2F;
      scrollbar-highlight-color:#C2B0A2;
      scrollbar-3dlight-color:#8B5D3C;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#502B10;
      scrollbar-arrow-color:#C2B0A2;
      scrollbar-track-color:#7A4F2F;
      }
     
      </style>
      </head>
      <!--La tuile de fond ce tient ici tout sur une ligne-->
      <BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message
      ici. . . . . '" background="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/BG Tile.jpg">
      <!--Fichier Midi ici-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Midi File.mid" volume=0 loop=infinite>
      <!--Wav file here-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/wav File.wav" volume=0 loop=1>
      </body>
      </html>
      ------------------------------------6--------------------------------------
      Maintenant nous commençons notre table
      Nous commencerons notre table par la même voie chaque fois , mettez  votre
      balise de table d'ouverture. Assurez-vous de donner une "class"id à la
      table , donner une largeur, l'alignement ,cellspacing et cellpadding . Et
      laissez un certain espace , mettre la balise de table finale .Souvenez
      vous  elles viennent directement après vos balises de fichier de son dans
      le scénario.
      Voici à quoi les balises ressemblent.. ...
      <TABLE class=tb width=500px align=center cellpadding=20 cellspacing=30>
      </TABLE>
      Ensuite nous ouvrirons une rangée de table. Souvenez-vous cette balise va
      directement après la balise de table ouvrante et ressemble à ceci.....
      <TR>
      Directement après la balise de rangée de table ouvrante nous devons ouvrir
      une cellule de table. Rappelez-vous de donner une "class" d'identification
      à la balise et dire comment aligner les choses à l'intérieur de la cellule
      . La balise ressemble à ......
      <TD class=tc2 align=center>
      Ensuite nous devons dire à  la cellule ce qu'elle va contenir. Dans ce cas
      , la cellule va contenir une image donc nous mettons dedans notre balise
      d'image . Assurez-vous de donner une class d'identification à la balise
      d'image . La balise doit  ressembler à ceci.....
      <IMG class=phto src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Tiger_3.jpg">
      Nous avons fini  l'addition de choses dans cette cellule . Souvenez-vous
      la balise de cellule de table finale ressemble à ....
      </TD>
      Parceque cette rangée de table a deux cellules nous devons maintenant
      ouvrir notre cellule suivante. Faire comme auparavant..
      <TD class=tc2 align=center>
      Cette cellule contiendra aussi une image donc nous ajoutons maintenant
      notre balise d'image.
      <IMG class=phto src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Tiger_2.jpg">
      Nous avons fini  avec la cellule et la rangée de table fermez-les donc
      toutes les deux. Les balises  ressemblent a...
      </TD>
      </TR>
      --------Tout de suite votre script devrait ressembler à ceci.--------
     
      <html>
      <head>
      <title> </title>
      <!--script par votre nom ici-->
      <style>
      Body{
      BORDER-RIGHT: #7A4F2F 7px inset;
      BORDER-TOP: #7A4F2F 7px outset;
      BORDER-LEFT: #7A4F2F 7px outset;
      BORDER-BOTTOM: #7A4F2F 7px inset;
      scrollbar-face-color:#7A4F2F;
      scrollbar-highlight-color:#C2B0A2;
      scrollbar-3dlight-color:#8B5D3C;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#502B10;
      scrollbar-arrow-color:#C2B0A2;
      scrollbar-track-color:#7A4F2F;
      }
     
      </style>
      </head>
      <!--La tuile de fond ce tient ici tout sur une ligne-->
      <BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message
      ici. . . . . '" background="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/BG Tile.jpg">
      <!--Fichier Midi ici-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Midi File.mid" volume=0 loop=infinite>
      <!--Fichier Wav ici-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/wav File.wav" volume=0 loop=1>
      <TABLE class=tb width=500px align=center cellpadding=20 cellspacing=30>
      <TR>
      <TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/Tiger_3.jpg"></TD>
      <TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/Tiger_2.jpg"></TD></TR>
      </TABLE>
     
      </body>
      </html>
      Sauvegardez et faites un aperçu . Vous verrez deux images côte à côte sur
      le stat avec l'espace entre elle. Vous verrez aussi une frontière sur
      l'extérieur de tout le stat aussi bien que les scrollbars colorés juste
      sur le côté  de l'écran. Votre tuile de fond se verra  et si vous avez mis
      le fichier midi et le fichier wav ils joueront maintenant aussi.
      Si c'est ce que vous voyez alors Bravo. Si ce n'est pas ce que vous voyez
      alors que vous devez vérifier votre script avec celui ci-dessus.
   


Dernière édition par Gi le Sam 22 Aoû - 17:55, édité 7 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 4 (suite et fin)   Lun 2 Mai - 2:29

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

Leçon 4 suite et fin

[size=11]7
Code:
Nous ajoutons maintenant la dernière rangée de  table et le ferons dans
      une zone de texte.
      Nous allons commencer une nouvelle rangée de table , mettre  la balise de
      rangée de table ouvrante. Cette balise viendra directement après la balise
      de rangée de table finale pour la rangée qui est juste au-dessus de cela
      dans la table..
      <TR>
      Ensuite nous allons ouvrir une cellule mais cette cellule est  spéciale.
      Nous voulons seulement une cellule dans cette rangée mais le scénario doit
      avoir deux cellules donc il correspondra à la rangée au-dessus de cela
      dans la table. Ainsi ce que nous allons faire est de dire au PC de faire
      les deux cellules dans une cellule qui est aussi large que les deux
      cellules dans la rangée au-dessus de cellle-ci. Cela signifie que nous
      devrons ajouter une nouvelle particule de code dans la cellule de table
      ouvrante.
      La nouvelle particule de code que nous ajouterons à cette balise de
      cellule de table est appelée colspan . Elle fait et dit au PC  de 
      combiner les cellules dans une rangée dans une cellule qui est plus large
      que les cellules au-dessus de cela dans la rangée. Vous pouvez combiner
      deux ou plusieurs cellules dans une rangée pour faire une cellule plus
      large. Nous devrons aussi dire au PC combien de cellules nous voulons
      mettre=2 . Nous devrons aussi donner une classe id à cette cellule  et lui
      dirons où aligner la substance que nous mettrons à l'intérieur . Notre
      balise de cellule de table d'ouverture ressemblera à .....
      <TD class=tc2 colspan=2 align=center>
      Parce que nous voulons que cette cellule contienne une division pour une
      zone de texte nous ajouterons ensuite notre division de zone de texte.
      Rappelez-vous de donner une classe id à la division  pour le style et
      faire suivre la balise  de division avec le mot  TEXTE , puis fermer la
      balise de division. Nous avons fini avec cette cellule et rangée donc nous
      les fermons . Les balises  ressemblent à ceci......
      <DIV class=tx>text</DIV>
      </TD>
      </TR>
      --------Maintenant votre script devrait ressembler à ...----------------
      <html>
      <head>
      <title> </title>
      <!--script par votre nom ici-->
      <style>
      Body{
      BORDER-RIGHT: #7A4F2F 7px inset;
      BORDER-TOP: #7A4F2F 7px outset;
      BORDER-LEFT: #7A4F2F 7px outset;
      BORDER-BOTTOM: #7A4F2F 7px inset;
      scrollbar-face-color:#7A4F2F;
      scrollbar-highlight-color:#C2B0A2;
      scrollbar-3dlight-color:#8B5D3C;
      scrollbar-darkshadow-color:#000000;
      scrollbar-shadow-color:#502B10;
      scrollbar-arrow-color:#C2B0A2;
      scrollbar-track-color:#7A4F2F;
      }
     
      </style>
      </head>
      <!--La tuile de fond ce tient ici tout sur une ligne-->
      <BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message
      ici. . . . . '" background="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/BG Tile.jpg">
      <!--Midi file here-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/Midi File.mid" volume=0 loop=infinite>
      <!--Wav file here-->
      <BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft
      Shared/papier à lettres/wav File.wav" volume=0 loop=1>
      <TABLE class=tb width=500px align=center cellpadding=20 cellspacing=30>
      <TR>
      <TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/Tiger_3.jpg"></TD>
      <TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/Tiger_2.jpg"></TD></TR>
      <TR>
      <TD class=tc2 colspan=2 align=center><DIV class=tx>TEXT</DIV></TD></TR>
      </TABLE>
     
     
      </body>
      </html>
      ------------Temps d'avant-première---------------------------------
      Sauvegardez votre script et faites un aperçu. Vous devriez maintenant voir
      tout ce que vous avez vu avant , en plus maintenant le texte centré 
      au-dessous de vos images. Si c'est ce que vous voyez alors c'est du bon
      travail. Si ce n'est pas ce que vous voyez, vérifiez la dernière particule
      du scénario que vous avez ajouté pour voir vos erreurs.
      -----------------------------8-------------------------------------------------
      Nous allons ajouter maintenant notre style pour avoir nos frontières et
      les couleurs de fond sur notre stat.
      D'abord ajoutons le style pour notre table , nous pourrons voir où il est
      et comment  il joue... Souvenez-vous ces codes entrent au sommet du script
      entre les balises  <style> .. Voici ce que j'ai utilisé pour la table sur
      mon stat.. Assurez-vous que votre id correspond ici à la classe id vous
      avez donné à votre table.
      .tb{
      BORDER-RIGHT: #7A4F2F 8px solid;
      BORDER-TOP: #7A4F2F 8px solid;
      BORDER-LEFT: #502B10 8px solid;
      BORDER-BOTTOM: #502B10 8px solid;
      background color=#000000;
      }
      Maintenant nous  ajoutons notre code de style pour les images. Je leur ai
      donnés toutes les deux la même class id donc elles auront les mêmes
      frontières.Vous pouvez vouloir faire une classe différente pour chacune de
      vos images,mais comme j'ai seulement utilisé un nom d'id j'aurai seulement
      un code de photo.. elle suit juste après les codes de table et elle 
      ressemblera à......
      .phto{
      BORDER-RIGHT: #502B10 7px double;
      BORDER-TOP: #502B10 7px double;
      BORDER-LEFT: #7A4F2F 7px double;
      BORDER-BOTTOM: #7A4F2F 7px double;
      }
      Ensuite nous voulons donner nos frontières de cellules de table donc nous
      ajoutons les codes de style pour celles ci. J'ai donné à toutes mes
      cellules le même nom d'id donc j'ai seulement un code et cela  fera toutes
      les cellules de la  même frontière. J'ai nommé le mien tc2 parce que tc1
      ressemble trop à  tcl , l'ordinateur peut confondre le 1( un )  et le l
      (lettre L) alors je n'utilise plus 1 dans aucun des codes de style. Je
      commence juste par 2, le PC n'objecte pas tant que la class id  correspond
      au  nom  qui est dans cette partie du scénario. Donc mon code ressemble à
      celui-ci..
      .tc2{
      BORDER-RIGHT: #502B10 7px double;
      BORDER-TOP: #502B10 7px double;
      BORDER-LEFT: #7A4F2F 7px double;
      BORDER-BOTTOM: #7A4F2F 7px double;
      }
     
      Ensuite nous ajouterons notre code de style de division de zone de texte.
      Remarquez sur celui-ci j'ai utilisé la largeur : 100 %; c'est parce que
      c'est une cellule combinée et en raison du remplissage sur la table et du
      cellspacing il n'y a pas de façon facile de trouver la largeur exacte pour
      le secteur de zone de texte. Si vous utilisez 100 % la division remplira
      la cellule de table peu importe ce que cellpadding et cellspacing ont aux
      cellules de table

-----------------------------------------------------------------------------------------------------
Notez ceci ..

Si vous voulez combiner deux cellules comme cela et mettre dedans une image. Alors quand le scénario est fini , commencez juste à changer la largeur de la division, mais utiliser des pixels. Quand c'est comme vous le voulez, assurez vous de noter le numéro, si vous planifiez d'avoir des frontières autour de votre image ,s'assurez de soustraire deux fois la largeur de frontière du nombre de la largeur de la division, vous saurez alors comment faire votre largeur d'image. Lorsque votre image est prête , enlevez la division de la cellule et inserez votre image dedans , donnez-lui le "boder" que vous voulez . Si vous voyez que c'est juste un peu débranché, tout ce que vous devez faire est de mentir sur le scénario. Pour le faire vous ajoutez la taille de l'image dans la balise d'image. Vous le faites comme cela. <IMG class=phto style="width:400px; height:200px;" src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/Tiger_2.jpg"> Assurez-vous de mettre les numéros que vous voulez en place .

C'est la façon facile de trouver la largeur de la cellule combinée. Autrement vous devez commencer à additionner le remplissage , l'espacement , toutes les autres substances et les maths seuls vous rendront fous.

-----------------------------------------------------------------------------------------------------

Voici à quoi les codes de style de division de zone de texte ressemblent

.tx{

background color=#000000;

BORDER-RIGHT: #502B10 7px double;

BORDER-TOP: #502B10 7px double;

BORDER-LEFT: #7A4F2F 7px double;

BORDER-BOTTOM: #7A4F2F 7px double;

scrollbar-face-color:#000000;

scrollbar-highlight-color:#7A4F2F;

scrollbar-3dlight-color:#7A4F2F;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#937056;

scrollbar-track-color:#000000;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Tahoma;

FONT-SIZE: 12pt;

COLOR: #937056;

height:200px;

width: 100%;

}

Nous avons fini avec le script et la leçon. Sauvez et faites un aperçu de votre stat. Si quelque chose n'est pas juste retournez contrôler vos erreurs .

--------votre script devrait ressembler à ceci...----------------

<html>

<head>

<title> </title>

<!--script par votre nom ici-->

<style>

Body{

BORDER-RIGHT: #7A4F2F 7px inset;

BORDER-TOP: #7A4F2F 7px outset;

BORDER-LEFT: #7A4F2F 7px outset;

BORDER-BOTTOM: #7A4F2F 7px inset;

scrollbar-face-color:#7A4F2F;

scrollbar-highlight-color:#C2B0A2;

scrollbar-3dlight-color:#8B5D3C;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#C2B0A2;

scrollbar-track-color:#7A4F2F;

}

.tb{

BORDER-RIGHT: #7A4F2F 8px solid;

BORDER-TOP: #7A4F2F 8px solid;

BORDER-LEFT: #502B10 8px solid;

BORDER-BOTTOM: #502B10 8px solid;

background color=#000000;

}

.phto{

BORDER-RIGHT: #502B10 7px double;

BORDER-TOP: #502B10 7px double;

BORDER-LEFT: #7A4F2F 7px double;

BORDER-BOTTOM: #7A4F2F 7px double;

}

.tc2{

BORDER-RIGHT: #502B10 7px double;

BORDER-TOP: #502B10 7px double;

BORDER-LEFT: #7A4F2F 7px double;

BORDER-BOTTOM: #7A4F2F 7px double;

}

.tx{

background color=#000000;

BORDER-RIGHT: #502B10 7px double;

BORDER-TOP: #502B10 7px double;

BORDER-LEFT: #7A4F2F 7px double;

BORDER-BOTTOM: #7A4F2F 7px double;

scrollbar-face-color:#000000;

scrollbar-highlight-color:#7A4F2F;

scrollbar-3dlight-color:#7A4F2F;

scrollbar-darkshadow-color:#000000;

scrollbar-shadow-color:#502B10;

scrollbar-arrow-color:#937056;

scrollbar-track-color:#000000;

padding:10;

text-align: center;

OVERFLOW: auto;

FONT-FAMILY: Tahoma;

FONT-SIZE: 12pt;

COLOR: #937056;

height:200px;

width: 100%;

}

</style>

</head>

<!--La tuile de fond ce tient ici tout sur une ligne-->

<BODY bgColor=#FFFFFF onload="window.status='. . . . . . . votre message ici. . . . . '" background="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/BG Tile.jpg">

<!--Midi file here-->

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

<!--Wav file here-->

<BGSOUND balance=0 src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/wav File.wav" volume=0 loop=1>

<TABLE class=tb width=500px align=center cellpadding=20 cellspacing=30>

<TR>

<TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/Tiger_3.jpg"></TD>

<TD class=tc2 align=center><IMG class=phto src="C:/Program Files/fichiers communs/Microsoft Shared/papier à lettres/Tiger_2.jpg"></TD></TR>

<TR>

<TD class=tc2 colspan=2 align=center><DIV class=tx>TEXT</DIV></TD></TR>

</TABLE>

</body>

</html>
---------------------------------Devoirs---------------------------------------

Concevez votre propre scénario de ce que vous avez appris dans cette leçon, amusez-vous et imaginez quelque chose de grand.[/size]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Traduction Mickaëla

©Connie Schutza Hill 2003
All rights reserved

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:54, édité 9 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours 5A   Jeu 13 Oct - 20:25

Merci à Suzanne Bouchard pour son aide précieuse ...


Cours 5 (A)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved


Lesson5

Bienvenue à la leçon 5. A


-----------------------------------------------------------------------

Code:
Dans cette leçon nous allons apprendre à combiner des cellules dans une
      colonne pour faire une grande cellule mince dans notre table. Nous allons
      aussi apprendre comment ajouter des boutons d'email et des boutons de
      liaison et cela parceque quelques artistes demandent que leur nom soit
      utilisé avec la balise "alt", je vais vous montrer comment la mettre dans
      votre script . Je vais aussi vous montrer comment faire déplacer la table
      sans le déplacement du contexte quand vous faites défiler votre page. Donc
      nous avons beaucoup à apprendre sur cette leçon mais la plupart de tout ça
      est très facile et comme toujours, prennez  votre temps et amusez vous
      avec la leçon.

      -----------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
      rowspan=3 Ce code dit au  PC combien de cellules dans la colonne nous
      voulons combiner pour faire une grande image mince.L'attribut ROWSPAN
      permet de définir le nombre de lignes de tableau que devra occuper la
      cellule. Il est appelé rowspan parce qu'il combine des rangées et quand
      vous le faites vous formez une colonne qui est plus grande que les
      cellules dans les rangées à côté de ce secteur combiné.
      ALT="nom de l'artiste ici" C'est la balise alt , elle  va à l'intérieur de
      la balise " img". Quand vous la mettrez dans votre scénario, si vous
      placez la souris sur l'image le message que vous avez mis dans la balise 
      "alt" se montrera. Beaucoup d'artiste demande l'utilisation de cette 
      balise  avec leur nom dans le secteur de message donc il est pratique de
      savoir comment la faire.
      <A href=" Pleine page Web  ici"> balise d'image ici</A> C'est une balise
      de liaison. Si vous voulez l'utiliser pour faire d'une image le bouton de
      liaison alors vous mettrez la partie ouvrante de la balise avant celle
      d'image dans le scénario et fermerez la balise de liaison après celle de
      l'image. Cela fera de l'image un hyperlien au site que vous inscrirez dans
      la balise. Quand vous utiliserez cette balise vous devrez aussi ajouter
      borders=0 à l'intérieur de la balise d'image. Cela vous empêchera d'avoir
      une frontière bleue laide autour de votre image. Ce n'est pas toujours
      nécessaire mais c'est une bonne habitude de toujours l'ajouter au scénario
      donc  n'oubliez jamais de l'utiliser quand c'est nécessaire.
     
      <A href=mailto:votre E-mail ici> balise d'image ici</A> C'est une balise
      de liaison d'email. Si vous voulez l'utiliser pour faire d'une image un
      bouton d'email alors vous mettrez la partie ouvrante de l'étiquette avant
      l'étiquette d'image dans le scénario et fermerez l'étiquette d'email après
      la balise de l'image.Cela fera ouvrir un l'email pret à envoyer quand on 
      clique dessus. Quand vous utiliserez cette balise vous devrez aussi
      ajouter borders=0 à l'intérieur de la balise d'image. Comme je l'ai dit ci
      dessus cela vous empêchera d'avoir une frontière bleue autour de votre
      image.
     
      bgProperties=fixed Ce code entre dans la balise de corps et je l'ai mis
      directement après l'étiquette  bgcolor=#7294AF . Ce code fera décoller
      votre table de la tuile de fond.  Quand nous utiliserons cette particule
      de code, la table flottera sur la tuile de fond et vous ferez défiler la 
      table de la page  par vos mouvements .

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

      De quoi aurez vous besoin pour cette leçon
      1. une image du domaine public . Vous pouvez aussi utiliser vos propres
      photos . N'utilisez pas s'il vous plaît d'autres images protégées par le
      droit d'auteur. Vous aurez besoin de quelques images de différentes
      tailles, voici une liste de ce que j'ai utilisé pour ce scénario donc vous
      pouvez faire quelques images de mêmes taille .
      Image principale 310px wide x 399px
      Image supérieure 526px wide x 50px
      Image de côté 36px wide x 536px
      image email 100 x 100
      seconde et troisième image  ,cellule normale 100px Large x 175px Grand
      Troisième image ,  deux dernières cellules 131px Large x 100px Grand
      image du bas , 1ere cellule  36px Large x 86px hauteur
      J'ai mis la taille d'image comme  nom à chaque image dans le scénario donc
      vous pouvez voir d'un coup d'oeil à quelle  cellule elle correspond .
      J'espère que cela vous aidera un peu ... Ce type de scénario n'est pas
      très  facile, ne changez pas  la taille des images sur celles-ci jusqu'à
      ce que vous le fassiez  puis vous  pourrez jouer avec les tailles pour
      chaque cellule par la suite..
      2. 1 tuile pour le  background.
      3. 1 midi
      4. HTML kit ou notepad.
      5. Papier et crayon
     
      ----------------------3---------------------------

      Parlons de la combinaison rowspan et colspan dans le  scénario avant de
      commencer.
      C'est la partie la plus dure des tables, mais c'est aussi l'amusement
      quand vous attrapez le coup cela vaut la peine de l'apprendre. Quand vous
      saurez comment la faire vous pourrez concevoir quelques tables très
      uniques.
      D'abord vous devez  penser différemment que la normale. La magie est un
      tour de l'oeil, la main fait quelque chose et fait  voir à l'oeil ce
      qu'elle veut que l'on voit, mais ce que l'oeil voit n'est pas vraiment ce
      qui arrive. C'est la même chose  avec scripting. Ce que l'oeil voit n'est
      pas ce que le PC voit ou ce que l'on dit au PC de faire. La plupart du
      temps nous créons la magie avec nos scénarios, nous faisons  voir ce que
      nous désirons .C'est la partie amusante du scripting. Cependant, c'est
      aussi une des choses qui fait cette leçon un peu plus dur .  Notre oeil va
      nous dire quelque chose qu'il voit et la plupart du temps cela  va être
      faux et si nous écrivons notre scénario par ce que nous dit notre oeil ,
      nous allons souvent avoir des moments difficiles avec l'union rowspan et
      colspan dans une papeterie. C'est pourquoi nous utiliserons le papier et
      le crayon, qui nous permettra de voir le stat de la façon dont le PC le
      verra et ensuite nous écrirons notre script.
      Nous devons dessiner une table agréable sur notre papier. Puis à
      l'intérieur les cellules comme vous souhaiteriez les voir . Ne commencez
      pas avec une table de 24 cellules pour un début , ces cellules  ne
      travailleront pas toujours .Si vous essayez de le faire  votre oeil vous
      dira souvent qu'un secteur de cellules  est plus large ou grande que le PC
      le verra. C'est où il y aura l'ennui.
      Souvenez-vous le PC ne se soucie pas de la taille d'une cellule , il se
      soucie seulement de combien de cellules sont à la  suite(en ligne) ou en
      colonne. Ainsi si vous avez une image qui fait 100 x 100 et à côté de cela
      vous avez celle  qui est de 100 x 200 , l'oeil vous  dit que la grande
      cellule est de deux cellules alors que votre cerveau pense que la rangée a
      trois cellules . Mais le PC  dit non, qu'il y a  seulement deux cellules,
      une pour chaque image et peu importe que l'une soitt plus long que
      l'autre.Cependant si dans la rangée au-dessous de celle ci, vous mettez 
      trois images de 100 x 100 Alors vous avez fait la norme pour cette table
      avec trois cellules à travers , si maintenant la rangée supérieure est de
      trois cellules , vous devrez utiliser colspan=2 Sur la plus longue pour
      obtenir la table que vous souhaitez. Maintenant pour argumenter, si nous
      mettions une image dans la deuxième rangée de 100 x 300, Alors la table
      retourne à être une table avec seulement deux cellules dans une rangée
      parce que la rangée supérieure a deux cellules et donc votre deuxième
      rangée utiliserait colspan=2 pour faire la table . Cela travaille
      exactement pareil avec les colonnes . Les colonnes avec la plupart des
      cellules mettent la norme pour la table entière peu importe quelles
      tailles sont  les cellules dans cette colonne.
      Dessinez toujours votre table comme vous voulez que cela regarde avec des
      tailles mélangées , avec grandes cellules minces et des  petites cellules
      plus ou moins  grandes et larges. Trouvez maintenant la rangée qui a le
      plus de cellules . cela vous dira la largeur que doit être  votre table.
      Trouvez ensuite la colonne qui est la plus haute ,cela vous dira la
      hauteur  que doit être  votre table . Écrivez ensuite dans les grands
      secteurs minces combien de rowspans celle-ci aura et faites de même pour
      les longues lignes minces : les Colspans  . Si vous avez un grand secteur
      carré qui couvre plus qu'une rangée et une colonne mise dans ce secteur
      combien de chacun il doit recouvrir. Rappelez-vous le total pour les
      cellules normales et combinées dans n'importe quelle rangée ou la colonne
      ne peut pas être plus que le jeu standard pour la table par la rangée ou
      la colonne avec la plupart des cellules. Maintenant vous êtes prêts à
      taper le scénario.
      Souvenez-vous quand vous faites ce type de  table , vos frontières et le
      remplissage de cellule et l'espacement de cellule fera une différence dans
      ce que la taille de vos images devront être. J'écris toujours d'abord le
      scénario avec seulement l'image principale en place et mets des divisions
      dans les autres endroits. Alors j'ajoute un style de classe pour les
      divisions et ajoute la hauteur et la largeur à ce style. Je peux alors
      changer la taille de la division avant que je n'obtienne tout cela comme
      je le veux et ensuite je peux voir quelle taille faire avec  mes images.
      Je fais mes images, enlève la division et mets dans les balises  d'image
      comme normalement  avec la classe id pour la balise d'image et enlève les
      styles que j'ai fait pour les divisions comme ils ne sont plus
      nécessaires. Rappelez-vous juste d'enlever deux fois la taille de
      frontière sur le sommet et le côté de l'image donc votre image sera plus
      petite que la division ou l'image sera trop grande. Si vous avez une
      division de 100 x 100, vous ferez l'image pour cette division 86 x 86 si
      les frontières sont 7px larges.
      100 - 14 = 86 Vous devez enlever 7 pour le sommet et 7 pour le bas et de
      même pour des côtés .

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

      Écrivons notre scénario.
      Commencez votre scénario avec votre HTML, la tête, le titre, le style, le
      corps et les balises  de son . Assurez-vous d'obtenir votre ligne de
      statut dans la balise de corps. Parce que je sais déjà que je vais vouloir
      les frontières sur le stat, des cellules, la table et des images , avoir
      une zone de texte, je commence mon scénario avec tout sauf la table .
      Voici par quoi j'ai commencé..
     
      ----------------------5---------------------------

      Votre scénario doit  ressembler à ceci
     
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour  leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF onload="window.status='. . . . . . . Stat et
      Scénario par : votre nom ici. . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI .mid" volume=0 loop=infinite>
      </BODY>
      </HTML>


_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:41, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours 5 (B)   Jeu 13 Oct - 20:29

Cours 5 (B)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved


Cours 5 (B)



6-------------------------

Code:
Passons au  code qui  fait la table flottante sur le contexte
      Maintenant allons mettre le code pour faire déplacer la table sans le
      déplacement du contexte comme quand nous faisons défiler la page pour lire
      la note sur le stat.
      Ajoutez bgProperties=fixed à l'intérieur de votre balise de corps
      La balise entière de corps doit ressembler maintenant à celle-ci et
      assurez vous  que tout  cela tient sur une ligne dans votre scénario..
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et script par votre  nom ici  . . . . . . . '"
      background="c:\program files\fichiers communs\microsoft shared\papier à
      lettres\SEAMLESS TILE.jpg">
     
      ------------------------------7-----------------------

      Votre script devrait  ressembler à....
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par  Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et script par Votre nom  . . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      </BODY>
      </HTML>

      -------------------------------8------------------------

      Maintenant nous commençons notre table et écrivons la rangée de table 1
      J'ai dessiné ma table et je sais que je vais avoir une longue image mince
      en haut ,cela va être ma liaison au site de l'artiste , je sais que je
      veux avoir  des frontières à ma cellule aussi bien que sur mon image. Je
      vais écrire cette rangée supérieure et mettre  dedans ma balise de liaison
      aussi bien que ma classe id pour la cellule et l'image pour que cette
      partie soit toute faite quand j'en aurai fini avec mon scénario.
      Nous commençons bien sûr en ouvrant une table et une rangée et la cellule.
      Je sais déjà que cette rangée est de la même largeur que ma table ,ma
      table est 4 cellules à travers, donc  cela dit de recouvrir 4 colonnes
      donc j'ajoute colspan=4. Je veux que tout cela s'aligne à l'intérieur de
      la cellule pour me concentrer à  ceci je l'ai mis dans la balise de
      cellule de table aussi. Je vais en avant et le mets dans ma balise de
      table finale donc je ne l'oublierai pas quand j'aurai fini.
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
     
      </TABLE>
      Maintenant je veux une image dans cette cellule que nous avons juste
      ouverte, mais parce que l'image est une liaison d'un site je vais ajouter
      la balise de liaison d'abord et alors celle de l'image, j'ajoute le
      border=0 à la balise d'image avant le > ensuite je ferme la balise de
      liaison. Parce que c'est tout ce qui va dans cette cellule et cette rangée
      , je les ferme quand j'ai fini avec  la balise d'image dans la cellule.
      <A href="URL de site ici"><IMG class=phto src="C:/Program Files/fichiers
      communs/Microsoft Shared/papier à lettres/526-50.jpg"
      border=0></A></TD></TR>
     
     
      ------------------------9-----------------------

      Votre scénario devrait  ressembler maintenant .....
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et script par votre nom. . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
      <A href="liaison du site"><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\526-50.jpg"
      border=0></A></TD></TR>
     
      </TABLE>
      </BODY>
      </HTML>

      ----------------------10--------------------------

      Ensuite la table row 2
      Nous commençons maintenant notre rangée suivante dans la table. Je sais
      déjà que cette rangée aura une grande image mince à gauche et ensuite une
      cellule normale et ensuite une grande image  .J'ai calculé que la grande
      image mince va recouvrir trois rangées et la grande image recouvrira deux
      rangées et deux colonnes. Je sais aussi que je veux avoir des frontières
      sur les images et les cellules  donc je le mets dans la classe id pour
      chacunes . Maintenant j'ouvre une rangée de table, une cellule et commence
      à écrire cette rangée de la table..
      <TR>
      <TD class=tc align=center rowspan=3>
      J'ajoute maintenant la balise d'image à la cellule et ferme la cellule
      <IMG class=phto src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\image size_36-536.jpg"></TD>
      Ensuite j'ouvre la cellule suivante de la rangée. C'est une cellule
      normale sans aucun rowspan ou colspan dans celle-ci.
      <TD class=tc align=center>
      J'ajoute maintenant la balise d'image à la cellule et ferme la cellule
      <IMG class=phto src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\image size-100-175.jpg"></TD>
      Puis  j'ouvre la cellule suivante de la rangée. Celle-ci va contenir une
      grande image et elle devra recouvrir deux colonnes et deux rangées donc je
      le  mets dans la balise de cellule.
      <TD class=tc align=center rowspan=2 colspan=2>
      J'ajoute maintenant la balise d'image à la cellule et parce que cette
      image est l'image principale et qu'elle est protégée par le droit d'auteur
      , Je vais ajouter la balise "alt" maintenant  que cette cellule est finie
      je la ferme. J'ai  aussi fini avec cette rangée donc je ferme la rangée de
      table .
      <IMG class=phto ALT="©artist name" src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\310-399.jpg"></TD></TR>

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:43, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Visual Basic Script : Connie Shultza en français   Jeu 13 Oct - 20:32

Cours 5 (C)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved




11----------------------

Code:
Votre script devrait  ressembler maintenant à ...
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et  script par votre nom . . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
      <A href="site addy here"><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\526-50.jpg"
      border=0></A></TD></TR>
      <TR>
      <TD class=tc align=center rowspan=3><IMG class=phto src="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\image
      size_36-536.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\image size-100-175.jpg"></TD>
      <TD class=tc align=center rowspan=2 colspan=2><IMG class=phto ALT="©artist
      name" src="c:\program files\fichiers communs\microsoft shared\papier à
      lettres\310-399.jpg"></TD></TR>
     
     
      </TABLE>
      </BODY>
      </HTML>
      -----------------------12------------------------

      Ensuite la table row 3
      Nous sommes maintenant prêt à écrire notre rangée suivante dans la table.
      Cette rangée est un peu différente , cette rangée a la partie de la
      deuxième rangée en raison de la longue image mince à gauche et la grande
      image à droite. Cela signifie que la partie des cellules pour cette rangée
      a été en réalité écrite dans le scénario quand nous avons écrit la
      deuxième rangée donc nous avons seulement une cellule pour écrire dans
      cette rangée.
      Donc nous ouvrons la rangée, la cellule et nous mettons dedans notre
      balise d'image, fermons la cellule et la rangée. Nous voulons aussi des
      frontières à  la cellule et l'image donc nous ajoutons la classe id à la
      balise de cellule de table et d'image.
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD></TR>
     
      ------------------------13-----------------------

      Votre script devrait  ressembler maintenant à ...
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et script par votre nom. . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
      <A href="site addy here"><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\526-50.jpg"
      border=0></A></TD></TR>
      <TR>
      <TD class=tc align=center rowspan=3><IMG class=phto src="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\36-536.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD>
      <TD class=tc align=center rowspan=2 colspan=2><IMG class=phto ALT="©artist
      name" src="c:\program files\fichiers communs\microsoft shared\papier à
      lettres\310-399.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD></TR>
     
      </TABLE>
      </BODY>
      </HTML>

      --------------------14--------------------------

      Ensuite la table row 4
      Nous sommes maintenant prêts à commencer notre rangée suivante dans la
      table. Cette rangée est  en partie écrite quand nous avons écrit la
      deuxième rangée parce que cette grande image mince couvre la gauche sur
      rowspan=3. Mais sur celle-ci je veux avoir trois cellules normales aussi
      et celles-ci iront sous la deuxième colonne et sous la grande image à
      droite donc nous devons mettre ces cellules dans le scénario maintenant.
      Elle va contenir mon image d'email et les autres deux  contiendront juste
      des images normales avec des frontières sur toutes les cellules et  images
      donc nous allons ajouter la classe id .
      D'abord nous ouvrons la rangée et une cellule
      <TR>
      <TD class=tc align=center>
      C'est la cellule qui contient mon image d'email donc je vais mettre la
      balise d'email d'abord. Ensuite  la balise d'image avec le border=0 et je
      ferme alors  la balise de liaison d'email et la cellule.
      <A href=mailto:votre E-mail ici><IMG class=phto src="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\100-100
      email.jpg" border=0></A></TD>
      Je dois ensuite écrire la cellule suivante qui contient une image ,
      j'ouvre la cellule, mets à l'intérieur  la balise d'image et ferme la
      cellule.
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD>
      Je dois ensuite écrire la cellule suivante qui contient une autre image ,
      j'ouvre la cellule, mets à l'intérieur  la balise d'image et ferme la
      cellule, et comme j'ai fini avec cette rangée , je ferme la rangée de
      table .
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD></TR>
     
     
      ----------------------15--------------------------

      Votre script devrait  ressembler maintenant à ...
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et  script par votre nom. . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
      <A href="site addy here"><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\526-50.jpg"
      border=0></A></TD></TR>
      <TR>
      <TD class=tc align=center rowspan=3><IMG class=phto src="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\36-536.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD>
      <TD class=tc align=center rowspan=2 colspan=2><IMG class=phto ALT="©artist
      name" src="c:\program files\fichiers communs\microsoft shared\papier à
      lettres\310-399.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><A href="mailto:your email addy here"><IMG
      class=phto src="c:\program files\fichiers communs\microsoft shared\papier
      à lettres\100-100 email.jpg" border=0></A></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD></TR>
     
     
      </TABLE>
      </BODY>
      </HTML>

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:45, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Re: Cours Visual Basic Script : Connie Shultza en français   Jeu 13 Oct - 20:36

Cours 5 (D)
Traduction Mickaëla P
©Connie Schutza Hill 2003
All rights reserved


Cours 5 (D)


[color=steelblue][b]
-------------------------16-------------------------

Code:
Maintenant la Table row 5
      Nous allons écrire maintenant notre dernière rangée dans ce scénario.
      Aucune de cette rangée n'a été écrite encore donc nous devons écrire tout
      cela cette fois. Je sais que je veux une très petite image à gauche et
      ensuite la zone de texte qui couvrira le reste de la rangée. Donc j'ouvre
      une nouvelle rangée et une cellule et mets  la classe id pour la cellule ,
      je veux une image alors je mets aussi ma balise  d'image et lui donne une
      classe id. Parce que j'ai fini  avec cette cellule je ferme la cellule.
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\36-86.jpg"></TD>
      Passons , maintenant à ma division de zone de texte.  Elle couvrira 3
      cellules à travers donc sera colspan=3 et comme je veux une frontière dans
      la zone de texte , je lui donne ma classe id et mets le  mot " TEXTE" 
      entre la division d'ouverture et la division finale. Comme  la rangée est
      finie, je ferme celle ci.
       
      <TD class=tc align=center colspan=3><DIV class=tx>text</DIV></TD></TR>

      ----------------------17-------------------------

      Votre script devrait  ressembler maintenant à ...
      <HTML>
      <HEAD>
      <TITLE></TITLE>
      <!--script ecrit par Connie pour la leçon 5-->
      <STYLE>
      Body{
      BORDER-RIGHT: #7294AF 7px inset;
      BORDER-TOP: #7294AF 7px outset;
      BORDER-LEFT: #7294AF 7px outset;
      BORDER-BOTTOM: #7294AF 7px inset;
      scrollbar-face-color:#7294AF;
      scrollbar-highlight-color:#B8C9D7;
      scrollbar-3dlight-color:#86A3BA;
      scrollbar-darkshadow-color:#32414D;
      scrollbar-shadow-color:#5A758A;
      scrollbar-arrow-color:#B8C9D7;
      scrollbar-track-color:#7294AF;
      }
      .tb{
      border-right: #CAB7C6 8px solid;
      border-top: #CAB7C6 8px solid;
      border-bottom: #756071 8px solid;
      border-left: #756071 8px solid;
      background color=#A98BA3;
      }
      .tc{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
      .phto{
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      }
     
      .tx{
      scrollbar-face-color:#957B90;
      scrollbar-highlight-color:#CAB7C6;
      scrollbar-3dlight-color:#A98BA3;
      scrollbar-darkshadow-color:#4A3D48;
      scrollbar-shadow-color:#756071;
      scrollbar-arrow-color:#CAB7C6;
      scrollbar-track-color:#957B90;
      BORDER-RIGHT: #756071 7px double;
      BORDER-TOP: #756071 7px double;
      BORDER-LEFT: #CAB7C6 7px double;
      BORDER-BOTTOM: #CAB7C6 7px double;
      background color:#957B90;
      padding:10;
      text-align: center;
      OVERFLOW: auto;
      FONT-FAMILY: BlackChancery;
      FONT-SIZE: 14pt;
      COLOR: #D7C8D4;
      height:100px;
      width: 100%;
      }
      </STYLE>
      </HEAD>
      <BODY bgcolor=#7294AF bgProperties=fixed onload="window.status='. . . . .
      . . Stat et  script par votre nom. . . . . . . '" background="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\SEAMLESS
      TILE.jpg">
      <BGSOUND balance=0 src="c:\program files\fichiers communs\microsoft
      shared\papier à lettres\MIDI.mid" volume=0 loop=infinite>
      <TABLE class=tb width=500px align=center cellpadding=5 cellspacing=5>
      <TR>
      <TD class=tc align=center colspan=4>
      <A href="site addy here"><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\526-50.jpg"
      border=0></A></TD></TR>
      <TR>
      <TD class=tc align=center rowspan=3><IMG class=phto src="c:\program
      files\fichiers communs\microsoft shared\papier à lettres\36-536.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD>
      <TD class=tc align=center rowspan=2 colspan=2><IMG class=phto ALT="©artist
      name" src="c:\program files\fichiers communs\microsoft shared\papier à
      lettres\310-399.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\100-175.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><A href="mailto:your email addy here"><IMG
      class=phto src="c:\program files\fichiers communs\microsoft shared\papier
      à lettres\100-100 email.jpg" border=0></A></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\131-100.jpg"></TD></TR>
      <TR>
      <TD class=tc align=center><IMG class=phto src="c:\program files\fichiers
      communs\microsoft shared\papier à lettres\36-86.jpg"></TD>
      <TD class=tc align=center colspan=3><DIV class=tx>text</DIV></TD></TR>
      </TABLE>
      </BODY>
      </HTML>

      ---------------------18----------------------------

      Maintenant tout ce qu'il vous reste à faire ce sont les changements
      colorés des frontières et de fonte , ainsi bien que les changements de
      zone de texte qui pourraient être nécessaires. Apres cette partie vous
      aurez fini la leçon.
      Voir l'exemple 1 ICI
      Voir l'exemple 2 ICI
      -----------------------19-------------------------
      Devoirs
      Comme toujours, concevez vos propres scripts de  ce que vous avez appris
      dans cette  leçon et  amusez vous.
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
      Traduction Mickaëla P
      ©Connie Schutza [/b][/color]Hill 2003
      All rights reserved



_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:51, édité 2 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Cours 6 a   Jeu 13 Oct - 21:27

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


Leçon 6 A


Bienvenue à la leçon 6

Code:
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>
      <!--script par Connie-->
      <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>
      <!--La tuile de fond cet tient ici tout sur une ligne-->
      <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">
      <!--fichier midi ici-->
      <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 à  <BR> 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.
      <TABLE class=tb width=450px align=center cellpadding=5 cellspacing=30>
      <TR>
      <TD class=tc align=center><BR></TD>
      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 .
      <TD class=tc align=center><MARQUEE class=mar
      behavior="slide">Text</MARQUEE></TD>
      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.
      <TD class=tc align=center><BR></TD></TR>

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 17:46, édité 4 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: cours 6b   Jeu 13 Oct - 21:29

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



Cours 6b


6


[code]Votre scénario devrait ressembler a cela ...





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;
}












[td class=tc align=middle]
[/td]

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 18:06, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004

MessageSujet: Leçon 6c   Jeu 13 Oct - 21:31

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


Leçon 6c

11

Code:
 
[color=steelblue][b]Maintenant nous sommes prêts à faire notre rangée suivante de la table.
Donc nous ouvrons une nouvelle rangée et ouvrons une nouvelle cellule. Je
veux que la première cellule couvre deux rangées en hauteur donc
j'ajouterai rowspan=2 à ma balise de cellule. Je veux que cette première
cellule contienne une balise "Marquee" ainsi j'ouvre un marquee et lui
donne un nom de classe id , j' ajoute la taille de de cette balise à mon
stat. Je veux que le "Marquee" aille du bas de la cellule au sommet donc
je dois donner la direction pour se déplacement. Ainsi à l'intérieur de la
balise Marquee ouvrante j'ai mis direction=up. Je dois lui dire aussi de
contenir une image et non pas du texte. Pour faire cela , nous ajouterons
la balise d'image normale au scénario et la mettrons entre l'ouverture et
la balise Marquee finale. Nous avons fini avec cette balise et la
première cellule donc je mets toutes les balises de fermetures , balise
Marquee et celle de la cellule, mais nous laissons la rangée ouverte pour
plus de cellules.
Voici le code que j'ai utilisé pour la première cellule.
<TR>

<td class=tc align="center" rowspan="2">

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%;
}








[table class=tb cellSpacing=30 cellPadding=5 width=450 align=center][tr][td class=tc]
[/td]
[td class=tc align=middle][/td][/tr][/table]
[/color]

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 18:09, édité 3 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Gi
Rang: Administrateur


Nombre de messages : 13141
Localisation : Lévis secteur Charny, Québec, Canada
Date d'inscription : 18/12/2004


MessageSujet: Leçon 6D   Jeu 13 Oct - 21:33

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


Leçon 6D


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







[td class=tc align=middle]
[/td]

_________________
...

[img][/img]
http://www.liensutiles.org/gvilleneuve.htm
ou ici :
http://ginette-villeneuve.qc.ca/


Dernière édition par Gi le Sam 22 Aoû - 18:07, édité 2 fois
Revenir en haut Aller en bas
http://www.liensutiles.org/gvilleneuve.htm
Contenu sponsorisé




MessageSujet: Re: Cours Visual Basic Script : Connie Shultza en français   

Revenir en haut Aller en bas
 
Cours Visual Basic Script : Connie Shultza en français
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant
 Sujets similaires
-
» [SOFT] Visual Basic pour Windows Phone Developer Tools - RTW [Gratuit]
» Pilotage LIUSB en visual basic 6
» Joli petit cours de français
» Cours sur l'imparfait de l'indicatif
» Photo de la table de français du café de Paris ce 1 février

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Mots d'art & Scénarios :: Scripts & Flash d'art :: DE TOUT POUR LES scripts d'art & autres animations par Gi-
Sauter vers: