Accueil du site > LOGICIELS > DREAMWEAVER

Dreamweaver : Les calques

Dreamweaver vous permet de créer facilement des calques sur votre page et de les positionner avec précision.

Dessiner un calque

• Pour dessiner un calque, cliquez sur le bouton Dessiner un calque de la barre Insertion, puis faites glisser la souris dans le mode Création de la fenêtre de document.

• Pour insérer le code d’un calque à un endroit particulier du document, placez le curseur dans la fenêtre de document, puis choisissez Insertion > Calque.

• Lorsque les éléments invisibles sont affichés, un marqueur de calque apparaît dans le mode Création chaque fois que vous placez un calque sur la page. Si les marqueurs de calques ne sont pas visibles et que vous voulez les afficher, choisissez Affichage > Assistances visuelles > Eléments invisibles.

Dessiner plusieurs calques à la suite

• Cliquez sur le bouton Dessiner un calque de la barre Insertion.

• Dessinez les calques en maintenant la touche Ctrl (Windows) ou Commande (Macintosh) enfoncée tout en faisant glisser la souris.

• Vous pouvez continuer à tracer des calques tant que vous n’avez pas relâché les touches Ctrl ou Commande.

Convertir des calques en tableaux

Créez votre mise en forme à l’aide de calques, puis convertissez les calques en tableaux afin que votre mise en forme puisse s’afficher dans les navigateurs plus anciens.

• Choisissez Modifier > Convertir > Calques en tableau.
Dans la boîte de dialogue qui s’affiche, sélectionnez les options désirées.
Pour plus d’informations, voir Définition des options de la boîte de dialogue Convertir les calques en tableaux.

• Cliquez sur OK et vos calques sont convertis en un tableau.

Définition des options de la boîte de dialogue Convertir les tableaux en calques

Choisissez parmi les options suivantes :

• Afficher la grille et Aligner sur la grille permettent d’utiliser une grille qui vous aidera à positionner les calques.

• Empêcher le chevauchement des calques limite la position des calques lorsqu’ils sont créés, déplacés et redimensionnés, afin d’éviter tout chevauchement.

• Afficher la palette des calques affiche le panneau Calques.

• Cliquez sur OK.

Convertir des tableaux en calques

• Choisissez Modifier > Convertir > Tableaux en calques.
Dans la boîte de dialogue qui s’affiche, sélectionnez les options désirées.

• Cliquez sur OK.
(Les tableaux sont convertis en calques. Les cellules vides ne sont pas converties en calques, sauf si elles possèdent une couleur d’arrière-plan).

Propriétés de calque

• ID calque
permet d’indiquer un nom identifiant le calque dans le panneau Calques et le code JavaScript. Entrez un nom. Seuls les caractères alphanumériques sont acceptés.

• G (gauche) et S (haut)
indiquent la position de l’angle supérieur gauche du calque par rapport à l’angle supérieur gauche de la page, ou du calque parent s’il est imbriqué.

• L et H
spécifient la largeur et la hauteur du calque.

• Index Z
détermine l’index Z, ou ordre de superposition, du calque. Dans un navigateur, les calques portant les valeurs les plus élevées précèdent les calques portant les valeurs moins élevées. Les valeurs peuvent être positives ou négatives. Il est plus facile de modifier l’ordre de superposition des calques à l’aide du panneau Calques qu’en saisissant des valeurs d’index Z spécifiques.

• Visib.
indique si le calque est visible ou non au début.

- Aucune propriété de visibilité n’est définie par défaut.
Lorsque aucune visibilité n’est précisée, la plupart des navigateurs choisissent Hériter.
- Hériter (inherit) prend la propriété de visibilité de l’objet parent du calque.
- Visible affiche le contenu du calque, quelle que soit la valeur du parent.
- Masqué (hidden) dissimule le contenu du calque, quelle que soit la valeur du parent. Les calques masqués créés avec ilayer occupent le même espace que s’ils étaient visibles.

(Utilisez un langage de script, par exemple JavaScript, pour contrôler la propriété de visibilité et afficher le contenu des calques de façon dynamique).

• Image ar-pl
spécifie une image d’arrière-plan pour le calque. Cliquez sur l’icône du dossier à parcourir et sélectionnez le fichier d’une image.

• Couleur ar-pl
spécifie une couleur d’arrière-plan pour le calque. Laissez cette option vide pour spécifier un arrière-plan transparent.

• Balise
indique la balise HTML utilisée pour définir le calque.

• Débord. (div et span uniquement)
contrôle la manière dont les calques apparaissent dans les navigateurs lorsque le contenu dépasse la taille spécifiée du calque.
- Visible indique que le contenu supplémentaire apparaîtra dans le calque
- Masqué (hidden) signifie que le contenu supplémentaire ne sera pas affiché dans le navigateur.
- Défilement (scroll) indique que le navigateur devra ajouter des barres de défilement dans le calque, qu’elles soient nécessaires ou non.
- Auto entraîne l’affichage des barres de défilement du calque dans le navigateur uniquement lorsque cela est nécessaire.

• Gauche, Haut ou PageX, PageY (layer et ilayer)
Permet de positionner le calque par rapport à son parent ou à la page.
- Gauche, Haut place le calque par rapport au coin supérieur gauche de son parent.
- PageX, PageY place le calque à l’emplacement absolu relatif au coin supérieur gauche de la page, quelle que soit la position de son parent.

• Déroutage
définit la zone visible du calque. Indiquez les coordonnées gauche, haut, droite et bas pour définir un rectangle dans le champ des coordonnées du calque (en partant du coin supérieur gauche du calque). Le calque est « dérouté » afin que seul le rectangle spécifié soit visible.

• Src (later et ilayer uniquement)
Permet d’afficher un autre document HTML dans le calque. Cliquez sur l’icône du dossier à parcourir et sélectionnez le document.

Format PDF l l afficher une version imprimable de cet article Imprimer cet article