Introduction aux mod?les de Dreamweaver
Introduction
Un des grands avantages trop méconnu de Dreamweaver est la création et l'utilisation de modèles. Si vous utilisez les frames, sachez que vous pouvez vous en passer grâce aux modèles car ils couvrent la majorité des fonctions des frames. L'avantage avec les frames, c'est si vous avez un menu par exemple qui se répète dans toutes les pages, pour éviter le copier coller et surtout si vous avez une modification à faire, elle se répercute sur toutes vos pages. Les modèles sont là pour faire la même chose mais sans les inconvénients des frames (référencement bizarre, déformation...)
Nous allons simplement créer un menu tout simple qui sera applicable sur tout notre site, vous pouvez bien sûr mettre ce que vous voulez dans votre modèle : images, texte, animations flash...
Création du modèle
Pour commencer, créez une nouvelle page : Fichier > Nouveau ou CTRL + N
Ensuite, créez votre menu comme bon vous semble. Dans notre exemple, je vais créer un menu très simpliste en haut juste pour démonstration. Vous pouvez faire pareil avec une mise en forme en tableaux ou un arrangement différent.
Voici donc notre (simple) menu construit, il ne changera pas quelque soit les pages de notre site.
Ensuite en dessous, créons une zone qui accueillera le contenu qui changera selon la page visitée.
Une fois de plus je fais très simple. Cependant, ma mise en page est terminée, c'est comme ça que je souhaite afficher toutes mes pages (attention, il vaut mieux finir correctement son modèle avant de l'utiliser.)
Nous allons maintenant enregistrer la page comme modèle. Faites Fichier > Enregistrer comme modèle. La boite de dialogue suivante s'ouvre :
Note : vous devez avoir défini un site pour y enregistrer un modèle.
Nommez votre modèle. Si vous n'en utiliserez qu'un, pas la peine de vous tracasser, par contre si vous envisagez plusieurs modèles (par exemple un par rubrique), prenez soin de bien les nommer pour vous y retrouver plus facilement par la suite.
Un dossier Templates se construit à la racine de votre site et votre fichier .dwt (DreamWeaver Templates) y est enregistré. Ce dossier comprendra tous les modèles de votre site.
Création des zones modifiables
Votre modèle étant créé, il ne vous reste plus qu'à définir les endroits qui seront modifiables par la suite et ceux qui ne le seront pas. Toujours dans votre modèle, sélectionnez la partie de texte modifiable, puis allez dans la palette Insertion, onglet Modèles et cliquez sur l'outil région modifiable, donnez un nom à votre région, par exemple introduction ou contenu.
Répétez l'opération sur toutes les régions modifiables de votre site. Inutile de préciser à Dreamweaver les zones non modifiables. Enregistrez votre document.
Lors de l'enregistrement, Dreamweaver vous demande si vous voulez modifier les documents crées avec ce modèle, faites OK, même si vous n'avez pas encore créé de pages à partir du modèle.
Créer des pages à partir du modèle:
Maintenant que votre modèle est prêt, vous pouvez l'utiliser.
Pour cela, faites Fichier > Nouveau
Dans l'onglet Modèles de la boite de dialogue qui s'ouvre, choisissez votre site, puis le modèle dont vous voulez vous servir comme base. Laissez l'option Mettre la page à jour quand le modèle est modifié cochée, cela effectuera les changements sur vos pages créées avec le modèle lors de la modification du modèle. Ensuite cliquez sur Créer.
Votre nouvelle page s'affiche et vous montre les zones modifiables. Pour l'exemple, nous allons créer les pages correspondantes à notre menu.
Vous pouvez donc ainsi créer autant de pages que vous voulez sur le modèle du début.
Modification en masse
Voyons maintenant l'interêt principal des modèles, c'est à dire la modification d'un groupe de pages créées avec le même modèle. Par exemple vous souhaitez développer votre site et y créer une nouvelle rubrique. Il va vous falloir ajouter à votre menu un nouveau lien.
Pour cela, ouvrez le modèle créé au début.
Nous voici donc avec une rubrique supplémentaire dans notre modèle. Enregistrez-le.
Cette boite de dialogue s'ouvre et vous demande si vous souhaitez apporter les modifications aux pages créées à partir du modèle. Cliquez sur Mettre à jour si vous acceptez.
Si certaines de vos pages étaient encore ouvertes dans Dreamweaver, pensez à les enregistrer et constatez que les modifications sont valables dans toutes les pages utilisant le modèle.
N'oubliez pas de placer à chaque fois tous les fichiers modifiés sur votre serveur !!!
Ceci est donc très pratique lorsque vous avez une mise en page et une charte graphique qui se répète dans tout votre site, afin de simplifier les mises à jour mineures sans utiliser les frames.
Il est également possible de faire d'autres choses avec les modèles mais leur utilisation basique peut déjà vous aider beaucoup.
Ce tutorial a été réalisé pour Flashxpress et est également disponible ici : Introduction aux modèles sur Flashxpress
Livres
Macromedia Dreamweaver MX avec PHP MySQL
Dreamweaver MX 2004 Design Projects
Liens
Exemple de site que vous pouvez construire avec Dreamweaver : poker.bwin.com. Développez votre propre site de paris sur le foot avec le logiciel Dreamweaver. Avec un peu d'expérience, vous saurez développer rapidement et efficacement un module qui permette à vos visiteurs de parier en direct. Vous pourrez alors proposer une interface qui permet de faire des paris sur le foot sur votre site.
- Cr?er un jeu d'enregistrements
- Moteur de recherche en PHP
- Votre projet avec Dreamweaver MX et PHP
- Dreamweaver MX + ASP + Access
- A ne pas faire pour son r?f?rencement
