Tutoriel Dreamweaver

Dreamweaver

Découvez la puisssance de Dreamweaver dans ces tutoriels.

HTML HTML5 CSS Bootstrap PHP

Liens hypertexte avec Dreamweaver

Dans ce tutoriel, nous allons aborder l'insertion et la gestion de lien avec Dreamweaver.

Qu'est ce qu'un lien hypertexte ?

Pour faire simple, un hyperlien ou lien hypertexte est un lien cliquable qui vous améne sur une page web.

Nous trouvons 2 types de liens (relatifs ou absolus)

1. Lien absolu : Un lien absolue utilise l'adresse compléte vers un fichier "http://www.monsite.com/"

2. Lien relatif : Un lien relatif utilise une adresse par rapport au document en cours "mapage.html"

Un hyperlien sur du texte

Par l'onglet Propriétés

Panneau Propriétés
Lien hypertexte

Vous pouvez le faire de 2 façons :

1. Laisser le clic gauche appuyé sur le bouton 1 et faire glisser vers la page à lier qui se trouve dans le panneau "Fichier"

Lien hypertexte Dreamweaver

2. Cliquer sur le bouton 2 puis, sélectionner le fichier à lier.

Dans les 2 cas de figure, nous avons créer un lien relatif.

Exemple

Lien hypertexte vers une page qui se trouve dans mon site

<a href="index.php" title="Lien hypertexte">Lien hypertexte vers une page qui se trouve dans mon site</a>

3. Dans le champ 3 vous pouvez saisir une url vers un site web Ex : "http://www.google.fr/"

Dans ce 3éme cas de figure, vous créez un lien absolu

Exemple

Lien vers Google

<a href="http://www.google.fr" title="Rechercher sur Google">Lien vers Google</a>

Par l'onglet Commun (Moins rapide)

Onglet Commun
Onglet commun

Cliquez sur l'icône 1 de l'Onglet Commun.

Cette boîte de dialogue apparaît

Hyperlien

Texte : qui sera le texte affiché sur le lien hypertexte

Lien : est le lien hypertexte

target :

_blank : (Ouverture de la page cible dans une nouvelle fenêtre)
_parent : (Ouverture de la page cible dans le cadre parent (de niveau immédiatement supérieur)
_self : (Ouverture de la page cible dans le cadre d'appel
_top : (Ouverture de la page cible dans la fenêtre hôte par-dessus le FRAMESET)

Titre : affiche une infobulle lorsque vous passez votre curseur sur un lien hypertexte

Ordre de tabulation : Permet d'inverser l'ordre de la navigation lorsque vous utilisez la touche tabulation pour passer d'un lien à l'autre.

Exemple

Mon hyperlien vers Google

<a href="http://www.google.fr/" title="Mon lien vers Google" target="_blank">Mon hyperlien vers Google</a>

Un hyperlien sur une image

Etape 1 Vous insérer votre image comme vu dans le module précédent, si vous avez un doute, vous pouvez consulter cette page

Etape 2 Dans le panneau "Propriétés"

Lien hypertexte sur uen image

Etape 3

Dans le champ 1 : compléter soit l'url, soit glisser la cible vers le fichier à lier, soit cliquer sur l'icône "Dossier".

Etape 4

Dans le champ 2 : compléter l'attribut cible, comme vu précedemment

Exemple

Google
<a href="http://getbootstrap.com/" title="Bootstrap" target="_blank"><img src="../images/bootstrap.png" alt="Bootstrap" class="img-responsive"></a>

Lien de messagerie sur du texte

Méthode 1 :

Cliquer sur le bouton 2 "lien de messagerie"

Onglet Commun
Onglet commun

Vous avez 2 paramétres à compléter :

  1. Dans le 1er champ: saisissez le Texte qui doit apparaître à l'écran
  2. Dans le second champ: saisissez votre adresse électronique (Adresse email)

Exemple

email : contact@nomdedomaine.com

<a href="mailto:contact@nomdedomaine.com">email : contact@nomdedomaine.com</a>

Méthode 2 :

  1. Insérer le texte qui doit contenir le lien
  2. Sélectionner le
  3. Dans le panneau "Propriétés", compléter le champ 13 en y mettant une adresse email sous ce format mailto:contact@nomdedomaine.com
Panneau Propriétés
Lien hypertexte sur uen image

Lien de messagerie sur une image

Etape 1 Vous insérer votre image.

Etape 2 Dans le panneau "Propriétés"

Lien hypertexte sur uen image

 

Etape 3

Dans le champ 1 : compléter le champ lien en y notant votre adresse précédée de mailto:

Exemple

Lien de messagerie
<a href="mailto:contact@nomdedomaine.com">
<img src="../images/valide.png" alt="Lien de messagerie" class="img-responsive">
</a>

Les ancres nommées

Les ancres nommées vous permettrons de vous déplacer sur la hauteur d'une page.

Vous retrouvez souvent "Haut de page" pour revenir en haut de la page lorsqu'il y a un long contenu.

Pour insérer uen ancre nommée, cliquez sur l'icône 3.

Onglet Commun
Insertion

Cette boîte de dialogue apparaît

Ancre nommée

Compléter le champ " Nom de l'ancre"

Attention : Ne pas mettre d'espaces ni caractéres spéciaux

En haut de page, j'insére une ancre que je nomme "Debut"

<a name="Debut"></a>

Exemple

Lien qui pointe vers l'ancre "Debut"

<a href="liens-hypertexte-dreamweaver.phpl#Debut " title="Revenir au début">Lien qui pointe vers l'ancre "Debut" </a>
Vous pouvez remarquer que derrriére la page HTML, PHP ou peut importe le langage utilisé, il faut ajouter un "#" et le nom de l'ancre

Les attributs les plus utiles

href : Le lien vers la page

title : Titre de l'infobulle lorsque vous passez votre curseur sur un lien hypertexte

target : Comment le lien va s'ouvrir dans un page