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 CSS, des fichiers et de définir des propriétés, ainsi que des requêtes multimédia.
Les panneaux suivants sont disponibles dans l'interface de CSS Designer :
Le CSS Designer vous permet de modifier une règle individuelle dans une feuille de style CSS (utilisez l'onglet Actuel dans le CSS Designer), ou si vous préférez, vous pouvez travailler directement dans la feuille de style CSS (utilisez l'onglet Tout dans le 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, l'emplacement dans lequel 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 avec le 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éfinition d'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 pour les 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 permute 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 le panneau CSS Designer, sélectionnez une source CSS dans le volet Sources ou une requête multimédia dans le volet @Media.
Dans le volet Sélecteurs, cliquez sur . En fonction de l'élément sélectionné dans le document, CSS Designer identifie automatiquement et vous propose le sélecteur pertinent (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 requis et faites-le glisser vers la nouvelle position 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 le code, vous pouvez spécifier le code abrégé pour la marge et le remplissage dans les zones de modification rapide, comme illustré dans cet exemple.
Cliquez sur les valeurs et tapez la valeur désirée. Si vous voulez que les quatre valeurs soient identiques et modifiées 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 marge gauche tout en conservant les valeurs de droite, du haut et du bas.
Les propriétés de contrôle de bordure sont organisées en onglets logiques pour vous aider à afficher ou modifier rapidement les propriétés.
Si vous préférez le code, vous pouvez spécifier un code abrégé pour les bordures et le rayon de bordure dans la zone de texte de modification rapide.
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 les bordures individuelles.
Lorsque vous modifiez une propriété dans les onglets de bordure individuels, la valeur de la propriété correspondante dans l'onglet « Tous les côtés » passe à « non définie » (valeur par défaut).
Dans l'exemple ci-dessous, la couleur de bordure a été définie sur noir, puis modifiée en rouge pour la bordure supérieure.
Le code inséré est basé sur le paramètre de préférence pour la forme abrégée ou complète.
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 ». Par exemple, si seule la valeur supérieure d'une bordure est définie, le mode de calcul place le thème sur l'onglet « Haut » en ignorant l'onglet « Tous les côtés » car l'onglet « Tous les côtés » 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.
Vous pouvez désactiver ou supprimer chaque propriété à l'aide de CSS Designer.
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 contrôles de suppression et de désactivation au niveau du groupe Contrôle de bordure pour 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 surbrillance en direct vous 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 surbrillance 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 surbrillance en direct, cliquez sur les options d'affichage en direct dans la barre d'outils de document puis cliquez sur Désactiver la mise en surbrillance 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.
Créez de magnifiques sites web dans Dreamweaver
Concevez, codez et gérez des sites web dynamiques dans un puissant outil tout-en-un.
