Apprenez à configurer des liens de navigation entre vos pages web. Liez des fichiers et des documents, mettez à jour, modifiez et testez des liens sous Dreamweaver.

Avant de créer des liens, assurez-vous de bien comprendre le fonctionnement des chemins relatifs au document, des chemins relatifs à la racine du site et des chemins absolus. Vous pouvez créer plusieurs types de liens dans un document :

  • Un lien vers un autre document ou fichier, tel que le fichier d’une image, d’une animation, d’un PDF ou d’un son.

  • Un lien vers une ancre nommée, qui permet de sauter à un emplacement spécifique au sein d’un document

  • Un lien de courriel, qui crée un courriel vierge avec l’adresse du destinataire déjà indiquée

  • Des liens nuls et de script, qui permettent d’affecter des comportements à un objet ou de créer un lien qui exécute un code JavaScript

Utilisez l’inspecteur Propriétés et l’icône Pointer vers un fichier pour créer des liens à partir d’une image, d’un objet ou d’un texte vers un autre document ou fichier.

Dreamweaver crée les liens vers d’autres pages de votre site à l’aide de chemins relatifs au document. Vous pouvez toutefois demander à Dreamweaver de créer les nouveaux liens à l’aide de chemins relatifs à la racine du site.

Remarque :

il est conseillé de toujours enregistrer un nouveau fichier avant de créer un chemin relatif au document, car ce dernier n’est pas valide sans point de départ bien défini. Si vous créez un chemin relatif au document avant d’enregistrer le fichier, Dreamweaver utilise provisoirement un chemin absolu commençant par file:// jusqu’à ce que le fichier soit enregistré. Dreamweaver convertit alors le chemin file:// en chemin relatif.

Vous pouvez associer un comportement à n’importe quel lien d’un document. Les comportements décrits ci-dessous peuvent être très intéressants lorsque vous insérez des éléments liés dans vos documents.

Texte de la barre d’état

Permet de spécifier le texte d’un message et de l’afficher dans la barre d’état dans la partie inférieure gauche de la fenêtre du navigateur. Par exemple, vous pouvez utiliser ce comportement pour décrire la destination d’un lien dans la barre d’état, au lieu d’afficher l’URL associée

Ouvrir la fenêtre Navigateur

Ouvre une URL dans une nouvelle fenêtre. Vous pouvez spécifier les propriétés de la nouvelle fenêtre, notamment son nom, sa taille et ses attributs (redimensionnable ou non, dispose d’une barre de menu ou non, etc.).

Menu de reroutage

Modifie un menu de reroutage. Vous pouvez modifier la liste du menu, spécifier un fichier lié différent ou changer l’emplacement du navigateur dans lequel ouvrir le document lié.

Vous pouvez utiliser l’icône de dossier de l’inspecteur Propriétés ou la zone Lien pour créer des liens à partir d’une image, un objet, du texte ou tout autre document ou fichier.

  1. Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
  2. Ouvrez l’inspecteur Propriétés (Fenêtre > Propriétés) et procédez de l’une des manières suivantes :
    • Cliquez sur l’icône représentant un dossier située à droite de la zone Lien pour rechercher et sélectionner un fichier.

      Le chemin d’accès du document pointé par le lien s’affiche dans la zone URL. Utilisez le menu contextuel Relatif à dans la boîte de dialogue Sélectionner un fichier pour spécifier si le chemin est relatif à la racine ou au document, puis cliquez sur OK. Le type de chemin sélectionné ne s’applique qu’au lien actif. Vous pouvez modifier le paramètre par défaut de la zone Relatif à pour le site.

    • Tapez le chemin et le nom de fichier du document dans la zone Lien.

      Pour créer un lien vers un document de votre site, indiquez un chemin relatif au document ou à la racine du site. Pour créer un lien vers un document situé en dehors du site, indiquez un chemin absolu, avec le type de protocole (par exemple, http://). Vous pouvez utiliser cette approche pour entrer un lien vers un fichier n’ayant pas encore été créé.

  3. Dans la liste déroulante Cible, sélectionnez l’emplacement dans lequel ouvrir le document :

    • _blank charge le document lié dans une nouvelle fenêtre, sans nom, du navigateur.
    • _parent charge le document lié dans le cadre parent ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié est chargé dans la fenêtre de base du navigateur.
    • _self charge le document lié dans le même cadre (ou la même fenêtre) que le lien. Il s’agit de la cible par défaut, il est donc en général inutile de la spécifier.
    • _top charge le document lié dans la fenêtre de base du navigateur, en supprimant tous les cadres.
    • _new charge le document lié dans une nouvelle fenêtre.
  1. Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
  2. Créez un lien de l’une des deux façons suivantes :
    • Faites glisser l’icône « Pointer vers un fichier »  (icône cible), sur la droite de la zone Lien de l’inspecteur Propriétés, et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers.

    • Tout en maintenant la touche Maj enfoncée, faites glisser le pointeur de la souris depuis la sélection et pointez sur une ancre visible dans le document actuel, une ancre visible dans un autre document ouvert, un élément possédant un ID unique ou un document dans le panneau Fichiers.

    Remarque :

    vous pouvez créer un lien vers un autre document ouvert à condition que vos documents ne soient pas agrandis dans la fenêtre de document. Pour afficher les documents en mosaïque, sélectionnez Fenêtre > Réorganiser > Cascade ou Fenêtre > Réorganiser > Mosaïque. Lorsque vous pointez vers un document ouvert, celui-ci passe au premier plan de votre écran pendant que vous effectuez votre sélection.

La commande Hyperlien vous permet de créer un lien vers une image, un objet ou vers un autre document ou fichier.

  1. Placez le curseur à l’endroit du document où vous souhaitez que le lien apparaisse.
  2. Exécutez l’une des manières procédures suivantes pour afficher la boîte de dialogue de l’hyperlien :

    • Choisissez Insertion > Hyperlien.

    • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Hyperlien.

  3. Dans le champ Texte, saisissez le texte du lien.
    Dans le menu contextuel Lien, sélectionnez le nom du fichier vers lequel établir le lien. Vous pouvez également cliquer sur l’icône du dossier pour naviguer jusqu’au fichier vers lequel vous souhaitez créer un lien.

  4. Dans le menu déroulant Cible, choisissez la fenêtre dans laquelle le fichier devra s’ouvrir ou tapez son nom

    Les noms de tous les cadres du document actif apparaissent dans la liste déroulante. Si vous spécifiez un cadre inexistant, la page liée s’ouvre dans une nouvelle fenêtre portant le nom que vous avez spécifié. Vous pouvez également choisir parmi les noms de cible réservés suivants :

    • _blank charge le fichier lié dans une nouvelle fenêtre sans nom du navigateur.
    • _parent charge le fichier lié dans le jeu de cadres parent, ou dans la fenêtre parente du cadre contenant le lien. Si le cadre contenant le lien n’est pas imbriqué, le document lié sera chargé dans la fenêtre de base du navigateur.
    • _self charge le fichier lié dans le même cadre, ou dans la même fenêtre, que le lien. Cette cible étant celle par défaut, vous n’avez généralement pas à la spécifier.
    • _top charge le fichier lié dans la fenêtre de base du navigateur, supprimant ainsi tous les cadres.
    • _new charge le document lié dans une nouvelle fenêtre.
  5. Dans la zone Ordre des tabulations, tapez une valeur correspondant à l’ordre de l’onglet.
  6. Dans la zone Titre, tapez un titre pour le lien.
  7. Dans la zone Clé d’accès, tapez une équivalence de clavier (une lettre) pour sélectionner le lien dans le navigateur.
  8. Cliquez sur OK.

Par défaut, Dreamweaver crée les liens vers d’autres pages de votre site à l’aide de chemins relatifs au document. Pour utiliser des chemins relatifs à la racine, vous devez d’abord définir un dossier local sous Dreamweaver en choisissant un dossier racine local qui servira d’équivalent à la racine des documents sur le serveur. Dreamweaver utilise ce dossier pour déterminer les chemins relatifs à la racine pointant vers des fichiers.

  1. Choisissez Site > Gérer les sites.
  2. Dans la boîte de dialogue Gérer les sites, double-cliquez sur votre site dans la liste.
  3. Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos locales.
  4. Définissez le chemin relatif des nouveaux liens en sélectionnant l’option Document ou Racine du site.

    Lorsque vous cliquez sur OK, la modification de ce paramètre ne convertit pas le chemin des liens existants. Le paramètre ne s’applique qu’aux nouveaux liens créés avec Dreamweaver.

  5. Cliquez sur Enregistrer.

    Le paramètre du nouveau chemin ne s’applique qu’au site actif.

Vous pouvez utiliser l’inspecteur Propriétés pour établir un lien vers une section donnée d’un document en créant au préalable des ancres nommées. Les ancres nommées permettent de définir des marqueurs dans un document et sont souvent placées au niveau d’une rubrique spécifique ou en haut d’un document. Vous pouvez ensuite créer des liens vers ces ancres nommées, qui amènent rapidement le visiteur à la position spécifiée.

La création d’un lien vers une ancre nommée s’effectue en deux étapes : il faut d’abord créer l’ancre nommée, puis créer un lien pointant sur elle.

Création d’un ancrage

  1. Dans la fenêtre de document, sélectionnez et mettez en surbrillance l’élément que vous souhaitez définir comme ancrage.

  2. Ouvrez l’Inspecteur des propriétés et vérifiez si l’élément sélectionné possède un ID. Si le champ ID est vide, ajoutez un ID. Ancrage, par exemple.

    Création d’un ancrage
    Création d’un ancrage

    Une fois que vous avez ajouté l’ID, vous pouvez constater la modification du code. id="<ID name>" est inséré dans le code au niveau de votre sélection.

    ID d’ancrage dans le code
    Ajout d’un ancrage pour établir une liaison

  1. Dans la fenêtre de document en mode Création, sélectionnez le texte ou l’image à partir desquels créer le lien.
  2. Dans la zone Lien de l’inspecteur Propriétés, tapez le signe dièse (#) et le nom de l’ancre. Par exemple, pour créer un lien vers une ancre nommée « début » dans le document actif, tapez #top. Pour créer un lien vers une ancre nommée «début» dans un autre document figurant dans le même dossier, tapez filename.html#top.

    Remarque :

    la casse (majuscules/minuscules) est importante dans les noms d’ancre.

  1. Ouvrez le document contenant l’ancre nommée.

    Remarque :

    Si vous ne voyez pas l’ancrage, en mode Création, sélectionnez Affichage > Options du mode Création > Assistances visuelles > Éléments invisibles, pour rendre les ancrages visibles.

  2. Dans la fenêtre de création du document, sélectionnez le texte ou l’image à partir desquels créer le lien (s’il s’agit d’un autre document ouvert, vous devez basculer sur celui-ci).
  3. Effectuez l’une des opérations suivantes :
    • Cliquez sur l’icône du pointeur (icône cible) à droite de la zone Lien de l’inspecteur Propriétés et faites-la glisser sur l’ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.

    • En maintenant la touche Maj enfoncée, dans la fenêtre de document, faites glisser l’image ou le texte sélectionné sur l’ancre vers laquelle vous souhaitez créer un lien, dans le même document ou dans tout autre document ouvert.

Un lien de courriel ouvre une nouvelle fenêtre de message (dans le programme de messagerie associé au navigateur de l’utilisateur) lorsque l’utilisateur clique dessus. La zone A : de la fenêtre du courriel est automatiquement complétée par l’adresse indiquée dans le lien.

  1. Dans la fenêtre de document, placez le curseur à l’endroit où afficher le lien de courriel ou sélectionnez le texte ou l’image qui doit représenter ce lien.
  2. Procédez de l’une des manières suivantes pour insérer le lien :
    • Choisissez Insertion > Lien de messagerie.

    • Dans la catégorie Commun du panneau Insertion, cliquez sur le bouton Lien de messagerie.

  3. Dans la zone Texte, saisissez ou modifiez le corps du courriel.
  4. Dans la zone Adresse électronique, tapez l’adresse électronique, puis cliquez sur OK.
  1. Sélectionnez le texte ou une image dans la fenêtre de document en mode Création.
  2. Dans la zone Lien de l’inspecteur Propriétés, tapez mailto: suivi d’une adresse électronique.

    N’insérez pas d’espaces entre le signe deux-points et l’adresse électronique.

Remplissage automatique de la ligne d’objet d’un courriel

  1. Créez un lien de courriel à l’aide de l’inspecteur Propriétés, comme expliqué ci-dessus.
  2. Dans la zone Lien de l’inspecteur Propriétés, ajoutez ?subject= après l’adresse de courriel, puis entrez un objet après le signe « égal à ». N’ajoutez pas d’espaces entre le point d’interrogation et la fin de l’adresse de courriel.

    L’entrée entière doit se présenter comme suit :

    mailto:responsable@votresite.com?subject=Message de notre site

Un lien nul est un lien non désigné. Utilisez des liens nuls pour attacher des comportements à des objets ou du texte sur une page. Par exemple, vous pouvez attacher un comportement à un lien nul pour intervertir une image ou afficher un élément AP lorsque le pointeur passe au-dessus du lien.

Les liens de script exécutent un code JavaScript ou appellent une fonction JavaScript et permettent de fournir aux utilisateurs des informations supplémentaires sur un élément sans quitter la page en cours. Les liens de scripts permettent également d’exécuter des calculs, de valider des formulaires et d’effectuer d’autres tâches de traitement lorsqu’un visiteur clique sur un élément spécifique.

  1. Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.
  2. Dans l’inspecteur Propriétés, tapez javascript:; (le mot javascript suivi par deux points puis par un point-virgule) dans la zone Lien.
  1. Sélectionnez du texte, un objet ou une image dans la fenêtre de document en mode Création.
  2. Dans la zone Lien de l’inspecteur Propriétés, tapez javascript: suivi du code JavaScript ou d’un appel de fonction JavaScript. (N’insérez pas d’espace entre le signe deux-points et le code ou l’appel.)

Dreamweaver peut mettre à jour les liens vers un document et à partir de ce dernier lorsque vous le déplacez ou le renommez au sein d’un site local. Cette fonction fonctionne de façon optimale lorsqu’un site tout entier (ou une section entière de celui-ci) est stocké sur votre disque dur local. Dreamweaver ne modifie pas les fichiers du dossier distant avant que vous y placiez les fichiers locaux ou que vous les archiviez sur le serveur distant.

Pour accélérer le processus de mise à jour, Dreamweaver peut créer un fichier de mémoire cache dans lequel il conservera la liste de tous les liens du site local. Le fichier de mémoire cache est mis à jour chaque fois que vous ajoutez, modifiez ou supprimez des liens sur votre site local.

  1. Choisissez Édition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh).
  2. Dans la boîte de dialogue Préférences, sélectionnez la catégorie Général dans la liste de gauche.
  3. Dans la section Options de document des préférences Général, sélectionnez une option dans le menu déroulant Mettre à jour les liens lors du déplacement de fichiers.

    Toujours

    Met automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez

    Jamais

    Ne met pas automatiquement à jour tous les liens vers un document sélectionné et à partir de ce dernier lorsque vous le déplacez ou le renommez.

    Invite

    Affiche d’abord une boîte de dialogue qui répertorie tous les fichiers affectés par le changement. Cliquez sur Mettre à jour pour mettre à jour les liens de ces fichiers, ou sur Ne pas mettre à jour pour laisser les fichiers intacts.

  4. Cliquez sur OK.

Création d’un fichier de mémoire cache pour votre site

  1. Choisissez Site > Gérer les sites.
  2. Sélectionnez un site, puis cliquez sur Modifier.
  3. Dans la boîte de dialogue Configuration du site, développez Paramètres avancés, puis sélectionnez la catégorie Infos locales.
  4. Dans la catégorie Infos locales, sélectionnez l’option Activer le cache.

    Après avoir lancé Dreamweaver, la première fois que vous modifiez ou supprimez des liens vers des fichiers de votre dossier local, Dreamweaver vous invite à charger la mémoire cache. Si vous cliquez sur Oui, Dreamweaver charge la mémoire cache et met à jour tous les liens vers le fichier que vous venez de modifier. Si vous cliquez sur le bouton Non, la modification est consignée dans la mémoire cache, mais Dreamweaver ne charge pas la mémoire cache et ne met pas les liens à jour.

    Sur les sites de grande taille, le chargement de la mémoire cache peut prendre quelques minutes du fait que Dreamweaver doit déterminer si la mémoire cache est périmée en comparant l’heure et la date des fichiers qui se trouvent sur le site local à celles enregistrées dans la mémoire cache. Si vous n’avez pas modifié de fichiers hors de Dreamweaver, vous pouvez cliquer sur le bouton d’arrêt en toute sécurité lorsque le bouton apparaît.

Récréation de la mémoire cache

  1. Dans le panneau Fichiers, sélectionnez Site > Avancé > Recréer le cache du site.

Outre la mise à jour automatique des liens que Dreamweaver effectue chaque fois que vous déplacez ou renommez un fichier, vous pouvez modifier manuellement tous les liens (y compris les liens de messagerie électronique, FTP, nuls et de scripts) pour qu’ils pointent sur un autre chemin.

Cette option est surtout utile lorsque vous souhaitez supprimer un fichier auquel d’autres fichiers sont liés, mais pouvez l’utiliser à d’autres fins. Par exemple, supposons que vous ayez établi un lien entre les mots « films du mois » et /films/juillet.html dans l’ensemble de votre site. Le 1er août, vous voudrez modifier ces liens pour qu’ils pointent vers /films/aout.html.

  1. Sélectionnez un fichier dans l’affichage local du panneau Fichiers.

    Remarque :

    si vous changez un lien de messagerie électronique, ftp, nul ou de script, vous n’avez pas besoin de sélectionner de fichier.

  2. Sélectionnez Site > Options du site > Modifier le lien au niveau du site.

  3. Complétez les options suivantes dans la boîte de dialogue Modifier le lien au niveau du site :

    Modifier tous les liens à

    Cliquez sur l’icône du dossier à parcourir et sélectionnez le fichier cible vers lequel les liens doivent être rompus. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien à changer.

    En liens à

    Cliquez sur l’icône de dossier à parcourir et sélectionnez le nouveau fichier vers lequel établir un lien. Si vous changez un lien de messagerie électronique, ftp, nul ou de script, tapez le texte complet du lien de remplacement.

  4. Cliquez sur OK.

    Dreamweaver met à jour tous les documents qui pointent vers le fichier sélectionné, en les faisant pointer vers le nouveau fichier suivant le format de chemin d’accès existant (par exemple, si l’ancien chemin était relatif au document, le nouveau l’est également).

    Lorsqu’un lien a été changé au niveau de tout le site, le fichier sélectionné devient orphelin (plus aucun fichier du disque local ne pointe vers lui). Vous pouvez le supprimer en toute sécurité sans risque d’altérer des liens sur le site local Dreamweaver.

    Remarque :

    ces modifications se produisant localement, vous devez supprimer manuellement le fichier orphelin correspondant dans le dossier distant et placer ou archiver tous les fichiers dans lesquels les liens ont été modifiés, sinon les visiteurs ne pourront pas visualiser les modifications.

Les liens ne sont pas actifs sous Dreamweaver ; c’est-à-dire que vous ne pouvez pas ouvrir les documents liés en cliquant sur le lien dans la fenêtre de document.

  1. Effectuez l’une des opérations suivantes :
    • Cliquez avec le bouton droit de la souris sur le lien, puis sélectionnez Ouvrir la page liée.

    • Appuyez sur la touche Ctrl (Windows) ou Commande (Macintosh), puis double-cliquez sur le lien.

    Remarque :

    le document lié doit résider sur le disque local.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne