Adobe Dreamweaver CC

Mise en forme d'une page web avec Dreamweaver CSS Designer

(Lecture : 30 min)

Mise en forme d'une page web avec Dreamweaver CSS Designer

30 min

Utilisez les fonctionnalités de CSS Designer, comme l'inspection des éléments, les polices Edge Web Fonts, les dégradés, le copier-coller de styles, la mise en forme des éléments de navigation et les propriétés de bordure.

De quoi ai-je besoin ?

Télécharger les fichiers Fichiers d'exemple pour s'entraîner (ZIP, 27 Ko)

Télécharger le PDF Feuille de référence Dreamweaver

CSS Designer est un outil graphique qui permet de modifier le code CSS de manière intuitive (voir Figure 1). Cet article présente les étapes de mise en forme des éléments d'une page web à l'aide de CSS Designer. Découvrez comment utiliser les fonctionnalités de l'outil CSS Designer pour mettre en forme visuellement un modèle réactif.  


Figure 1. CSS Designer est composé de quatre panneaux

Les panneaux suivants 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

Prise en main de CSS Designer

Vous pouvez être amené à travailler sur un site en cours de développement ou à modifier un site déjà en ligne. Dans cette section, vous allez définir un projet et utiliser CSS Designer pour actualiser la mise en forme d'un site existant.

Pour charger le modèle réactif dans Dreamweaver CC, procédez comme suit :

  1. Ouvrez Dreamweaver CC. Choisissez Fichier > Ouvrir pour ouvrir le modèle réactif. Sélectionnez le fichier index.html à la racine du dossier du projet, puis cliquez sur Ouvrir.

  2. Activez le mode En direct pour visualiser la page telle qu'elle s'affichera dans le navigateur.

  3. Pour personnaliser l'espace de travail, sélectionnez Compact et double-cliquez sur le panneau Insertion pour le réduire.

  4. Cliquez sur CSS Designer et faites glisser la bordure jusqu'à ce que tous les panneaux apparaissent dans une seule colonne à droite de l'espace de travail.

  5. Dans CSS Designer, pour optimiser l'espace des panneaux Sélecteurs et Propriétés, réduisez les panneaux Sources et @Requêtes multimédias en cliquant dessus (voir Figure 2).

     

    Figure 2. Configuration de CSS Designer pour un espace de travail optimal

Inspection des éléments et amélioration de la mise en forme

Ouvrez le modèle de blogue réactif que vous avez chargé et ajoutez-y des éléments de style. La première chose à modifier est le logo (voir Figure 3).  

Figure 3. Le logo d'origine écrase le slogan

Dans le modèle actuel, le logo et le slogan se chevauchent. Dans cette section, vous allez utiliser CSS Designer pour améliorer la mise en forme.

  1. Masquez les repères de mise en forme de grille fluide, s'ils sont affichés.

  2. Cliquez sur Inspecter dans la barre d'outils du document. Survolez le logo jusqu'à ce que la partie à modifier soit mise en évidence (voir Figure 4).
Figure 4. Inspection des éléments CSS
  1. Cliquez deux fois sur la partie du logo. Le premier clic sélectionne la zone et la verrouille lorsque vous quittez le mode Inspection. Le second clic active le mode d'affichage des éléments qui permet de voir le nom de l'élément HTML et celui du style appliqué. Dans cet exemple, on voit que l'identifiant Logo est appliqué à l'élément H1.

  2. Dans le panneau Sélecteurs de CSS Designer, cliquez sur Calculé pour afficher la liste des propriétés calculées. La police Arial apparaît en regard de la propriété font-family. Pour afficher le contexte, cliquez sur le nom de la propriété (font-family). Dans le panneau Sélecteurs situé au-dessus, le sélecteur #logo apparaît en gras (voir Figure 5). Cela signifie que la propriété font-family provient du sélecteur #logo.
Figure 5. Inspection de la propriété font-family
Figure 5. Inspection de la propriété font-family

Dans les panneaux @Requêtes multimédias et Sources réduits (voir Figure 6), vous voyez la requête multimédia (le cas échéant) et le fichier CSS qui contiennent le sélecteur mis en forme. Les en-têtes des panneaux s'actualisant, vous n'avez pas à les développer pour les identifier.  

Figure 6. Inspection des requêtes multimédias et de la source du fichier CSS
Figure 6. Inspection des requêtes multimédias et de la source du fichier CSS

Utilisation d'Edge Web Fonts  

Edge Web Fonts est un service de polices gratuit accessible via Adobe Creative Cloud. Il inclut plusieurs centaines de polices web que vous pouvez appliquer au texte de votre site web, et est intégré à d'autres outils Adobe. Dans cette section, vous allez utiliser Edge Web Fonts pour actualiser votre page dans Dreamweaver et affiner le style de votre site web.

Vous pouvez choisir une autre police qu'Arial. Cliquez sur Arial dans la propriété font-family du panneau Propriétés et sélectionnez Gérer les polices pour ouvrir le menu Edge Web Fonts et faire défiler la liste des polices. Sélectionnez Bebas Neue et cliquez sur Terminé. Cliquez sur Arial pour afficher à nouveau la liste des polices, et choisissez bebas-neue. Lorsque le mode En direct est activé, vous pouvez voir le logo s'actualiser à l'écran.

Application de styles et de dégradés à l'aide de feuilles de style CSS  

Nous allons à présent éloigner le logo et le slogan du bord du document. Cliquez à nouveau sur Inspecter, puis isolez la zone toute entière en positionnant le curseur au-dessous et à l'extérieur du logo.

Double-cliquez sur la zone pour quitter le mode Inspection et activer le mode d'affichage des éléments en direct. Vous pouvez utiliser le sélecteur de balises au bas de la fenêtre du document pour sélectionner la balise div qui contient l'élément logo. Les classes logo et fluid sont appliquées à la balise div.

La classe « .logo » est répertoriée trois fois dans CSS Designer. Si vous sélectionnez chaque classe séparément, vous verrez que deux d'entre elles sont contenues dans des requêtes multimédias et que la troisième est définie globalement..

Sélectionnez l'option GLOBAL et vérifiez dans le panneau Propriétés que la case à cocher Afficher l'ensemble est désactivée. La liste complète des commandes graphiques apparaît, notamment l'option de marge intérieure (Padding) et ses quatre valeurs grisées. Positionnez le curseur sur la marge intérieure gauche. Cliquez dessus et faites-la glisser jusqu'à atteindre 20 pixels (voir Figure 7).

Figure 7. Modification des propriétés globales dans CSS Designer
Figure 7. Modification des propriétés globales dans CSS Designer

L'élément logo est déplacé de 20 pixels vers la gauche de la page.  

Copier-coller de styles  

CSS Designer permet de copier les propriétés CSS de feuilles de style locales et en ligne sans quitter Dreamweaver, ce qui limite les allers-retours entre les fichiers du site. Vous pouvez copier tout ou partie des styles d'un sélecteur et les coller dans un autre.

  1. Cliquez avec le bouton droit de la souris sur le sélecteur .logo et choisissez Copier des styles > Copier les styles de mise en forme (voir Figure 8).

Vous pouvez copier tous les styles ou choisir un type de styles particulier. Le menu inclut les options suivantes :

  • Copier les styles de mise en forme
  • Copier les styles de texte
  • Copier les styles de bordure
  • Copier les styles d’arrière-plan
  • Copier les styles d’animation/de transition
  • Copier les autres styles
Figure 8. Copie des styles d'un sélecteur
Figure 8. Copie des styles d'un sélecteur
  1. Sélectionnez le texte Blog Title Goes Here pour activer la balise H2. Dans CSS Designer, survolez les styles .blog_entry h2 pour localiser le style global, puis cliquez dessus avec le bouton droit de la souris et sélectionnez l'option Coller les styles (voir Figure 9).
Figure 9. Collage de styles dans un autre sélecteur
Figure 9. Collage de styles dans un autre sélecteur

Le titre du blogue en rouge se déplace immédiatement de 20 pixels en mode En direct. Vous pouvez voir vos modifications en temps réel sur la page.

Annulation des modifications effectuées dans CSS Designer  

Si vous ajoutez 20 pixels à la marge intérieure gauche du titre du blogue en rouge, l'espace du conteneur est trop important. Choisissez Édition > Annuler pour annuler l'ajout des styles copiés. En mode En direct, on voit que la mise en forme d'origine est rétablie.

Mise en forme des éléments de navigation  

Examinez la barre de navigation située sous le logo. L'espacement des éléments doit être ajusté. Cette fois, vous allez sélectionner un élément de navigation particulier.

  1. Cliquez sur le bouton Home en mode En direct, puis sélectionnez le sélecteur Calculé dans le panneau Sélecteurs pour afficher les propriétés calculées dans le panneau Propriétés. Les propriétés de marge apparaissent ici (voir Figure 10).

     

    Figure 10. Affichage des propriétés calculées de l'élément de menu Home
  2. Lorsque vous sélectionnez Margin, le sélecteur « .nav_items a » apparaît en gras, ce qui signifie que la marge est définie par ce sélecteur (voir Figure 11).

     

    Figure 11. Sélection de l'élément d'interface Margin pour définir les propriétés de marge
    Figure 11. Sélection de l'élément d'interface Margin pour définir les propriétés de marge
  3. Lorsque vous cliquez sur le sélecteur « .nav_items a » en gras, le panneau Propriétés affiche les propriétés de ce sélecteur ainsi que les propriétés non définies — si vous avez activé l'option Afficher l'ensemble à l'étape précédente (voir Figure 12).

     

    Figure 12. Le panneau Propriétés affiche toutes les propriétés d'un sélecteur spécifique
  4. Si vous cliquez sur l'icône au centre de la section Padding, l'image de liaison change. Si vous attribuez la valeur 20px à l'un des côtés, les trois autres changent simultanément (voir Figure 13).

     

    Figure 13. Modification simultanée des valeurs de marge intérieure d'un sélecteur
    Figure 13. Modification simultanée des valeurs de marge intérieure d'un sélecteur

Ajout de styles aux éléments de forme

Nous allons à présent ajouter des styles à la zone de recherche. Commencez par activer la case à cocher Afficher l'ensemble dans le panneau Propriétés. Vous obtiendrez ainsi la liste des propriétés associées aux sélecteurs que vous sélectionnerez. Cliquez sur Inspecter et survolez la barre de recherche. Deux sélecteurs contiennent le terme « input ». En sélectionnant le premier (« nav.containr form input »), on voit que seule la largeur est définie. Sélectionnez le second, nommé « input ». Les propriétés définies étant ici plus nombreuses, ce sélecteur constitue un choix plus approprié pour l'application de nouveaux styles.

Définition des propriétés de bordure

Le sélecteur « input » du champ de recherche étant toujours sélectionné, cliquez sur l'icône Bordure pour passer à la section correspondante dans le panneau Propriétés.

  1. Les onglets de la section Bordure de CSS Designer permettent de définir aisément les propriétés de bordure. L'onglet Tous les côtés est sélectionné par défaut lorsqu'aucune valeur n'est appliquée aux propriétés de bordure (voir Figure 14).
Figure 14. Ajout de propriétés à l'aide de la section Bordure de CSS Designer
Figure 14. Ajout de propriétés à l'aide de la section Bordure de CSS Designer
  1. Définissez les valeurs dans l'onglet Tous les côtés pour appliquer rapidement la même bordure aux quatre côtés.

  2. Lorsque vous ajoutez des propriétés pour définir les bordures, les autres onglets (Haut, Droite, Bas, Gauche) s'actualisent : les bordures s'assombrissent, indiquant que des valeurs ont été définies. Une icône plus claire apparaît pour les bordures non définies.

  3. Cliquez sur le côté auquel vous souhaitez appliquer une bordure.

  4. Les champs texte de modification rapide vous permettent de saisir la forme courte des valeurs de bordure à appliquer pour chaque onglet. Par exemple, vous pouvez sélectionner un onglet et saisir « 4px solid #DA6E6E » pour ajouter une bordure rouge de 4 pixels, au lieu de choisir chaque propriété dans l'interface (voir Figure 15).
Figure 15. Saisie de la forme courte des propriétés dans la section Bordure
Figure 15. Saisie de la forme courte des propriétés dans la section Bordure
  1. Utilisez la combinaison Ctrl(Cmd)+Z ou choisissez Édition > Annuler pour annuler ces modifications.

Définition des propriétés personnalisées

Vous allez à présent apprendre à créer une propriété personnalisée à partir de la section Personnaliser du panneau Propriétés. Dans les versions précédentes de Dreamweaver, cette section s'intitulait Autre.

  1. Vérifiez que le sélecteur « input » du champ de recherche est sélectionné, et cliquez sur l'onglet Personnaliser (icône à trois points) dans le panneau Propriétés pour afficher la section Personnaliser.

  2. Si vous saisissez le mot « cursor » dans le champ Ajouter une propriété, vous verrez apparaître la liste des propriétés disponibles et pourrez compléter le nom de la propriété en mode de saisie semi-automatique. Dans le champ Ajouter une valeur, saisissez « text », puis appuyez sur la touche Entrée ou Retour (voir Figure 16).
Figure 16. Définition d'une propriété et d'une valeur personnalisées
Figure 16. Définition d'une propriété et d'une valeur personnalisées
  1. Testez les modifications en mode En direct. À présent, lorsque vous survolez le champ de recherche, un pointeur en forme de I apparaît, indiquant que le visiteur peut saisir du texte.

Ajout de propriétés de rayon de bordure

Vous pouvez utiliser l'outil Rayon de la bordure pour affiner le style du sélecteur « input » du champ de recherche. Lorsque la hauteur est définie à 40 pixels, vous pouvez choisir un rayon de bordure de 20 pixels pour créer un effet ovale.

  1. Cliquez sur le lien au centre et définissez l'une des quatre valeurs sur 20 pixels.

  2. Répétez l'opération pour le bouton Search.

  3. Cliquez sur Inspecter et survolez le bouton Search.

  4. Le panneau Propriétés affichera alors les éléments Position et Margin. Sélectionnez ces propriétés pour choisir le sélecteur le plus approprié dans le panneau Sélecteurs.

  5. Sélectionnez l'élément Margin. Le sélecteur « nav.containr .btn » apparaît alors en gras. Lorsque vous le sélectionnez, les éléments du panneau Propriétés s'actualisent.

  6. Accédez à la propriété de bordure.

  7. Cliquez sur le lien au centre et définissez une valeur sur 20 pixels.

Ajout d'ombres de texte

Vous pouvez tester les ombres de texte pour vous faire une idée. Cette fois, vous allez procéder différemment.

  1. Cliquez sur Inspecter, puis sur le mot « Search ». Les sélecteurs et propriétés s'actualisent.

  2. Sélectionnez « nav.containr a » dans le panneau Sélecteurs. Certaines commandes de texte apparaissent. Le blanc est la couleur actuellement définie. Remplacez-la par un gris clair.

  3. Désactivez l'option Afficher l'ensemble pour que toutes les commandes s'affichent.

  4. Cliquez sur l'icône T pour accéder aux commandes de texte.

  5. Sous Ombre du texte, ajoutez 1px en regard de « v-shadow », et choisissez la couleur blanche.

  6. Vous conviendrez que le résultat n'est guère satisfaisant. Par conséquent, annulez cette modification et rétablissez la couleur blanche.

Ajout d'un dégradé

Vous allez à présent ajouter un dégradé au bouton Search.

  1. Cliquez à nouveau sur Inspecter et sélectionnez le bouton Search.

  2. Cliquez sur l'onglet Arrière-plan (icône de dégradé gris-blanc) dans le panneau Propriétés pour passer à la section Arrière-plan.

  3. Sélectionnez la propriété Arrière-plan, puis le sélecteur « nav.btn » dès qu'il apparaît en gras. Vérifiez que l'option Afficher l'ensemble est désactivée pour obtenir la liste des commandes de propriété disponibles.

  4. L'arrière-plan est actuellement bleu pastel. Sélectionnez l'échantillon vide (entouré d'une ligne rouge).

  5. Ajoutez un dégradé subtil en sélectionnant d'abord la couleur de début du dégradé.

  6. En regard du champ texte, cliquez sur Hex et saisissez #6ecada, qui correspond à la valeur de la couleur d'arrière-plan.

  7. Dans la zone de réglage de la couleur, faites glisser le cercle vers la nuance de bleu foncé souhaitée. Vous pouvez à présent sélectionner RGBa et régler l'opacité à l'aide du dernier curseur à droite de la commande.

  8. Sélectionnez la couleur de fin du dégradé (le rouge est défini par défaut). Dans le champ texte, saisissez à nouveau la valeur #6ecada pour créer un dégradé subtil sur le bouton Search.

Ajout d'un sélecteur et contrôle des spécificités

Vous pouvez ajouter un sélecteur et définir des styles à l'aide de CSS Designer, puis appliquer le sélecteur à la page HTML via le mode d'affichage des éléments en direct.

  1. Cliquez sur le texte Blog Title Goes Here pour sélectionner le conteneur H2. Cliquez sur le signe Plus (+) et indiquez le nom de la classe dans le champ (voir Figure 17).
Figure 17. Ajout d'une classe à la page HTML
Figure 17. Ajout d'une classe à la page HTML
  1. Dans les panneaux Source et @Requêtes multimédias, choisissez les fichiers auxquels vous souhaitez appliquer le nouveau style, puis cliquez sur le signe Plus (+) en regard de la section Sélecteurs de CSS Designer pour ajouter le sélecteur (voir Figure 18).
Figure 18. Ajout du sélecteur
Figure 18. Ajout du sélecteur
  1. Appuyez sur la flèche Haut pour obtenir un sélecteur moins détaillé. Pour qu'il soit plus détaillé, appuyez sur la flèche Bas. Lorsque vous appuyez sur ces touches, le champ du sélecteur s'actualise. Appuyez sur Entrée pour appliquer la valeur spécifiée dans le champ.

  2. Utilisez les options du panneau Propriétés pour ajouter les propriétés et valeurs à appliquer au nouveau sélecteur.

Pour aller plus loin

CSS Designer est un outil indispensable de Dreamweaver CC, uniquement disponible via Adobe Creative Cloud.

Continuez à explorer les panneaux de CSS Designer et à tester ce formidable outil pour améliorer votre site. Exemple :

  • Utilisez la section @Requêtes multimédias pour définir l'apparence des propriétés réactives de votre site dans plusieurs navigateurs.
  • Sélectionnez le fichier fluid.css dans le panneau Sources, puis cliquez sur les entrées du panneau @Requêtes multimédias pour voir comment votre site s'affichera sur différents équipements.
  • Utilisez CSS Designer pour améliorer la mise en forme du contenu en fonction des terminaux et écrans ciblés.

Découvrez les nouveaux raccourcis clavier qui permettent d'ajouter ou de supprimer des sélecteurs et propriétés CSS. Vous pouvez également naviguer entre les groupes de propriétés dans le volet Propriétés.

Pour approfondir vos connaissances, visionnez les vidéos suivantes :

Donnez-nous votre avis.

Et voilà, vous avez terminé !

alejandro-gutierrez_83x83

Alejandro Gutierrez
Alejandro Gutierrez développe des logiciels web et mobiles. Après avoir embrassé une carrière de musicien pendant plusieurs années, Alejandro a fait son retour dans le secteur des logiciels chez GameHouse en 2006. Il a ensuite travaillé chez SiriusXM et dans une start-up avant de rejoindre Adobe en 2012. Alejandro est chargé du réalignement et du remaniement des produits web et mobiles.