édition html avec ms word 97

Accueil > Iza > html > Ms Word
Ou Page précédente

Leçon 2 : Les images et la couleur

Dans cette leçon, nous allons voir comment égailler nos pages Web en y ajoutant de la couleurs, des photographies et autres images que vous aurez vous-même préparés ou que vous aurez trouvées sur Internet. Vous pouvez même insérer des cliparts de la bibliothèque de Office.

Nous verrons aussi, entre autres comment modifier la couleur des liens, comment placer une image de type «papier peint», etc.

Un fond coloré

Vous pouvez facilement colorer l'arrière-plan de votre page Web grâe à l'outil Arrière-plan de la barre d'outils Format.C'est aussi avec ce même outil que vous pouvez créer un fond texturé. Mais pour tout de suite, nous allons commencer par une couleur unie.

Pour colorer l'arrière-plan :

Cliquez sur l'outil Arrière-plan pour dérouler le menu local et choisissez une des options suivantes :

Choisissez d'un clic une couleur de la palette offerte.
ou
Si vous ne trouvez pas la couleur que vous recherchez, cliquez sur Couleurs supplémentaires.
La boîte de dialogue Couleurs s'ouvre (illustrations ci-dessous).
L'onglet Standard présente une palette de 143 couleurs dont la plupart sont browser safe. L'onglet Personnalisées vous permet de choisir parmi 256³ couleurs (plus de 16 millions).
Choisissez une couleur dans le sélecteur de l'onglet qui convient le mieux pour vos besoins et cliquez sur OK.

Complément de rubrique : Teinte, Saturation, Luminosité [ Sauter cette partie ]

Pour comprendre comment fonctionne le sélecteur de l'onglet Personnalisées (et du même coup ce que c'est que Teinte, Saturation (Sat) et Luminosité (Lum) ), à l'aide de la souris, déplacez le curseur en forme de croix (dans la plage de couleurs de gauche).

Déplacez-le d'abord verticalement et remarquez la valeur de « Teinte » changer.
Ensuite, déplacez le dans le sens vertical. Cette fois c'est la valeur de « Sat » (saturation) qui change.
Enfin, toujours à l'aide de la souris, déplacez le curseur en forme de pointe à droite de la bande de couleur de droite et jetez un oeil à la valeur de Lum (luminosité).
Maintenant, refaites les mêmes manipulations en observant le témoin coloré en bas à droite le la fenêtre Couleurs. Observez le résultat obtenu par chaque changement de Teinte, de Saturation et de Luminosité.
Les réglages Rouge, Vert et Bleu correspondent aux couleurs de base du moniteur. Si vous tapez 255 pour le Rouge, 255 pour le Vert et 0 (zéro) pour le Bleu, vous obtiendrez du jaune. Pour en savoir plus à ce sujet, consultez la partie Traitement des images et La couleur et votre moniteur.

Vous venez d'expérimenter de manière pratique la notion des trois dimensions des couleurs en video. Cela vous rappelle-t-il les ajustements de votre téléviseur ?

| Haut de la page | Sommaire |

Une image de fond, comme un papier peint

Vous trouverz le font uni un peu « straight » et aimeriez y mettre un peu de texture. C'est aussi facile que pour les couleurs unies. Word met à votre disposition une série de papiers peints que vous pouvez utiliser pour vos documents html.

Pour placer une image de fond :

Cliquez sur le bouton Arrière-plan,
puis cliquez sur Motifs et textures.

Dans la boîte de dialogue Motifs et textures, choissez l'une des 32 textures proposées et cliquez sur OK.

L'illustration ci-haut montre un aperçu du résultat. Vous pouvez aussi utiliser des images trouvées sur Internet.

Pour utiliser une image venant d'Internet (ou d'une autre source) comme papier peint :

Placez d'abord le fichier de l'image dans le dossier où vous avez enregistré vos pages html (ou dans un sous-dossier de celui-ci).
Pour ce faire, cliquez avec le bouton droit de la souris à un endroit de la page Web oû il n'y a pas de texte. Le menu contextuel s'affiche. Choisissez l'option Enregistrer l'arrière-plan sous.
Accédez à la boîte de dialogue Motifs et textures.
Puis cliquez sur le bouton Autres textures.

Dans la boîte de dialogue Sélectionner une texture, repérez le fichier que vous voulez utiliser, sélectionnez-le et cliquez sur OK. Ensuite, cliquez sur OK pour confirmer et fermer la boîte de dialogue Motifs et textures.

La boîte de dialogue Sélectionner une texture

Attention aux images provenant d'Internet. Assurez-vous qu'elles sont libre de droits.

Pour enlever le fond de couleur unie ou texturé :

Cliquez sur le bouton Arrière-plan Bouton Arrière-plan ,
puis sur Aucun remplissage Bouton Aucun remplissage .

Astuce :
Les anciennes versions de navigateurs affichent par défaut un fond gris neutre un peu « drabe ». Si vous désirez un fond blanc tout ce qu'il y a d'ordinaire et que vous voulez être certain que tous les navigateurs l'afficheront, il vous suffit de sélectionner la couleur blanche dans le menu local Arrière-plan.

| Haut de la page | Sommaire |

Changer la couleur des lien hypertexte

Vous avez choisi un joli fond bleu avec de toutes aussi jolies goutelettes, elles aussi dans les tons de bleu. Mais voici que vos liens hypertextes, eux aussi en bleu, se fondent à votre page. Ne changez pas le fond si c'est enfin celui que vous cherchiez... changez plutôt la couleur des liens hypertextes. Oui! C'est possible!

Pour changer la couleur des liens hypertexte :

Note : Je vous ferai grâce de toutes les illustrations des boîtes de dialogue afin que cette page se charge un peu moins lentement. Exception faite de la boîte de dialogue Style, ce sont toutes des boîtes de dialogue déjà connues. Si vous désirez, pour une meilleure compréhension, consulter une version illustrée de cette rubrique, cliquez ici pour la visualiser.

À l'aide du clavier (les touches de directions), placez le point d'insertion à l'intérieur d'un lien. Attention : si vous cliquez dessus plutôt que d'utiliser le clavier, vous afficherez la cible de ce lien.
Déroulez le menu Format et cliquez sur Style.
Dans la boîte de dialogue Style, cliquez sur le bouton Modifier.
Dans la boîte de dialogue Modifier le style, cliquez sur le bouton Format pour dérouler le menu et cliquez sur Police.
Dans la boîte de dialogue Police, dans l'onglet Police, sytle et attributs, déroulez la liste Couleurs et choisisez une autre couleur (rouge, par exemple).
Cliquez sur OK pour confirmer et fermer la boîte de dialogue Police.
Assurez-vous que la case Ajouter au modèle n'est pas cochée. Cliquez sur OK pour fermer la boîte de dialogue Modifier le style.
Finalement, dans la boîte de dialogue Style, cliquez sur Appliquer, puis sur Fermer.

Si vous ne l'avez pas déjà fait, vous pouvez, pour en savoir plus sur les styles, consulter le Supplément de la leçon 1.

| Haut de la page | Sommaire |

insérer une image

Vous voulez placer une photo ou tout un graphique pour agrémenter votre page ou pour illustrer votre propos. Vous y arriverez aussi facilement que pour vos document habituels. Voici comment :

Pour insérer une image :

Cliquez sur le menu insersion pour le dérouler et choisissez image > À partir du fichier.
ou
Cliquez sur le bouton insérer une image sur la barre d'outils image (Affichage > Barres d'outils > image).

Dans la boîte de dialogue insérer une image, repérez l'image que vous voulez insérer, sélectionnez la et cliquez sur le bouton insérer.
Cette boîte de dialogue vous permet de voir un aperçu de l'image sélectionnée. Cliquez sur le bouton Aperçu (voir l'illustration plus haut).

Word vous permet aussi d'insérer des cliparts. à partir de la bibliothèque de cliparts. Mais attention, une fois votre page sauvegardée sur votre disque, Word aura aussi enregistré l'image dans sa taille originale et ce peu importe la taille que vous lui aurez donné sur votre page. Les cliparts seront aussi transformés en fichier compatibles pour le Web. Pour illustrer ce propos et commencer une petite introduction au traitement de l'image, rien de mieux qu'un exemple. Vous allez insérer un clipart dans votre page et voir un peu ce que cela donne.

Pour insérer une image clipart :

Cliquez sur le menu insersion et choisissez image > images de la bibliothèque.

Dans la fenêtre Microsoft Clipart Galery, repérez l'image que vous voulez insérer, sélectionnez la et cliquez sur insérer.
Enregistrez votre travail.

La fenêtre du dossier de travail Dans le dossier où se trouve le fichier html, vous trouverez un fichier GIF (dans l'illustration ci-contre, image9.gif). Word enregistre automatiquement les images clipart dans un format compatible au Web. Pour le moment, retenez simplement que les formats de clipart sont des WMF (Windows Meta File, ou meta fichier Windows) qui sont le plus souvent utilisés par des applications de Microsoft et/ou conçues pour Windows. Internet ne se limitant pas à un seur type de plateforme (combinaison d'un type d'ordinateur et d'un type de système d'exploitation), il convient d'utiliser les bons formats d'images. Pour le reste, nous y reviendrons plus loin (voir Une image maltraitée plus loin dans cette leçon ou la section Traitement des images).

Donc, Word enregistre automatiquement les images insérées dans le même dossier que le fichier html. Ça peut sembler pratique, mais vous vous rendrez compte, à l'usage, que cela devient vite encombré. Plusieurs d'entre vous préfèreront placer les images et les photos dans un sous-dossier nommé images. Malheureusement je n'ai pas réussi à dompter Word pour qu'il le fasse. Je n'ai donc aucune recette miracle à vous proposer.

| Haut de la page | Sommaire |

Aligner l'image à gauche, droite ou au centre

ici, vous allez vous amuser (du moins, je l'espère). Pour les exercices proposés dans cette rubrique, trouvez une image pas trop grande, 1po. sur 1po. environ (2cm sur 2cm). Enregistrez la dans le même dossier que vos fichiers html. Vous êtes presque prêt.

Maintenant, dans Word, créez un vouveau document et enregistrez le au format html (ou créez le en passant par le menu Fichier > Nouveau comme nous l'avons fait dans la leçon 1). Ça y est presque!

insérez votre image (insertion > image > À partir du fichier). Appuyez sur Entrée pour créer un nouveau paragraphe sous l'image. Enragistrez votre travail. C'est fait? Maintenant, vous êtes prêt pour les exercices de cette rubrique. Soyez sans crainte, ils sont tous très courts!

Aligner une image (gauche, droite, centre) par la barre d'outils Format

Pour bien voir de quoi il s'agit, cliquez sur le bouton Aficher/Masquer ¶.
Assurrez-vous que le point d'insertion (curseur) est placé entre l'image et lea marque de paragraphe ¶.
Cliquez sur le bouton Centré et vayez l'effet obtenu.
Maintenant, cliquez sur le bouton Aligner à droite et voyez l'effet obtenu. Puis sur le bouton Aligner à gauche.

C'est la manière la plus intuitive d'aligner une image. Mais en fait, c'est au paragraphe qui contient l'image que vous avez appliqué une mise en forme. L'image ne fait que « suivre » le paragraphe auquel elle est attachée. Pour en avoir la preuve, tapez un peu de texte avant ou après l'image et appliquez la mise en forme Centré. Vous pouvez constater que c'est tout le contenu du paragraphe qui est centré horizontalement. Essayez avec les autres alignements et constaterez qu'à chaque fois la mise en formeest appliqué uniformément à la fois au texte et à l'image contenus dans le paragraphe.

Si vous écrivez beaucoup de texte dans ce paragraphe qui contient l'image, ça ne sera pas très joli. En effet, si vous tapes plus de texte, votre paragraphe continuera en dessous de l'image, celle-ci débordera du paragraphe vers le haut, ce qui n'est pas forcément l'effet recherché.

Habillage du texte

Sélectionnez l'image pour laquelle vous voulez un effet d'habillage. Pour la cas qui nous occupe, il s'agit de l'image que vous venez d'insérer dans votre nouveau document. La barre d'outils image devrait apparaître. Si non, vous pouvez l'afficher par les menus Affichage > Barre d'outils > image.
Cliquez sur le bouton Renvoi à droite.
Vous pouvez maintenant aligner le texte à gauche, à droite, centré ou même justifié (voir leçon 1) sans que cela n'affecte la poistion de l'image par rapport au reste du texte.
Essayez le bouton Renvoi à gauche et constatez-en l'effet.

Note :
Pour que le texte se place en haut et en bas de l'image (pas d'habillage), cliquez sur le bouton Pas de renvoi à la ligne.

L'espacement entre l'image et le texte ne vous satisfait pas? Vous pouvez y remédier facilement.

Sélectionnez l'image pour afficher la barre d'outils image. cliquez sur le bouton Format de l'image. La boîte de dialogue image s'ouvre à l'onglet Position.

Dans la zone Distance du texte, ajustez la valeur Horizontalement et la valeur de Verticalement et cliquez sur OK.

Voici pour illustrer une image avec habillage sans et avec ajustement de l'espacement autour de l'image.

Une image mal habillée! Une image bein habillée!

| Haut de la page | Sommaire |

Le format GIF ou JPEG ?

Les format d'images les plus répandus sur Internet sont les GIF (Graphic interchange Format) et les JPEG (Joint Photographic Experts Group) que vous connaissez probablement déjà.

Si l'image à placer sur votre page n'a que très peu de couleurs, comme un logo ou les boutons de navigation, vous avez avantage à utiliser le format GIF. Ce format vous permet d'établir une tables de couleurs (couleurs indexées), ce qui réduit considérablement la taille du fichier, et de créer un fond transparent à des images de formes diverses qui autrement s'afficheraient dans leur forme rectangulaire.

Si parcontre vous voulez créer un catalogue de photographies ou plus simplement illustrer votre propos par quelques photos, vous obtiendrez de meilleurs résultats avec le format JPEG. Ce format utilise un mode de compression à "perte" de couleurs. Si l'image pert en qualité, elle gagne cependant en vitesse de téléchargement. Votre logiciel de traitement d'image vous proposera différents taux de compression. Plus elle sera compressée, plus elle aura perdu en qualité mais sera en revanche plus légère donc téléchargeable rapidement. Parcontre une image trop compressée sera moins intéressante puisqu'elle aura trop perdu en qualité. Choisissez de préférence un taux de compression de 70 % et vous obtiendrez à coup sur un résultat satisfaisant.

Vous en saurez plus en consultant la section Traitement d'images, lorsqu'elle sera prête, évidemment!

| Haut de la page | Sommaire |

Miniature et grand format

C'est un truc presqu'aussi vieux qu'Internet. Vous voulez placer plusieurs photos sur une page mais en même temps éviter d'obtenir une page qui prend trop de temps de téléchargement. Vous pouvez placer des versions miniatures de vos images et leur associer un lien hypertexte vers la version plus grande. Malheureusement Word 97 ne fait pas ce travail de rétrécissement pour vous. Vous devrez créer, «à la main», une version réduite de l'image dans votre logiciel de traitement d'image préféré.

Vous trouverez bientôt comment faire dans la section Traitement d'images.

| Haut de la page | Sommaire |

Une image «maltraitée»

Voici la partie des mises en garde. Vous serez sans doute tentés, après avoir inséré une image, d'en changer les dimensions directement dans le document. C'est possible de le faire, et ça marche très bien, mais c'est rarement la chose appropriée à faire. La raison en est toute simple. Lorsque vous changez les dimensions d'une image directement dans Word, ce sont les dimesions pour affichage que vous modifiez et non les dimensions réelles de l'image. Le fichier de l'image aura toujours la même taille. Aussi, si l'image est très grande et que vous la réduisez, elle mettra autant de temps à se charger et occupera inutilement de la place sur le serveur une fois vos pages publiées.

Rien ne vaut un essai pour bien comprendre de quoi il s'agit. Je vous propose donc le petit exercice suivant afin que vous puissiez visualiser le problème.

Sélectionnez l'image que vous avez inséré depuis la bibliothèque des cliparts.
Modifiez en les dimensions à l'aide des poignées de sélection que vous pouvez voir au coins et sur les côtés de l'image.