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″ –>&nbsp;<!– TemplateEndEditable –></td>
<td><!– TemplateBeginEditable name= »EditRegion4″ –>&nbsp;<!– TemplateEndEditable –></td>
<td><!– TemplateBeginEditable name= »EditRegion5″ –>&nbsp;<!– 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.{mospagebreak}

Création d’une région répétée

Pour cet objet de modèle, nous allons partir de l’exemple proposé par Yeca dans l’introduction au modèle, à savoir préparer une barre de menus qui sera la même sur toutes les pages.
Seule différence : le menu sera vertical et nous ne savons pas encore combien de menus il y aura. Il faut donc laisser à d’autres personnes de l’équipe la possibilité d’en rajouter, voir même d’en supprimer, ou de les organiser de façon différente. Bien sûr la technique du tableau répété aurait très bien pu être utilisée mais pour les besoins de la cause oublions là pour l’instant…

Créez un nouveau modèle (Fichier > Nouveau > Page de base : Modèle HTML ), puis créez une liste non ordonnée à l’aide du panneau Propriétés :

Tapez simplement le mot Accueil , laissez le curseur dans le mot cliquez sur le bouton Liste simple de l’inspecteur de Propriétés

Le code HTML correspondant est le suivant (ici aperçu mode Code et Création) :

Attention, ici nous voulons que ce soit l’élément de liste <li> qui soit répété, et non la liste en elle-même <ul> .
Donc conseil : cliquez sur la balise <li> dans le sélecteur de balise, en bas à gauche du document, de façon à sélectionner précisément cette balise (il peut être nécessaire de faire 2 clics successifs pour que la balise ouvrante soit également prise en compte).  Une fois sûr de votre sélection, faites un clic droit sur le mot Accueil (qui doit normalement être en sélection, fond noir) dans le volet Création et allez dans Modèle > Nouvelle région répétée…
Donnez lui un nom expressif (je l’ai appelé ElementMenu ) et validez.

Dreamweaver a bien créé notre région répétée mais vous pouvez constater qu’à la différence de la technique du tableau répété, il n’a pas créé de région modifiable automatiquement. C’est à nous d’effectuer cette étape supplémentaire. Voilà en quoi réside la différence entre ces objets de modèle.
Donc c’est simple, sélectionnez juste le mot Accueil, faites un clic droit : Modèle > Nouvelle région modifiable… et appelons-la NomElementMenu .

Enregistrez le modèle. Il se peut à ce moment là que vous ayez un avertissement de Dreamweaver ( je ne me rappelle plus si c’était déjà le cas avec DMX):
« Vous avez placé la région modifiable NomElementMenu à l’intérieur d’une balise <P> ou d’une autre balises de bloc. Les utilisateurs de ce modèle ne pourront pas créer de nouveaux paragraphes blablabla…  »
Ne vous occupez pas de ce message et continuer votre chemin.
(Justement on ne veut pas que les utilisateurs puissent mettre des paragraphes dans notre cas…)

Voilà notre modèle de menu prêt, nous pouvons créer une page à partir de ce modèles

Ici nous retrouvons ce que nous avons déjà vu avec le tableau répété : le MUI permettant d’organiser nos menus, ajout, suppression, classement.

En conclusion

Ces objets de modèle apportent plus de souplesse que les modèles standards, assez rigides il faut le reconnaitre. Ils permettent de laisser plus de liberté aux personnes qui travaillent sur le même site et qui n’ont pas toujours forcément les compétences lorqu’il s’agit de mise en page.

Parlons tout de même des inconvénients :

• Beaucoup de code est rajouté dans le code source. Le poids de la page s’en trouve augmenté sensiblement lorque les régions modifiables, répétées fourmillent dans un document. De même la lisibilité du code s’en trouve affectée.
• Il faut aussi se rappeler que le moindre changement dans un modèle oblige à refaire un transfert sur le serveur de TOUS les fichiers qui utilisent le modèle. En effet, nous ne sommes pas dans une configuration de « site dynamique » : les données ne sont pas lues à partir d’un fichier, ni interprétées par un quelconque langage dynamique.
• Le serveur n’en a que faire que vous utilisiez ou non des modèles. D’ailleurs pour preuve, à moins de travailler en équipe et de partager des modèles avec d’autres, ceux-ci n’ont aucunement besoin d’être transférés sur le serveur.

Néanmoins, nous verrons dans la troisième partie de cette série sur les modèles, que nous pouvons nous rapprocher des fonctionnalités d’un site dynamique (sans en atteindre la puissance) grâce à d’autres types d’objets de modèles  : les attributs modifiables, les régions facultative.