L'essentiel de Dreamweaver CC 2017

Ancrer les liens internes

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Pour placer des points d'ancrage au sein de la même page, utilisez tout simplement l'outil Rechercher/remplacer. Ainsi, vous pourrez ajouter à la fois des liens et des attributs d'ancrage.
05:46

Transcription

Dans certaines pages qui possèdent des contenus très longs, il peut être intéressant de rajouter ce qu'on appelle des accès directs, ou des liens à des points d'ancrage. On va construire tout de A à Z dans Dreamweaver et on va voir que c'est relativement simple à utiliser. Ici déjà dans tous les Lorem ipsum il va falloir faire des liens vers ce qu'on appelle des ancres. Ces ancres ne vont être ni plus ni moins que des points nommés ici dans Dreamweaver. On pourrait l'utiliser de manière non-code en faisant des insertions ici. Ce sont des éléments de html, donc ça va être des ancres quelque part mais ça devient quelque part trop compliqué je trouve à installer. C'est tellement plus simple de faire dans le code. Pour ceux d'entre vous qui ne sont pas très orientés code, rassurez-vous, ça va être extrêmement simple. Regardez : ici on a l'intégralité du contenu vers lequel on va vouloir faire des ancres et lier. J'ai placé en gras tous les éléments, tous les débuts de phrases parce que c'est eux qui vont nous servir d'indice par rapport à des liens que l'on aura créés dans la partie haute. Vous voyez ici j'ai un lien vers Lorem ipsum dolor sit amet qui va venir vers ce paragraphe. En gros, l'idée est que quand je clique là, je vois celui-là, quand je clique là, je vois celui-là, etc. Pour faire cela, on a un élément de liste au départ et des p juste après. Donc il va falloir faire deux choses. La première chose ça va être de créer des ancres pour tous ces éléments. Regardez ce que l'on va faire, on va sélectionner un li on va faire un Ctrl+C c'est beaucoup plus rapide que toute autre chose, on va faire Ctrl+H pour rechercher et remplacer, et ici je lui dis que je veux remplacer les li par un li et un ahref=# je mets une ancre, ou je ne mets pas d'ancre on va laisser tel quel, et je fais ça. Là je lui dis dans le document actif tu me recherches tous les li et tu les remplaces par ça. Je vais Remplacer tout sans chercher à comprendre. Je peux fermer ma fenêtre de résultats. Ici maintenant je vais rechercher tous les li qui se ferment. Ctrl+C Ctrl+H. Là je lui dis que je vais placer une fermeture d'ancre et je vais faire un Ctrl+V, une fermeture de li. Je fais Remplacer tout. Bingo, c'est fait. Je ferme ma fenêtre de Rechercher. On a fait tous nos liens. Maintenant on a besoin de créer des points d'ancrage dans chacune de nos balises p. Ces points d'ancrage, on peut les faire vers des Id, des identifiants ou vers des names. Vous les faîtes vers ce que vous voulez. Pour ma part, je préfère le faire vers du name. Maintenant, on peut le faire vers les deux. Le name parce qu'on a une rétro compatibilité vers tous les navigateurs. Si vous ne le faîtes que vers l'id, certains navigateurs ne vont pas fonctionner. Seulement dans beaucoup de cas, on va faire du javascript avec du getElementbyId. Rien ne vous empêche, rien ne ne vous gêne de mettre les deux. Pour toutes mes balises p, je lui ai dit : tu me les remplaces par du nameId. Et je fais Remplacer tout. Ici ça c'est terminé. J'ai préparé mes points d'ancrage et mes ancres. Il va suffire que je revienne manuellement maintenant un par un, leur donner des ancres qui vont être : a pour la première par exemple, b pour la deuxième, et je vais donner le même nom. Donnez des noms beaucoup plus explicites, là je le fais de manière très succincte et très simple pour que ça soit plus rapide et plus, on va dire, mécanique. C'est un d ici. Et le dernier ou avant-dernier, je ne sais plus, on va mettre un e. Tout simplement. Là c'est terminé. Ici maintenant, quand je vais avoir mon href= je vais pointer vers un # cette fois-ci pour le côté identifiant Id bien que ça soit des names à l'époque qui étaient utilisés, #a, l'ancre numéro a. Je vais faire pareil pour #b. C'est pour ça que je voulais mettre des # tout à l'heure au départ, des ancres par défaut. Un #c, Un #d. Il me semblait qu'il y avait un autre #, il y a une petite erreur quelque part qui a dû rentrer. A, b, c, d... E. Voilà c'est ici que ça a loupé donc ici on va décaler le e. On va rajouter la dernière lettre ici : le f. Une fois que toutes ces ancres ont été placées ici maintenant, je peux enregistrer. et ouvrir ma page dans un navigateur par exemple ici Chromium. Si je tape sur Lorem, je viens sur le premier, mais si je tape... Je vais cacher. il faudrait passer dans une fenêtre plus petite pour avoir plus de visualisation possible, Si je tape sur Morbi, vous voyez bien que vous venez à Morbi. Par contre je n'ai rien qui me ramène sur la partie haute ici. Donc si je veux venir dans In hac, c'est parfait mais je n'ai rien qui me ramène. Ce que je vous propose de faire, c'est de revenir ici, et de reprendre de la partie des p qui se ferme comme ça. Alors bien sûr vous prendrez de la balise fermante si c'était un article ou une section, vous faîtes un Ctrl+C Ctrl+H et vous faîtes un Ctrl+V, mais juste avant on va rajouter : un a directement, href= on met simplement qu'un seul # à l'intérieur on marque Retour, ou vous marquez ce que vous voulez, un mot, une flèche, un dessin, etc, /a et vous faîtes un petit retour comme ça pour remonter et vous dîtes Remplacer tout sur tous les éléments de p. Ici on peut fermer. On va enregistrer notre page. On rebascule dans la fenêtre de navigateur ici. On recharge la page. Ici si je viens sur Lorem ipsum, je peux faire un retour, je peux dire sur Morbi je vois Morbi, je vois Retour et je remonte. Je vois Vestibulum et là je remonte. Ici vous avez mis en place une navigation par ancres au sein de la même page. C'est très simple à mettre en place. C'est vrai que ça se fait plus du côté du code que du côté de l'interface utilisateur de Dreamweaver mais c'est tellement plus vite fait avec Rechercher et Remplacer que des fois il ne faut pas s'embêter à essayer de le faire de manière visuelle.

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 !