Créer des régions facultatives simples

Cette technique va nous permettre d'afficher ou non des éléments de page en fonction d'une condition simple : vrai ou faux.

Exemple : nous avons un modèle sur lequel nous avons incorporé 3 produits en vente. Chaque semaine, l'un des trois produits bénéficie d'une promo. En tant que concepteur du modèle, et rien d'autre, nous ignorons totalement lequel des produits est concerné pour telle ou telle semaine.. Nous allons laisser le soin à une autre personne d'afficher la promo comme elle l'entend.

Donc créons un nouveau modèle, dans lequel on insère un tableau de 3 lignes, 3 colonnes. Dans la rangée du haut, l' image de chacun de nos produits, dans la rangée du bas, l'image de l'offre promotionnelle (Promo10.gif)

Sélectionnez l'image de la cellule du bas à gauche, puis ouvrez le menu Insertion > Objets de modèle > Région facultative.

Cette boite de dialoque comprend deux onglets: Base et Avancé. Pour l'instant nous restons sur l'onglet Base. Nous donnons un nom à notre région facultative et laissons l'option Afficher par defaut cochée. En effet, le réglage de l'affichage se fera directement à partir de la page qui utilise le modèle. Répétez cette opération pour les deux autres images "-10%"

Observons le code source du modèle :
Dans l'en-tête :

<!-- TemplateParam name="PromoProduit1" type="boolean" value="true" -->
<!-- TemplateParam name="PromoProduit2" type="boolean" value="true" -->
<!-- TemplateParam name="PromoProduit3" type="boolean" value="true" -->
</head>

Dans le document, pour chacune de nos balises TD de la rangée inférieure :

<td><!-- TemplateBeginIf cond="PromoProduit1" --><img src="../images/promo10.gif" width="61" height="34"><!-- TemplateEndIf --></td>
<td><!-- TemplateBeginIf cond="PromoProduit2" --><img src="../images/promo10.gif" width="61" height="34"><!-- TemplateEndIf --></td>
<td><!-- TemplateBeginIf cond="PromoProduit3" --><img src="../images/promo10.gif" width="61" height="34"><!-- TemplateEndIf --></td>

Maintenant, changeons de rôle. nous sommes chargés de définir quels sont les produits en promo cette semaine.
Nous créons une page à partir de ce modèle. Puis menu Modifier > Propriétés du modèle :

A chacun de nos noms de régions est associé une valeur booléenne vrai ou faux. Si le produit 1 est en promo mais pas les deux autres, il nous suffit de décocher l'option Afficher PromoProduit2, et la valeur Vrai du paramètre passe à Faux. Même chose pour le produit 3.
Quand vous avez validé, vous constater que nos "-10%" des produits 2 et 3 ne s'affichent plus.

Au niveau du code, les valeurs ont bien été modifiées :

<!-- InstanceParam name="PromoProduit1" type="boolean" value="true" -->
<!-- InstanceParam name="PromoProduit2" type="boolean" value="false" -->
<!-- InstanceParam name="PromoProduit3" type="boolean" value="false" -->

Créer une région facultative modifiable

Permettre d'afficher ou non une région est déjà bien, mais pourquoi ne pas permettre en plus de rendre cette région éditable ?
Si nous reprenons l'exemple précédent : imaginons qu'il y ait des promos de 20%...
Outre la possibilité d'afficher ou masquer des régions, il faudrait autoriser la personne en charge des mises à jour à modifier elle-même l'image, c'est-à-dire à remplacer l'image Promo10.gif par une autre de son choix, Promo20.gif en l'occurrence.

Créons un nouveau modèle. Dedans un tableau 1 ligne, 2 colonnes. Cellule de gauche, la photo d'un produit, cellule de droite l'image Promo10.gif. Sélectionnez cette dernière et allez dans le menu Insertion > Objets de modèles > Région facultative modifiable.
Comme précédemment, donnez-lui un nom, laisser l'option Afficher par défaut cochée.

Validez et observez le résultat (DMX 2004). Nous pouvons déjà constater qu'en mode Création, il y a un problème...

...qui se confirme quand nous regardons le code source :

Dreamweaver a inséré la région facultative modifiable à droite de notre sélection !
Voilà donc un cas où nous allons être obligé de rectifier manuellement le code. La balise <img...> doit se trouver derrière ce bloc de code :

<!-- TemplateBeginIf cond="ImagePromo" -->
<!-- TemplateBeginEditable name="EditRegion3" -->

Le code final doit être :

Attention à bien respecter l'équilibre des balises : la première est TemplateBeginIf... qui doit correspondre à la toute dernière ...TemplateEndIf
Après cette modification, l'aperçu en mode Création correspond plus à nos attentes.

Faites un test. Enregistrez votre modèle, créez une page à partir de celui-ci. Vous constaterez que vous pouvez :
- Afficher ou non l'image.
- Modifier la source de l'image.

Bien sûr, étant donné le léger problème auquel nous avons été confronté, nous aurions aussi bien pu procéder autrement : au lieu de demander directement une nouvelle région facultative modifiable, nous aurions pu commencer par créer une région facultative, et après enchainer en demandant une nouvelle région modifiable...

Partie 4 : Expressions, paramètres, conditions multiples