Microsoft Expression Web - Images
Les images sont largement utilisées dans les pages Web pour les rendre intéressantes et offrir une meilleure expérience utilisateur. Dans ce chapitre, nous apprendrons comment ajouter des images au site Web. Comme d'habitude, allons-y étape par étape et apprenons le processus en détail.
Step 1 - Pour commencer à ajouter des images, créons un nouveau site d'une page et changeons le nom du fichier default.html en index.html.
Step 2- Nous devons maintenant inclure des images sur le site Web afin de pouvoir utiliser ces images dans la page Web. Créons un nouveau dossier. Dans la liste des dossiers, cliquez avec le bouton droit sur le nom du site Web.
Step 3- Actuellement, il n'y a aucune image dans ce dossier. Pour ajouter des images dans ce dossier, sélectionnez et faites simplement glisser les images de votre disque dur et déposez-les sur le dossier images.
Vous verrez que les images sont ajoutées au site Web images dossier, comme indiqué dans la capture d'écran suivante.
Step 4- Ces images sont désormais incluses dans votre site Web, mais aucune de celles-ci n'est utilisée dans une page Web. Un moyen simple d'ajouter une image à la page Web consiste à faire glisser l'image du dossier images et à la déposer dans la vue de code à l'endroit où vous souhaitez ajouter l'image dans la page Web.
Supposons que nous voulions ajouter une image sous l'en-tête. Lorsque vous déposez l'image et relâchez le bouton de la souris, la boîte de dialogue suivante s'affiche.
Ici, vous pouvez spécifier le texte alternatif et la description longue. Cliquez ensuite sur OK et enregistrez la page Web. Maintenant tu peux voir ça<img> La balise est ajoutée avec le nom et la source alternatifs de l'image.
Step 5 - Suivez le même processus et ajoutez la deuxième image avec son autre nom et sa source.
Maintenant le index.html le fichier apparaîtra comme suit -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
</head>
<body>
<h1> Working with images </h1>
<img alt = "Beautiful Birds" src = "images/birds.jpg" />
<img alt = "Other Birds" src = "images/birds2.jpg" />
</body>
</html>Step 6 - Le Picture PropertiesLa boîte de dialogue vous donne accès aux attributs d'image les plus couramment utilisés. Lorsque vous double-cliquez sur une image, la boîte de dialogue Propriétés de l'image s'affiche.
Dans Expression Web, la boîte de dialogue Propriétés de l'image comporte deux onglets, General et Appearance.
Voici les options disponibles sur le General tab.
Picture - Il contient le nom du dossier / fichier de l'image graphique.
Alternate Text- Tapez le texte que vous souhaitez afficher pour les images lorsque le graphique est en cours de téléchargement, lorsqu'il est introuvable ou lorsqu'un visiteur du site déplace le pointeur dessus. Ce texte sera également utilisé par un lecteur d'écran si votre spectateur en utilise un.
Long Description- Il arrive que quelques mots ne suffisent pas pour décrire votre image. Les graphiques et les graphiques sont des exemples. Cliquez sur Parcourir pour sélectionner un fichier contenant une description plus longue de l'image.
Location - Si vous souhaitez lier votre image à une page Web ou à une image plus grande, insérez le lien hypertexte ici.
Target Frame - Si la page actuelle est une page de cadres, cette option indique dans quel cadre le lien doit être affiché OU vous pouvez choisir d'ouvrir l'image ou la page dans une nouvelle fenêtre.
Les options suivantes sont disponibles sur le Appearance tab.
Wrapping Style - Spécifiez la façon dont l'image flotte dans la page, par exemple Aucun, Gauche ou Droite.
Layout - Dans cette section, vous pouvez définir l'alignement, l'épaisseur de la bordure, les marges horizontales et verticales.
Size- Expression Web définit automatiquement les propriétés de largeur et de hauteur de l'image en fonction des dimensions réelles de l'image. Plutôt que de redimensionner votre image en modifiant ces dimensions, redimensionnez l'image à l'aide de votre éditeur graphique.
Step 7- Maintenant, prévisualisons la page Web dans le navigateur; il affichera la sortie suivante.
