L'essentiel de Dreamweaver CC 2017

Modifier la structure avec la palette DOM

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Une fois la structure en place, vous aurez probablement besoin de la remodeler, de la modifier ou de la compléter. Là encore Dreamweaver propose un certain nombre d'outils que vous pourrez utiliser aussi bien en mode code qu'en mode de rendu.
05:03

Transcription

Une fois la structure mise en place, il est fréquent que nous ayons besoin de la réorganiser, de la redispatcher au sein du document. Donc, il y a plusieurs façons, la première c'est le code ici. Je peux prendre un glissé déposé, prendre cet élément-là, le glisser directement à un autre endroit et ça réorganise la structure. Qu'il s'agisse d'un simple élément ou d'un élément beaucoup plus volumineux, comme par exemple ici un élément de div, je vais pouvoir le déplacer et le réorganiser à mon gré, comme je le souhaite. On a la possibilité aussi depuis le mode en direct de réorganiser tous ces éléments. Si je prends par exemple un élément de liste ici, le blog vous voyez que lorsque je survole l'élément de liste ici j'ai une petite main qui apparaît. Il me suffit de prendre cet élément, et de le descendre dans l'imbrication pour pouvoir le réorganiser comme ça en le passant dessus en le passant dessous, voilà donc de pouvoir réorganiser cet élément. Vous avez vu que si je prends un élément plus volumineux comme par exemple, ici je vais venir chercher le header. Alors ici j'ai le slider. Si je prends un élément plus volumineux, et que je souhaite le désimbriquer de là et le placer ailleurs, regardez j'ai des éléments verts qui apparaissent. Vous voyez, l'élément vert me dit je vais le placer au dessus de cet élément-là. Si je prends certaines parties vous voyez l'élément va le placer devant l'élément festival et comme ça donc ça va être plus facile pour venir le réorganiser et le déplacer, le restructurer comme je le souhaite. Donc ici on a tout des éléments qui vont pouvoir être utilisés par contre vous voyez ici volontairement j'ai ouvert le code. Ici je suis ppas placé vraiment en amont de cet élément et donc ça devient un peu compliqué donc ici je vais faire quelques éléments de type Z ici, Ctrl Z pour réorganiser. Il existe une palette qui s'appelle la palette de Dom et qui va me permettre, document object, model, de réorganiser cette structure. Donc regardez ici je sélectionne le blog et vous voyez que je peux déplacer j'ai toujours ce petit marqueur vert qui m'indique les emplacements où venir le déposer et vous voyez que c'est beaucoup plus souple, beaucoup plus facile de pouvoir le réorganiser de la sorte. C'est exactement pareil pour le slider ici. Si je prends la partie du slider, alors je vais fermer tous ces éléments, ici voilà je prends le div slider, et je vais pouvoir prendre tout cet élément-là et venir le glisser comme je le veux au sein de l'interface. Si je survole le header, je vais pouvoir venir à l'intérieur du header pour pouvoir l'imbriquer. D'accord mais si je ne veux pas le placer à l'intérieur du header, ici, donc je vais pouvoir le placer juste après le header ici vous voyez il suffit de ne pas le sélectionner et voilà. Là vous voyez que cette fois-ci, il n'y a pas de sous imbrication dans les div qui pourraient causer un souci. Donc soit vous utilisez la petite main ici sur les éléments dans certains cas ça va être très utile, soit vous utilisez le code par copier coller ou simplement glisser déposer comme ça pour pouvoir restructurer les éléments très rapidement et rès facilement. Soit vous allez pouvoir utiliser directement la palette de Dom ici qui va être très utile et très souple à utiliser. Il y a ausi une autre possibilité. Si c'est vraiment au niveau structurel que vous devez intervenir, vous pouvez fermer tous les petits éléments ici comme ça ce qui fait que si vous prenez un élément ici, alors je vais les déselectionner, donc maintenant en réouvrant uniquement l'élément à déplacer je vasi pouvoir venir le sélectionner comme ça et pouvoir le glisser directement à la fin d'un élément sans avoir à faire défiler l'intégralité du document. Cette palette de Dom nécessite à elle seule aussi une exploration beaucoup plus profonde, regardez. Vous avez, à chaque fois que vous sélectionnez un élément, un petit plus qui apparaît. Si vous sélectionnez ce plus, ça vous dit insérez avant, insérez après ou insérez un enfant. Maintenant vous pouvez aussi entourer de balises c'est-à-dire placer une balise autour du header. Insérer avant ça va vous placer un élément de type div juste avant. Vous pouvez également venir ici cliquer droit sur cet élément de div et le couper. Maintenant si vous venez autour du main ici, et si vous faits insérer après, vous allez insérer ce div juste après. Voilà donc vous allez pouvoir déplacer des balises en les copiant, les collant en leur insérant des enfants, et bien sûr à tout niveau, ça va se reproduire. Vous avez soit ce petit plus qui vous permet une action, soit un clic droit sur l'élément qui vous permet une autre action. Donc vraiment ça va vous permettre de pouvoir travailler de manière très souple dans la structure du document en pouvant être extrêmement précis en utilisant la partie de Dom. En étant précis également et souplement en utilisant le code et en fermant des balises pour vous éviter de faire défiler un document qui pourrait être très long ou en utilisant directement la petite main ici qui va vous permettre de pouvoir déplacer. La touche echappement vous permet de sortir des boites de dialogue ici. donc en récupérant cet élément, de pouvoir le déplacer et le faire glisser déposer sur les parties qui vous intéressent au niveau structurel.

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 !