Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Dreamweaver CC 2017

Optimiser avec les éléments de librairie

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Du côté de l'optimisation des pages HTML, Dreamweaver dispose d'éléments de librairie qui vous permettront d'écrire, en dur, des portions de code mutualisées. Ainsi, vous effectuerez les tâches de maintenance et de mise à jour avec plus de souplesse.
05:45

Transcription

Dans une étape précédente, nous avions utilisé la navigation avec des ancrages et donc pour cela, on avait mis en place un petit élément de retour qu’on avait appelé Retour, tout simplement, qui nous permettait de remonter à une ancre vide donc par défaut, au chargement de la page. Donc de ce fait, on est amené à utiliser à plusieurs endroits dans la page cet élément Retour. On pourrait d’ailleurs être amené à l’utiliser dans bien d’autres pages puisque en fait il recharge la page en allant à une ancre vide donc en allant au sommet de la page, et ça, c’est le genre de fonctionnalité qu’on peut avoir besoin de manière récurrente dans nos pages. Petit souci : c’est que dès qu’on va vouloir le modifier, il faudra se rappeler où on l’a mis en place et aller le modifier partout. Alors on pourrait très bien avoir un petit morceau de chargement dynamique pour cet élément-là qui fait que si on modifie le morceau chargé par exemple en PHP, bien on le chang et ça se change tout seul. Sauf que ça va demander au serveur de faire un travail de génération ou au poste client si on le fait avec du AJAX. On va voir que ça serait bien de l’intégrer dans du HTML, voilà, ça va avoir une problématique parce qu’il faudra remettre à jour tous les fichiers qu’il utilise mais ça va se faire de manière automatique et surtout, ça va faire (...) le HTML qui sera écrit en dur dans le code et donc il ne nécessitera aucun temps côté serveur. Alors pour le mettre en place, c’est très simple, on va utiliser une fonctionnalité de Dreamweaver qui s’appelle "Les éléments de librairie" et pour cela, je vais sélectionner toute la partie qui m’intéresse, c’est-à-dire le lien Je vais ouvrir le panneau des actifs, ici. Dans le panneau des actifs, je vais me rendre, alors attention, CTRL+Z parce qu’il a mis en place un élément, j’ai cliqué par-dessus un peu trop rapidement, je m’assure bien d’avoir sélectionné ce qu’il faut ici, et dans cette partie-là, je vais aller dans la partie des éléments de Bibliothèque. Et là, dans la partie des éléments de Bibliothèque, je vais générer un nouvel élément, tout simplement, et je vais l’appeler, cet élément-là, Retour-haut-page. Je le nomme de manière tout en minuscules et j’utilise des traits d’union, on pourrait utiliser aussi des underscores. Donc c’est à vous de voir quelle va être votre convention de nommage mais de pas garder d’accent, pas garder d’espace parce que ça va rester quand même dans le code et puis surtout ça va rester un fichier, quoi qu’il peut être trimbalé sur un serveur, donc de garder une bonne cohérence dans le temps et l’utilisation. Donc ici je vais le nommer, il me dit "Attention, est-ce que tu veux mettre à jour ?" "Oui, je mets à jour" Et vous voyez que maintenant, ici j’ai un BeginLibraryItem sous forme de commentaire HTML qui utilise cet élément-là et qui se termine juste à la fin du /a. Si je regarde du côté des fichiers maintenant, j'ai un dossier qui s’appelle Library, ici, et il ne faut surtout pas renommer ce dossier parce que Dreamweaver pointe vers lui et en a besoin. Donc gardez ce nom, tel quel, avec un L majuscule, c’est très important. Et donc, ce qu’il va me falloir faire maintenant, c’est retourner vers cet élément-là, le supprimer et cette fois-ci, c’est prendre l’élément de Retour ici et le glisser ; alors si les parties Glisser-déposer ne vous permettent pas de le faire de manière très simple, très ergonomique, ne vous inquiétez pas de ça, il suffit pour cela de vraiment placer le curseur là où vous le souhaitez et puis juste vous cliquez sur le bouton Insérer et ça va se faire, donc vous allez pouvoir le placer en lieu et place de chacun de ces éléments ; vous pouvez même sélectionner l’élément entier, Dreamweaver va remplacer cet élément par la sélection d’insertion ; vous n’êtes pas obligé de le supprimer et de quitter, vous économisez un clic de la sorte. Vous pouvez aussi faire Rechercher-remplacer par la chaîne de caractères LibraryItem et compagnie puisque c’est en fait la même chose, c’est un commentaire HTML, il se met juste en glisser de cette manière-là parce que Dreamweaver – le moteur de rendu –, reconnaît automatiquement les éléments de librairie et les surligne de gris pour qu’ils soient beaucoup plus rapidement visibles. Si vous enregistrez cette page maintenant et que vous regardez, bien en fait, ça n’a rien changé d’un point de vue visuel, c’est exactement la même chose, et puis, ça va être la même fonctionnalité, c’est-à-dire qu’on va utiliser le même Retour en haut de ligne, y’a pas de souci, c’est vraiment exactement la même fonctionnalité. Par contre, ce qu’il y a d’intéressant maintenant, c'est que si je retourne soit par le menu Library ici et ce fichier-là, soit si je viens dans l’élément ici et que je vais demander Editer cette partie-là, clic droit, et je vais demander de le passer en mode Edition, donc je vais l’ouvrir dans un fichier et si maintenant, je remplace par "en haut de page" – Retour en haut de la page –, je l’enregistre, Dreamweaver me dit "Hop, attention, cet élément est utilisé dans la page HTML. Veux-tu le mettre à jour ?" Je dis "Mets-le à jour". Il va terminer intégralement son élément, et puis une fois que c’est terminé, je peux fermer ma boîte de dialogue, je peux fermer mon LBI. Et si vous regardez maintenant, partout où l’élément de bibliothèque avait été utilisé, j’ai un Retour en haut de la page, et a été écrit en lieu et place. Alors bien entendu, ce serait préférable de mettre une feuille de style CSS et puis de dire "Je vais rajouter une classe à cet élément-là", je vais faire un texte (...) pour supprimer le texte et puis je rajouterai une icône avec une petite flèche, animation, etc. Et partout où ça va être utilisé, ça va être modifié. Ce qui est intéressant, c'est que c’est maintenant en dur dans le HTML, donc on n’a pas besoin d’utiliser de la ressource processeur pour ça, ni de la ressource serveur, puisque le HTML est déjà mouliné dans ce sens. La seule chose que ça va me demander, c’est de revenir maintenant synchroniser l’intégralité de mon site ou de passer sur tout le site ici, et de dire Sélectionner tout ce qui a été modifié récemment. Et là il va me dire ce qui a été modifié récemment, je vais dire par exemple dans les dernières heures ; donc ici ce n’est pas le cas puisque je n’ai pas cet élément-là mais là il me sélectionnerait tous les fichiers qui ont été impactés par la modification de cet élément de librairie et donc je n’aurai plus qu’à faire simplement un clic droit et de dire Placer pour pouvoir le placer en ligne car ils n’ont pas été modifiés côté serveur et ce n’est pas quelque chose de dynamique.

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 !