Créer un site web avec Dreamweaver CC

Créer des éléments de librairie

Testez gratuitement nos 1330 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Simplifiez la mutualisation d'éléments de vos pages grâce à la fonctionnalité d'éléments de bibliothèque de Dreamweaver. Ainsi, vous modifierez automatiquement toutes les places où il aura été employé.
03:43

Transcription

Il arrive souvent qu'on ait besoin d'intégrer dans notre site des éléments qui vont être récurrents à plusieurs pages, comme par exemple, les copyrights. Donc on peut très bien envisager une balise « small », utiliser une entité HTML pour le copyright ici et puis écrire « copyright 2016 ». On ne sait pas si on a fait des fautes d'orthographe dans l'écriture, s'il faudrait l'écrire différemment, on ne sait pas si le service juridique voudrait avoir un lien qui nous envoie vers la charte de licence, Enfin bref, on n'est pas tout à fait fixé sur cet élément-là. Donc plusieurs raisons qui font que on a besoin d'avoir cet élément centralisé quelque part, et mutualiser son utilisation. Donc ici, on pourrait être amené à le modifier et à l'utiliser dans des dizaines voire des centaines de pages. Pour cela, on va utiliser une propriété de Dreamweaver qui s'appellent les éléments de librairie, ou de bibliothèque ici. Alors j'ai récupéré une balise small mon signe copyright ici, et puis je vais pouvoir l'ajouter à ma bibliothèque ici et je vais faire un nouvel élément de bibliothèque. Et là Dreamweaver me prévient en me disant attention, ça risque de changer d'aspect, parce que les feuilles de style ne sont pas copiées avec. Oui, oui, d'accord. OK, parfait. Et donc je le place ici. Par contre, il s'appelle « Sanstitre », je peux cliquer dessus et le renommer « copyright » ici, tout simplement. Partout où je vais maintenant l'utiliser, cet élément devra être intégré depuis la palette des actifs ici, et non plus depuis le code. Et si vous regardez bien, ici, Dreamweaver me l'a stocké d'une certaine manière avec un begin un commentaire de HTML, library Item puis le code est à l'intérieur. Bien sûr, il me faut venir dans ma feuille de style pour lui donner un style d'écriture. Rappelez-vous, sur le footer on avait une écriture qui était grise donc on ne peut pas le voir ici, mais il est quelque part, voilà, copyright, vous le voyez ici avec le logo qui a été écrit d'une certaine manière. Pour cela, on va pouvoir par exemple, préparer une classe. Alors cette classe malheureusement, je vais l'avoir dans l'index.css ici, mais de manière dure puisqu'on a déjà finalisé notre élément. Alors je vais venir ici et je vais dire que je vais créer par exemple small, on va le faire dans un footer et on va placer notre feuille de style en disant que ce serait un font-size qui serait de par exemple dix pixels, on va l'écrire en dur, et puis surtout une couleur qui serait « white » ici. Tout simplement on va juste faire ça. Et là, on le voit. Peut-être que 10 pixels c'est un peu trop, on va faire 8 pixels. Et là notre copyright est nickel. Et bien sûr, que ce footer small, pour l'instant il n'y a pas de classe, ni d'élément et moi ça me gène un peu. Je préférerais placer une classe qui s'appelle copyright directement. Là, le souci, c'est que cet élément-là, n'est pas copyright. Alors regardez, je vais venir dans mon élément de librairie ici, je vais double cliquer dessus. À ce moment là, il s'ouvre, et ici il me dit « voilà ton small », je vais lui rajouter une « class= » et dans cette classe, je vais marquer « copyright » R-I-G-H-T Voilà, et je l'enregistre. Il me dit, oups, attention ! Tu l'enregistres, mais il y a un fichier qui s'appelle index.html qui l'utilise Mets-le à jour. Il me le met à jour. C'est terminé, et regardez ici maintenant, la classe est apparue puisque l'élément est devenu blanc. Donc vous avez compris que ce qui s'est modifié ici sur une seule page aurait très bien pu se modifier sur l'intégralité des pages qui faisaient appel à cet élément de librairie.

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 !