Cours de Dreamweaver Cours de css Cours de Flash Cours d'HTML
Cours de javascript Quelques jeux Cours de Photoshop Cours de php
Cour de Référencement Cour de sql Cour de vidéo  

Dreamweaver propose des modèles de page afin de permettre des mises à jour de sites plus rapides en ne modifiant que le modèle qui leur est rattaché. Nous allons donc étudier la création et l'utilisation des ces modèles auxquels je suis sûr que vous adhérez trés vite surtout dans le cas d'un travail de groupe, comme exemple de site utilisant les modèles Dreamweaver et réalisé à plusieurs voici l'album photo de respublica.

a) La création

Pour créer un modèle Dreamweaver il faut commencer par créer une page HTML simple en y prévoyant des "zones variables", c'est-à-dire les endroits où le texte va changer, celles-ci correspondent aux endroits que l'intégrateur pourra modifier sans risque pour l'interface définie par le graphiste.

Ensuite une fois votre interface définie, il faut sauvegarder votre page en la définissant comme modèle, pour ce faire vous allez dans le menu "Fichier" et vous sélectionnez l'item "Enregistrer comme modèle...". Dès lors votre page est dotée de l'extenstion ".DWT" et enregistrée dans le dossier "Templates à la racine du site en cours. Nous allons maintenant définir les zones modifiables de notre modèle, pour ce faire vous positionnez le curseur a l'endroit où vous souhaitez proposer aux intégrateurs l'insertion de leur propre code HTML. Vous sélectionnez l'item "Modèles" du menu "Modifier".

Dans le sous-menu qui apparaît sélectionné "Nouvelle région modifiable..." Dreamweaver va alors vous demander de la nommer et vous allez la voir apparaître sous la forme "{nom}", ce texte apparaîtra sur toutes les pages de votre site que vous créerez à partir du modèle, il sert à indiquer l'emplacement et le nom d'une zone modifiable. Dreamweaver ne prend dans le modèle que rarement les balises se rapportant au texte d'une zone modifiable, je vous invite donc à toujours visualisé le code source afin de déplacer les balises du texte dans la zone verrouillée du modèle. Grâce à cette petite modification vous êtes sûr que tous vos textes auront la même mise en page juste en modifiant le modèle.

Voici le code qui est inséré par Dreamweaver mais qui n'est pris en compte que par lui puisque pour un navigateur les balise de Dreamweaver sont des commentaires.

La liste des zones modifiables du modèle est affichée en bas du sous-menu, dans l'exemple ci-dessus: Titre, centre, Retour. Les zones modifiables peuvent contenir des éléments prédéfinis comme des images sur lesquels il y a juste le lien à faire.

b) Utiliser un modèle

Pour utiliser un modèle c'est très simple, il suffit de sélectionner l'item "Nouveau à partir d'un modèle..." du menu Fichier. Dreamweaver va alors vous demandez quel modèle vous souhaitez utiliser et il vous ouvre une page HTML dans laquelle seules certaines zones sont modifiables. Les zones vérouillées sont indiquées par une couleur différente, par défaut le jaune, si vous essayez de cliquer dans une de ces zones Dreamweaver vous en empêche. Vous allez me dire qu'il suffit de passer par le code HTML! Et non là aussi Dreamweaver vous en empêche, attention cependant si quelqu'un modifie une page dans un éditeur de texte lors de la modification du modèle elle ne sera pas mise à jour car Dreamweaver ne va pas savoir à quel modèle la rattacher.

Une autre solution possible est d'appliquer un modèle à une page déjà réalisée grâce à l'item "Appliquer le modèle à la page" du menu "Modifier/Modèle". Lors de l'application du modèle Dreamweaver va vous demander à quelle zone du modèle doit être attribuée le contenu de la page. ATTENTION: Dreamweaver ne sait gérer qu'un seul champ.

Les zones modifiables ne sont pas forcément visibles en mode WISIWING, en particulier pour les javascripts, titres de la page..., pensez quand même à les créer elles seront très utiles à vos programmeurs.

c) Modifier un modèle

Pour modifier un modèle, et donc mettre à jour un site, vous devez modifier le fichier .DWT. Pour ce faire vous l'ouvrez avec Dreamweaver, vous faites vos modifications comme sur n'importe quelle page HTML, puis vous la sauvegardez.
Une fenêtre d'alerte vous invite alors à modifier l'ensemble du site, si vous validez toutes le pages dépendant de ce modèle seront modifiées, dès lors Dreamweaver modifie toutes les pages du site. Il se peut qu'il vous avertisse que les zones du modèle ne correspondent pas aux zones de certain fichier, il va alors automatiquement vous proposer de réaliser les concordances entre les différentes zones.

ATTENTION: si aucune zone ne correspond Dreamweaver va vous effacer l'intégralité du contenu et le remplacer par celui du modèle, jai perdu ainsi l'intégralité de la première version du cours de SQL.

Retour à l'index
Pour m'aider cliquez ici
Fais avec un mac
Sucellus 2001 ©
Les noms des logiciels, jeux, matériels, marques, images de ce site sont la propriété de leurs auteurs et/ou de leurs éditeurs.