Découvrir LESS

Définir le site dans Dreamweaver

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Apprenez à démarrer un projet LESS dans Dreamweaver, tout en profitant des nouveautés de la version CC 2017.

Transcription

Je vous propose maintenant d’utiliser tout ce que nous avons appris dans les chapitres précédents, dans le cadre de l’étude d’un cas pratique et le cas pratique est le suivant : donc nous avons reçu d'un designer eh bien une maquette Photoshop d’un site à réaliser. Et notre travail consiste, eh bien, à la réalisation de la page html. et bien évidement de la feuille de styles css qui va avec pour reproduire donc cette maquette sous la forme d’une page web. Alors pour créer la feuille de style, eh bien, on va bien évidemment utiliser less et on va utiliser également Dreamweaver CC 2017 puisque cette nouvelle version de Dreamweaver est maintenant capable de compiler vos codes less. Alors me voici dans Dreamweaver CC 2017, j'ai choisi d’utiliser l’espace de travail développeur, c’est celui auquel je suis habitué. Vous êtes peut-être plus habitué à l’espace de travail standard avec la liste des fichiers ici, sur le côté droit de l’écran. Alors finalement, peu importe l’espace de travail que vous décidez d’utiliser, prenez celui avec lequel vous êtes le plus à l'aise. En ce qui me concerne, eh bien, c'est l’espace de travail développeur. Je vais maintenant donc créer un nouveau site dans Dreamweaver, donc Site, Nouveau site comme ceci, je vais lui donner un nom je vais l’appeller Blog Didaxo par exemple. C’est le nom de mon projet et je vais montrer à Dreamweaver où se trouve le dossier racine de ce site sur mon disque dur. Alors dans les fichiers d’exercice associés à cette formation, nous sommes pour le moment dans le chapitre05, remarquez au passage que je vous donne ici les fichiers Photoshop que je vous ai montrés précédemment dans cette vidéo et vous allez prendre le dossier Start qui représente donc le point de départ de notre étude de cas pratique. C’est ceci le dossier racine de notre site. Alors, je vais directement me rendre au niveau maintenant de la catégorie préprocesseur css et je vais décocher cette petite case Compiler automatiquement lors de l’enregistrement des fichiers. En effet, lors de la création de mon site et lors de la configuration finalement de mes fichiers less, eh bien, je n’ai pas envie que Dreamweaver compile automatiquement tous les fichiers que je crée, donc je préfère maitriser moi-même le moment où cette compilation a lieu, donc je vais décocher cette petite case, je vais me rendre maintenant dans Source et Sortie puisque rappelez-vous que par défaut, eh bien Dreamweaver va compiler vos codes less dans le même dossier que la source, ça je n’ai pas envie, je vais définir mon dossier de sortie, mon dossier de sortie ce sera le dossier css de mon site qui contient d'ailleurs déjà, vous le voyez, deux feuilles de style, voilà. Et puis le dossier source, eh bien je vais cliquer également ici sur ce petit dossier. Voilà. Et je vais créer dans mon site, un dossier que je vais appeller less et c’est là que je vais stocker donc mes fichiers less, je veux que Dreamweaver compile les fichiers less que je vais mettre ici dans ce dossier. Voilà donc pour l’application less, alors encore deux ou trois petites choses qui sont plutôt spécifiques ici à Dreamweaver : je vais également dans les infos locales spécifier un dossier des images par défaut et je vais prendre ici le dossier image de mon site, c’est là que je veux mettre les images donc dans mon cite, voilà. Et puis je vais également configurer le voilage. Alors, c’est quoi le voilage ? Eh bien, le voilage vous permet d’exclure certains dossiers fichiers de toutes les opérations sur le site. En effet, Dreamweaver est capable de publier votre site, donc de se connecte en FTP à votre serveur et puis d'uploader comme ça vos fichiers. Seulement lors de l'upload de ces fichiers, eh bien il faudra ignorer certains fichiers. Je vais voiler les fichiers, notamment les fichiers less, également les fichiers Photoshop, les éventuels fichiers flash, les fichiers SCSS ou SASS, etc. Donc ces fichiers-ci, vous voyez que less est déjà prévue ici dans cette liste, ne seront pas euplodés vers le serveur si vous décidez d’utiliser le client FTP intégré à Dreamweaver. Voilà donc, mon site est à présent configuré, je vais enregistrer la configuration de mon site. Vous le voyez qui apparait ici sur le côté et pour gagner un peu de temps, eh bien, j’ai déjà créé le code html de cette page, ça va nous permettre, à partir de la vidéo suivante, de nous concentrer exclusivement sur la réalisation de la feuille de styles css à partir des fichiers less que nous allons écrire.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 2016

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 !