L'essentiel de Dreamweaver CC 2017

Gérer des templates

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver propose des structures de page sous forme de modèles appelés templates. Cette technique fournit du HTML pur. De cette façon, vous vous épargnerez de tout temps de calcul côté serveur ou côté client.
08:46

Transcription

A l’instar des éléments de librairie qui sont des petits bouts mutualisés que l’on va pouvoir injecter dans le site et centraliser au niveau de la modification, il peut être intéressant d’avoir la même chose au niveau des pages et des contenus de structure de page. Alors certains pourront utiliser du PHP avec des includes, d'autres utiliseront du JavaScript avec AJAX qui chargera à la volée des éléments récurrents mais chaque fois, ça va générer du cycle processeur, ça va générer du temps, même si c’est très rapide, bien ça va générer du temps. Mais des fois, il peut être intéressant d’avoir, par exemple, la barre de menus, ici, qu'on va retrouver dans toutes les pages, plus le logo, plus tous les éléments qui vont de pair, c’est-à-dire la CSS qui va avec, les images de logos, etc., et par exemple dans le footer, ici, on va les voir dans toutes les pages quelles que soient les pages du site bien ça peut être bien de les avoir en plain HTML, en plain-texte, pour être sûr de ne pas générer du cycle processeur pour fabriquer ce contenu parce que ce contenu va être récurrent et identique. Donc Dreamweaver nous propose ce qu’on appelle des templates qui vont nous permettre de pouvoir mutualiser comme-çà une certaine partie de la récurrence de la page. Donc ici, si j’ouvre ma page, cette page base-0, je me retrouve avec un contenu de page qui me propose, ici, la partie haute, ici, puis là, la partie basse dans le footer et le pied de page mais je vais pouvoir me dire "Bien cette partie-là, slider, social, etc., je ne le veux pas", je peux le supprimer ici après le header, donc si je regarde, y’a rien de ce côté-là, par contre la partie main, ici, j’aimerais la garder et cette partie main, je vais pouvoir, par exemple, lui placer un contenu factice. Alors ici, ce sera le "contenu main de la page". Mais en fait, c’est cette partie qui peut être rendue modifiable dans chacune de mes pages puisque c’est cette partie-là qui va changer. Bien à ce moment-là, je vais aller dans la partie haute, ici j’ai la partie Modèle, et Dreamweaver me propose de créer ce qu’on appelle une Région modifiable. Alors il me dit "Attention, tu es en train de transformer un document HTML en Région modifiable", donc ça veut dire que ça va se transformer en modèle, je lui dis "Bien vas-y, fais de la (…)" et là il va me donner le nom de la région, comment je vais l’appeler. Alors je peux l’appeler "main", je peux l’appeler comme je veux ; personnellement, j’aime bien utiliser des minuscules, j’aime bien ne pas utiliser de caractères spéciaux – alors d’aventure, ça fonctionnera dans Dreamweaver mais évitez-les quand même car ça va faire partie du code internet Dreamweaver, certes, mais ça va faire partie du code –, donc ici, "main", ça me va très bien et je lui dis "OK". Et là, si vous regardez bien, le contenu de ma page est toujours en blanc, ici, par contre en mauve autour, j’ai un TemplateBeginEditable avec un name "main" qui me dit "Bien ça, c’est ta partie main", et si je ferme mon document, que je l’enregistre tout simplement, je n’ai plus la boîte de dialogue classique d’enregistrement, ici, j’ai une boîte de modèle qui apparaît et Dreamweaver me dit "Bien où souhaites-tu l’enregistrer ?" et ce qu’il y a de fabuleux, c’est que j’ai ici la possibilité d’aller enregistrer dans le site que j’ai commencé à développer, que je veux. Donc si vous avez une flopée de sites et surtout si vous travaillez par exemple pour une holding, vous savez que la maison-mère va gérer certaines choses que les succursales et les filiales vont pouvoir récupérer mais c’est fabuleux parce qu’après on va pouvoir injecter des modèles où on le souhaite. Donc ici je vais l’injecter dans Dreamweaver, il me dit par défaut le nom du fichier mais moi je pourrais l’appeler "Principal" par exemple ; alors là, j’utilise un P majuscule, c’est un nom de fichier et je vais l’appeler "Principal" et j’enregistre mais j’ai pas de lieu d’enregistrement vous avez vu que j’ai pas trop le choix, donc dès que je fais Enregistrer, il me dit "Mettre à jour les liens ?" "Oui, mets-moi à jour les liens, s’il te plaît". là, on perd le visuel mais vous inquiétez pas, c’est juste temporaire, c’est que, ici, si je regarde bien, j’ai quitté cette zone-là et j’ai, Dreamweaver a créé un nom Templates, ici, comme Library, ne le changez jamais parce que Dreamweaver s’y réfère et la bibliothèque interne s’y réfère, et à l’intérieur il a stocké Principal.dwt – Dreamweaver template. Et ça aurait été exactement pareil si j’avais fait un fichier PHP au démarrage, parce que je peux très bien faire des templates Dreamweaver qui soient des templates PHP – donc utiliser une partie du template par Dreamweaver et utiliser une autre partie du template par le serveur –, et de surcroît, je peux même mettre du AJAX à l’intérieur qui va se charger en fonction. Donc vous voyez, ce n’est pas réducteur, au contraire, c’est vachement optimisateur, je trouve, parce que tout ce qui n’a pas besoin d’être réécrit, calculé par le proce bien autant le faire calculer par du dur en HTML. Par contre, ça va demander une petite tâche supplémentaire, ça veut dire que tous les fichiers enfants qui vont être fabriqués par ce template ne seront pas modifiés sur le serveur, donc il faudra les mettre à jour sur le serveur ; donc ce que je vous propose faire c’est chaque fois que vous allez devoir mettre à jour template Principal, c’est synchroniser votre site, placer tout le monde, y’a plus de synchronisation, d’accord ? OK, faut modifier le template, y’a à modifier tous les enfants, on va voir ça dans l’étape supplémentaire et après vous ferez, ici, Sélectionner tous les Modifiés récents et donc tout ce qui a été modifié depuis la mise à jour va apparaître et vous aurez plus qu’à les sélectionner, faire un clic droit dessus et faire Placer pour optimiser les temps de synchronisation, c’est juste ça. Bon alors, qu’en faisons-nous maintenant ? On a notre Principal.dwt, si je le regarde, vous voyez, le visuel est bien revenu, je me retrouve avec tout mon document tel qu’il était et par contre, j’ai quelques nouveaux TemplateBeginEditable qui se sont rajoutés que je n’avais pas mis, c’est Dreamweaver qui les a mis en l’enregistrant, c’est me permettre la possibilité de modifier le titre de la page et me permettre d’avoir un lien supplémentaire, c’est-à-dire de pouvoir injecter des CSS ou des JavaScript que je souhaiterai que pour les pages enfants que je vais créer, tout le reste va être verrouillé. Donc je le ferme. Comment l’utilise-t-on ? On va faire Nouveau, et puis dans Nouveau, au lieu de partir dans Nouveau document, Modèles de démarrage, je vais dans Modèles de site, et là, tous les sites que j’ai, quels qu’ils soient, vont apparaître, et je vais pouvoir utiliser le site, alors j’aurais pu aller utiliser un élément de HTML5 Production, de Preprocesseurs, ce n’est pas du tout gênant, justement, c’est ça qui est fabuleux, et là, je vais utiliser ceux de Dreamweaver Principal et là je lui vais dire "Bien je veux les mettre à jour quand la page est modifiée" et je fais Créer. Et là, Dreamweaver va me créer ce qu’il appelle un child template – un enfant du template. Vous voyez ici, tout ça s’est modifié, je ne peux pas le supprimer, ça reste en dur, verrouillé, la seule chose que je peux modifier ici, c’est tout ce qui va se passer au niveau du titre. Ici en amont, si je veux rajouter du PHP ou des choses qui seraient reniflées côté serveur avant que le code ne soit lu, ici, le fameux contenu de la page et puis ici en bas, je ne peux rien faire, je pourrais rajouter avant la fermeture HTML peut-être certains scripts si je veux optimiser, vous savez, pour le body ou les trucs comme-çà pour certains changements mais voilà, ici, je peux venir placer du contenu spécifique à cette page, quel que soit ce contenu. Donc on va pas le faire, c’est pas trop l’objectif ici, mais le contenu va apparaître dans cette partie-là, alors on le voit, il est juste là, il est tout petit mais il est apparu, donc il me faudrait rajouter la feuille de style pour le main bien entendu, chose qui n’a pas été faite. Moi, ce qui m’importe maintenant, c'est de pouvoir enregistrer ce document et ici, quand je vais l’enregistrer, je vais aller le placer dans la partie du Chapitre-11, dossier 8 et je vais l’enregistrer en 8 tout court, voilà. Ça, c’est mon document enfant, mon document qui va pouvoir travailler sur la partie HTML. Alors juste ce que je vais faire, c'est je vais en profiter pour aller dans le CSS, ici, aller dans la partie main et de mettre une utilisation, voilà, du contenu vous voyez, et puis je vais rajouter ici juste avant le main, un "clear: both ;" pour permettre au contenu de sortir de cet élément-là, voilà, je l’enregistre, et je vais pouvoir maintenant fermer ma page. Parfait. Si je rouvre mon contenu, ici, on voit bien que le contenu est toujours basé sur ce template-là. Je vais retourner dans mon template, ici, Principal, et quand j’ouvre le template Principal, je peux très bien avoir besoin ici de rajouter du contenu, par exemple je vais venir dans la base-01, ici, et je vais avoir travaillé tout ce qui est slider, social, aside, notamment. Donc je vais venir copier cette partie-là et je vais aller l’injecter donc dans la partie juste avant le main, ici, entre le header et le main, je vais venir coller cette partie-là qui me rajoute toute une série d’informations qui a été stylée – les styles sont dans les CSS déjà, etc. –, et vous avez compris qu’il faudrait bien entendu le faire. Si j’enregistre cette partie-là, parfait, le Dreamweaver template, mais à ce moment-là, Dreamweaver me dit "Mais attention, tu as une page, la 08.HTML, qui fait partie d’une liaison avec ce template, veux-tu la mettre à jour ?" "Oui, bien sûr, je la mets à jour", vous laissez faire le travail, vous dites "Fermer", vous fermez ce document et vous allez rouvrir maintenant directement la partie HTML qui va bien et là, à ce moment-là, vous voyez que la page a reçu la modification, a subi la modification et donc le template a été mis à jour. Voilà une des grosses souplesses du template, c'est que ça va permettre de générer du HTML qui ne sera pas ni calculé par la partie client, ni par la partie serveur et qui nous permettra, quand bien même, d’avoir une sorte de mutualisation de contenu partagé entre plusieurs pages.

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 !