Cet article fait suite à celui de Yeca Les modèles - Partie 1 : Introduction. Si vous abordez les modèles pour la première fois, il est vivement conseillé de le lire avant et de pratiquer quelques unes des opérations élémentaires.

Pourquoi utiliser des Tableaux répétés ou les Régions répétées ?
Au sein d'une équipe, bien souvent chacun a des tâches bien définies. Imaginons que vous soyez le concepteur des pages, et que une ou plusieurs autres personnes soient chargées des mises à jour. Déjà grâce à un modèle simple tel que nous l'avons vu dans l'article d'introduction de yeca, vous allez leur permettre de ne pas se prendre la tête avec des problèmes de mise en page. Mais si en plus vous utilisez des objets de modèle tels que ceux que nous allons voir, vous allez donner un peu plus de liberté aux autres personnes, tout en préservant l"intégralité de votre travail.

Quand utiliser les Tableaux répétés ou les Régions répétées ?
Cela va dépendre de ce que vous voulez privilégier : facilité d'utilisation, ou souplesse d'utilisation.

Avec les tableaux répétés, vous insérez un tableau, vous définissez quelles seront les lignes répétées dans ce tableau.
Par défaut, toutes les cellules de ces lignes seront des zones modifiables, et vous n'avez pas à vous en occuper.

Au contraire, l'utilisation d'une région répétée nous oblige à définir nous mêmes quelles seront les zones éditables ou non, car par défaut,  une région répétée n'est pas modifiable.

Voilà la seule différence entre ces deux types d'objets :

• Avec le premier : rapide à faire mais plus rigide
• Avec le deuxième : moins rapide mais plus flexible .

Création d'un tableau répété

Voici ce que nous souhaitons réaliser : un tableau de 3 lignes, 3 colonnes. Seule les cellules de la ligne du milieu seront éditables. Elles recevront par exemple chacune une image d'un produit en vente sur le site. Lorsque de nouveaux produits seront disponibles, la personne chargée de la mise à jour de la page n'aura qu'un clic à faire pour ajouter une nouvelle ligne. Les rangées du haut et du bas ne seront pas éditables et contiendront un texte quelconque.

Créez un nouveau document Fichier > Nouveau > Page de base : Modèle HTML et enregistrez-le tout de suite. Au moment de l'enregistrement, DMX vous signale que le modèle ne comporte aucune région modifiable. Laissez-le ronchonner et cliquez sur Continuer . J'ai appelé ce modèle tab_rep.dwt.

Insérez un Tableau répété . Vous avez plusieur possibilités : passer par le menu Insertion > Objets de modèle > Tableau répété

ou par le panneau Insertion , catégorie Commun , bouton Modéles

Les premières options de cette boite de dialoque doivent vous être familières car elles reproduisent celles que l'on trouve lors de l'insertion d' un tableau "normal". Ce qui nous intéresse ici, c'est la section Répéter les lignes du tableau . En fonction de ce que nous avons énoncé plus haut, nous souhaitons que  seule la rangée du milieu soit répétée (et donc que ses cellules soient éditables). Nous indiquons donc comme Ligne de début "2", et Ligne de fin "2" également. Et pour le nom de la région ProduitsEnVente .
Remarque : les noms donnés aux différents types de régions (modifiables, répétées, facultatives) doivent être uniques et respecter les conventions de noms en usage sur votre système, à savoir éviter les caractères spéciaux, accentués, les espaces, etc.

Voici en mode Création ce que Dreamweaver génère. Vous constatez que seule la ligne du centre possède un petit onglet Répéter , et que seules les 3 cellules de cette rangée possèdent un onglet EditRegion .

Puis nous fusionnons les cellules de la rangée du haut et du bas pour y placer notre texte

Côté code, voilà à quoi ressemble un tableau répété :

<table width="50%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td colspan="3">Les produits disponibles en ce moment </td>
</tr>
<!-- TemplateBeginRepeat name="ProduitsEnVente" -->
<tr>
<td><!-- TemplateBeginEditable name="EditRegion3" --> <!-- TemplateEndEditable --></td>
<td><!-- TemplateBeginEditable name="EditRegion4" --> <!-- TemplateEndEditable --></td>
<td><!-- TemplateBeginEditable name="EditRegion5" --> <!-- TemplateEndEditable --></td>
</tr>
<!-- TemplateEndRepeat -->
<tr align="center">
<td colspan="3">Contactez-nous pour en savoir plus </td>
</tr>
</table>

La première ligne en surbrillance indique le début de la région répétée, la deuxième la fin de la région. Tous les objets de modèle répondent aux mêmes principes :

• Ils sont codés sous forme de commentaires HTML, de façon à ce que les navigateurs ne puissent les interpréter.
• Ils possèdent tous un tag d'ouverture TemplateBeginRepeat dans le cas de cet objet et un tag de fermeture TemplateEndRepeat . C'est cette paire de balises qui permet à Dreamweaver de gérer les différents types de modèle, et de savoir quoi faire dans les pages qui utilisent le modèle.

Puis enfin, pour chacune de nos cellules, nous avons les balises signalant le début et la fin de régions modifiables. C'est important de bien comprendre où se situent ces différents codes et ce qu'ils signifient car il y a des cas où l'on peut avoir besoin de modifier manuellement ce qu'a fait Dreamweaver.

Maintenant que notre modèle est prêt, créons une page à partir de ce modèle. (Si vous ne savez pas - ou plus - comment procéder, reportez-vous au tutorial de Yeca)

Voilà l'apparence d'une page faite à partir de notre modèle.

• En haut à droite du document, un onglet précisant quel est le modèle que nous utilisons sur cette page.
• A côté de l'onglet Répéter : ProduitsEnVente , nous avons ce qu'on appelle le MUI (Mini User Interface) , disposant de 4 boutons qui parlent d'eux-mêmes : + et - pour ajouter ou retirer des lignes, flèche vers le haut et flèche vers le bas pour ré-arranger éventuellement l'ordre dans lequel les lignes apparaissent.

Toutes les opérations disponibles (ajouter, supprimer, ordonner) avec le MUI sont également possibles en positionnant le curseur dans une  des cellules, puis en passant par :

• menu Modifier > Modèles > Nouvelle entrée, Déplacer l'entrée etc .
• ou en faisant un clic droit : Modèles > Nouvelle entrée, Déplacer l'entrée etc .

Un bref coup d'oeil au code généré dans une page faite à partir du modèle :

<!-- InstanceBeginRepeat name="ProduitsEnVente" -->
<!-- InstanceBeginRepeatEntry -->

Cette fois nous avons affaire à des instances d'objets du modèle.

Voyons maintenant l'autre type d'objet proposé par Dreamweaver.