Créer un site web avec Dreamweaver CC

Créer un template de page

Testez gratuitement nos 1272 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dreamweaver propose également des templates. Créez des templates et utilisez-les sur la base de votre index de travail. Bien entendu, toute modification du template se répercutera sur l'ensemble des pages enfants.
06:30

Transcription

Il se peut que nous ayons besoin de réutiliser certaines parties de la structure de la page comme par exemple la barre de menu ici et le footer. Généralement, il n'y a que l'intermédiaire et éventuellement le aside qui risquent de changer pour chacune des pages. Pour cela, utiliser systématiquement des éléments de librairie peut être un peu contraignant. Nous allons voir qu'il existe une autre approche qui s'appelle le template, le modèle. Pour cela, on va encore optimiser notre fichier index.html en réduisant le nombre de feuilles de stylesheet qu'il y avait par le passé. C'est-à-dire qu'il suffit d'aller dans le dossier webfonts ici, de créer une méga stylesheet, et puis de placer autant de fontface que tous les éléments. Il y a simplement les chemins à refaire puisque là où la source se trouvait à la racine puisque chaque stylesheet se trouvait à l'intérieur, il va falloir ajouter le même nom qui est le nom de dossier comme ça, tout simplement. Cette feuille de style, va permettre de ne faire qu'un lien au niveau de la feuille d'importation ici, donc si je regarde au niveau des CSS, « imports », ici, à ce niveau-là, au lieu d'avoir tous les liens que l'on avait par le passé, on n'en a plus qu'un seul maintenant, qui pointe vers la méga stylesheet. Cette optimisation faite, on a pris soin également de rajouter dans metadata la balise copyright, ici, qui va permettre, et on a recompilé dans Shrinker pour avoir un nouvel index.css optimisé cette fois-ci avec une seule feuille de style importée. Donc, on va faire un Enregistrer sous de ce document index.html, je vais le laisser à la base pour une fois et je vais l'appeler « indexBase.html » Enregistrer. On enregistre ce document. On peut fermer l'autre document. Ici, on va se retrouver dans la partie médiane, c'est-à-dire en intégrant le slider, le social, le aside et le main. On va pouvoir récupérer toute cette partie-là, sauf le footer. Et dans cette partie-là, maintenant, à la place, on va marquer ici, un contenu un simple mot comme ça, pas besoin de mettre une balise, on va simplement marquer contenu. Et dans cette partie contenu, on va maintenant venir dans les onglets du haut ici, choisir l'onglet « Modèle » et on va choisir la possibilité de créer une région modifiable autour de ce contenu. Dreamweaver m'informe en me disant attention ça va devenir un modèle puisque tu mets une région modifiable, donc je le convertis. Oui, oui, convertis-le. Et là, on va l'appeler « Contenu » avec un C majuscule ou un C minuscule c'est à vous d'opter pour votre convention. Personnellement j'opte pour le C minuscule. On dit OK. Vous avez vu que comme pour les éléments de librairie, Dreamweaver cette fois-ci me met un élément en mauve ici en me disant « TemplateBeginEditable name=contenu », mais il en place également deux, vous allez voir, sur la partie haute dès que je vais enregistrer. Donc ici, j'enregistre. Il me dit, mais attention, ce n'est plus un document normal, donc je te fais un enregistrement comme un modèle. Souhaites-tu l'enregistrer dans le site qui s'appelle Festival, ce site-là ? ou aller l'enregistrer ailleurs ? Non, non, on va l'enregistrer dans le site qui s'appelle Festival. On pourrait apporter une description, et je vais l'enregistrer comme indexbase, ça me va très bien et je vais faire Enregistrer. Donc à ce moment-là, on met à jour les liens, Dreamweaver va générer, comme je vous le disais deux parties mauves dans la partie d'en-tête, d'une première autour du titre, puisqu'il me dit toutes les pages pourraient avoir un titre différent, et dans la partie juste avant la fermeture de « head », en me disant toutes les pages pourront lier des CSS qui leur seront propres, ou des java scripts qui leurs seront propres. Sinon, je n'ai plus que ma zone de contenu du milieu. Je ferme ce document, et ici, si je regarde dans l'arborescence, j'ai un nouveau dossier qui est apparu qui s'appelle « Templates » et ce dossier template contient un document qui s'appelle indexBase.dwt. Si j'avais créé un document à partir de PHP, le document s'appellerait indexBase.php.dwt. L'extension n'a plus du tout d'importance parce que sa véritable extension maintenant c'est dwt qui veut dire Dreamweaver Template. Ce dossier « Templates », comme le dossier « Library » qui a été créé au préalable pour les éléments de librairie, ne doivent pas être modifié, Dreamweaver les recherche sous cette orthographe, cette appellation-là, et cette lisibilité-là, c'est-à-dire haute casse pour la première lettre et minuscule pour le reste. On peut en profiter pour les prendre tous les deux plus même le « sass-cache » qui avait été créé il y a fort longtemps et les voiler directement parce qu'on n'a pas à faire de ces fichiers sur le côté serveur. Alors on me dit que voilà, je n'affectera pas, pas de souci, je suis d'accord, on va directement voiler ces éléments-là. L'indexBase.html ne me sert plus non plus, il m'a servi juste que pour la création de l'élément. On va pouvoir le voiler. Parfait. Vous vous rappelez, j'ai copié mes éléments pour l'instant. Donc si je fais maintenant un Nouveau document et cette fois-ci ce nouveau document, je vais prendre, ce qu'on appelle les « Modèles de site ». Et là, dans les Modèles de site, je vais travailler sur le modèle « Festival », j'ai l'indexBase qui apparaît. Je m'assure que la case à cocher qui met à jour le document quand le modèle est modifié, bien sûr, elle est cochée. Et là, je vais créer un élément. Et vous voyez que ma page est prête avec un élément de contenu, qui est le seul élément modifiable. Tout le reste, c'est pas modifiable. Si je sélectionne et que je supprime, ce n'est pas modifiable. Alors bien entendu que, la partie script application, pour le Festival il n'y a pas de souci, elle peut rester là, mais assurez-vous de bien avoir « json+ld » qui a été importé dans le document de base qui est une corrélation avec l'intégralité des pages du site. Parce que là, ce template concerne l'intégralité des pages du site. Je peux faire un Retour chariot ici dans la page du Contenu, et je vais coller toute la partie de ma page de départ qui était ma véritable page d'index. Et ici si je fais Enregistrer maintenant, j'ai mon nouvel Index ici, et là je vais pouvoir l'appeler « indexréel ». Vous l'appelez comme vous voulez bien entendu, ce serait lui le véritable index qui s'appellerait index tout court, mais comme c'est un peu une aparté, on va l'appeler indexreel comme ça entre nous. Et je vais le mettre à la racine du site, sans souci. Enregistré. Parfait. Maintenant on peut créer tout autant de pages que l'on veut à partir de ce template, et dès qu'on modifiera le template, vous l'avez compris, tout se modifiera dans les pages enfants.

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 !