L'essentiel de Dreamweaver CC 2017

Appliquer les liens depuis l'inspecteur

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Dreamweaver permet d'appliquer des liens hypertextes à un élément de différentes manières. Que vous soyez dans le code ou dans la fenêtre de rendu, tout fonctionne simplement et de la même manière.
07:50

Transcription

Dreamweaver nous propose un certain nombre d'outils pour pouvoir définir des liens hypertextes au sein des contenus. Ici je vous propose que nous relions l'ensemble de ces éléments, de listes, à chacune de ces pages ici prévues dans le dossier Adobe de la formation. Juste un petit mot en passant : là il a été utilisé une balise nav avec une balise ul uniquement c'est une construction purement arbitraire et non du tout référentielle : on aurait très bien pu placer le titre ici à l'intérieur, on aurait pu faire appel à autre chose qu'un élément de liste ici Quoi qu'il en soit, pour construire vos menus ou construire vos structures je vous invite vraiment à vous rapprocher du W3C sur cette page qui contient l'ensemble des éléments HTML et notamment au niveau de la balise nav de voir ce qui est permis de faire ou pas permis, ce qui est conseillé, etc. Ceci dit maintenant, on va pouvoir utiliser plusieurs manières pour relier nos éléments. Ce qu'il faut savoir, c'est que quelle que soit la manière que l'on va utiliser on a deux manières de définir le chemin d'accès qui sont soit relatives au documents, soit relatives à la racine du site. Ça peut se définir au coup par coup, mais ça se définit surtout, de manière générale, dans les paramètres avancés du site au moment de la génération du site, dans Infos locales. On choisit si on est relatif au document ou relatif à la racine du site. Ici on est relatif au document, c'est-à-dire que le chemin d'accès va être défini en fonction de cet élément de cette page. Ici je suis sur la page 07_01, donc le chemin va être indiqué par rapport à lui. Si je veux aller sur une page qui soit dans Chapitre 05, on devrait faire un ../, ../ pour sortir, rentrer dans le Chapitre 05, etc. Si je suis relatif à la racine du site, je partirais d'un /, donc je partirais de la racine qui serait ici si elle a été définie ainsi, ça serait /Chapitre05 directement. Si je voudrais venir sur une page qui serait à l'intérieur ici, en relatif au document : la page serait directement festival.html et si je suis relatif au site, ça sera : /Chapitre07/FR_1368_07_01/festival.html C'est tout ce qu'il faut savoir. Par contre vous pouvez le régler également au coup par coup. Ce qui est important de comprendre, c'est que ce qui est réglé ici va servir aussi si vous redéfinissez des chemins en les recherchant à remplacer ou par des déplacements de fichiers alors que celui qu'on va voir maintenant, c'est-à-dire que si j'ouvre une boîte de dialogue depuis l'inspecteur de propriétés vous voyez que je peux être relatif au document ou au site au coup par coup pour chacun de mes éléments. Il me suffit de pointer vers festival.html, et en validant sur OK, je viens de placer le lien directement dans mon élément. Maintenant, si je prends l'élément partenaire je peux utiliser le fameux Picwic Vous voyez qu'ici j'ai une petite cible il suffit de prendre picwic comme ça de venir sur partenaires.html, et de lâcher, et bingo j'ai fait un élément avec partenaires. On pourrait aussi prendre le livre d'or et vous voyez que quand je viens sur l'élément li je vais pouvoir définir ici si je veux un lien. En ayant sélectionné l'élément, je vais pouvoir cliquer sur le lien et soit j'entre le lien directement, soit je clique sur le dossier ici, je vais pointer « livre d'or », je lâche, ici je l'ai fait, et je vais valider. Faites bien attention de valider avec un retour chariot. Et vous avez pu entrer le lien. Ici si je prends un historique, je pourrais faire un petit Ctrl+T directement et puisque je fais un Ctrl+T, je peux le faire ici mais je peux le faire également dans la partie de rendu je vais pouvoir faire un Ctrl+T, comme je disais, et faire un a, et puis je vais venir sur href=. Par contre je n'ai pas de Picwic donc il va falloir que je fasse mon lien vers historique ici : historique.html Cela tombe bien, c'est une page que je n'avais pas dans la partie. Ici je valide, vous voyez que ça tombe bien, j'ai pu faire mon élément et c'est parfait. Enfin on a d'autres possibilités qui seraient de dire que ici je vais créer une balise a. Alors je vais taper a tout simplement. J'ai un petit soucis c'est que je vais garder le blog ici, je vais le couper, Ainsi ça sera plus facile. Je vais taper a et je vais valider. Vous avez vu qu'en validant, automatiquement ça m'a créé une balise a href=. C'est Emmet qui fait partie... On le verra dans une étape dédiée à l'éditeur de code, qui me permet de générer du code plus rapidement avec des raccourcis clavier. Là j'ai simplement taper la lettre a je fais la touche Tabulation, juste derrière et ça me génère et place le curseur à l'intérieur de href=. Là je fais Ctrl+espace ou Cmd+espace sur Macintosh et ici vous voyez, il me propose un certain nombre de liens que j'ai eu directement parce que j'ai créé ces pages il y a quelques instants donc je les ai ici sous le capot, elles sont accessibles mais elles sont surtout accessibles par rapport au fait que je suis dans le dossier. Pourquoi on s'en passe ? Je pourrais directement avec les flèches venir choper blog.html, mais je peux rester dans Parcourir aussi pour pouvoir ouvrir mon document, le valider et puis placer mon lien. Je vais enregistrer ma page. On s'est aperçu que blog c'était bien mais j'aimerais quand même le blog puisse aller sur la partie historique parce que le blog ça va être en ligne. Si je viens, regardez ce qu'il se passe et que je renomme ceci en historique, je le renomme, il me dit : attention il y a une page qui fait relation à cet élément là et il le fait par rapport à ce chemin relatif. Je mets à jour. Et là il me le fait à un chemin relatif au document et non pas au site comme il faisait tout à l'heure parce que c'est deux outils différents. Celui qui gère là maintenant c'est celui qui exécute la maintenance. Ici il ne nous reste plus qu'à lier le mot historique. Alors si je le veux, là c'était le blog. Je vais copier le blog ici. Si maintenant, je souhaite donner à ce blog un lien qui soit extérieur, je pourrais taper : http://leblog.site.com par exemple. C'est un site factice, mais je vais pouvoir lier directement chacun de mes liens. On voit bien qu'on a pu faire des liens, et chaque fois ces liens par défaut vont remplacer dans la page du navigateur. On peut tout à fait venir définir ce qu'on appelle une target dans l'inspecteur de propriétés, je veux dire on a ce qu'on appelle le target, la cible qui va pouvoir être définie _blank, new, _parent, _self et _top. On pourrait les appeler aussi Étienne, Rita, Ernest... Peu importe le nom qu'on va donner, ça donnerait le nom de programmation de la fenêtre qui va s'ouvrir. Donc new n'est pas un nom réglementaire. _blank, _parent, _self et _top sont des noms recommandés par le W3C. _new est un nom qui est devenu usuel parce qu'on se dit qu'à chaque fois que je vais utiliser _blank comme target on me dit que je vais ouvrir un nouvel onglet. Mais chaque fois que je vais cliquer sur ce lien, je vais générer un nouvel onglet, et même s'il y a déjà un nouvel onglet qui a été généré il m'en générera un autre. Donc très rapidement, si tous ces liens ont du _blank, il suffit que je clique une fois sur chacun je vais ouvrir cinq, six, sept fenêtres sur le même site. Si j'utilise new maintenant ici chaque fois que je vais utiliser new il va chercher une fenêtre qui s'appelle new; et comme il y en a déjà une qui s'appelle new la seconde s'appellera également new etc. Ça va faire que je n'ouvrirai qu'une seule fenêtre. Bien entendu, on aurait très bien pu mettre n'importe quel nom ici on pourrait mettre xxxx et ça marcherait exactement pareil sauf que xxxx, ça ne voudra rien dire pour personne. alors que pour new, internationalement tout le monde comprend que c'est une nouvelle fenêtre. et donc on utilise plus souvent new maintenant que blank. parce que _blank va générer tout autant de fenêtre que l'on a besoin. Les autres possibilités que l'on a qui sont _self, _parent et _top on va dire qu'elles sont devenues quasiment obsolètes. Elles ne servent plus, elles servaient à l'époque où on faisait des frameset, des sites avec des jeux de cadre. On disait que _parent tu allais dans le cadre parent. _self c'est la version par défaut : si tu vas à la place de là où tu es et _top si tu vas dans le cadre qui est au-dessus du tien. C'est tout simplement un peu obsolète. C'est resté parce que c'est standard mais on n'aura pas forcément l'utilisation aussi fréquente qu'en générant des liens dans des sites contemporains. Pour pouvoir faire directement des liens vers des pages, vous avez vu qu'on a un certain nombre d'outils qui sont tout autant utiles les uns que les autres, tout va dépendre où ils se situent dans la page au moment de vouloir générer un lien.

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 !