Comme nous l’avons dit auparavant, les tableaux tel celui de cet exemple peuvent rapidement devenir très complexes : ce sont
Figure 4.31: Aspect de la page Région dans un navigateur
probablement eux qui méritent le plus le recours à un éditeur HTML.
Nous allons concevoir à nouveau le même tableau, mais cette fois à l’aide de Nvu.
1 Ouvrez Nvu. Bonne nouvelle, contrairement à Amaya, l’interface est localisée, si toutefois vous avez téléchargé la bonne version (nous employons ici la version 1.0PR (20050330)).
2 Saisissez Ma région. Cliquez sur la flèche de la zone de liste déroulante, à côté de Corps de texte et, choisissez dans la liste Titre 1.
Placez-vous à la fin du titre, puis appuyez sur [Ä].
3 Cliquez sur l’icôneTableau. Cela affiche une nouvelle fenêtre, qui permet de définir le tableau à créer.
Figure 4.32: Création d’un titre de niveau 1
Figure 4.33:
Boîte de dialogue Insérer un tableau
Vous allez immédiatement modifier les attributs de votre tableau (en réalité de l’élément TABLE). Cliquez sur Édition avancée. Vous voyez que Nvu a déjà défini trois attributs avec des valeurs par défaut : cellspacing,cellpading etborder.
4 Vous voulez ajouter deux attributs summaryetalign. Ouvrez la zone de liste déroulante Attribut et choisissez summary. Dans la zone de texte Valeur, saisissez Présentation de ma région. Ouvrez à nouveau la zone de liste déroulanteAttributet choisissez align. Ouvrez la zone de liste déroulante Valeur et choisissez center. La fenêtre Éditeur des propriétés avancées doit ressembler à ce qui est présenté dans la figure qui suit. Confirmez par OK pour revenir à la fenêtreInsérer un tableau.
Figure 4.34:
Éditeur des propriétés avancées
Figure 4.35: Fenêtre Éditeur des propriétés avancées renseignée
5 Nous voulons un tableau de quatre lignes et quatre colonnes : sélectionnez dans cette fenêtre quatre lignes et quatre colonnes, puis cliquez sur OK.
6 Sélectionnez les cellules de la première colonne, puis choisissez dans le menuTableau>Fusionner les cellules sélectionnées: les quatre cellules concernées fusionnent.
7 Sélectionnez les trois dernières cellules de la première ligne, puis choisissez à nouveau dans le menu Tableau > Fusionner les cellules sélectionnées: les trois cellules concernées fusionnent.
8 De la même façon, faites fusionner les secondes cellules des lignes 3 et 4, puis les deux dernières cellules des lignes 3 et 4.
9 Placez-vous dans la première cellule et saisissez...Une image sera placée ici… Placez-vous dans la seconde cellule de la première ligne et saisissez Ma région est célèbre pour ses forêts, ses montagnes et ses lacs. Saisissez dans les cellules vides de la seconde ligne respectivement Les forêts, Les montagnes et Les lacs.
10Sur la troisième ligne, saisissez dans la seconde cellule Ici, du texte à compléter et dans la troisième Ici, une autre image.
Figure 4.36: Aspect de la page Ma région après l’étape 8
11Il subsiste quelques détails à régler : placez-vous sur le titre de niveau 1 et choisissez dans la barre d’outils Format > Aligner >
Centrer. Cela centre le titre. Ensuite, vous ne devez pas oublier d’ajouter un nom d’auteur. Cela est accompli à l’aide de l’option de menu Outils > Préférences. La page Optionss’affiche. Cliquez sur Paramètres de pages et, dans la fenêtre de droite, saisissez dans le champ Auteur mon nom (où mon nom est votre nom).
12Le tableau obtenu ressemble beaucoup à ce que nous avions fait précédemment, mais a été réalisé ici avec une grande facilité.
Enregistrez votre travail. Choisissez Fichier > Enregistrer sous. Le programme vous demande de saisir un titre (le contenu de l’élément TITLE). Saisissez Ma régionet cliquez sur OK. Dans la boîte de dialogue Enregistrer sous, naviguez jusqu’au dossier Mon Site Web et enregistrez le fichier sous le nomregion2.html.
13Il serait maintenant intéressant d’examiner le code source ainsi généré. Rien de plus simple : cliquez en bas de la fenêtre sur l’onglet Source. Le code source s’affiche (voir Figure 4.38).
Ce code est très semblable à celui créé manuellement. Remarquez toutefois quelques différences :
Figure 4.37: Aspect de la page terminée dans l’éditeur Nvu
j Comme nous l’avons déjà vu auparavant, les caractères accentués sont représentés par des séquences « bizarres » de caractères.
Nous examinerons ceux-ci dans le prochain chapitre.
j La balise TABLE emploie un nouvel attribut (style= "margin
−left: auto; margin−right: auto; text−align: left;
width: 100%;"). Il sera examiné en détail dans le Chapitre 8, traitant des feuilles de style.
j Les balisesTD se voient dotées d’attributs que nous connaissons, mais possédant la valeur "undefined" (<td colspan="1"
rowspan="4" align="undefined" valign="undefined">). C’est un des petits problèmes des éditeurs HTML, qui insèrent automatiquement des balises et attributs supplémentaires, ce qui alourdit le code. Lorsque HTML constate l’absence de ces attributs avec une valeur spécifiée, il considère qu’ils sont présents avec leur valeur par défaut : il est donc superflu de les ajouter, cela alourdissant inutilement le code.
j Il manque cependant l’élément META indiquant la version du fichier : ajoutez-la manuellement, puis enregistrez le fichier en cliquant surEnregistrer.
Comme vous venez de le voir, il est bien plus simple de créer un tableau à l’aide d’un éditeur HTML comme Nvu que de le bâtir de toutes pièces dans un simple éditeur de texte, à moins de faire preuve d’une rare maîtrise du code HTML !
Figure 4.38: Code source de la page