Utilisation des tableaux pour la création de pages HTML Par Toussaint Frédéric

E  t  a  p  e   6 :

Insertion du titre

Retournez maintenant dans le Gimp, nous allons créer l'image du titre. Toujours en suivant les guides, ne sélectionnez que le texte, nous l'indexerons sur 2 couleurs pour économiser quelques octets, le logo du Gimp sera traité ensuite au format jpg. Enregistrez le en tant que titre.png. Sélectionnez le logo du Gimp et enregistrez-le au format .jpg avec un taux de compression de 0.97 pour obtenir une qualité idéale. Au format png (et 150 couleurs) cette image pèserait 1.8 ko alors qu'en jpg on arrive à 1.5 ko pour le même résultat. Cette optimisation peut paraître faible, mais 300 octets gagnés sur chaque image, multiplié par le nombre de pages affichées chaque jour, cela permet de gagner de la bande passante et d'obtenir de meilleures performances sur un serveur modeste.

Insérons-les maintenant dans la cellule qui contient déjà l'image fond_titre.png, le tableau va s'agrandir mais ce n'est pas très grave, pensez à les centrer.  Sélectionnez l'image du titre et cliquez avec le bouton droit de la souris, nous allons modifier les paramètres du tableau.

Dans les options générales du tableau, décochez la case "colonnes de même largeur" et donnez des valeurs de 0 pour l'espacement et le remplissage de la cellule (si vous voulez déjà voir le travail terminé, vous pouvez aussi mettre 0 à la valeur "largeur des bords"). Afin d'éviter que des problèmes de tailles de cellules incorrectes lorsque l'on redimensionne la page dans le navigateur, vous devez spécifier une valeur de 673 pixels (en cochant "largeur de cellule") pour la largeur de la cellule dans l'onglet cellule (attention de bien faire cette opération en ayant appelé le clic droit à partir de la cellule qui contient le titre). Vous pouvez mettre une valeur de 0 dans la largeur des bords du tableau, et cela devrait être bon. Vous pouvez enregistrer votre page et la visualiser dans un navigateur, vous pourrez remarquer que la taille du tableau s'adapte parfaitement à la taille de la fenêtre.

Note : la valeur de 673 pixels est fixée par l'addition des 3 images contenues dans cette cellule, le fait de spécifier la taille de cette cellule empêche le navigateur de la redimensionner à une taille inférieure, ce qui aurait pour conséquence un retour de chariot pour l'image du logo du Gimp et donc un décalage complet du cadre. Le navigateur Mozilla procure également certains soucis avec cette solution et j'ai été contraint de spécifer que je souhaitais que le texte entoure l'image (Un double clic sur l'image et cliquez sur le bouton  ), il faut faire cette opération pour les trois images du titre. Si vous constatez d'autres problèmes sur d'autres navigateurs avec ce système il reste la solution de ne faire qu'une seule et même image pour le titre ou d'insérer un nouveau tableau de deux colonnes qui contiendra nos deux images, dans ce cas vous pouvez supprimer l'image fond_titre.png.