Créer un site web avec Dreamweaver CC

Compacter un fichier CSS unique

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Sauf si vous utilisez Sass ou LESS, Dreamweaver ne permet pas de concaténer des fichiers et de les minifier. Effectuez cette tâche en passant par un site externe.
05:35

Transcription

Nous pourrions continuer comme ça à développer nos pages, et continuer à incrémenter, implémenter du contenu dans notre site, mais on va dire qu'on est arrivé à un point qui nous permet maintenant de nous dire qu'on a suffisamment avancé dans ce travail, ce qu'on va faire maintenant c'est compacter l'intégralité des feuilles de style CSS vers un seul et unique document. Alors ici, celui-là je vais l'appeler « index » tout court, et je vais le mettre à la racine du site et je vais l'enregistrer. Automatiquement, il me demande de mettre à jour les liens, je vais dire oui, oui, mets tous les liens à jour ici, et on se retrouve avec le même document mais cette fois-ci, placé à l'extérieur du dossier HTML. Si je viens dans le code source de ma page, on va se retrouver avec un certain nombre de feuilles de style, de la base jusqu'à metadata. Ce que je vais faire, c'est que je vais supprimer l'intégralité de ces liens je vais les faire pointer vers un fichier que je pourrai appeler « index.css ». Ctrl+S. Bien entendu, si je reviens sur le mode en direct, je vais me retrouver avec un HTML brut de décoffrage sans aucune feuille de style puisque le fichier index.css n'existe pas. Alors si on utilise des technologies comme Sass, comme LESS, on va pouvoir compacter tous ces fichiers. Si on utilise une technologie comme Grunt ou Gulp, on pourrait faire également de même, on pourrait dire tu vas me minifier tous ces fichiers. Là, on n'a aucune de ces technologies, et malheureusement, on n'a pas du tout de possibilité dans Dreamweaver de minifier, de compacter de manière très simple tous ces éléments là. Alors ce qu'on va faire, dans un premier temps ici, on va récupérer l'intégralité de ces documents CSS, on va tous, soit les ouvrir, soit les récupérer de point de vue Windows. Je vais les récupérer. Donc on a l'intégralité des fichiers, puis on va se rendre sur un site qui nous permet de compacter l'ensemble de ces documents CSS. Ici, on a la possibilité de copier directement du code, soit de déposer des fichiers. Alors on pourrait très bien complètement glisser-déposer l'intégralité des fichiers le petit souci que l'on va rencontrer, ça va être que dans certains cas, on a besoin d'avoir un certain ordre au niveau de nos CSS. Là-dessus, il est préférable de placer un par un tous les fichiers tout simplement. Alors ce qu'on va faire, c'est donner un peu d'espace, et glisser nos fichiers. Parce que c'est vrai que dans certains cas, les CSS ont besoin d'être identifiés dans un certain ordre. Imaginez que la base soit mise à la fin. À la fin on va remettre à zéro tous les styles, donc c'est préférable de glisser-déposer comme ça un par un. Ça prend un petit peu de temps, mais c'est quelque chose qui va se réaliser qu'une seule fois à chaque fois qu'on aura besoin de vraiment mettre à jour l'intégralité de nos CSS. On s'assure une dernière fois, 01, 02, 03, 4, 5, 6, 7, 8, 9, 10. Tout est bon. On a la possibilité de dire, je veux faire un Shrink et on fait un Shrink. Vous avez vu, j'ai coché la case ici, de pouvoir ajouter l'information nécessaire. Alors non seulement l'original faisait dix fichiers avec onze kilos, ici on n'a plus qu'un seul fichier, avec huit kilos cinq, c'est-à-dire alors qu'en plus on sauve presque trois kilos de texte. Donc soit on récupère cet élément et on le sauvegarde, soit on peut directement Ctrl+A on va faire un Copier directement, et puis on va venir dans notre document ici Nouveau CSS, je vais faire un Ctrl+A Ctrl+V directement pour pouvoir compacter tous ces éléments-là, et je vais faire un Fichier Enregistrer sous, je vais l'enregistrer dans les CSS et je vais l'appeler « index.css ». J'enregistre cet élément. Tout est enregistré. Je peux fermer. Et si j'actualise ma page, F5, on devrait retrouver l'intégralité de l'élément. Alors si vous regardez bien, les typos ne sont pas respectées. On a tout qui est en place, sauf la typographie. Pourquoi la typographie n'est-elle pas préservée ? La typographie n'est pas préservée parce que tout simplement une fois qu'on a compacté les éléments, on a fait les imports de typos au milieu. Donc on pourrait se dire que dans la base, on placerait les imports de typos directement. Donc il suffirait de récupérer l'intégralité de chacune de ces CSS, de retirer tous les fichiers d'import que l'on peut avoir, par exemple ici en haut, et tous ces éléments-là, y compris le chartset utf-8 puisqu'on les a de partout, les placer directement en amont dans le fichier de base. Alors pour éviter de devoir modifier chacun de ces fichiers, ce que je vous propose de faire, c'est que je vais créer un fichier 00, qui va contenir l'intégralité des imports, toutes les autres feuilles de style ont été épurées, nettoyées, repassées dans le Shrinker, et voilà le résultat ici, on a bien demandé à Shrinker de nous lister l'ordre et puis les fichiers qui ont été intégrés pour être sûr que tout soit présent ici, et puis tout le reste, voilà, et du compacté pur et dur, tout notre style CSS se retrouve dans une seule et unique page. Maintenant si on regarde en mode en direct on s'aperçoit que tous nos styles de typographie sont bien présents et revenus dans notre page. Tout est bon, tout a fonctionné.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 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 !