Guide d'utilisation Annuler

Mise en forme des pages avec CSS Designer

 

 

Comment utiliser le panneau CSS Designer pour créer ou joindre des feuilles de style, des requêtes multimédias, des sélecteurs, et définir les propriétés CSS.

Panneau CSS Designer
Panneau CSS Designer

Le panneau CSS Designer (Fenêtre > CSS Designer) est un inspecteur de propriétés CSS qui vous permet de créer « visuellement » des styles et des fichiers CSS, mais aussi de définir des propriétés et des requêtes multimédias.

Les sections suivantes sont disponibles dans l’interface de CSS Designer :

  • Sources : collection de fichiers CSS associés au projet
  • @Requêtes multimédias : requêtes multimédias permettant de contrôler la taille de l’écran
  • Sélecteurs : sélecteurs associés à la requête multimédia sélectionnée dans le panneau @Requêtes multimédias
  • Propriétés : propriétés associées au sélecteur sélectionné, avec une option permettant d’afficher uniquement les propriétés définies

Avec CSS Designer, vous pouvez modifier les différentes règles d’une feuille de style CSS (à l’aide de l’onglet Actuel dans CSS Designer) ou, si vous préférez, vous pouvez travailler directement dans la feuille de style CSS (à l’aide de l’onglet Tout dans CSS Designer).

Création et ajout de feuilles de style

  1. Dans le volet Sources du panneau CSS Designer, cliquez sur , puis sur l’une des options suivantes :

    • Créer un nouveau fichier CSS : Pour créer un nouveau fichier CSS et le joindre au document
    • Joindre un fichier CSS existant : Pour joindre un fichier CSS existant au document
    • Définir sur la page : Pour définir un style CSS dans le document
    Création et association de feuilles de style avec CSS Designer
    Création et association de feuilles de style avec CSS Designer

    Selon l’option que vous sélectionnez, la boîte de dialogue Créer un nouveau fichier CSS ou Joindre un fichier CSS existant s’affiche.

  2. Cliquez sur Parcourir pour spécifier le nom du fichier CSS et, si vous êtes en train de créer un style CSS, pour indiquer l’emplacement auquel enregistrer le nouveau fichier.

  3. Effectuez l’une des opérations suivantes :

    • Cliquez sur Lier pour lier le document Dreamweaver au fichier CSS
    • Cliquez sur Importer pour importer le fichier CSS dans le document.
  4. (Facultatif) Cliquez sur Utilisation conditionnelle et spécifiez la requête multimédia que vous souhaitez associer au fichier CSS.

Définition de requêtes multimédias

  1. Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.

  2. Cliquez sur dans le volet @Requêtes multimédias pour ajouter une nouvelle requête multimédia.

    La boîte de dialogue Définir une requête multimédia s’affiche et répertorie toutes les conditions de requête multimédia prises en charge par Dreamweaver.

  3. Sélectionnez les conditions appropriées.

    Définition de requêtes multimédias
    Définition de requêtes multimédias

    Veillez à bien spécifier des valeurs valides pour toutes les conditions que vous sélectionnez, faute de quoi les requêtes multimédias correspondantes ne pourront pas être créées.

    Remarque :

    Seule l’opération « Et » est prise en charge en cas de conditions multiples.

Si vous ajoutez des conditions de requête multimédia à l’aide de code, seules les conditions prises en charge sont renseignées dans la boîte de dialogue Définir une requête multimédia. Toutefois, la zone de texte Code dans la boîte de dialogue affiche entièrement le code (y compris les conditions non prises en charge).

Si vous cliquez sur une requête multimédia dans le mode Création/En direct, la fenêtre d’affichage change en fonction de la requête multimédia sélectionnée. Pour afficher la fenêtre d’affichage en taille normale, cliquez sur Global dans le volet @Requêtes multimédias.

Définition de sélecteurs CSS

  1. Dans CSS Designer, sélectionnez une source CSS dans le volet Sources ou une requête multimédia dans le volet @Requêtes multimédias.

  2. Dans le volet Sélecteurs, cliquez sur . En fonction de l’élément sélectionné dans le document, CSS Designer identifie de façon intelligente le sélecteur pertinent et le suggère (jusqu’à trois règles).

    Vous pouvez effectuer une ou plusieurs des opérations suivantes :

    • Vous pouvez utiliser la flèche Haut ou Bas pour que le sélecteur suggéré soit plus ou moins précis.
    • Vous pouvez supprimer la règle suggérée et saisir le sélecteur requis. Assurez-vous de saisir le nom du sélecteur, ainsi que la désignation du type de sélecteur. Par exemple, si vous indiquez un ID, placez un signe # devant le nom du sélecteur.
    • Pour rechercher un sélecteur précis, utilisez la zone de recherche située dans la partie supérieure du volet.
    • Pour renommer un sélecteur, cliquez sur celui-ci, puis tapez le nom désiré.
    • Pour réorganiser les sélecteurs, faites-les glisser à l’emplacement souhaité.
    • Pour déplacer un sélecteur d’une source vers une autre, faites-le glisser vers la source souhaitée dans le volet Source.
    • Pour dupliquer un sélecteur dans la source sélectionnée, faites un clic droit sur le sélecteur, puis cliquez sur Dupliquer.
    • Pour dupliquer un sélecteur et l’ajouter dans une requête multimédia, faites un clic droit sur le sélecteur, placez le pointeur de la souris au-dessus de Dupliquer en requête multimédia, puis choisissez la requête multimédia.

    Remarque : L’option Dupliquer en requête multimédia n’est disponible que lorsque la source du sélecteur sélectionné contient des requêtes multimédias. Vous ne pouvez pas dupliquer un sélecteur provenant d’une source dans une requête multimédia d’une autre source.

Copier-coller de styles

Vous pouvez désormais copier des styles d’un sélecteur et les coller dans un autre. Vous pouvez copier tous les styles ou copier uniquement une catégorie spécifique de styles, comme la catégorie Mise en forme, Texte ou Bordure. 

Cliquez avec le bouton droit sur un sélecteur et choisissez parmi les options disponibles :

  • Si un sélecteur n’a aucun style, les options Copier et Copier tous les styles sont désactivées.
  • L’option Coller les styles est désactivée pour les sites distants qui ne peuvent pas être modifiés. En revanche, les options Copier et Copier tous les styles sont disponibles.
  • L’option Coller les styles, qui existe déjà partiellement sur un sélecteur (chevauchement), fonctionne. L’union de tous les sélecteurs est collée.
  • L’option Copier-coller les styles fonctionne pour les différents liens des fichiers CSS :
    Importer, lier et intégrer des styles.
Copie et collage de styles
Copie et collage de styles

Réorganisation des sélecteurs

Cliquez sur le sélecteur souhaité et faites-le glisser vers le nouvel emplacement dans le volet Sélecteurs.

Définition des propriétés CSS

Les propriétés sont regroupées dans les catégories suivantes et sont représentées par différentes icônes en haut du volet Propriétés :

  • Mise en forme
  • Texte
  • Bordure
  • Arrière-plan
  • Plus (liste des propriétés « texte seul » et non des propriétés dotées de commandes visuelles)
Remarque :

Avant de modifier les propriétés d’un sélecteur CSS, identifiez les éléments associés au sélecteur CSS à l’aide de l’inspection inverse. Ce faisant, vous pouvez déterminer si tous les éléments mis en évidence lors de l’inspection inverse nécessitent vraiment les modifications. 

Activez la case à cocher Afficher définies pour afficher uniquement les propriétés définies. Pour afficher toutes les propriétés que vous pouvez spécifier pour un sélecteur, désactivez la case à cocher Afficher définies.

Pour définir une propriété, comme width ou border-collapse, cliquez sur les options requises à côté de la propriété dans le volet Propriétés.

Les propriétés remplacées sont barrées.

Définition des marges extérieures et intérieures et de la position

Les contrôles de case du volet Propriétés de CSS Designer permettent de définir rapidement les propriétés de marge, de remplissage et de position. Si vous préférez écrire le code, vous pouvez spécifier un code court pour la marge et le remplissage dans les zones d’édition rapide, tel qu’illustré dans cet exemple.

propriété de marge
Propriété « margin »

Cliquez sur les valeurs et tapez la valeur désirée. Si vous souhaitez que les quatre valeurs soient identiques et qu’elles changent simultanément, cliquez sur l’icône de liaison au centre.

À tout moment, vous pouvez désactiver ou supprimer des valeurs spécifiques, par exemple la valeur de la marge gauche, tout en conservant les valeurs des marges droite, supérieure et inférieure.

Définition des propriétés de bordure

Les propriétés de contrôle des bordures sont organisées en onglets logiques, pour vous permettre de visualiser ou de modifier rapidement ces propriétés. 

Propriétés de contrôle des bordures
Propriétés de contrôle des bordures

Si vous préférez écrire le code, vous pouvez spécifier un code court pour les bordures et les rayons de bordure dans les zones de modification rapide de texte.

Pour définir des propriétés de contrôle des bordures, définissez d’abord les propriétés dans l’onglet « Tous les côtés ». Les autres onglets sont alors activés et les propriétés définies dans l’onglet « Tous les côtés » sont répercutées pour chaque bordure.

Lorsque vous modifiez une propriété dans les différents onglets de bordure, la valeur de la propriété correspondante dans l’onglet « Tous les côtés » prend la valeur par défaut « Non défini ». 

Dans l’exemple ci-dessous, la couleur de la bordure a été définie sur noir, puis remplacée par rouge pour la bordure supérieure. 

Définition de couleur de bordure pour tous les côtés
Définition de couleur de bordure pour tous les côtés

Bordure sur tous les côtés
Bordure sur tous les côtés

Définition de couleur de bordure en haut
Définition de couleur de bordure en haut

Couleur de bordure définie sur rouge pour le haut
Couleur de bordure définie sur rouge pour le haut

Le code qui est inséré varie selon que le paramètre de préférence est défini sur une forme courte ou une forme longue. 

Au cours de l’inspection, les onglets sont mis en avant en fonction de la priorité des onglets « définis ». La priorité la plus haute est attribuée à l’onglet « Tous les côtés » suivi de « Haut », « Droite », « Bas » et « Gauche ». Ainsi, si seule la valeur Haut est définie pour une bordure, le mode de calcul met en avant l’onglet « Haut » et ignore l’onglet « Tous les côtés » car celui-ci n’est pas défini.

Désactivation ou suppression de propriétés

La fonctionnalité Désactiver/Activer la propriété CSS permet de mettre en commentaire des parties de code CSS depuis le panneau CSS Designer, sans devoir apporter directement des modifications dans le code. Lorsque vous mettez en commentaire certaines parties du code CSS, vous pouvez voir quel effet des propriétés et des valeurs spécifiques ont sur votre page.

Lorsque vous désactivez une propriété CSS, Dreamweaver ajoute des balises de commentaire CSS et un libellé [désactivé] à la propriété CSS que vous avez désactivée. Par la suite, vous pouvez aisément réactiver ou supprimer la propriété CSS désactivée, selon vos préférences.

CSS Designer permet de désactiver ou de supprimer chaque propriété.

La capture d’écran suivante présente les icônes de désactivation et de suppression pour la propriété height (hauteur). Ces icônes sont visibles lorsque vous laissez le pointeur de la souris au-dessus d’une propriété.

Désactiver/supprimer une propriété
Désactiver/supprimer une propriété

Vous pouvez également utiliser les commandes de suppression et de désactivation au niveau du groupe de contrôle des bordures afin d’appliquer ces actions à toutes les propriétés.

Raccourcis clavier

Vous pouvez ajouter ou supprimer des sélecteurs CSS et des propriétés à l’aide de raccourcis clavier. Vous pouvez également naviguer entre les groupes de propriétés dans le volet Propriétés.  

Raccourci

Workflow

Ctrl + Alt + [Maj =]

Ajoute un sélecteur (si le contrôle est dans la section de sélecteur)

Ctrl + Alt + S

Ajoute un sélecteur (si le contrôle est n’importe où dans l’application)

Ctrl + Alt + [Maj =]

Ajoute une propriété (si le contrôle est dans la section de propriété)

Ctrl + Alt + P

Ajoute une propriété (si le contrôle est n’importe où dans l’application)

Sélectionner + Suppr

Supprime un sélecteur, si un sélecteur est sélectionné

Ctrl + Alt + (Page préc/Page suiv)

Bascule entre les sections dans le panneau secondaire des propriétés 

Identification des éléments de page associés à un sélecteur CSS

En règle générale, un sélecteur CSS unique est associé à plusieurs éléments de page. Par exemple, le texte dans le contenu principal d’une page, le texte d’en-tête et le texte de pied de page peuvent tous être associés au même sélecteur CSS. Lorsque vous modifiez les propriétés du sélecteur CSS, tous les éléments associés au sélecteur sont concernés, y compris ceux que vous n’avez pas l’intention de changer.

La mise en évidence en direct permet d’identifier tous les éléments associés à un sélecteur CSS. Pour ne modifier qu’un élément ou certains éléments, vous pouvez créer un nouveau sélecteur CSS pour ces éléments, puis modifier ses propriétés.

Pour identifier les éléments de page associés à un sélecteur CSS, passez la souris sur le sélecteur dans la section En direct (avec le mode Code en direct désactivé). Dreamweaver met en évidence les éléments associés au moyen de lignes pointillées.

Pour verrouiller la mise en surbrillance des éléments, cliquez sur le sélecteur. Les éléments sont alors mis en évidence par un contour bleu.

Pour supprimer la surbrillance bleue autour des éléments, cliquez à nouveau sur le sélecteur.

La mise en évidence en direct est activée par défaut. Pour désactiver la mise en évidence en direct, cliquez sur les options En direct dans la barre d’outils du document puis cliquez sur Désactiver la mise en évidence en direct. 

Établissement d’un lien vers une feuille de style CSS externe

Si vous modifiez une feuille de style CSS externe, les changements sont reflétés dans tous les documents liés à cette feuille de style.

Vous pouvez exporter les styles CSS trouvés dans un document afin de créer une nouvelle feuille de style CSS, et attacher ou créer un lien vers une feuille de style externe pour appliquer les styles trouvés à cet endroit.

Vous pouvez attacher toute feuille de style de votre création à vos pages ou copier ces feuilles dans votre site.

  1. Ouvrez CSS Designer en procédant de l’une des manières suivantes :

    • Cliquez sur Fenêtre > CSS Designer.
    • Appuyez sur Maj + F11.
  2. Dans CSS Designer, cliquez sur l’icône + en regard de l’option Sources, puis sélectionnez Joindre un fichier CSS existant.

    Joindre un fichier CSS existant
    Joindre un fichier CSS existant

  3. Effectuez l’une des opérations suivantes :

    • Cliquez sur le bouton Parcourir pour rechercher une feuille de style CSS externe.
    • Entrez le chemin de la feuille de style dans le champ Fichier/URL.
  4. Cliquez sur le bouton d’aperçu pour vérifier que la feuille de style applique effectivement les styles de votre choix à la page active.

    Si les styles appliqués ne sont pas ceux attendus, cliquez sur Annuler pour supprimer la feuille de style. La page retrouve son aspect précédent.

  5. Cliquez sur OK.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?