Ajoutez une image à l'aide des indicateurs de code

Pour ajouter manuellement du code à la page, sélectionnez le mode Code, puis commencez à taper le code. La fonction Indicateurs de code permet d'accélérer votre saisie.

Dans cette section, vous utiliserez des indicateurs de code pour ajouter l'image de la plaque de rue à la page index du Cafe Townsend.

1. Ouvrez la page index.html si elle ne l'est pas déjà.
2. En mode Création, sélectionnez l'image street_sign.jpg (elle se trouve sous l'espace réservé pour l'image de vidéo Flash) et appuyez sur Supprimer.

   Vous utiliserez à présent des indicateurs de code pour réinsérer l'image plutôt que de la faire glisser du panneau Actifs comme vous l'avez fait au Didacticiel : Ajout de contenu aux pages.

3. Passez à mode Code en cliquant dessus dans la barre d'outils de document ou en sélectionnant Affichage > mode Code.

   En mode Code, le point d'insertion devrait se trouver entre une balise d'ouverture et une autre de fermeture de paragraphe, comme suit :

   
   
   

   Si vous ne voyez pas une balise d'ouverture et une autre de fermeture de paragraphe devant la balise de fermeture de la cellule de tableau </td>, tapez ces éléments comme suit :

   
   
   

   Placez le point d'insertion entre la balise d'ouverture <p> et la balise de fermeture <p>.

4. Supprimez tout ce qui pourrait se trouver entre la balise d'ouverture <p> et la balise de fermeture <p>, par exemple un espace insécable (&nbsp;).
5. Avec le point d'insertion entre la balise <p>d'ouverture et la balise<p> de fermeture , tapez un crochet ouvert (<).

   Une liste de balises apparaît au niveau du point d'insertion.

   
   
   

   REMARQUE

   Vous pouvez définir le délai précédant l'affichage de la liste en sélectionnant Edition > Préférences (Windows) ou Dreamweaver > Préférences (Macintosh), puis la catégorie Indicateurs de code sur la gauche. En mode Code, vous pouvez afficher un menu d'indicateurs de code à tout moment en appuyant sur Ctrl+Barre d'espace ; vous pouvez également fermer ce menu à tout moment en appuyant sur Echap.

6. Sélectionnez la balise img dans la liste, puis appuyez sur Entrée (Windows) ou Retour (Macintosh) pour insérer la première partie de la balise.

   CONSEIL

   Pour sélectionner rapidement une balise dans la liste, commencez à saisir son nom.

7. Appuyez sur la barre d'espace pour afficher la liste des attributs de la balise.
8. Lorsque l'attribut src est sélectionné dans la liste des indicateurs, tapez src, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).

   
   
   

   La mention Parcourir s'affiche et est sélectionnée sous le code que vous venez de saisir.

9. Appuyez sur Entrée (Windows) ou Retour (Macintosh) pour rechercher un fichier.
10. Dans la boîte de dialogue Sélectionner fichier, naviguez jusqu'au fichier street_sign.jpg (il se trouve dans le fichier images du dossier racine de cafe_townsend) et cliquez sur OK (Windows) ou Choisir (Macintosh).

    
    
    

    L'URL du fichier image est insérée comme valeur de l'attribut src, et le point d'insertion apparaît après le guillemet de fermeture.

11. Appuyez sur la barre d'espace, sélectionnez l'attribut alt dans le menu des indicateurs, puis appuyez sur Entrée (Windows) ou Retour (Macintosh).
12. N'insérez rien entre les guillemets, car l'image n'est qu'une illustration.

    Utilisez la touche fléchée droite pour placer le point d'insertion à droite des guillemets.

13. Saisissez un crochet droit (>) pour terminer la balise.

    
    
    

14. Enregistrez votre page.
    

    CONSEIL

    Pour ajouter un attribut à une balise existante, placez le point d'insertion juste après la valeur d'attribut définitive de la balise et appuyez sur barre d'espace. Quand une liste d'attributs apparaît, ajoutez un attribut et spécifiez une valeur s'il y a lieu.