L'essentiel de Dreamweaver CC 2017

Se servir d'un préprocesseur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
L'utilisation d'un préprocesseur LESS ou Sass exige un minimum d'organisation dans la gestion de l'arborescence. Faites le tour des possibilités et préparez une installation générale.
07:25

Transcription

Pour travailler sur les préprocesseurs, j'ai préparé un site à part. Donc je suis sorti du site de la formation classqiue pour passer sur préprocesseur afin de pouvoir voir plus cliarement l'intégralité des fichiers qui vont être générés. Un grand nombre de dossiers sont necessaires, parfois sont nécessaires à la racine du site, et pour éviter de compliquer dans l'arborescence qu'on utilise au travers des divers chapitres, je me place directement dans un site à part entière. alors que l'on utilise la technologie sass ou la technologie less, c'est pareil au niveau des paramétrages. Ici, si vous utilisez sass vous avez accès à 2 languages : le scss et le sass. Et si vous utilisez la technologie less il n'y a que le language less qui est utilisé. Alors quelque soit la technologie que vous utilisiez, tout se passe dans les réglages du site, c'est-à-dire que l'utilisation des préprocesseurs est un paramétrage site par site. Il faut savoir que par défaut, cette fonctionnalité est activée et qu'il va vous falloir venir la désactiver si vous ne souhaitez pas utiliser cette technologie. ou si vous ne souhaitez pas qu'elle soit prise en compte par Dreamweaver. Donc si vous utilisez ruby d'une manière externe, pour compiler ou un gulp ou un grunt qui viendra compiler, je vous préconise de vraiment venir décocher cette option qui est cochée par défaut dans votre site. Donc là, on va travailler avec des préprocesseurs donc ce qu'on a demandé c'est de cocher. Qu'on utilise less ou sass, le paramétrage se fera de manière commune et unique. Ensuite, au niveau des réglages de CSS voous avez les principales options qui sont réglables ici en sachant que le strict math et le strict units je vous préconise de les cocher par défaut. Ensuite le reste, c'est vous qui voyez si vous en avez l'utilité et pour sass vous choisissez tant que vous allez développer. Je vous conseille d'être en expanded et dès l'instant où vous allez vraiment travailler en production, que vous allez produire, de passer en compressed pour les dernières fois où vous allez enregistrer. Pour l'instant on va passer en expanded. Vous pouvez éventuellement créer des commentaires sources dans le cas où vous auriez des bugs et que vous n'arriviez pas à les trouver. Ensuite pour le reste c'est à vous de voir au niveau des paramétrages. Quoi qu'il en soit je vous orienterai vers quelques sites par la suite pour vous aider sur vos choix. Au niveau de la source et des sorties, vous pouvez par défaut tout utiliser dans le même dossier que la soruce si vous travaillez par exemple sur du sass, less, de manière externe, que votre site est géré en ligne par exemple avec un wordpress et que vous souhaitiez pouvoir travailler avec Dreamweaver juste pour refaire votre template, vous pouvez tout placer dans la même source pourquoi pas. Il est préférable de pouvoir définir un dossier de sortie. Pour ça, ce dossier de sortie rien ne vaut une véritable arborescence que vous allez créer donc si vous êtes dans Wordpress par exemple, vous faites un wp-content, un thème eccetera eccetera. Là, on va faire un simple dossier css mais n'hésitez surtout pas à créer une arborescence complexe en fonctiond e la racine du site pour pouvoir définir votre dossier de sortie. Voilà, une fois ce dossier determiné, vous allez devoir définir le dossier souirce. Pour le dossier source, pareil, ici c'est vous qui définissez le dossier que vous allez utiliser. On va rester à la racine et on va créer un fichier qu'on va appeler sass, pour saass. Il faut savoir que vous pourriez avoir pour less également le même dossier donc ce qu'on va faire c'est qu'on va l'appeler sass en sachant que c'est notre dossier source qui va être utilisé à chaaque fois. Compass. Est-ce que vous utilisez Compass ? Le choix d'utiliser Compass peut être polémiqué parce que beaucoup sont contre Compass. C'est une vieille librairie qui servait à l'époque pour faire du préfixage, principalement, et donc certains ont été pour ne plus l'utiliser dès l'apparition des post processeurs comme Gulp par exemple. Mais il ne faut pas oublier que Compass n'est pas constitué que d'une librairie qui permet de préfixer. Compass permet également de faire du vertical rim, permet également de faire du sprite de manière avancée. Après c'est à vous de voir si vous allez l'utiliser ou pas. Soit vous l'utiliser déjà sur un site ancien vous avez déjà un fichier config.rb. A ce moment-là vous allez pointer vers votre fichier config.rb ici qui va définir l'intégralité de l'arborescence d'exploitation. Sinon vous allez définir directement par défaut. Alors le chemin http, html non, la racine va être dans le dossier à la racine de processeur. Pour le répertoire des images, vous allez définir un dossier images. Faites attention, le chemin est marqué mais le dossier n'existe pas donc vous allez venir le créer. On va appeler ce dossier images. Attention, ça ce sont les images sources, ce sont celles que vous allez utiliser pour fabriquer éventuellement des sprites. Donc à vous de voir si vous n'entrez pas en conflit avec un éventuel dossier dans lequel vous stockerez des images d'exploitation pour le site de manière normale sans passer par sass donc ce que vous pouvez faire au lieu de l'appeler images, c'est l'appeler matières image ou matières tout court ou documentation. A vous de voir ce qui serait le plus parlant pour votre production. Les images générées ce sont celles que vous allez exploiter donc ici ce sont des images pur et dur de css, on va les appeler img, ça évitera toute confusion. Et le répertoire des polices, alors là il faut faire extrêmement attention, parce que par ailleurs Dreamweaver ici propose de travailler avec des polices et si vous utilisez Dreamweaver pour intégrer des polices pour une raison ou une autre, vous allez générer un dossier qui s'appelle webfonts par défaut. Vous pouvez redéfinir ce dossier si vous le souhaitez l'appeler fonts tout court ici. Mais si vous faites cela, forcément, Dreamweaver va chercher ce dossier ici. Donc ici webfonts, sélectionner le dossier, ici je suis dans webfonts. ce qui veux dire que quand je reviens dans Compass, je vais aller pointer vers webfonts pour travailler dans le même dossier que ce dossier-là. Vous pourriez faire exactement la même chose pour JQuery. Pour JQuery il appelle ça JQuery/Assets. Je vous invite à créer un dossier que vous appelerez javascript par exemple. Tout simplement. Une fois que vous aurez défini ce dossier javascript qui pour l'instant n'a rien à voir avec nos besoins direct on va dire, vous verrez que par la suite vous pourrez le redéfinir ou le pointer directement avec Compass. Donc ici au niveau des fichiers de sortie et des fichiers de Compass, àa a été généré. Est-ce qu'on va utiliser bourbon ? C'est à vous de voir si vous souhaitez utiliser bourbon. C'est une librairie alternative à Compass mais qui vient également avec 2 autres librairies assez sympathiques qui sont bourbon neat et bourbon bitters. L'une permet de pouvoir travailler en mode gris on va dire et le 2ème est une extension en gros de tous les styles de base qu'on a besoin dans la création d'une application de site. En ce qui concerne Compass maintenant, ce qu'on va faire c'est... Alors compass, bourbon, bourbon neat, bourbon ou bourbon bitters, vous avez besoin d'installer les fichiers si d'aventure vous souhaitiez travailler avec ces librairies. Pour l'instant, on va installer que la librairie compass ici, et donc on fait installer les fichiers. On nous dit attention tout va être remplacé êtes-vous sûr de vouloir continuer ? Oui je continue. Voilà donc tout va se générer sur la partie droite ici. Il me dit que maintenant tout a été copié, tout a été fabriqué et réglé dès que je valide je peux enregistrer. L'arborescence a été intégralement créée. Donc une fois que l'installation est faite, je vous invite à passer à l'étape suivante pour pouvoir mettre en exploitation et explorer tous les détails de ces fonctionnalités.

L'essentiel de Dreamweaver CC 2017

Prenez en main l’environnement de travail de Dreamweaver. Créez des documents, utilisez les CSS, gérez les liens hypertexte, les fichiers multimédia, les formulaires, etc.

7h28 (98 vidéos)
Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :30 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !