1. Le problème
2. Comment réaliser un tableau ?
3. Comment utiliser un tableau pour encadrer un paragraphe ?
4. Comment utiliser un tableau pour mettre en page des images ?
5. Comment obtenir Claris Home Page Mac ou PC ?

Le problème :

HTML est fruste :

Lorsqu'on veut réaliser une mise en page évoluée, les choix de base ne suffisent plus.

Fig. 1 : Les choix de base du HTML pour la mise en page sont limités.

Les images sont une solution lourde

Une possibilité est de réaliser une image avec l'ensemble ce qui permet de contrôler précisément l'aspect qu'elle aura pour l'usager. On crée dans un logiciel de dessin la mise en page, on la sauve en GIF, puis on l'intègre dans la page.(Cf. "Comment intégrer une image dans une page WEB")

Mais l'emploi d'images, qui sont généralement de taille considérable, peut ralentir le chargement de la page, surtout pour ceux qui sont connectés au réseau par modem.

Comment réaliser un tableau ?

Très simplement...en cliquant sur le bouton dans la barre d'icônes de Home page.

Home page crée alors un tableau de 2x2 cases et fait apparaître l'éditeur de tableaux.

Fig. 2 : un tableau de 2x2 cases.

Dans les cases du tableau on peut directement taper du texte, ou placer des images, on d'autres tableaux.

Distinguer la sélection du tableau ou d'une cellule.

Distinguons tout de même bien une sélection de l'ensemble du tableau fig 3a (cadre noir sur le pourtour du tableau) d'une sélection d'une seule cellule du tableau (fig 3b) (cadre noir sur le pourtour de la cellule) .

Fig. 3a : Le tableau est sélectionné dans son ensemble.

Fig. 3a : La première cellule du tableau est seule sélectionnée.

Les principaux réglages (agrandir la cellule, le tableau, fusionner des cellules, etc.) peuvent se faire directement en agissant sur les poignées qui apparaissent .

L'éditeur de tableaux

Une fois qu'on clique sur le cadre du tableau, l'éditeur de tableaux apparaît. (cf. fig 4)

Fig. 4 : L'éditeur de tableaux et les paramètres du tableau dans son ensemble.

• Pour gérer le nombre de lignes/colonnes, cliquer les boutons "Add/Remove Row, Add / Remove Col."
• Pour régler la taille des cases, attribuer une valeur au champ Width, ou Height. Ces valeurs peuvent être définies
  • en % de la taille du tableau (qui peut changer si l'usager adapte sa fenêtre du browser, etc.)
  • en pixels invariables.
• Pour régler l'épaisseur et la présence d'un cadre sur l'extérieur du tableau, utiliser le champ "Border"
• Pour régler l'espacement entre les cases ajuster Spacing
• Pour régler l'espacement à l'intérieur des cases ajuster Padding

L'éditeur de tableaux : Edition des cellules.

Une fois qu'on clique dans une case, l'éditeur de tableaux fait apparaître un panneau en plus (cf. Fig 5) permettant de régler les particularité de la/les cellules sélectionnées.

Fig. 5 : L'éditeur de cellules permet de régler les particularités de chaque cellule.

• Pour gérer la position verticale du contenu dans la cellule, utiliser le menu local "Alignement"
• Pour modifier la largeur des colonnes ou des lignes dont cette cellule fait partie, régler les valeurs du champ Col Width, ou Row Width en pixels ou en % de la de la taille du tableau (qui peut changer si l'usager adapte sa fenêtre du browser, etc.)
• Pour fusionner des cellules ajuster les nombres dans les cases "Col span" et "Row span"

Comment utiliser un tableau pour encadrer un paragraphe ?

Pour créer un encadré, on peut utiliser un tableau.

Ce tableau aura une seule case et un cadre d'épaisseur non nulle.

Créer un tableau d'une cellule

Introduire les valeurs de Rows :1 et Columns : 1.
Cliquer dans la palette hors du champ valide et le résultat apparaît immédiatement.

Nous avons un tableau à une cellule

Introduire le texte

Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat.

Nous avons un tableau à une cellule avec le texte dedans.

Ajuster l'épaisseur du cadre.

Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat. Ceci est du texte à encadrer, nous utilisons on tableau à une seule ligne et une seule colonne pour obtenir ce résultat.

Nous avons un tableau à une cellule avec le texte dedans et a un cadre d'épaisseur 2, le padding a été augmenté à 6 pixels pour laisser respirer le texte dans le tableau.

Comment utiliser un tableau pour mettre en page des images ?

On peut aussi utiliser un tableau pour mettre en page une image.

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat.Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à une seule ligne et deux colonnes pour obtenir ce résultat.

Dans la palette de l'éditeur de tableau, régler à 1 ligne et 2 colonnes, puis régler le cadre "Border" à zéro, pour obtenir un cadre invisible.

Pour une image "habillée" avec du texte

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat.

Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat. Ceci est du texte qui doit habiller l'image qui est à droite, nous utilisons on tableau à 2 lignes et deux colonnes pour obtenir ce résultat.

Dans la palette de l'éditeur de tableau, régler à 2 ligne et 2 colonnes, puis régler le cadre "Border" à zéro, pour obtenir un cadre invisible. Ensuite fusionner les 2 cases inférieures (en glissant la poignée de la cellule de droite) pour en faire une seule colonne plus large.

Cette manière de faire permet de faire des mises en page assez sophistiquées.

Comment obtenir Claris Home Page ?

Evidemment sur le WEB, à http://www.Claris.com, ou au CPTIC sur le réseau éléphant.(Disponible seulement en IntraNet (depuis l'intérieur de l'état))

CPTIC / F. Lombard

Dernière mise à jour : 13 mai 1998