Faites glisser le repère à partir de la règle correspondante.
Dernière mise à jour le
27 avr. 2021
Utilisez des assistances visuelles pour la mise en forme dans Dreamweaver, notamment la définition de règles, la définition de repères de mise en forme, l'utilisation des repères avec des modèles, l'utilisation d'une grille de mise en forme et l'utilisation d'un tracé d'image.
Définition de règles
Règles vous aident à mesurer, organiser et planifier votre disposition.Elles peuvent apparaître sur les bordures gauche et supérieure de la page, graduées en pixels, pouces ou centimètres.
- Pour activer ou désactiver les règles, sélectionnez Affichage > Options du mode Création > Règles > Afficher/Masquer.
- Pour changer l'origine, faites glisser l'icône de l'origine de la règle
, située dans le coin supérieur gauche de la fenêtre de document en mode Création, sur un point de la page. - Pour rétablir la position par défaut de l'origine, sélectionnez Affichage > Options du mode Création > Règles > Rétablir origine.
- Pour changer d'unité de mesure, choisissez Affichage > Règles, puis sélectionnez Pixels, Pouces ou Centimètres.
Définition de repères de mise en forme
Les Guides sont des lignes que vous faites glisser sur le document à partir des règles. Ils vous aident à placer et aligner les objets avec plus de précision. Vous pouvez également utiliser les Guides pour mesurer la taille des éléments de page ou émuler les plis (zones visibles) des navigateurs web.
Pour vous aider à aligner les éléments, vous pouvez contraindre les éléments aux repères et contraindre les repères aux éléments.(Les éléments doivent être positionnés de manière absolue pour que la fonction de contrainte fonctionne.) Vous pouvez également verrouiller les Guides pour éviter qu'ils ne soient déplacés accidentellement par un autre Utilisateur.
créer un Guide horizontal ou vertical
Positionnez le Guide dans la fenêtre Document et relâchez
le bouton de la souris (repositionnez le Guide en le faisant glisser à nouveau).
Annotation
Par défaut, les Guides sont enregistrés sous forme de mesures absolues en pixels à partir du haut ou du côté gauche du document, et sont développés par rapport à l'origine de la règle. Pour enregistrer le Guide sous forme de pourcentage, appuyez sur la touche Maj pendant que vous créez ou déplacez le Guide.
Affichage ou masquage d'un repère
sélectionnez Affichage > Guides >
afficher les Guides.
Alignement d'éléments sur les repères
- Pour aligner des éléments sur les repères, sélectionnez Affichage > Options du mode Création > Repères > Magnétiser les repères.
- Pour aligner les repères sur des éléments, sélectionnez Affichage > Options du mode Création > Repères > Accrocher les repères aux éléments.
Annotation
Lorsque vous redimensionnez des éléments, tels que des éléments à positionnement absolu, des tableaux et des images, ils sont alignés sur les repères.
Verrouillage ou déverrouillage de tous les repères
Sélectionnez Affichage > Options du mode Création > Repères > Verrouiller les repères.
Afficher et déplacer un repère vers une position spécifique
Maintenez le pointeur de la souris sur le guide pour afficher sa position.
Double-cliquez sur le repère.
Saisissez la nouvelle position dans la boîte de dialogue Déplacer le Guide et cliquez sur OK.
Affichage de la distance entre les repères
Appuyez sur Contrôle (Windows) ou Commande (Macintosh) et maintenez le pointeur de la souris n'importe où entre les deux guides.
Annotation
L'unité de mesure est la même que l'unité de mesure utilisée pour les règles.
Simuler le pli (zone visible) d'un navigateur web
Choisissez Affichage > Options du mode Création >Repères, puis sélectionnez une taille de navigateur prédéfinie dans le menu.
Suppression d'un repère
Faites glisser le repère hors du document.
Modification des paramètres des repères
Sélectionnez Affichage > Options du mode Création >Repères > Modifier les repères, définissez les options suivantes et cliquez sur OK.
Couleur des repères
Indique la couleur des lignes du repère. Cliquez sur la nuance de couleur et sélectionnez une couleur dans le sélecteur de couleurs, ou saisissez un nombre hexadécimal dans la zone de texte.
Couleur distance
Spécifie la couleur des lignes qui apparaissent comme indicateurs de distance lorsque vous maintenez le pointeur de la souris entre les Guides. Cliquez sur la nuance et sélectionnez une couleur dans le sélecteur de couleurs, ou saisissez un nombre hexadécimal dans la zone de texte.
Afficher les repères
Affiche les repères en mode Création.
Magnétiser les repères
Fait que les éléments de page se contraignent aux Guides lorsque vous déplacez les éléments sur la page.
Verrouiller les repères
Verrouille les repères en place.
Accrocher les repères aux éléments
Aligne les repères sur les éléments sur la page à mesure que vous faites glisser les repères.
Effacer tout
Efface tous les repères de la page.
Utilisation des repères avec des modèles
Lorsque des repères sont ajoutés à un modèle Dreamweaver, toutes les instances du modèle héritent des repères.Les Guides dans les Instances de modèle sont cependant traités comme des zones géographiques modifiables, de sorte que les Utilisateurs peuvent les modifier. Les guides modifiés dans les instances de modèle sont restaurés à leur emplacement d'origine chaque fois que l'instance est mise à jour avec le modèle maître.
Vous pouvez aussi ajouter vos propres repères aux instances d'un modèle. Les Guides ajoutés de cette manière ne sont pas remplacés lorsque l'Instance de modèle est mise à jour avec le modèle maître.
Utilisation de la grille de mise en forme
La grille affiche un système de lignes horizontales et verticales dans la fenêtre de document. Elle est utile pour placer les objets avec précision. Vous pouvez faire en sorte que les éléments de page positionnés de manière absolue se contraignent automatiquement à la grille lorsque vous les déplacez, et modifier la grille ou contrôler le comportement de contrainte en spécifiant les Paramètres de grille. Le magnétisme fonctionne que la grille soit visible ou non.
Affichage ou masquage de la grille
Sélectionnez Affichage > Options du mode Création > Grille > Afficher la grille.
Activation ou désactivation de l'alignement
Sélectionnez Affichage > Options du mode Création > Grille > Aligner sur la grille.
Modification des paramètres de la grille
Sélectionnez Affichage > Options du mode Création > Grille > Paramètres de la grille.
Définissez les options et cliquez sur OK pour appliquer les modifications.
Couleur
Spécifie la couleur des lignes de la grille. Cliquez sur la nuance et sélectionnez une couleur dans le sélecteur de couleurs, ou saisissez un nombre hexadécimal dans la zone de texte.
Afficher la grille
Affiche la grille en mode Création.
Aligner sur la grille
Permet d'aligner les éléments de la page sur les lignes de la grille.
Espacement
Détermine l'espacement entre les lignes de la grille. Entrez un nombre et sélectionnez Pixels, Pouces ou Centimètres dans le menu.
Afficher
Détermine si les lignes de la grille apparaissent sous forme de lignes ou de pointillés.
Annotation
Si développer la grille n'est pas sélectionné, la grille n'apparaît pas dans le document et aucune modification n'est visible.
Utilisation d'un tracé d'image
Vous pouvez utiliser un Tracé de l'image comme Guide pour recréer une conception de page qui a été créée dans une Application graphique telle qu'Adobe Freehand ou Fireworks.
Un Tracé de l'image est un image JPEG, GIF ou PNG qui est placée dans l'Arrière-plan de la fenêtre de document. Vous pouvez masquer l'image, définir son opacité et modifier sa position.
Le Tracé de l'image n'est visible que dans Dreamweaver ; il n'est pas visible lorsque vous affichez la page dans un navigateur. Lorsque le Tracé de l'image est visible, l'image d'arrière-plan et la couleur réelles de la page ne sont pas visibles dans la fenêtre de document ; cependant, l'image d'arrière-plan et la couleur seront visibles lorsque la page sera affichée dans un navigateur.
Placer un tracé de l'image dans la fenêtre de document
Effectuez l’une des tâches suivantes :
Sélectionnez Affichage > Options du mode Création > Tracé de l'image > Charger.
Sélectionnez Fichier > Propriétés de la page, puis dans la catégorie Tracé de l'image, cliquez sur le bouton Parcourir situé en regard de la zone de texte Tracé de l'image.
Accédez à votre fichier d'image, puis cliquez sur OK.
Dans la boîte de dialogue Propriétés de la page, spécifiez la transparence
de l'image en faisant glisser le curseur Transparence de l'image, puis cliquez sur
OK.
Pour passer à un autre tracé ou modifier à tout moment la transparence du tracé en cours, choisissez Fichier > Propriétés de la page.
Affichage ou masquage du tracé de l'image
Sélectionnez Affichage > Options du mode Création > Tracé de l'image > Afficher.
modifier la position d'un Tracé de l'image
Sélectionnez Affichage > Options du mode Création > Tracé de l'image > Ajuster la position.
Pour spécifier précisément la position du tracé de l'image, saisissez les valeurs de coordonnées dans les zones de texte X et Y.
Pour déplacer l'image de 1 pixel à la fois, utilisez les touches fléchées.
Pour déplacer l'image de 5 pixels à la fois, appuyez sur Maj et sur une touche fléchée.
Réinitialiser la position du tracé de l'image
Sélectionnez Affichage > Options du mode Création > Tracé de l'image > Rétablir la position.
Le tracé de l'image retourne dans le coin supérieur gauche de la fenêtre de document (0,0).
Aligner le tracé de l'image sur un élément sélectionné
Sélectionnez
un élément dans la fenêtre de document.
Sélectionnez Affichage > Options du mode Création > Tracé de l'image > Aligner l'image avec la sélection.
Le coin supérieur gauche du tracé de l'image est aligné avec le coin supérieur gauche de l'élément sélectionné.
Définir les propriétés du tracé de l'image
Définissez les propriétés d'une tracing image (qui est un fichier image à utiliser comme Guide lors de la conception de votre page).
Effectuez l’une des opérations suivantes :
- Cliquez sur Fichier > Propriétés de la page.
- Cliquez sur Fenêtre > Propriétés, puis cliquez sur Propriétés de la page dans l'inspecteur Propriétés du texte.
Dans la boîte de dialogue Propriétés de la page, sélectionnez Tracé de l'image. Vous pouvez configurer les options suivantes dans ce panneau :
- Tracing Image : Spécifie une image à utiliser comme Guide pour copier un design. Cette image sert uniquement de référence et n’apparaît pas lorsque le document s’affiche dans un navigateur.
- Transparence : Détermine l'opacité de la tracing image, de complètement transparent à complètement opaque.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
