Si vous abordez les modèles pour la première fois, il est vivement conseillé de le lire avant les parties 1 et 2 et de pratiquer quelques unes des opérations élémentaires.
Nous avons vu dans la deuxième partie de ce tutorial comment apporter un peu plus de souplesse à des pages qui utilisent un modèle.
Nous pouvons aller plus loin encore, et autoriser, dans ces pages, à ce que certains attributs de balises soient modifiables, laissant ainsi plus de liberté aux personnes chargées de faire des pages à partir de ce modéle, ou encore de les laisser décider d’afficher telle ou telle partie de document, en fonction de critères précis.
Rendre un attribut modifiable
Le principe ne change pas. En tant que concepteur de la page, nous créons un modèle, à partir duquel d’autres personnes pourront travailler (Fichier > Nouveau > Page de base : Modèle HTML). Enregistrez-le.
Créez un simple tableau d’une ligne, une colonne, donnez-lui une couleur de fond, une largeur. Peu importe l’usage qui en sera fait ultérieurement, tout ce que nous savons, c’est que la couleur de fond de ce tableau devra pouvoir être modifiée à volonté par les utilisateurs du modèle, mais PAS les autres attributs, à savoir la largeur, ou l’alignement par exemple.
Pour cela, nous allons rendre l’attribut bgcolor de la balise <table> modifiable.
Sélectionnez exactement votre tableau, soit par le sélecteur de balises, soit en cliquant sur ses bordures. Puis allez dans le menu Modifier > Modèles > Rendre l’attribut modifiable.
Voici la boite de dialogue proposée par Dreamweaver :
- En premier lieu, vérifiez, au dessus du champ Attributs, que c’est bien la balise TABLE qui est en cours de sélection.
- Déroulez le champ Attributs : vous devez voir apparaitre tous les attributs que vous avez défini quand vous avez créé le tableau. En l’occurence, nous avions défini la largeur (WIDTH), la bordure (BORDER), et la couleur de fond (BGCOLOR). Si nous avions défini aussi l’alignement, cet attribut apparaitrait aussi automatiquement dans cette liste.
- Sélectionnez l’attribut BGCOLOR .
- Puis cochez l’option Rendre l’attribut modifiable. C’est indispensable, le libellé de cette option est suffisamment explicite !
Automatiquement, les champs situés en dessous de cette option se sont activés :
- Etiquette : c’est un nom qui servira à Dreamweaver de référence, une variable qui sera évaluée par Dreamweaver dans la page qui utilise le modèle.
Vous pouvez accepter le nom qu’il vous propose par défaut, ou en mettre un personnalisé. Je l’ai appelé « CouleurFond ». Respectez comme d’habitude les conventions en usage pour les noms (pas d’espace, pas de caractères spéciaux). - Type : par défaut Dreamweaver a mis Texte. C’est un bon choix puisque une couleur hexadécimale est du texte, ni plus ni moins, mais autant choisir le type Couleur, car lui nous proposera plus tard le puits de couleur, ce qui nous évitera de devoir taper nous-même le code de la couleur.
En déroulant ce champ, vous pouvez voir que 5 types sont disponibles : Texte, Url, Couleur, Vrai/faux (booléen), Nombre. - Par défaut : si l’utilisateur ne définit aucune couleur, c’est celle que nous avons défini dans le modèle qui sera utilisée.
Observez à présent le code source du modéle, il s’est passé des choses…
Dans l’en-tête du document :
<!– TemplateParam name= »CouleurFond » type= »color » value= »#CCCCCC » –>
</head>
et dans le corps du document :
<body>
<table width= »30% » border= »1″ bgcolor= »@@(CouleurFond)@@« >
Dreamweaver a remplacé le code de la couleur de fond par l’étiquette que nous avons définie précédemment et a mis cette étiquette entre parenthèses. Puis le tout est entouré d’arobases, 2 devant, 2 derrières, ce qui signale à Dreamweaver la présence d’un paramètre, qu’il remplacera en fonction du choix de l’utilisateur.
Nous allons donc maintenant créer une page à partir de ce modèle. Dans cette page, allez dans le menu Modifier > Propriétés du modèle :
Nous y voyons le nom de notre paramètre, et sa valeur par défaut. Nous n’avons ici que la couleur de fond, mais si nous avions autorisé plusieurs attributs à être modifiables, tous apparaitraient dans cette boite de dialogue. Il ne reste plus qu’à modifier la couleur grâce au champ CouleurFond et le puits de couleur.
{mospagebreak}
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…
