Tableaux


VIDEO 1

Les tableaux et leurs cellules.
Les tableaux sont essentiels pour une page bien structurée.
Leurs contours peuvent être visibles ou non.
Pour la leçon, il faut une image de 100 x 100 pixels.
Voici une image. Enregistrer l’image dans le dossier : 3d.

Ouvrir le gestionnaire de site l'oiseau vert.
Sélectionner (en maintenant la touche Ctrl enfoncée),
les 3 pages htm et faire Édition : Ouvrir.

Si vos pages ne sont pas en ordre chronologique comme c'est
le cas ici, sélectionner : Fenêtre>Liste des fenêtres.
Sélectionner l'index et monter deux fois.
Ce qui place l'index, au-dessus de la pile.
Fermer cette fenêtre.

Ouvrir la page 3ami.htm.
(mais vous pouvez vous exercer sur une page sansnom.)

En Édition : Surligner  le mot : ami.
Un clic sur les ciseaux pour couper.

Créer 1 tableau.
Un clic droit dans le tableau : Propriété du tableau.
Largeur et Pixels : cochés. Taper 900 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : rouge.
Appliquer.
OK

Un clic dans le tableau rouge. Créer 1 tableau.
Un clic droit dans le tableau. Propriétés du Tableau.
Largeur et Pixels cochés : taper 600
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : verte.
Appliquer.
OK

Un clic dans le tableau vert.
Créer 1 tableau à 2 cellules horizontales.

Un clic droit dans ce tableau (peu importe la cellule)
Choisir : Propriétés du Tableau.
Largeur et Pixels cochés : taper 430
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : bleue.
Appliquer.
OK

Un clic dans la cellule gauche du tableau bleu.
Insérer une image de 100 x100 pixels.
Diminuer la cellule gauche ( en la maintenant enfoncée) à 100

Un clic dans la cellule droite : taper le mot : Canari.
Surligner le mot Canari >Aligner au centre>26 pt>gras> choisir une couleur.
Un clic dans le vide pour désélectionner.

Voir en aperçu.

Revenir en édition.

Enregistrer le travail.

Suite : ajout de plusieurs tableaux.

 


 

VIDEO 2

Il vous faut une image de 400 X 400 pixels ou moins! Voici une image.
Enregistrer l’image dans le dossier : 3d

 

Un clic après le tableau vert. Une barre clignote.
Créer un tableau à trois cellules (1 x3)
Un clic droit dans le tableau : Propriété du tableau.
Largeur et Pixels : cochés. Taper 880 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : bleu.
OK

Déplacer la première cellule à 200, en maintenant le
curseur enfoncé
et en vous fiant aux chiffres qui défilent.
Déplacer la deuxième cellule à 458.
La troisième devrait être à 200.

Un clic dans la cellule du centre.
Créer un tableau. (1x1)
Un clic droit, Propriété du tableau.
Largeur et Pixels : cochés. Taper 400 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : fuchsia.
OK

Un clic dans le tableau fuchsia.
Sélectionner l'icône "Insérer une image".
Retrouver dans votre dossier, l'image de 400x400 pixels.
Ouvrir.
OK

Un clic dans la première cellule bleue de 200 pixels.
Créer un tableau. (1x1)
Un clic droit dans le tableau, Propriété du tableau.
Largeur et Pixels : cochés. Taper 180 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : lime
OK

Un clic dans le tableau lime.
Créer un tableau à six cellules verticales (6X1)
Un clic droit, Propriété du tableau.
Largeur et Pixels : cochés. Taper 150 dans la fenêtre.
Agencement, Alignement : gauche.
Bordure, Épaisseur 1. Couleur : aqua
OK

Un clic dans la troisième cellule bleue de 200 pixels.
Créer un tableau. (1x1)
Un clic droit, Propriété du tableau.
Largeur et Pixels : cochés. Taper 180 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : lime
OK

Un clic dans le tableau lime.
Créer un tableau à 4 cellules (2X2)
Un clic droit, Propriété du tableau.
Largeur et Pixels : cochés. Taper 150 dans la fenêtre.
Agencement, Alignement : gauche.
Bordure, Épaisseur 1. Couleur : aqua.
OK

Un clic à droite du tableau aqua.
Faire "Enter" (deux fois sur le clavier.)
Créer un tableau à 3 cellules horizontales (1x3)
Un clic droit, Propriété du tableau.
Largeur et Pixels : cochés. Taper 150 dans la fenêtre.
Agencement, Alignement : centre.
Bordure, Épaisseur 1. Couleur : aqua
OK

Voir en Aperçu.

Revenir en Édition.

Enregistrer le travail.

Suite : modification des tableaux et des cellules.

 


 

VIDEO 3

Un clic après le tableau fuchsia. Celui qui entoure l'image.
Faire 2 fois « Enter » sur le clavier.

Créer un tableau d'une cellule (1x1).
Un clic droit dans le tableau, Propriété du tableau.
Largeur, pixel 400. Agencement : centre. Le reste par défaut.
OK

Pour donner de l'espace à l'image qui est collée en haut du tableau,
sélectionner le bas du tableau bleu et le descendre à 550.

Pour monter les tableaux verts.
Un clic à droite des tableaux et faire : « Enter »
deux ou trois fois selon le besoin.

Voir en Aperçu.
Revenir en Édition.

 

Exemple ici.
Nous pourrions inscrire dans chacun des tableaux un texte
qui sera un lien interne (sur une autre page Web de votre site)
ou un lien extérieur (URL) ou une adresse électronique.

Nous pouvons aussi écrire un texte dans un tableau et le
formater : police, taille, couleur, centre, etc.

Il est bien d'ajouter au bas de la page, un lien menant sur
la page index du site.
Nous pouvons, avec le curseur, facilement élargir ou allonger
les tableaux ainsi que les cellules, selon le besoin.

 

Pour enlever un tableau, il  y a deux façons.

Dans l'exemple j'enlève le tableau vert au haut de la page.

1) Positionner le curseur après ce dernier
et utiliser la
flèche reculée du clavier. Ecadré rouge.

À la fenêtre d'invite à supprimer le tableau, sélectionnez : Oui.

 

2) Nous pouvons aussi surligner le tableau, en maintenant le 
curseur enfoncé. 
Il devient entièrement ombragé
et utiliser la commande : Couper.

 


 

VIDEO 4

Important : Enregistrer souvent votre travail.

Voici 2 tuiles de fond à placer dans votre dossier 3d

fd1   

fd2   

Un clic avec le côté gauche du curseur, à l'extérieur du grand tableau
à bordure rouge. Une grande barre clignote.

Un clic droit avec le curseur au même endroit.
À la fenêtre déroulante, choisir : Propriété du document.
Dans la fenêtre Propriétés du Document, sous image d'arrière-plan,
choisir l'icône : Parcourir et retrouver la tuile fd1 qui se trouve dans
votre dossier 3d. La sélectionner et Ouvrir.

Dans la fenêtre : Propriétés du document faire :
Appliquer pour visualiser et OK pour accepter.

Un clic gauche dans le tableau à bordure bleu.
Un clic droit au même endroit.
À la fenêtre, choisir : Propriétés du tableau.
Arrière-plan, Couleur, choisir une couleur.
Dans l'exemple je choisis un jaune pâle.
Appliquer. OK

Un clic gauche dans la première cellule du tableau à bordure bleu.
Un clic droit et choisir : Propriétés des cellules.
Arrière-plan, Image, Parcourir et sélectionner la tuile : fd2.
Ouvrir.

Dans la fenêtre : Propriétés du tableau.
Remarque : l'onglet Cellule est sélectionné, Faire : Appliquer, OK.

Un clic gauche dans la troisième cellule du tableau à bordure bleu.
Un clic droit et choisir : Propriétés des cellules.
Arrière-plan, Image, Parcourir et sélectionner la tuile : fd2.
Ouvrir.

Dans la fenêtre des Propriétés, Appliquer, OK.
Un clic gauche dans le tableau à bordure blanche. (Où se trouve le texte)
Un clic droit au même endroit. Choisir Propriété du tableau.
Couleur : Sélectionner la couleur Blanche.
Appliquer, OK.


Pour  un retour à la ligne.

Cliquer devant un mot. Une barre clignote.
Sélectionner la touche (Shift ) du clavier en la maintenant enfoncée
et faire : Enter.

 

Pour un alinéa ou un Paragraphe.
Cliquer devant un mot, la barre clignote et faire Enter.

Exemple ici devant le mot (Nous)>Enter.

Agrandir le tableau vers le bas pour laisser de l'espace au texte.

Pour laisser une marge à gauche du texte.
Surligner le texte. Faire un clic gauche sur le texte surligné.
Choisir : Propriété du paragraphe.
Nous pourrions choisir un Alignement, Exemple pour centrer le texte.
Dans l'exemple nous allons faire un retrait à gauche à 15.
Appliquer.
Voir la modification, modifiez le chiffre si nécessaire et faire OK.
Un clic dans le vide pour (désélectionner)

Comme les tableaux sont là pour structurer la page, nous n'avons
pas besoin nécessairement de leur bordure.

Pour supprimer une bordure il suffit de mettre l'épaisseur à 0.
Ici j'enlève la bordure rouge du grand tableau, les bordures limes,
la bordure blanche (qui est par défaut) du tableau texte la
bordure blanche (qui est par défaut) du tableau index
.

Ici je modifie la couleur et l'épaisseur de la bordure du tableau bleu
et du tableau fuchsia pour une épaisseur de 5 avec une couleur orangé.

Remarque : dans la palette de couleur, les dernières couleurs utilisées
sont inscrites dans les couleurs récentes.


Réajuster les tableaux
et voir en mode Aperçu
Revenir en Édition sans oublier d'enregistrer le travail.

À vous d'expérimenter les différentes configurations des Propriétés
du tableau,
 Propriétés de la cellule et Propriétés de la ligne.

 

Concernant la commande au clic droit : Sélectionner le tableau.
Exemple ici je sélectionne le tableau gauche turquoise.
Un clic droit, choisir : Sélectionner le tableau, il devient ombragé,
nous pouvons alors supprimer ce tableau en utilisant l'icône ciseau.
ou
Faire : Édition>Couper.

Concernant la commande au clic droit : Sélectionner la cellule.
Exemple ici je sélectionne la cellule dans laquelle se trouve le chiffre
3.

Un clic droit, choisir : Sélectionner la cellule, elle devient ombragée.
Supprimer cette cellule avec l'icône ciseau.

ou

Faire : Édition>couper.

N'oublions pas qu'il est toujours possible dans le mode Édition,
d'annuler la dernière commande effectuée en utilisans la petite
flèche gauche bleu, "Annuler" de la barre Standard.

 

 

 

Accueil

Suite : Une image compartimentée.