Page 1 à 13
Université Abdelhamid Mehri – Constantine 2 Cellule e-learning
2017-2018. Semestre 2
Informatique – Niveau 3
Informatique avancée
– Cours 6 –
Pages Web avec MS Expression Web 4 (2/4)
Images, tableaux, et liens
Staff pédagogique
Nom Grade Faculté/Institut Adresse e-mail
Necibi Khaled MCB Nouvelles technologies [email protected]
Etudiants concernés
Faculté/Institut Département Année Spécialité
Psychologie Psychologie Licence 2 Tronc commun
Sciences économiques Tous les départements Licence 2 Toutes les spécialités
Objectifs du cours 6
Comprendre le mode de fonctionnement de l’outils de création de site Web Expression 4
Apprendre à réaliser et faire et lien entre plusieurs ressources dans un site web (pages Web, images, signets, …)
Ajouter des images, des liens hypertextes, des signets et des tableaux dans un page Web
Page 2 à 13
1. Insertion d’images
Avant d’insérer une image graphique dans une nouvelle page web précédemment créée, il faut tout d’abord sauvegarder tous les pages web que vous avez crée, en leur donnant un nom. Pour ce faire, il faut aller à l’onglet
« Enregistrer » ou taper simultanément sur les deux touches + S.
Partant du principe que l’étape de sauvegarde de page n’est pas vraiment nécessaire avant l’insertion d’une image, quelques utilisateurs de « Expression web 04 » ont eu des problèmes avec les chemins qui ne sont pas correctement résolus, et ce quand la page est sauvegardée et nommée pour la première fois après avoir rajouter des contenus graphiques comme les images. De ce fait, il est préférable de sauvegarder les pages bien avant l’insertion des images, des liens hypertexte ou des feuilles de style.
On suppose dans le reste de ce cours que les images créés (ou récupérées) par l’utilisateur sont bien situées dans le dossier racine de son site web. Dans le cas contraire, i.e. les images à afficher dans son site web n’existent pas dans le dossier racine du site web, l’utilisateur doit les importer.
1.1. Etapes à suivre pour insérer une image
Pour insérer des images, il faut suivre les étapes suivantes :
Dans l’interface de votre site sur Expression Web 4, veuillez cliquer sur le menu « Fichier », ensuite cliquez sur « Importer » ensuite cliquez sur « Fichier ou Dossier »
Dans la boite de dialogue « Importer » qui s’affichera ensuite, cliquez sur « Ajouter un fichier » ou
« Ajouter un Dossier »
Page 3 à 13 Dans la liste des fichiers à importer qui s’afficherait, sélectionnez les fichiers nécessaires à rajouter dans votre page web ensuite cliquez sur OK. Une fois que vous cliquez sur OK, vous allez voir tous les fichiers que vous avez sélectionner.
Remarque
Si vous sauvegardez vos images dans un dossier image, vous pouvez glisser les images que vous avez importé dans ce dernier.
1.2. Insérer des images dans une page web
Il existe dans la version du logiciel Expression Web 4.0 une nouvelle option nommé miniature de l’image (Thumbnail preview). Pour activer cette option c’est très simple, elle est localisée dans le panneau de liste des dossiers comme montré dans la figure suivante.
Pour insérer une image dans votre page web, placez le curseur là où vous voulez que l’image apparaisse, ensuite suivez une de ces deux étapes :
A partir du menu insérer > image > à partir d’un fichier > sélectionner une image > cliquer sur insérer, ou bien :
Glisser l’image à partir du panneau de liste de dossiers ou visualiser le site vers le mode Design de votre page.
La boite de dialogue « Propriétés d’accessibilité » vous permettra d’insérer un texte de remplacement et aussi une description longue si nécessaire :
Le texte de remplacement rend votre image accessible aux lecteurs d’écran (screen readers). Votre image sera aussi visible dans certains navigateurs quand par exemple l’utilisateur pointe la souris vers l’image pour faire un zoom. La figure suivante montre la boite de dialogue « Propriétés d’accessibilité ».
Page 4 à 13 Vous pouvez vérifier dans le code source de votre page web les propriétés d’accessibilité en cliquant sur le mode de vue code source, et cela vous donnera la ligne de code correspondante :
<img alt="boite de dialogue propriété d'accessibilité" height="480"
src="images/exemple_image_2.jpg" width="640" />
Si l’image que vous insérez n’est pas déjà disponible dans le dossier racine de votre site web, quand vous sauvegardez la page web, la boite de dialogue des fichiers incorporés s’ouvre. Cliquez sur changer le dossier ensuite sélectionnez le dossier là où vous voulez que vos images soient sauvegardées.
1.3. Propriétés des images
La boite de dialogue de propriétés des images vous donnera accès aux attribues des images les plus utilisés.
Pour ce faire, il vous suffira seulement de cliquer sur le bouton droit de la souris ou un double clic sur l’image elle-même, ainsi la boite de dialogue de propriétés des images apparaitra.
L’onglet générale
1) Image : le nom du dossier/fichier de l’image graphique 2) Accessibilité :
Le texte de remplacement : Tapez le texte que vous voulez afficher pour les images graphiques lors de leur téléchargement, quand elles ne peuvent être trouvées ou quand un internaute déplace la souris à travers l’image. Ce texte sera aussi utilisé par un lecteur d’écran (screen reader) si disponible.
Page 5 à 13 Description détaillée : Dans certains cas, quelques mots ne peuvent décrire votre image comme par exemple le cas d’un graphe ou d’un histogramme. Cliquez sur « Parcourir » pour sélectionner le fichier contenant une longue description de l’image correspondante.
3) Lien hypertexte :
- Emplacement : si vous voulez rendre une image accessible via une page web ou si vous voulez rendre votre image plus grande par un simple clic, vous devrez dans ce cas insérer un « Lien hypertexte ».
Cette action pourrait se faire via le menu Insérer > Lien hypertexte
- Cadre de destination : si la page courante est une page contenant plusieurs cadres, l’option Cadre de destination vous montrerait dans quel cadre le lien hypertexte devrait être affiché, ou vous pouvez choisir d’avoir une image (ou une page web) ouverte dans une nouvelle fenêtre.
L’onglet Apparence
1) Style d’habillage : Cette option spécifie le type d’alignement de l’image dans la page web. Il y a trois chois : aucun, à gauche ou à droite. Il existe aussi une autre option qui consiste en la création d’un style d’alignement particulière pour l’affichage des images et de l’appliquer à n’importe quel moment.
2) Disposition
L’alignement : cette option spécifie comment votre image doit être alignée dans votre page web.
Epaisseur de bordure : fixer l’épaisseur de la bordure en pixels (cela devrait être effectué via votre feuille de style CSS).
Marge horizontale : fixer la largeur de la marge gauche et droite en pixels (cela devrait être effectué via votre feuille de style CSS).
Marge verticale : fixer la largeur de la marge haute et basse en pixels (cela devrait être aussi effectué via votre feuille de style CSS).
3) Taille : Web Expression fixe automatiquement les propriétés de la largeur et de la hauteur de l’image en se basant sur ses dimensions actuelles. Au lieu de redimensionner votre image en changeant sa hauteur et sa largeur, vous pouvez utiliser directement l’éditeur graphique (Graphic editor) pour le faire.
Exemple :
Si vous voulez par exemple que votre image soit alignée à gauche, avec une bordure de « 1 pixel », et une marge horizontale et verticale de « 4 pixels », le logiciel Expression Web crée automatiquement le style suivant :
.style1 { float: left;
border-style: solid ; border-width: 1px ; margin: 4px ;
}
Page 6 à 13
Et le code HTML correspondent est le suivant :
<p>
<img alt="Screenshot of Picture Properties Dialog Box."
src="images/picture-properties-appearance.jpg" width="442"
height="391" class="style1" />
</p>
Pour simplifier le travail, vous pouvez renommer le style généré par Expression Web en « mon_style_gauche » afin de le réutiliser en cas de besoin.
Remarque
Si vous voulez changer les dimensions d’une image, il vaut mieux utiliser un éditeur graphique d’image pour EVITER de changer les dimensions manuellement dans votre code HTML. Cela pourrait être nécessaire car le navigateur doit télécharger la taille réelle de l’image avant de la visualiser.
Si vous voulez ajouter une bordure à votre image, il est aussi préférable de le faire via un éditeur graphique d’image.
1.4. L’utilisation de miniature automatique (auto thumbnail)
Vous pouvez utiliser Expression Web pour créer rapidement une miniature de vignette d’aperçu d’une image afin d’être utilisée dans votre page web qui est ensuite lié à une image plus large. Il est préférable d’optimiser vos images et de créer vos miniatures d’aperçu.
Fixer les propriétés par défaut pour les miniatures
1) Allez vers le menu Outils Options de l’éditeur de Page créer une miniature.
2) Ensuite il faut choisir son option, à savoir : la largeur, la hauteur, côté le plus court ou côté le plus long, et pour finir il faut taper la valeur de l’option choisie en pixels ; par exemple donnez la valeur 100 pixels de la miniature choisit concernant la largeur comme montré dans la figure précédente.
1.5. Créer une image avec une miniature
Voici les étapes à suivre pour créer une image avec une miniature d’aperçu :
Page 7 à 13 1) Insérez une image complète dans votre pas web (A partir du menu insérer Image à partir d’un
fichier sélectionner une image cliquer sur insérer (Glisser l’image à partir du panneau de liste de dossiers ou visualiser le site vers le mode Design de votre page)
2) Dans la boite de dialogue Propriétés d’accessibilités insérez le Texte de remplacement pour l’image que vous venez d’insérer.
3) Cliquez ensuite sur le bouton gauche de la souris sur l’image, ensuite cliquez sur Miniature automatique
4) Pour sauvegarder la miniature automatique de l’image cliquez sur « Enregistrer » ou + S.
5) Vous allez remarquer ensuite que le code suivant a été rajouter dans votre code HTML.
<p>
<a href="exemple_image_2.jpg">
<img alt="" class="auto-style1" height="75"
src="exemple_image_2_small.jpg" width="100" />
</a>
</p>
6) Pour optimiser le code HTML ; ouvrez votre page web en mode code, cliquez ensuite sur le bouton droit de la souris et cliquer sur optimiser le code HTML.
Page 8 à 13
2. Liens entre les pages web (liens hypertexte)
Les liens ou les hyperliens se trouvent pratiquement dans tous les pages web. Les liens permettent aux utilisateurs de cliquer et d’aller vers plusieurs pages web, un emplacement dans une page web, une image ou un autre emplacement que, quand cliqué, l’utilisateur serait redirigé vers un nouveau document ou un emplacement dans le document actuel.
2.1. Boutons interactifs
Le langage HTML utilise la balise <a> pour créer un lien vers une autre ressource. Cette ressource peut être une page html, une image, un texte dans un document ou un fichier pdf.
Exemple
<a href="url">texte à afficher sous forme de lien</a>
L’attribut href est utilisé pour déterminer le lien de la source tant dit que le texte qui se trouve à l’intérieur de la balise serait affiché sous forme de lien souligné comme suit : texte à afficher sous forme de lien.
Quand vous déplacez le curseur à travers un lien dans une page web, la flèche de la souris sera transformée en une main.
Si vous voulez que votre navigateur web vous dirige vers une section particulière d’une page web, vous pouvez rajouter un Signet ou un bookmark à la section, ensuite vous rajoutez un lien hypertexte qui utilisera le Signet comme étant sa destination.
2.2. Liens hypertexte dans Web Expression 4
Le logiciel web expression fournie des outils pour créer des liens hypertexte rapide et facile. Pour créer un lien hypertexte, veuillez premièrement sélectionner le texte ou l’image que vous voulez utiliser pour le lien, en suite cliquez sur l’onglet Insérer Lien hypertexte, cela vous affichera la boite de dialogue suivante :
Vous pouvez aussi cliquer sur le bouton droit de la souris sur l’emplacement du lien hypertexte à partir de la liste déroulante afin d’afficher la boite de dialogue pour l’insertion d’un lien hypertexte.
Page 9 à 13
2.3. Ciblage des liens hypertexte
Par défaut, les liens hypertexte vers d’autres pages, ressources ou d’autre sites web se chargent dans le navigateur courant. Dans le cas où vous voulez que vos liens hypertexte mènent vers un autre site, et que la page actuelle resterait disponible, vous devez paramétrer la cible de votre lien hypertexte.
Pour changer la fenêtre dans laquelle un lien hypertexte s’ouvre, vous devez spécifier une cible pour votre lien qui peut être : un cadre par défaut, le même cadre, une page entière ou une nouvelle fenêtre. Pour ce faire :
Cliquez sur « Cadre de destination » dans la boite de dialogue Insertion d’un lien hypertexte pour afficher la boite de dialogue Cadre de destination.
2.4. Paramètres des liens hypertexte
Quand vous utilisez ASP.NET, PHP ou un autre serveur pour tester votre site web, vous pourrez avoir besoin de passer quelques informations au serveur dans un lien hypertexte sous forme d’une requête. Cette requête sera ajoutée à la fin du lien hypertexte comme étant une série de nom et de valeur.
Exemple :
Le lien hypertexte suivant passe une valeur « val » avec une valeur de 3. À noter que le caractère « ? » ou point d’interrogation apparaît juste avant la valeur de la chaîne de caractère « val ».
exemple.aspx?val=3
Dans web expression, vous pouvez facilement créer lien hypertexte sous forme d’une requête en cliquant sur le bouton « Paramètres » dans la boite de dialogue pour l’insertion d’un lien hypertexte.
Page 10 à 13
2.5. Signets
La plupart des liens hypertexte vous mènerait vers le haut de la page web auquel les liens hypertextes sont liés, mais vous pouvez aussi lier un lien hypertexte à un point spécifique dans la page web et ce en utilisant les Signets HTML.
Pour créer un lien vers un Signet HTML, vous devez tout d’abord créer un signet dans la page web, ensuite : Placez le point de l’insertion sur la ligne là ou vous voulez que le signet soit, ensuite cliquez sur Insérer Signet ou tapez simultanément sur les deux touches + B.
La figure suivante montre la liste de tous les signets que vous pouvez insérer dans votre page Web.
Il est aussi possible de faire un lien vers des signets qui se trouvent dans un autre site web qui est complètement différent que celui sur lequel vous allez travailler.
2.6. Info-bulle pour un lien hypertexte
Pour rendre votre page web ou votre site web accessible, vous devez inclure un attribut titre pour tous les liens que vous avez créés.
L’attribut titre est configuré en cliquant sur le bouton Info-bulle qui se trouve dans la boite de dialogue pour l’insertion d’un lien hypertexte.
Page 11 à 13 Le texte que vous allez insérer pour l’info-bulle apparaitra sous forme de notification quand l’internaute déplacerait la souris à travers le lien hypertexte.
3. Création de tableaux avec Web Expression 4
Avant la création de tableaux, veuillez passer en mode création (mode design sans code), ensuite veuillez cliquer sur l’emplacement là où vous voulez que le tableau apparaisse. Une fois fini, veuillez suivre les étapes suivantes :
Cliquer sur le bouton « Insérer un tableau » qui se trouve dans le menu de barre de tache de web expression comme le montre la figure suivante.
Pour plus d’options pour l’ajustement du tableau, cliquez sur « Autres options ». La fenêtre suivante des propriétés de votre tableau vous permettrait de faire plusieurs réglages.
Page 12 à 13 Sur la barre de tache de gestion de styles, cliquez sur le bouton droit de la souris et choisissez ensuite l’option renommer la classe « style1 ».
Ensuite, dans la boite de dialogue Renommer la classe, taper le nom de la classe.
Sur la barre de gestion de style, cliquez sur nouveau style si vous voulez créer un nouveau style pour votre tableau, ensuite la boite de dialogue suivante apparaîtra.
Page 13 à 13 Cliquez sur OK une fois que vous avez fini le paramétrage du nouveau style que vous allez appliquer au tableau.
4. Travail pratique (TP)
Ajouter les trois composantes suivantes dans votre page web : Une image sans miniature,
Une image avec miniature,
Un tableau paramétrisé avec un nouveau style.
Références du cours
Les étudiants peuvent consulter ces références pour approfondir leurs connaissances dans ce cours : Geary, P. (April 2014). Expression Web 4.0 Tutorials, from Install to Publish plus More.
Sites Web
http://www.informit.com/articles/article.aspx?p=1925941&seqNum=4 https://www.microsoft.com/fr-fr/download/details.aspx?id=7764
