- La structure des pages d’un site construit avec méthode et comportant une identité visuelle distinctive
respecte quelques règles fondamentales.
Il existe 2 façons d’organiser méthodologiquement un site :
- La réutilisation d’une composition de page particulière : les modèles
- La réutilisation de différents éléments qui sont conservés : les bibliothèques.
Ces 2 façons peuvent se cumuler.
Depuis Dreamweaver 4, ce principe de réutilisation se nomme : les actifs.
La logique est la même. Un endroit unique regroupe les éléments d’une page.
img:coupe
:arrow: Créer et éditer un modèle.
| QUOTE |
| :!: Pour créer un modèle, vous pouvez :
- Enregistrer un document HTML existant comme modèle. - Ou créer un nouveau modèle vide. |
Les modèles sont stockés dans un dossier distinct dans le dossier racine du site local. Ce dossier se nomme Templates.
Il est créé automatiquement lors de la création du 1° modèle.
Les modèles possèdent l’extension de fichier .dwt
Dans l’exercice suivant, nous partirons d’une page vierge pour l’enregistrer en tant que modèle.
Nous allons réaliser une composition simple à l’aide des tableaux.
Dans Dreamweaver :
- Commençons par ouvrir un document vide (Ctrl+N >> Page modèle).
- Tapez Ctrl+J (Panneau des Propriétés).
- Dans les 4 champs Marges, tapez 0.
- Validez.
- Plaçons-y 1 tableau de 100% de largeur, avec 2 colonnes et 3 lignes.
Dans la 1° ligne du tableau :
- Combinez* les 2 cellules.
Dans la 1° colonne du tableau :
- Combinez* les 2 cellules du bas.
*Pour combiner les cellules, cliquez sur les 2 cellules, l’une après l’autre, en maintenant la touche Ctrl enfoncée.
Ensuite, cliquez sur l’icône en bas à gauche sous ‘Cellule’.
Maintenant, les 2 cellules n’en font plus qu’une.
Vous obtenez ainsi un tableau à 4 cellules.
Sélectionnez votre tableau, et dans l’inspecteur de Propriétés, indiquez une hauteur de 500 pixels par exemple.
La 1° cellule servira de bandeau.
Celle de gauche sera notre menu et les 2 cellules restantes représenteront le titre de la page et le contenu de la page.
Insérez une région modifiable.
Sélectionnez la cellule qui affichera le titre de la page (Ctrl+clic).
Tapez Ctrl+Alt+V (Insertion/Objets de Modèles/Région modifiable)
Nommez cette région. (Ex : titre)
Faites de même pour la cellule du dessous (Celle en bas à droite).
Nommez la différemment. (Ex : contenu)
Voila, votre modèle est fait.
Pour l’enregistrer :
Menu : Fichier/Enregistrer comme modèle.
Sélectionnez le site sur lequel vous travaillez dans la liste déroulante.
Dans le dernier champ, en bas du panneau, nommez votre modèle. (Ex : mod_rub)
Vous pouvez maintenant fermer le document modèle.
| QUOTE |
| :!: Selon votre structure de page et la couleur des éléments, il peut s’avérer nécessaire de changer la couleur de contour des régions modifiables.
- Tapez Ctrl+U (Edition/Préférences) - Sélectionnez la catégorie ‘Surbrillance’. |
[b]img:coupe
:arrow: Utiliser les modèles.
Pour créer une nouvelle page à partir du modèle :
- Fichier/Nouveau ou Ctrl+N.
- Sélectionnez l’onglet Modèles.
Dans l’onglet de gauche :
Sélectionnez le site sur lequel vous travaillez.
Dans l’onglet de droite :
Sélectionnez le modèle que vous souhaitez utiliser.
Cochez, si ce n’est pas le cas, la case ‘Mettre la page à jour quand le modèle est modifié’, en bas à droite.
Cliquez sur le bouton ‘Créer’ pour valider.
Voila, vous venez de créer une page avec la même composition/apparence que le modèle.
En examinant de plus près la page, vous constaterez que les zones non modifiables sont bien verrouillées.
Modifiez maintenant comme bon vous semble le contenu des régions modifiables pour personnaliser cette page.
Enfin, vous pouvez enregistrer cette page au format HTML.
img:coupe
:arrow: Modifier les modèles.
Un modèle peut être modifié à tout moment. Quand vous l’ouvrez, les régions modifiables sont affichées dans la couleur définie (Voir plus haut, cf : Surbrillance).
Après avoir modifié le document modèle, lorsque vous l’enregistrez, un message apparaît :
« Vous avez modifié un modèle. Voulez-vous mettre à jour tous les documents de votre site local qui utilisent ce modèle ? »
Répondez oui, dans la mesure du possible afin de ne pas vous emmêler les pinceaux…Ce serait bien trop pénible de se rappeler que tel modèle n’est pas appliqué à telle ou telle page…
La mise à jour du journal s’effectue alors.
Ainsi, toutes vos pages liées au modèle sont automatiquement mises à jour.
[b]img:coupe
:arrow: Ci-joint, vous trouverez le modèle ( mod_rub.dwt ) et une page créée à partir de ce modèle ( rub_1.html ).
:!: Pour les télécharger localement, faites un clic droit sur le lien et 'enregistrer la cible sous'.