View
216
Download
0
Category
Preview:
Citation preview
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.
3557_Ch04 1/06/04 12:00 Page 45 > ApogeeI Normalizer Couleur
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
3557_Ch04 1/06/04 12:00 Page 46 > ApogeeI Normalizer Couleur
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
<!-- TemplateParam name=”Comment_Mod_Date” ➥type=”text” value=”Month DD, YYYY” -->
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
3557_Ch04 1/06/04 12:00 Page 47 > ApogeeI Normalizer Couleur
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.
48 4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 48 > ApogeeI Normalizer Couleur
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.
4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 49 > ApogeeI Normalizer Couleur
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
<!-- TemplateParam name=”PageNumber” ➥type=”number” value=”0” -->
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
<!-- TemplateParam name=”Access_SubLinkTitle” ➥type=”text” value=”Product #” -->
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><!-- TemplateBeginRepeat➥name=”RR_SubNav” -->➥@@((PageNumber==(_index+1))?’<spanclass=”BreadCrumb”>’:➥’<a href=”page ‘+(_index+1)+’.htm”tabindex=”’+(_index+8)+➥’”title=”’+(Access_SubLinkTitle)+’,Page ‘+(_index+1)+➥’”accesskey=”’+(_index+1)+’”>’)@@<!--TemplateBeginEditable ➥name=”ER_SubNav” -->About Product 2<!--➥TemplateEndEditable –>➥@@((PageNumber==(_index+1))?’</span>’:’</a>’)@@@@➥ (!_isLast?’<spanclass=”hide”> | </span>’:’’)➥@@<!-- TemplateEndRepeat --></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.
50 4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 50 > ApogeeI Normalizer Couleur
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.
4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 51 > ApogeeI Normalizer Couleur
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
52 4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 52 > ApogeeI Normalizer Couleur
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.
4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 53 > ApogeeI Normalizer Couleur
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.
54 4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 54 > ApogeeI Normalizer Couleur
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.
4 : Contrôler des éléments de navigation avec des modèles
3557_Ch04 1/06/04 12:00 Page 55 > ApogeeI Normalizer Couleur
Recommended