Mise en forme des pages avec CSS Designer

  1. Guide de l’utilisateur de Dreamweaver
  2. Introduction
    1. Principes de base du design web réactif
    2. Nouveautés de Dreamweaver
    3. Développement web avec Dreamweaver - Présentation
    4. Dreamweaver / Questions fréquentes
    5. Raccourcis clavier
    6. Configuration requise pour Dreamweaver
    7. Récapitulatif des nouvelles fonctionnalités
  3. Dreamweaver et Creative Cloud
    1. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    2. Bibliothèques Creative Cloud dans Dreamweaver
    3. Utilisation de fichiers Photoshop dans Dreamweaver
    4. Utilisation d’Adobe Animate avec Dreamweaver
    5. Extraction de fichiers SVG optimisés pour le web depuis des Bibliothèques
  4. Espaces de travail et affichages Dreamweaver
    1. Espace de travail de Dreamweaver
    2. Optimisation de l’espace de travail Dreamweaver pour la conception visuelle
    3. Recherche de fichiers sur la base de leur nom ou de leur contenu | Mac OS
  5. Configuration de sites
    1. À propos des sites Dreamweaver
    2. Création d’une version locale de votre site
    3. Connexion à un serveur de publication
    4. Configuration d’un serveur d’évaluation
    5. Importation et exportation des paramètres d’un site Dreamweaver
    6. Importation de sites web d’un serveur distant vers la racine de votre site local
    7. Fonctions d’accessibilité dans Dreamweaver
    8. Paramètres avancés
    9. Définition des préférences de site pour le transfert de fichiers
    10. Indication des paramètres du serveur proxy dans Dreamweaver
    11. Synchronisation des paramètres de Dreamweaver avec Creative Cloud
    12. Utilisation de Git dans Dreamweaver
  6. Gestion des fichiers
    1. Création et ouverture de fichiers
    2. Gestion des fichiers et des dossiers
    3. Acquisition et placement de fichiers depuis ou vers votre serveur
    4. Archivage et extraction de fichiers
    5. Synchronisation de fichiers
    6. Comparaison de fichiers pour analyse de leurs différences
    7. Masquage de fichiers et de dossiers dans votre site Dreamweaver
    8. Activation des notes de conception pour les sites Dreamweaver
    9. Prévention de l’exploitation potentielle de Gatekeeper
  7. Mise en page et design
    1. Utilisation d’assistances visuelles pour la mise en forme
    2. À propos de l’utilisation de CSS pour mise en forme de votre page
    3. Création de sites web en responsive design avec Bootstrap
    4. Création et utilisation des requêtes de multimédia dans Dreamweaver
    5. Présentation de contenus dans des tableaux
    6. Couleurs
    7. Design réactif à l’aide de mises en forme à grille fluide
    8. Extract dans Dreamweaver
  8. CSS
    1. Description des feuilles de style en cascade
    2. Mise en forme de pages avec CSS Designer
    3. Utilisation de préprocesseurs CSS dans Dreamweaver
    4. Comment définir les préférences de Style CSS dans Dreamweaver
    5. Déplacement des règles CSS dans Dreamweaver
    6. Conversion de code CSS intégré en règle CSS dans Dreamweaver
    7. Utilisation de balises div
    8. Application de dégradés à l’arrière-plan
    9. Permet de créer et modifier des effets de transition CSS3 dans Dreamweaver.
    10. Formatage du code
  9. Contenu de page et actifs
    1. Définition des propriétés de page
    2. Définition des propriétés d’en-tête CSS et des propriétés de lien CSS
    3. Utilisation du texte
    4. Recherche et remplacement de texte, de balises et d’attributs
    5. Panneau DOM
    6. Modification en mode En direct
    7. Le codage de documents dans Dreamweaver
    8. Sélection et affichage d’éléments dans la fenêtre de document
    9. Définition des propriétés de texte dans l’inspecteur Propriétés
    10. Vérification de l’orthographe d’une page web
    11. Utilisation de règles horizontales dans Dreamweaver
    12. Ajout et modification de combinaisons de polices dans Dreamweaver
    13. Utilisation d’actifs
    14. Insertion et mise à jour des dates dans Dreamweaver
    15. Création et gestion des actifs favoris dans Dreamweaver
    16. Insertion et modification d’images dans Dreamweaver
    17. Ajout d’objets multimédias
    18. Ajout de vidéos dans Dreamweaver
    19. Insertion de vidéo HTML5
    20. Insertion de fichiers SWF
    21. Ajout d’effets audio
    22. Insertion de fichiers audio HTML5 dans Dreamweaver
    23. Utilisation d’éléments de bibliothèque
    24. Utilisation de texte arabe et hébreu dans Dreamweaver
  10. Liens et navigation
    1. A propos des liens et de la navigation
    2. Etablissement de liens
    3. Cartes graphiques
    4. Résolution des problèmes de liens
  11. Effets et widgets jQuery
    1. Utilisation de widgets jQuery UI et Mobile dans Dreamweaver
    2. Utilisation d’effets jQuery dans Dreamweaver
  12. Codage de sites web
    1. À propos du codage dans Dreamweaver
    2. Environnement de codage dans Dreamweaver
    3. Définition des préférences de codage
    4. Personnalisation de la coloration du code
    5. Rédaction et modification de code
    6. Conseils et remplissage de code
    7. Réduction et développement de code
    8. Réutilisation de code à l’aide de fragments
    9. Analyse linting de code
    10. Optimisation du code
    11. Modification de code en mode Création.
    12. Utilisation de contenu d’en-tête pour les pages
    13. Insertion d’inclusions côté serveur dans Dreamweaver
    14. Utilisation des bibliothèques de balises dans Dreamweaver
    15. Importation de balises personnalisées dans Dreamweaver
    16. Utilisation de comportements JavaScript (instructions générales)
    17. Application de comportements JavaScript intégrés
    18. À propos de XML et de XSLT
    19. Exécution de transformations XSL côté serveur dans Dreamweaver
    20. Exécution de transformations XSL côté client dans Dreamweaver
    21. Ajout d’entités de caractère pour XSLT dans Dreamweaver
    22. Formatage du code
  13. Flux de travaux inter-produit
    1. Installation et utilisation des extensions pour Dreamweaver
    2. Mises à jour intégrées dans Dreamweaver
    3. Insertion de documents Microsoft Office dans Dreamweaver (Windows uniquement)
    4. Utilisation de Fireworks et Dreamweaver
    5. Édition de contenu sur des sites Dreamweaver à l’aide de Contribute
    6. Intégration entre Dreamweaver et Business Catalyst
    7. Création de campagnes de messagerie personnalisées
  14. Modèles
    1. À propos des modèles Dreamweaver
    2. Reconnaissance des modèles et des documents basés sur un modèle
    3. Création d’un modèle Dreamweaver
    4. Création de régions modifiables dans des modèles
    5. Création de régions et de tables modifiables dans Dreamweaver
    6. Utilisation de régions facultatives dans les modèles
    7. Définition d’attributs de balises modifiables dans Dreamweaver
    8. Comment créer des modèles imbriqués dans Dreamweaver
    9. Modification, mise à jour et suppression de modèles
    10. Exportation et importation de contenus xml dans Dreamweaver
    11. Application ou suppression d’un modèle depuis un document existant
    12. Modification de contenu dans les modèles de Dreamweaver
    13. Règles de syntaxe pour les balises de modèle dans Dreamweaver
    14. Définition des préférences de surbrillance pour des régions de modèle
    15. Avantages de l’utilisation de modèles dans Dreamweaver
  15. Terminaux mobiles et écrans multiples
    1. Création de requêtes multimédias
    2. Modification de l’orientation de la page pour les appareils mobiles
    3. Création d’applications web pour appareils mobiles à l’aide de Dreamweaver
  16. Sites dynamiques, pages et formulaires web
    1. En savoir plus sur les applications web
    2. Configuration de l’ordinateur pour le développement d’applications
    3. Résolution des problèmes de connexion aux bases de données
    4. Suppression des scripts de connexion dans Dreamweaver
    5. Conception de pages dynamiques
    6. Présentation des sources de contenu dynamique
    7. Définition de sources de contenu dynamique
    8. Ajout de contenus dynamiques aux pages
    9. Changement des contenus dynamiques dans Dreamweaver
    10. Affichage d’enregistrements d’une base de données
    11. Fourniture et dépannage de données en temps réel dans Dreamweaver
    12. Ajout de comportements de serveur personnalisés dans Dreamweaver
    13. Création de formulaires à l’aide de Dreamweaver
    14. Utilisation de formulaires pour la collecte des informations sur les utilisateurs
    15. Création et activations des formulaires ColdFusion dans Dreamweaver
    16. Création de formulaires web
    17. Prise en charge améliorée de HTML5 pour les éléments de formulaire
    18. Développement d’un formulaire à l’aide de Dreamweaver
  17. Création visuelle d’applications
    1. Création de pages principales et détaillées dans Dreamweaver
    2. Création de pages de recherche et de résultats
    3. Création d’une page d’insertion d’enregistrements
    4. Création de la mise à jour d’une page d’enregistrement dans Dreamweaver
    5. Création de pages de suppression d’enregistrement dans Dreamweaver
    6. Modification d’une base de données à l’aide des commandes ASP dans Dreamweaver
    7. Création d’une page d’enregistrement
    8. Création d’une page de connexion
    9. Création d’une page à accès restreint
    10. Sécurisation de dossiers dans ColdFusion à l’aide de Dreamweaver
    11. Utilisation de composants ColdFusion dans Dreamweaver
  18. Test, aperçu et publication de sites web
    1. Prévisualisation de pages
    2. Aperçu et inspection de pages web Dreamweaver sur plusieurs appareils
    3. Test de votre site Dreamweaver

 

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.

Logo Adobe

Accéder à votre compte