Dreamweaver - eyrolles.com · Deux entrées de région répétée sont ajoutées. Insertion de balises de métadonnées et de commentaires d’éditeur permettant d’accepter des

M. F

oti

A. B

urag

lia -

D. S

hort

Drea

mw

eave

rM

X 20

04M

agic

www.editions-eyrolles.com

Onze spécialistes de la communauté Dreamweaver proposent, à travers douzeprojets uniques présentés étape par étape, de nombreuses techniques à réuti-liser et transposer dans vos projets Web :

• Mise en forme de vos pages grâce aux CSS.• Affichage des sous-menus dynamiques.• Utilisation de Javascript pour définir l’image source d’un bouton de manière dynamique.• Création de modèles pour convertir un système de sous-menus disjoints compatibles

avec les standards en cours.• Intégration de Dreamweaver et de Fireworks.• Modification de l’apparence d’objets grâce aux classes CSS personnalisées.• Création d’une barre de navigation en utilisant des objets Flash prédéfinis.• Exploitation des objets de formulaire pour ajouter des champs de texte et d’autres éléments

à votre page de contact.• Élaboration d’une feuille de style distincte pour chaque thème de couleur du site.• Mise en place d’un modèle de bannière rotatives en ASP.NET.• Création de site avec différentes sous-sections de navigation pour chaque section principale,

à l’aide d’ASP 3.0.• Création d’une page de modification avec possibilité de modification et de suppression

des enregistrements.

Conc

eptio

n:

Nor

d Co

mpo

28 €

Code

édi

teur

:G11

514

ISBN

:2-2

12-1

1514

-8

9782212

115147

Sur le CD-Rom Mac/PC offert avec ce livre

• Tous les fichiers et le code source des 12 projets

• Des tutoriels animés de présentation des projets

• Dreamweaver MX 2004 (version d’évaluation de30 jours en français pour PC et Mac)

Configuration requise : Sur PC : Processeur Intel Pentium III 600 MHz ou équivalent • Microsoft

Windows 98 SE, Windows 2000, Windows XP, Windows Server 2003 •128 Mo de mémoire (256 Mo recommandés) • 275 Mo d’espace disquedisponible.

Sur Mac : Processeur PowerPC G3 500 MHz • Mac OS 10.2.6 • 128 Mo demémoire (256 Mo recommandés) • 275 Mo d’espace disque disponible.

Des techniques de pros pour un site Web réussi

M. Fot iA . Buragl iaD. ShortK . CavanaughD. Ce l icK . FrenchB. HalsteadJ . Mart inezS . Sul l ivanM. SummersE . Zubler

_ _ g / / g

Contrôler des élémentsde navigation avec des modèles

En répondant à des questions d’utilisateurs sur Contribute 1.0 et 2.0, j’ai remarqué qu’il

n’existait aucune méthode permettant de créer des liens accessibles dans les éléments de

navigation des pages. Comme il s’agissait d’une question importante, j’ai décidé de trouver

un moyen d’y parvenir ; voilà comment est né le présent projet.

L’accessibilité est un mot à la mode sur Internet, mais elle est loin d’être une réalité. Il est

cependant important, à des degrés variables selon les sites, de s’assurer que les pages soient

disponibles pour tous, y compris pour les personnes souffrant d’un handicap.

Le développement de ce projet m’a mené sur des voies peu familières et m’a permis

d’améliorer mes connaissances en matière d’accessibilité des sites Web. J’espère que vous

pourrez exploiter cette technique ou développer une variante destinée à vos utilisateurs

Contribute.

Brad Halstead

PROJET 4

Brad Halstead,

programmeur HTML 4.01

certifié, est un acteur

incontournable des forums

de support Dreamweaver,

Contribute et Project Seven.

Il a récemment collaboré à la

rédaction de l’ouvrage

Dreamweaver MX Templates et

fait partie de l’équipe

Macromedia pour

Contribute.

3557_Ch04 1/06/04 12:00 Page 44 > ApogeeI Normalizer Couleur

Deux entrées de région répétée sont ajoutées.

Insertion de balises de métadonnées et de commentaires d’éditeur permettantd’accepter des données provenant de paramètres de modèle.

Le projet en brefDreamweaver et Contribute permettent de gérer

certains problèmes d’accessibilité grâce à des

options de préférences et diverses boîtes de dia-

logue. D’autres solutions doivent être insérées

manuellement dans Dreamweaver en mode Code

ou à l’aide de l’Inspecteur de balises (onglet

Attributs). La plupart de ces fonctions ne peuvent

pas être insérées ou manipulées dans le cadre de

Contribute. Au cours de ce projet, vous allez :

1. Insérer et modifier des balises de métadon-

nées spécifiées et des commentaires

d’éditeur afin d’accepter les données des

paramètres de modèle.

2. Convertir un système de sous-menus distinct

existant, compatible avec les spécifications

courantes, en utilisant les modèles et les élé-

ments de modèle Dreamweaver (régions

modifiables, régions répétées, paramètres et

expressions), afin de contrôler les caractéris-

tiques des éléments de sous-menu.

3. Valider le modèle en vérifiant sa conformité

aux règles d’accessibilité, ainsi qu’aux stan-

dards XHTML et CSS, en créant une page

enfant du modèle, en la téléchargeant sur

votre serveur, puis en la validant à l’aide des

moteurs de votre choix destinés à cet effet.

4. Créer les pages du site avec Contribute en

utilisant la méthode appropriée de concep-

tion de nouvelles pages depuis le modèle.


Préparer le projetPour lancer le projet, procédez de la façon suivante :

1. Installez l’extension de fragments de code Project 04

Snippets.mxp dans le dossier Projects\04\Extensions. Pour plus

d’informations concernant l’installation de cette extension,

consultez l’Annexe A consacrée à ce sujet.

2. Si vous utilisez Dreamweaver MX (6.0 ou 6.1), installez

l’extension de nettoyage des balises XML StripXMLtag.mxp

dans le dossier Projects\04\Extensions. Pour plus d’informa-

tions sur l’installation de cette extension, consultez l’annexe A

consacrée à ce sujet. Attention, cette opération est à bannir si

vous travaillez avec Dreamweaver MX 2004 !

3. Copiez le contenu du dossier Projects\04\Working_Files\ du

CD-Rom d’accompagnement dans un nouveau dossier

nommé Projet_04 sur votre disque dur.

4. Lancez Dreamweaver MX 2004 et créez une définition de site

qui pointe vers le dossier 04. Nommez le site Projet04.

5. Répétez les étapes 3 et 4 en utilisant le dossier

Projects\04\Finished\ du CD-Rom, ainsi que le dossier local

Projet_04_F. Nommez le site Projet04 Fini. Vous pouvez uti-

liser ce site comme référence dans le cadre de notre projet.

Les liens du menu principal de ce site sont relatifs à son dossier

racine. Pour afficher un aperçu du site sur votre ordinateur

local, configurez un serveur d’évaluation comme IIS,

ColdFusion ou Apache, puis paramétrez la définition de site

en conséquence. Vous ne rencontrerez aucune difficulté à affi-

cher une seule page, tant que vous n’essayez pas d’utiliser les

éléments de navigation principaux. Quant aux éléments de

sous-menu, ils fonctionnent normalement depuis n’importe

quelle page prévisualisée, sans serveur d’évaluation.

6. Accédez aux préférences de Dreamweaver (Ctrl+U ou +U),

puis sélectionnez la catégorie Accessibilité. Assurez-vous que

toutes les cases sont cochées. Dans la catégorie Correction du

code, vérifiez que les six éléments situés dans la partie supé-

rieure sont cochés et que le bouton radio de la même section

est sélectionné. Dans la catégorie Éléments invisibles, assurez-

vous que toutes les cases sont cochées, à l’exception de CSS

display:none. Dans la catégorie Programme de validation,

sélectionnez XHTML 1.0 Strict et décochez toutes les autres

options. Conservez les paramètres par défaut de la catégorie

Options. Cliquez sur OK pour enregistrer les modifications

et fermer la boîte de dialogue Préférences.

7. Si Contribute 1.0 ou 2.0 est installé sur votre ordinateur,

suivez les instructions du fichier Projects\04\Extensions

\CT_readme.txt. Dans le cas contraire, ignorez cette étape

et continuez le projet comme si vous le développiez pour un

utilisateur Contribute. Assurez-vous de transmettre les fichiers

CT_Readme.txt et CT_Commands.zip aux utilisateurs

Contribute, faute de quoi tous vos efforts seraient inutiles !

8. Ouvrez le fichier ParameterList.pdf qui se trouve dans

Projects\04\Extensions\ et qui contient une liste des para-

mètres du modèle fini. Ce document facilite la création ou la

modification des documents construits à partir du modèle fini.

Info : malheureusement, en raison d’un bogue dans le moteurCSS-P, la mini-interface utilisateur des régions répétées demodèle ne fonctionne pas si les instructions de l’étape 6 nesont pas suivies.

Compatibilité des navigateurs

Cette technique ne repose pas sur le navigateur utilisé. Ce

projet a été testé avec :

• Macromedia Dreamweaver MX (6.1)

• Macromedia Dreamweaver MX 2004 (7.0)

• Macromedia Contribute 1.0

• Macromedia Contribute 2.0

• Internet Explorer 6.0 Service Pack 1 (Windows)

• Mozilla 1.4 (Windows)

• Mozilla Firebird 0.6 (Windows)

• Netscape 6.21, 7.1 (Windows)

• Opera 7.02, 7.11 (Windows)

46 4 : Contrôler des éléments de navigation avec des modèles


47

Contrôler les métadonnéesde documentDans cette section du projet, vous allez modifier le modèle

Dreamweaver de base. Avant d’ajouter le contenu à afficher,

configurez la structure de base du modèle en :

• convertissant le commentaire d’éditeur afin d’accepter une date

modifiée ;

• convertissant la base méta d’auteur afin qu’elle soit

personnalisable ;

• ajoutant des mots-clés méta modifiables et des balises de

description.

Ces conversions et ces ajouts sont effectués via des paramètres et

des expressions de modèle figurant principalement dans la boîte de

dialogue Attributs de balise modifiables. Suivez ces étapes :

1. Assurez-vous que le site Projet04 est sélectionné, puis utilisez

le panneau Fichiers (F8) pour ouvrir le modèle nommé

project04.dwt dans le dossier Templates.

2. Cliquez sur le bouton Fractionner (pour afficher les vues en

mode Code et en mode Création) afin de visualiser le code et

le modèle simultanément. Choisissez Affichage>Contenu de

l’en-tête (Ctrl+Maj+H ou +Maj+H) afin de consulter le bloc

d’en-tête.

3. Placez votre curseur à la ligne 17 (balise méta author) en mode

Code, puis choisissez Modifier>Modèle>Rendre l’attribut

modifiable. Dans la boîte de dialogue Attributs de balise modi-

fiables qui s’affiche, procédez au paramétrage suivant, puis

cliquez sur OK :

Attribut : CONTENT

Rendre l’attribut modifiable : coché

Étiquette : Meta_Author

Type : Texte

Valeur par défaut : Entrez votre nom ici !

4. Placez votre curseur à la fin de la ligne 27 et tapez le code sui-

vant (ou utilisez le fragment MX Magic 2004>Project

04>01-Comment_Mod_Date Param) :

Listing 4.1



Info : une fois la page enfant créée, vous pouvez utiliser lemenu Contribute en choisissant Format>Propriétés du modèlepour modifier ces valeurs de paramètre dans un contenudonné. Seule cette méthode permet de modifier la valeur desbalises <meta> dans Contribute afin qu’elles soient uniques surchaque page.

Vous pouvez répéter le processus de l’étape 3 en définissantdiverses valeurs dans les autres balises <meta> que voussouhaitez rendre modifiables dans Contribute.

Les mots-clés et descriptions peuvent être gérés sans utiliserde paramètres, en ajoutant ces balises <meta> à la régionmodifiable nommée head. Cette méthode ne peut pas être utili-sée ici, car le site est déjà développé. Par conséquent, leschangements apportés aux régions modifiables du fichier demodèle ne seront pas appliqués aux pages enfants existantes.Pour remédier à ce problème, la solution consiste à insérer lesbalises <meta> dans la région verrouillée et à les configurer demanière à utiliser des paramètres de modèle similaires à ceuxde l’étape 3.

4 : Contrôler des éléments de navigation avec des modèles


5. Faites défiler vers le haut le bloc de commentaires de l’éditeur

(ligne 6) et remplacez la valeur de date (July 20, 2003) par

@@(Comment_Mod_Date)@@ (ou utilisez le fragment 02-

Comment_Mod_Date Expr). À la ligne 7, remplacez le texte

Brad Halstead par @@(Meta_Author)@@ (ou utilisez le fragment

03-Meta_Author Expr).

6. Dans la vue en mode Code, placez votre curseur au début de la

ligne 18. Insérez deux balises <meta> en utilisant deux fois la

commande Insertion>HTML>Balises d’en-tête. Choisissez

Description, puis Mots-clés. Pour la valeur de chacun, tapez

« Ajoutez le contenu ici ! » .

7. Placez votre curseur dans la balise méta de description, puis

choisissez Modification>Modèles>Rendre l’attribut modi-

fiable. Dans la boîte de dialogue Attributs de balise

modifiables, définissez les paramètres suivants et cliquez sur

OK.

Attribut : CONTENT

Rendre l’attribut modifiable : coché

Étiquette : Meta_Description

Type : Texte

Valeur par défaut : Ajoutez le contenu ici !

Info : cette technique de configuration de la description et desmots-clés permet à l’utilisateur de travailler à partir d’une seuleinterface au lieu de devoir effectuer diverses sélections dansdes menus. Il échappe ainsi au traditionnel chercher/remplacerlorsqu’il doit définir les balises méta dans la région modifiablesur toutes les pages existantes en vue de la manipulation desvaleurs.

8. Répétez l’étape 7 pour les mots-clés méta à la ligne 19,

en utilisant l’étiquette Meta_Keywords.

9. Choisissez Modifier>Modèles>Vérifier la syntaxe du modèle,

puis cliquez sur OK en réponse au message. Cette fonction

vérifie que le balisage du modèle figurant dans la page est

correct du point de vue de la syntaxe. Si un message d’erreur

s’affiche, vérifiez les étapes précédentes afin de repérer les

problèmes éventuels.

10. Enregistrez le modèle modifié (Ctrl+S ou +S). Lorsque la

boîte de dialogue Mettre à jour les fichiers de modèle apparaît,

cliquez sur le bouton Mettre à jour. La boîte de dialogue

Mettre à jour les pages indique alors quelles pages enfants ont

été mises à jour.

11. Cliquez sur le bouton Fermer pour faire disparaître la boîte de

dialogue.



49

Modifier le système de sous-menusLes étapes que nous venons de voir ne présentaient aucune diffi-

culté majeure, mais nous allons maintenant convertir le système de

sous-menus via une série d’éléments de modèle, afin de simplifier

la procédure sous Contribute, tout en conservant les améliorations

en matière d’accessibilité pour le client. Les éléments de modèle

utilisés dans cette section correspondent à une région répétée

modifiable, à des expressions complexes manipulant l’opérateur

d’expression conditionnel, ainsi qu’à des variables d’expression,

dont _index et _isLast.

EnquêteCommencez par inspecter le système de sous-menus existant afin

de vérifier si un motif peut être utilisé au cours du processus de

conversion. Examinez la ligne 35 (<div id=»SubNavLyr»>), et

notamment les éléments suivants :

Listing 4.2

<a href=”page1.htm” tabindex=”7” title=”Product 2, ➥Page 1” accesskey=”1”>About Product 2</a>➥<span class=”hide”> | </span> ➥<span class=”BreadCrumb”>Product 2 FAQ</span> ➥<span class=”hide”> | </span> ➥<a href=”page3.htm” tabindex=”9” ➥title=”Product 2, Page 3” ➥accesskey=”3”>Product 2 Demo</a>

Ce code définit un lien, un séparateur, un marqueur, un séparateur

et un autre lien. Le séparateur se trouve uniquement entre les liens.

Le marqueur n’est pas répété à la fin de la liste de liens, il ne pos-

sède aucun lien et sa classe est nommée BreadCrumb.

Tableau 4.1 Motifs du système de sous-menus

Premier Second Troisièmeélément élément élément

href page1.htm page2.htm page3.htm( supposé)

tabindex 7 8 ( supposé) 9

title Product 2, Product 2, Product 2, Page 1 Page 2 ( supposé) Page 3

accesskey 1 2 ( supposé) 3

Texte du lien About Product 2 FAQ Product 2 Product 2 Demo

class N/A BreadCrumb N/A

Plusieurs motifs apparaissent dans le système de sous-menus :

• href – Chaque nom de page est incrémenté de 1.

• tabindex – Chaque valeur est incrémentée de 1 et commence

à 7.

• title – Chaque valeur a un contenu répété et la valeur de la

page est incrémentée de 1.

• accesskey – Chaque valeur est incrémentée de 1.

• Texte du lien – Il existe un motif, mais il doit être modifiable ;

c’est pourquoi il ne peut pas être pris en compte.

• class – Il n’existe aucun motif.



ConversionÀ présent que les motifs sont repérés, vous devez implémenter une

méthode qui les utilisera :

1. Placez votre curseur à la fin de la ligne 29 en utilisant la vue en

mode Code. Sélectionnez le fragment 04-PageNumber Param,

puis cliquez sur le bouton Insérer du panneau Fragments de

code afin d’entrer le code suivant :

Listing 4.3



Ce code insère un paramètre de modèle de type number qui

sera utilisé dans des expressions afin d’évaluer la page courante.

Les expressions déterminent si un lien est requis pour l’élé-

ment de sous-menu ou s’il doit être formaté avec une balise

span et une classe CSS breadcrumb sans lien hypertexte (le

marqueur breadcrumb). Aucune autre méthode simple ne per-

met d’ajouter ce paramètre au modèle pour lequel il n’est pas

nécessaire de supprimer un élément modifié supplémentaire.

2. Placez votre curseur à la fin de la ligne 29 dans la vue en mode

Code. Sélectionnez le fragment 08-SubLinkTitle Param, puis

cliquez sur le bouton Insérer du panneau Fragments de code

pour insérer le code suivant :

Listing 4.4



Ce code insère un paramètre de modèle de type texte nommé

Access_SubLinkTitle qui sera utilisé afin d’écrire partiellement

le titre de l’attribut Accessibility pour chaque lien. Aucune

autre méthode simple ne permet d’ajouter ce paramètre au

modèle pour lequel il n’est pas nécessaire de supprimer un

élément de modèle modifié supplémentaire.

3. Recherchez la ligne 35, qui ressemble au code suivant :

Listing 4.5

<div id=”SubNavLyr”><p><a href=”page1.htm”tabindex=”7” ➥title=”Product 2, Page 1” accesskey=”1”>AboutProduct 2</a>➥<span class=”hide”> | </span>➥<span class=”BreadCrumb”>Product 2 FAQ</span>➥<span class=”hide”> | </span>➥<a href=”page3.htm” tabindex=”9” ➥title=”Product 2,Page 3” accesskey=”3”>➥Product 2 Demo</a></p></div>

4. Remplacez la ligne 35 par le fragment 07-Line 35 Code, qui

correspond au code suivant :

Listing 4.6

<div id=”SubNavLyr”><p>➥@@((PageNumber==(_index+1))?’<spanclass=”BreadCrumb”>’:➥’<a href=”page ‘+(_index+1)+’.htm”tabindex=”’+(_index+8)+➥’”title=”’+(Access_SubLinkTitle)+’,Page ‘+(_index+1)+➥’”accesskey=”’+(_index+1)+’”>’)@@About Product 2</p></div>

5. Examinez les modifications appliquées en parcourant la ligne

de gauche à droite.

Vous avez transformé le contenu du sous-menu en une région

répétée modifiable appelée RR_SubNav qui vous permettra de

créer des éléments de navigation de sous-menu. À mesure que

vous ajouterez les répétitions de cette région à la page, le

nombre de répétitions sera mémorisé dans la valeur du para-

mètre _index (qui commence à zéro) de la page enfant.



51

Pour chaque élément de sous-menu, la valeur du paramètre

PageNumber est comparée à la valeur d’index de RepeatRegion

(_index+1). Lorsque ces deux valeurs sont identiques, aucun

lien n’est attribué à l’élément de sous-menu (il s’agirait d’un

lien redondant renvoyant vers la page elle-même). Seuls des

styles sont appliqués afin de transformer le lien en marqueur

breadcrumb. En revanche, si les valeurs sont différentes,

l’élément de sous-menu se voit attribuer un lien auquel sont

appliqués des styles d’après la définition de la pseudo-classe.

Le lien qui est attribué à l’élément de sous-menu est égale-

ment déterminé par la valeur du paramètre _index (comme

indiqué au tableau 4-1) en ajoutant la valeur du paramètre au

nom de la page pour créer page1.htm, page2.htm,

page3.htm, etc. (<a href=”page’+(_Index+1)+’.htm).

En outre, ce lien (lorsqu’il est créé) se voit attribuer les valeurs

tabindex, title et accesskey, qui reposent toutes sur une

variante des valeurs des paramètres _index et

Access_SubLinkTitle.

Lorsque ces valeurs sont écrites dans la page enfant, la pre-

mière expression de modèle située ligne 35 a déjà été évaluée

(du premier jusqu’au second @@).

Lorsque le paramètre PageNumber et l’index RepeatRegion sont

identiques, l’élément du sous-menu se voit appliquer les styles

via une balise <span> ouvrante. En revanche, si ces deux

éléments sont différents, la balise d’ancre est ouverte avec un

lien de page. Ces balises ouvertes doivent être correctement

fermées, c’est pourquoi le test est répété par l’expression de

modèle qui suit. En cas de réussite du test, la balise fermante

</span> est écrite. Dans le cas contraire, la balise </a> fermante

est insérée.

Une dernière expression de modèle doit être définie afin de

déterminer la nécessité d’un breadcrumb supplémentaire

(!_isLast). Le cas échéant, un séparateur d’élément de sous-

menu est écrit en préparation du prochain élément répété.

Sinon, une chaîne nulle est insérée et l’expression se termine.

6. Choisissez Modifier>Propriétés du modèle>Vérifier la syntaxe

du modèle pour contrôler la syntaxe des balises du modèle. Si

le test échoue, revenez au code et vérifiez les balises depuis

l’étape 3.

7. Enregistrez le modèle. Une boîte de dialogue s’ouvre en cas de

problème avec la région modifiable nouvellement insérée.

Pour notre exemple, nous ne souhaitons pas que l’utilisateur

ajoute des paragraphes au système de sous-menus ; nous pou-

vons donc ignorer ce message d’avertissement et cliquer

sur OK afin de le fermer.



Valider le modèleSachez que la validation du balisage du modèle Dreamweaver MX

échoue, notamment lors de l’utilisation des expressions de modèle.

Que faire dans ce cas pour valider le modèle afin d’en vérifier

l’accessibilité et la conformité aux standards XHTML et CSS ?

Suivez les étapes suivantes :

1. Créez une nouvelle page à partir du modèle en choisissant

Fichier>Nouveau, puis en cliquant sur l’onglet Modèles.

Sélectionnez Site "Projet04" dans la colonne Modèles, puis

project04 dans la colonne Site "Projet04". Assurez-vous que

l’option Mettre à jour la page quand le modèle est modifié est

cochée, faute de quoi la page générée ne correspondra pas à

une instance du modèle et ne sera pas modifiée lorsque le

modèle est changé. Cliquez sur le bouton Créer pour

construire la page et refermer la boîte de dialogue.

2. Enregistrez immédiatement la page dans le dossier racine du

site, en conservant son nom Untitled-x.htm (la valeur de xvariera selon les actions effectuées durant cette session

Dreamweaver MX 2004). Cette action met à jour les chemins

vers les liens, les images et les feuilles de style attachées.

3. Ajoutez deux entrées de région répétée en cliquant deux fois

sur le bouton + Région répétée de la mini-interface utilisateur.

4. Choisissez Modifier>Propriétés du modèle, puis remplacez les

valeurs de paramètre de la manière suivante :

Access_SubLinkTitle : Page test

Comment_Mod_Date : [date courante]

Meta_Author : [entrez votre nom]

Meta_Description : Description d’exemple

Meta_Keywords : mots-clés, exemple

PageNumber : 2



53

Cliquez sur le bouton OK pour appliquer les modifications et

fermer la boîte de dialogue.

5. Enregistrez la page et affichez son aperçu en appuyant sur F12.

6. Téléchargez la page et les éléments associés sur votre serveur,

puis validez l’URL en faisant pointer votre navigateur sur le

domaine.

7. Si les résultats de la validation vous conviennent (les pages

enfants sont validées correctement lors des vérifications

manuelles), vous avez terminé. Profitez de cette occasion pour

voir à quoi ressemblent les pages dans votre navigateur lors-

qu’un lien normal est survolé.

8. Transmettez ce que vous avez créé au client, en accompagnant

le tout de quelques instructions rapides que nous verrons en

détail à la section suivante.

Créer les pages du sitedans ContributeQue devez-vous indiquer au client pour qu’il soit en mesure de

créer des pages enfants à partir de ce modèle dans Contribute ?

C’est ce que nous allons voir ici.

Pour créer une nouvelle page, le client doit procéder de la façon

suivante :

1. Choisir Fichier>Nouvelle page, sélectionner le modèle à partir

de la connexion appropriée (s’il en existe plusieurs), entrer une

valeur de titre dans la boîte de dialogue Nouvelle page, puis

cliquer sur OK afin de procéder à la création en tant que telle.



2. Choisir Format>Propriétés du modèle afin de définir les

valeurs de paramètre du modèle.

3 . Ajouter les éléments de sous-menu et le contenu principal,

puis publier la page.

Info : il est préférable de créer le système de sous-menusdans la toute première page, d’enregistrer celle-ci, puis deconstruire les pages suivantes en l’utilisant. Contribute etDreamweaver vous demandent d’ajouter chaque élément répétédans toutes les pages. Aucune autre méthode ne vous permetd’ajouter plusieurs régions répétées.

Écueils possibles

Toute technique comporte des avantages et des inconvé-

nients. Nous avons déjà vu les bons côtés de celle-ci, et il

est temps de nous pencher sur ses points faibles :

• Si vous supprimez l’élément de menu d’un groupe de

pages correspondant à une section du site, vous devez

mettre à jour la totalité du groupe, et notamment la page

d’index. Il est également nécessaire d’ouvrir les fichiers

devenus redondants et de les enregistrer avec le nom de

fichier approprié.

• Si vous ajoutez un élément de menu dans un groupe de

pages correspondant à une section du site, vous devez

mettre à jour la totalité de ce groupe, dont la page

d’index, et créer le document nécessaire à l’ajout.

À mon sens, la seule véritable solution pour remédier

à ces problèmes consiste à utiliser une technologie côté

serveur et à proposer au client une zone d’administration

dont il puisse se servir pour mettre à jour les liens et le

contenu.



55

Pour aller plus loinVous avez appris à utiliser des modèles et des éléments de modèle

Dreamweaver pour contrôler des balises de métadonnées, à conver-

tir un système de sous-menus distinct existant pour contrôler des

éléments de sous-menu, à valider le modèle en testant son accessi-

bilité et sa conformité aux standards XHTML et CSS, et enfin à

créer les pages du site avec Contribute via la méthode appropriée.

Voici quelques idées qui vous permettront de mettre en pratique

vos connaissances ou de réutiliser le projet de diverses façons :

• Limitez les capacités de gestion de l’éditeur Contribute et

Dreamweaver à cinq éléments de sous-menu. Au-delà, affichez

un message dans un calque, sans utiliser de code JavaScript !

Astuce : ajoutez simplement une région facultative, une expres-

sion, un calque et son contenu, et complétez le fichier CSS !

• À l’aide d’un paramètre de modèle, d’une expression de modèle

et de fichiers CSS personnalisés, modifiez les couleurs de

chaque groupe de pages correspondant à une section.

• Convertissez le système de menus principal (fixe) afin de le

rendre extensible, modifiable, accessible et compatible avec

le système de breadcrumbs. Astuce : ajoutez simplement

un paramètre et quelques expressions au modèle !

• Ajoutez un calque d’instructions à la page. Ces directives

s’afficheront par défaut lorsque l’utilisateur Contribute ajoutera

une nouvelle page. Astuce : il doit s’agir d’une région facultative.

Info : pour découvrir d’autres méthodes permettant de créerun marqueur breadcrumb à partir d’un élément de navigationde modèle, consultez le projet 3, « Gérer les états des boutonsde navigation dans des sites reposant sur des modèles ».

Si vous avez besoin d’aide supplémentaire avec les modèlesDreamweaver MX, consultez le site www.dwmagic.com/go/11(en anglais) pour découvrir de nouvelles extensions et lired’autres articles sur le sujet.

Documents

Dreamweaver - eyrolles.com · Deux entrées de région répétée sont ajoutées. Insertion de balises de métadonnées et de commentaires d’éditeur permettant d’accepter des