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.
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 :
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).
Dans le volet Sources du panneau CSS Designer, cliquez sur 
, puis sur l’une des options suivantes :
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.
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.
Effectuez l’une des opérations suivantes :
(Facultatif) Cliquez sur Utilisation conditionnelle et spécifiez la requête multimédia que vous souhaitez associer au fichier CSS.
Dans le panneau CSS Designer, cliquez sur une source CSS dans le volet Sources.
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.
Sélectionnez les conditions appropriées.
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.
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.
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.
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 :
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.
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 :
Cliquez sur le sélecteur souhaité et faites-le glisser vers le nouvel emplacement dans le volet Sélecteurs.
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 :
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.
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.
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.
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.
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.
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.
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é.
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.
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 |
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.
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.
Ouvrez CSS Designer en procédant de l’une des manières suivantes :
Dans CSS Designer, cliquez sur l’icône + en regard de l’option Sources, puis sélectionnez Joindre un fichier CSS existant.
Effectuez l’une des opérations suivantes :
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.
Cliquez sur OK.
Nouvel utilisateur ?
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.