Utilisation de préprocesseurs CSS dans Dreamweaver

  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

 

Découvrez comment utiliser et compiler des fichiers de préprocesseur CSS dans Dreamweaver.

Le langage CSS est un langage qui sert à déterminer le style d’un document HTML. Les préprocesseurs CSS compilent le code écrit dans un langage prétraité en code CSS plus abordable. Le langage prétraité est un niveau de code CSS plus proche de celui d’un langage de programmation.

Plus précisément, les préprocesseurs vous permettent d’utiliser des variables, des combinaisons de modules, des fonctions et de nombreuses autres techniques qui ne sont pas possibles en CSS.
Les préprocesseurs CSS vous permettent de ne définir tous les éléments qu’une seule fois et de les réutiliser de manière répétée, générant ainsi un code CSS facile à mettre à jour et à développer.

Les préprocesseurs CSS, vous permettent également de générer un code CSS simple et facile à mettre à jour. Si vous créez des sites Web qui sont liés à un certain nombre de fichiers CSS, utiliser des préprocesseurs tels que Sass ou Compass peut vous aider à faire moins de codage manuel et d’actions de copier/coller.

Dreamweaver utilise un compilateur Ruby-Sass intégré permettant de compiler les fichiers SCSS et LESS. Il prend également en charge les frameworks Compass et Bourbon pour compiler les fichiers Sass.

Le langage LESS s’appuie sur JavaScript tandis que Sass est basé sur Ruby. Toutefois, vous n’avez pas besoin de maîtriser ces deux langages. Vous n’avez pas non plus besoin d’utiliser la ligne de commande pour compiler les fichiers en code CSS. Dreamweaver compile automatiquement ces fichiers en code CSS à l’aide de la bibliothèque JavaScript less.js lors du chargement, de la modification ou de l’enregistrement de ces fichiers.

Versions prises en charge :

  • Sass : 3.4.25
  • LESS : 2.7.2
  • Compass : 1.0.3
  • Bourbon : 4.2.6
  • Bourbon Neat : 1.7.3
  • Bourbon Bitters : 1.2.0

Gestion des préprocesseurs CSS par Dreamweaver

La façon dont Dreamweaver gère les préprocesseurs CSS varie selon si vous avez défini un site ou non. Si vous définissez un site, vous pouvez définir des préférences de préprocesseur CSS et utiliser les frameworks Compass et Bourbon depuis Dreamweaver.

Lorsque vous définissez un site, vous pouvez personnaliser la façon dont les préprocesseurs CSS fonctionnent dans Dreamweaver en définissant des préférences de préprocesseur CSS propres au site. Définir des préférences de préprocesseur CSS propres au site vous permet de spécifier des options de compilation spécifiques sur la base d’un site. Vous pouvez également personnaliser l’emplacement des fichiers Sass et CSS ainsi que les options de préprocesseurs spécifiques à chaque site.

Les sections ci-dessous expliquent comment utiliser Dreamweaver avec des préprocesseurs CSS.

Dreamweaver 2017 et les préprocesseurs CSS

La prise en charge des préprocesseurs CSS est intégrée à Dreamweaver dans la version 2017. Vous pouvez donc travailler avec des fichiers Sass/LESS/SCSS directement dans Dreamweaver. Vous pouvez compiler automatiquement des fichiers CSS dans Dreamweaver grâce au raccourci Ctrl + S/Cmd + S. Vous avez aussi la possibilité de compiler des fichiers CSS un par un de façon manuelle en sélectionnant Outils > Compiler (ou F9). Les modifications se répercutent également dans tous les fichiers HTML ouverts auxquels le fichier CSS compilé est joint ou attaché.

Voici une description générale des tâches impliquées lors de l’utilisation de préprocesseurs CSS :

  • Installez le compilateur approprié si vous souhaitez utiliser Compass ou Bourbon dans Dreamweaver. Cette installation se fait en un clic. Définissez les paramètres de préprocesseur CSS.

Installez le compilateur uniquement si vous souhaitez une copie des fichiers de framework (Bourbon) ou si vous souhaitez générer des fichiers SCSS par défaut et des fichiers de configuration utilisant Ruby (Compass). Il est conseillé de garder une copie des fichiers de framework. Si certains mixins ou fonctions du framework de développement sont supprimés par la suite, vous pouvez toujours accéder aux fichiers de préprocesseur depuis votre site.

  • Assurez-vous que la compilation automatique est activée. Appuyez ensuite sur Enregistrer pour mettre à jour les fichiers CSS.
  • (Facultatif) Affichez les modifications qui se répercutent dans toutes les pages HTML utilisant le code CSS généré en sélectionnant l’affichage en direct ou l’aperçu en temps réel.

Dreamweaver 2015 et les préprocesseurs CSS

Vous pouvez utiliser des fichiers Sass, LESS et SCSS avec Dreamweaver 2015 et les versions CC antérieures. Cependant, vous devez compiler vos fichiers manuellement en-dehors de Dreamweaver.
Le processus à suivre est semblable à celui-ci :

  1. Téléchargez et installez un compilateur.
  2. Configurez une tâche Grunt (Gruntfile.js) pour que le compilateur puisse lire le fichier Sass/LESS/SCSS.
  3. Configurez une autre tâche Grunt pour compiler le fichier en code CSS avant de l’importer dans Dreamweaver.

Vous devez effectuer ces opérations chaque fois que vous apportez une modification à votre fichier Sass/LESS/SCSS.

Remarque :

Visionnez ce tutoriel vidéo pour savoir comment vous pouvez améliorer votre langage CSS à l’aide de préprocesseurs.

Si vous n’avez pas défini de site, vous pouvez choisir de compiler manuellement vos fichiers Sass et LESS. Toutefois, l’assistance pour les frameworks Compass et Bourbon n’est disponible.

Comment utiliser les préprocesseurs CSS dans Dreamweaver ?

Voici une description générale des tâches impliquées lors de l’utilisation de préprocesseurs CSS :

  1. Définissez un site dans Dreamweaver. Veillez à ce que le fichier Sass ou LESS que vous essayez de compiler figure dans le dossier racine du site. Si vous avez déjà défini un site et que le fichier Sass/LESS est inclus à la racine du site, passez à l’étape suivante. Pour plus d’informations sur la configuration d’un site Dreamweaver, consultez la section À propos des sites Dreamweaver.
  2. Définissez des préférences pour les préprocesseurs CSS (tels que la définition de l’emplacement des fichiers CSS générés). Ces préférences sont propres au site. Pour plus d’informations, consultez la section Définition des préférences de préprocesseurs CSS spécifiques au site.
  3. Si vous souhaitez utiliser des frameworks spécifiques, tels que Compass ou Bourbon, vous pouvez spécifier les paramètres correspondants. Pour plus d’informations, consultez la section Utilisation du framework Compass ou Utilisation du framework Bourbon.
  4. Configurez la compilation automatique ou compilez manuellement vos fichiers Sass et LESS. Pour plus d’informations, consultez la section Compilation des fichiers de préprocesseur CSS.

Définition des préférences pour les préprocesseurs CSS

Vous pouvez définir des préférences propres au site pour les préprocesseurs CSS via la boîte de dialogue Sites > Gérer les sites.

Enregistrer des préférences propres à chaque site pour votre préprocesseur CSS vous permet de gérer celui-ci en fonction des spécificités de chaque site. Cela permet également de contrôler le préprocesseur CSS comme vous le souhaitez en fonction du site sans avoir à modifier vos préférences chaque fois que vous changez de site.

Remarque :

Les paramètres situés dans les sous-sections Général et Source et sortie s’appliquent par défaut au framework Ruby-Sass. 

Pour appliquer vos préférences à Compass, vous devez cocher la case Utiliser Compass dans la section Compass.

Définition des paramètres généraux de préprocesseur CSS

Vous pouvez définir les paramètres généraux suivants de préprocesseur CSS sous Sites > Gérer les sites > Préprocesseurs CSS. Par défaut, ces paramètres s’appliquent au framework Saas.

Paramètres généraux de préprocesseur CSS
Paramètres généraux de préprocesseur CSS

Compilation auto sur enregistrement de fichier

Cochez cette case pour activer la compilation automatique des préprocesseurs CSS. Si vous sélectionnez cette option, Dreamweaver génère automatiquement un fichier CSS lorsque vous enregistrez votre fichier Sass, LESS ou SCSS. Si cette option est décochée, vous devez compiler manuellement les fichiers chaque fois que vous apportez une modification.

Options LESS

Activer l’option Strict Math

Traite uniquement les opérations mathématiques qui sont entre parenthèses. Par exemple, (100px/25px) est correctement traité, tandis que 20 % + 10 % (sans parenthèses) n’est pas traité. Lorsque cette option est désactivée, toutes les opérations mathématiques du fichier sont traitées.

Activer l’option Strict Units

Sans cette option, le code LESS tente de deviner l’unité de sortie lors des opérations mathématiques. Exemple :

.class {
  property: 1px * 2px;
}

Dans ce cas, une longueur multipliée par une longueur donne une zone, mais le langage CSS ne prend pas en charge la spécification des zones. Dreamweaver suppose que l’utilisateur voulait dire que l’une des valeurs était une valeur, et non pas une unité de longueur.

Avec l’option Strict Units activée, Dreamweaver suppose que le calcul comporte une faute et affiche une erreur.

Transformer les URL en URL relatives

Lorsque cette option est activée, les URL sont réécrites dans le fichier CSS généré afin que les URL soient toujours relatives au fichier généré. 

Générer mappe source

Crée une mappe source. Une mappe source est un fichier qui fait le lien entre les langages de niveau supérieur comme Sass ou LESS, et le langage de niveau inférieur, tel que CSS, vers lequel ils sont compilés.

Options Sass/SCSS

Style du fichier de sortie

Spécifie le style du fichier de sortie CSS :

  • Imbriqué - Met en forme le fichier CSS compilé selon la structure modulaire classique.
  • Réduit - Met en forme le fichier CSS compilé selon une structure compacte, qui prend moins d’espace que les structures imbriquée ou développée.
  • Compressé - Génère le fichier CSS sous forme de structure plate.
  • Développé - Génère le fichier CSS de manière développée avec chaque propriété et règle prenant une ligne. Les propriétés sont incluses dans les règles, mais les règles ne sont pas incluses de quelque manière que ce soit. 

Créer des commentaires source

Crée des commentaires dans le fichier CSS de sortie qui met en correspondance le code CSS avec la ligne à partir de laquelle il a été généré.

Générer mappe source

Crée une mappe source (fichier qui fait le lien entre les langages de niveau supérieur comme Sass ou LESS, et le langage de niveau inférieur, tel que CSS, vers lequel ils sont compilés). 

Définition des préférences de source et de sortie CSS

Vous pouvez spécifier où placer les fichiers CSS générés ainsi que le chemin d’accès que Dreamweaver doit surveiller et sur lequel déclencher la compilation automatique lorsqu’un fichier Sass/LESS dans le chemin d’accès est modifié à l’aide d’un éditeur externe.

Remarque :

Par défaut, les options sélectionnées dans la section Source et sortie s’appliquent à Sass. Pour appliquer ces options à Compass, vous devez cocher la case Utiliser Compass dans la section Compass.

Après avoir modifié ces paramètres et installé Compass, tous les paramètres sont migrés vers le fichier config.rb. Si vous souhaitez par la suite apporter des modifications à vos paramètres, vous devrez le faire directement dans ce fichier. En outre, les modifications effectuées dans Paramètres du site n’affectent pas la compilation.

Configuration dans Source et sortie pour Compass
Configuration dans Source et sortie pour Compass

Vous pouvez définir les paramètres suivants du préprocesseur CSS pour la source et la sortie dans Sites > Gérer les sites.

Paramètres du préprocesseur CSS pour la source et la sortie
Paramètres du préprocesseur CSS pour la source et la sortie

Sortie CSS

Spécifiez l’emplacement du fichier de sortie de CSS qui est généré.

Dans le même dossier que la source

Sélectionnez cette option si vous souhaitez que les fichiers CSS générés soient enregistrés dans le même dossier que les fichiers source Sass et LESS.

Définir le dossier de sortie

Choisissez cette option et spécifiez un dossier où vous voulez enregistrer les fichiers CSS générés.

Remplacer le segment du chemin d’accès d’entrée

Cette option vous permet de remplacer une partie du chemin d’accès en utilisant les chaînes De et À. Par exemple, lors de la configuration des options De : scss et À : scss, le fichier de sortie est placé à l’intérieur de la même structure d’arborescence après remplacement de SCSS dans le CSS du chemin d’accès.

Dossier source

Spécifie le sous-dossier à la racine du site à surveiller. En général, ce sous-dossier contient tous vos fichiers SCSS ou Less. 

Si vous avez activé la compilation dans Paramètres généraux, Dreamweaver déclenche automatiquement le préprocesseur CSS. La compilation automatique se déclenche lorsqu’un fichier du dossier est modifié depuis Dreamweaver ou en-dehors de l’application.

Utilisation du framework Compass

Compass est un outil de développement CSS open-source qui vous permet de créer des feuilles de style CSS3 à l’aide de Sass.

Dreamweaver propose une prise en charge de Compass. Si vous créez des feuilles de style avec Compass, vous pouvez les compiler et générer des fichiers CSS à partir de Dreamweaver.

  1. Utilisation de fichiers Compass

    Si Compass n’est pas déjà installé, vous pouvez l’installer depuis Dreamweaver.

    Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass. Sélectionnez Utiliser Compass, puis cliquez sur Installer les fichiers.

    Installation des fichiers Compass
    Installation des fichiers Compass

    Tous les fichiers Compass et le fichier de configuration *.rb sont installés dans le dossier de votre site. Vous pouvez les afficher dans le panneau Fichiers.

    Fichiers Compass installés
    Fichiers Compass installés

  2. Spécification du fichier de configuration basé sur Ruby

    Si Compass est déjà installé sur votre ordinateur et que votre fichier Compass *.rb est déjà configuré, spécifiez le chemin d’accès au fichier Compass *.rb dans le site racine actuel depuis la boîte de dialogue Configuration du site de Dreamweaver.

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.
    2. Cochez la case Utiliser Compass.
    3. Cliquez sur Spécification d’un fichier de configuration existant basé sur Ruby, puis accédez à l’emplacement du fichier. 
    4. Quand c’est fait, cliquez sur Enregistrer.
    Spécification du fichier de configuration basé sur Ruby
    Spécification du fichier de configuration basé sur Ruby

    Remarque :

    Ce fichier doit se trouver dans le dossier racine de votre site.

  3. Spécification manuelle des options de configuration

    Si vous n’avez pas d’options de configuration existantes, vous pouvez choisir de les spécifier manuellement.

    1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Compass.
    2. Cochez la case Utiliser Compass.
    3. Cliquez sur Spécification manuelle des options de configuration. Définissez les options de configuration suivantes et cliquez sur Enregistrer.

    Les champs suivants sont renseignés automatiquement, mais vous pouvez les modifier selon vos besoins :

    Remarque :

    Tous les chemins d’accès sélectionnés dans ces options doivent se trouver dans le site racine.

    Chemin HTTP

    Le chemin d’accès au projet lors de l’exécution sur le serveur web. Par défaut vers « / ».

    Répertoire des images

    Répertoire où sont conservées les images. Il est lié à project_path.

    Répertoire des images générées

    Répertoire où sont conservées les images générées. Il est lié à project_path et prend par défaut la valeur d’images_dir.

    Répertoire de polices

    Répertoire où sont conservés les fichiers de polices.

    Actifs relatifs

    Indique si les fonctions d’assistance de Compass doivent générer des URL relatives à partir du CSS généré en ressources, ou des URL absolues en utilisant le chemin d’accès HTTP pour ce type de ressource.

  4. Si vous avez choisi l’option Compilation auto sur enregistrement de fichier dans la boîte de dialogue Sites > Gérer les sites > Préprocesseurs CSS, Dreamweaver génère un fichier CSS chaque fois que vous enregistrez des modifications dans vos fichiers Sass.

    Vous pouvez également afficher l’aperçu de ces modifications en temps réel dans la fenêtre de votre navigateur. Pour plus d’informations sur l’aperçu de vos modifications en temps réel dans le navigateur, consultez la section Aperçu en temps réel.

    Si vous ne souhaitez pas activer la compilation automatique, vous pouvez compiler manuellement un fichier CSS en procédant de l’une des manières suivantes :

    • Dans le panneau Fichiers, cliquez avec le bouton droit de la souris sur le fichier Sass, LESS ou SCSS, puis cliquez sur Compiler.
    • Cliquez sur Outils > Compiler pour compiler le fichier actuel.
  5. Vous pouvez ensuite associer votre fichier CSS compilé aux fichiers HTML de votre site. Pour plus d’informations, consultez la section Établissement d’un lien vers une feuille de style CSS externe.

Utilisation du framework Bourbon

Dreamweaver prend en charge la gamme de produits Bourbon. Si vous créez des feuilles de style avec Bourbon, vous pouvez ensuite les compiler et générer des fichiers CSS à partir de Dreamweaver.

Les versions suivantes de Bourbon sont prises en charge :

  • Bourbon - une bibliothèque de mélange simple et léger, destinée au langage Sass
  • Bourbon Neat - un framework de grille sémantique, simple et moderne, pour les langages Sass et Bourbon
  • Bourbon Bitters - styles d’échafaudage, variables et structure pour des projets Bourbon

Vous pouvez importer le framework Bourbon en ajoutant l’un des éléments suivants à votre code :

  • @import “bourbon“ (pour importer Bourbon)
  • @import “neat” (pour importer Bourbon Neat)
  • @import “base” (pour importer Bourbon Bitter)

Dreamweaver utilise ensuite la version prédéfinie de Bourbon lors de la compilation des fichiers de préprocesseur.

Sinon, vous pouvez installer les fichiers du framework Bourbon sur votre site, de sorte que les mises à jour éventuelles de Dreamweaver n’affectent pas vos flux de compilation. Les fichiers du framework Bourbon sont copiés sur votre site. Bourbon est le framework qui est utilisé lorsque la compilation est déclenchée pour les fichiers qui importent le framework.

Installation des fichiers Bourbon, Bourbon Neat ou Bourbon Bitters

Pour installer Bourbon ou l’une de ses versions :

  1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Bourbon, Bourbon Neat ou Bourbon Bitters.

  2. Cliquez sur Installer les fichiers pour installer les fichiers à l’emplacement du dossier racine du site spécifié au sein de votre site.

    Installation des fichiers Bourbon
    Installation des fichiers Bourbon

    Tous les fichiers Bourbon sont installés dans le dossier de votre site, et vous pouvez les afficher dans le panneau Fichiers.

    Fichiers Bourbon installés
    Fichiers Bourbon installés

    En cas d’échec, les erreurs sont affichées dans le panneau Sortie (Fenêtre > Résultats > Sortie) et l’icône de la barre d’état devient rouge.

Compilation des fichiers de préprocesseur CSS

Vous pouvez compiler des fichiers de préprocesseur CSS de l’une des façons suivantes :

Configuration de la compilation automatique des fichiers de préprocesseur CSS

Vous pouvez configurer des options dans Dreamweaver afin de compiler automatiquement les changements effectués sur un fichier Sass ou LESS dans son équivalent CSS. Vous pouvez également spécifier les emplacements (à la racine du site) où vous souhaitez enregistrer le fichier CSS généré.

  1. Dans la boîte de dialogue Configuration du site, sélectionnez Préprocesseurs CSS > Général > Compilation auto sur enregistrement de fichier.

    Activation de la compilation automatique
    Activation de la compilation automatique

  2. Cliquez sur Préprocesseurs CSS > Source et sortie.

  3. Spécifiez les emplacements où vous souhaitez enregistrer les fichiers CSS que vous avez générés. Vous pouvez choisir l’une des options suivantes :

    Dans le même dossier que la source

    Sélectionnez cette option si vous souhaitez que les fichiers CSS générés soient enregistrés dans le même dossier que les fichiers source Sass et LESS.

    Définir le dossier de sortie

    Choisissez cette option et spécifiez le dossier où vous voulez enregistrer les fichiers CSS générés.

    Remplacer le segment du chemin d’accès d’entrée

    Cette option vous permet de remplacer une partie du chemin d’accès en utilisant les chaînes De et À.

  4. Spécifiez le dossier contenant les fichiers Sass ou LESS que Dreamweaver doit surveiller. 

    Si vous apportez des modifications à l’un des fichiers du dossier que Dreamweaver surveille, celui-ci compile automatiquement les fichiers après leur enregistrement. 

    Paramètres du préprocesseur CSS pour la source et la sortie
    Paramètres du préprocesseur CSS pour la source et la sortie

    Remarque :

    Dreamweaver surveille et compile ces fichiers, même si vous apportez des modifications en dehors de Dreamweaver (à l’aide d’un éditeur de texte, par exemple).

Lorsqu’une compilation a réussi, un message s’affiche dans le panneau Sortie (Fenêtre > Résultats > Sortie). L’icône d’état s’affiche en vert dans la barre d’état. Pour ouvrir le fichier CSS compilé, double-cliquez sur le message de réussite dans le panneau.

Si des erreurs sont détectées, cela signifie que le code CSS ne s’est pas compilé correctement. L’icône d’état s’affiche en rouge et le panneau Sortie répertorie toutes les erreurs et tous les avertissements. Vous pouvez double-cliquer sur un message d’erreur dans le panneau pour accéder rapidement à la ligne erronée dans le code. Le fichier CSS ne se compile pas correctement tant que toutes les erreurs ne sont pas résolues.

Remarque :

Le panneau Sortie se trouve au bas de l’espace de travail. S’il est fermé, vous pouvez l’ouvrir en cliquant sur Fenêtre > Sortie.

Vous pouvez également activer le panneau Sortie (afficher/masquer) à l’aide de l’icône d’état lorsque cette dernière est rouge.

Une fois que vous avez obtenu le fichier CSS compilé, vous pouvez lier votre page web à la feuille de style. Lorsque vous apportez des modifications aux préprocesseurs CSS, les fichiers CSS compilés correspondants sont automatiquement mis à jour. La page web est également automatiquement actualisée en mode En direct.

Pour plus d’informations sur la création de liens entre votre page web et la feuille de style, consultez la section Établissement d’un lien vers une feuille de style CSS externe.

Compilation manuelle d’un fichier de préprocesseur CSS

Dans certains cas (notamment si vous n’avez pas défini de site Dreamweaver), vous pouvez avoir besoin de compiler manuellement un fichier de préprocesseur CSS.

Dans ce cas, désactivez la case Compilation auto sur enregistrement de fichier dans le panneau Préprocesseurs CSS > Général de la boîte de dialogue Configuration de site.

Pour compiler manuellement un préprocesseur CSS, cliquez avec le bouton droit de la souris sur le fichier dans le panneau Fichiers, puis cliquez sur Compiler.

Compilation manuelle de fichiers de préprocesseur CSS via le panneau Fichiers
Compilation manuelle de fichiers de préprocesseur CSS via le panneau Fichiers

Vous pouvez également cliquer sur Outils > Compiler pour compiler le fichier actuel.

Logo Adobe

Accéder à votre compte