Préparez les images fixes
Vous avez sur votre disque dur quelques images que vous souhaitez inclure dans des pages de votre site personnel. Mais encore faut-il les adapter à vos pages… et aux impératifs du Web, afin qu’elles s’affichent plus rapidement. Pour la suite, nous vous conseillons d’utiliser le logiciel de retouche d’image Paint Shop Pro (dont la version 6 est livrée sur notre CD-Rom en version d’évaluation).
1Optimisez les images
La première chose à faire consiste à redimensionner les images afin de les adapter parfaitement au format de la maquette que vous avez créée avec l’éditeur HTML (voir les pages précédentes consacrées à FrontPage Express). Ce dernier permet de modifier, au moyen de poignées et avec la souris, la taille des images qu’on a insérées dans les pages. Mais cette manipulation est à proscrire. Car si les images s’affichent bien à la taille réduite voulue, le poids de leurs fichiers demeure inchangé. Et c’est justement ce poids qui détermine le temps d’affichage.
La bonne façon de procéder consiste donc à évaluer la largeur (en points) que l’image doit occuper sur la page Web. Rien de plus simple si vous avez utilisé, comme nous vous le conseillions, un tableau pour mettre en pages votre site : en fonction de la colonne dans laquelle vous souhaitez placer l’image, vous êtes parfaitement à même d’évaluer sa largeur. Ensuite, ouvrez le fichier original de la photo ou du dessin en question dans Paint Shop Pro 6.
Cliquez sur le menu Image et choisissez Redimensionner. Puisqu’il ne s’agit que de l’afficher (et non pas de l’imprimer) sa résolution doit être de 72 ppp. Quant à sa taille, elle ne doit jamais excéder les 640 points, largeur maximale que nous préconisons aujourd’hui pour les pages Web. Mais si l’image est destinée à la colonne de menu de la page index, sa largeur tombera alors à moins de 100 points.
Tous ces réglages de résolution s’effectuent aisément dans la bo”te Redimensionner affichée sur votre écran.
2Enregistrez les images
Une fois l’image redimensionnée, cliquez sur le menu Fichier du programme de retouche et choisissez Enregistrer sous. Donnez un nouveau nom à votre fichier de façon à ne pas écraser l’original. Attention, choisissez les bons formats de fichiers. En effet, pour s’afficher sur les pages Web, les images doivent obligatoirement être enregistrées dans l’un des deux formats Gif ou Jpeg (voir encadré). Enfin, enregistrez les images dans le dossier Images que vous avez créé à l’intérieur du dossier Monsite. Donnez-leur des noms explicites, pas trop longs et tout en lettres minuscules.
Créez des fichiers Gif animés
Vous les avez certainement vus en surfant sur le Web, les fichiers d’animation Gif, aussi appelés Gifs animés, sont de petites animations qui donnent de la vie aux pages. Si l’effet est garanti, le principe est simplissime : il s’agit juste de séries d’images fixes qui se succèdent dans un ordre et une cadence définis à l’avance, exactement comme dans un dessin animé. Pour composer vos premiers Gif animés, commencez par installer l’utilitaire Microsoft Gif Animator (que vous trouverez sur notre CD-Rom) et qui est simple d’emploi, efficace et gratuit.
1Préparez les images
La création d’un fichier d’animation Gif impose quelques contraintes techniques : veillez à sélectionner des images légères ne pesant pas plus de quelques Ko chacune et assurez-vous qu’elles sont de dimensions identiques. Autre remarque importante : ces images doivent impérativement être enregistrées au format Gif. L’étape 1 consacrée à la préparation des images vous indique comment opérer à l’aide de Paint Shop Pro 6.
2Intégrez les images
Démarrez Microsoft Gif Animator. Afin d’intégrer différentes images dans un seul et même fichier Gif, et de produire ainsi une animation, cliquez sur l’icône représentant un dossier ouvert. Dans la bo”te de dialogue qui s’affiche, sélectionnez la dernière image composant votre animation (oui, la dernière !), puis cliquez sur le bouton Ouvrir. L’image appara”t aussitôt à l’écran.
Ouvrez ensuite une à une les autres images de l’animation, de la dernière à la première, en cliquant sur le bouton Insert.
3Arrangez les images
Si vous comptez afficher plusieurs fois la même image, ou si vous vous êtes trompé lors du chargement des images, passez par les options de copier-coller. Les quatre icônes placées à la gauche de l’icône d’enregistrement (représentant plusieurs disquettes) permettent respectivement de couper une image, de la copier, de la coller ou de la supprimer.
4Produisez l’animation
Lorsque toutes les images sont affichées à l’écran, vous pouvez déjà observer une première animation en cliquant sur le bouton Preview (le petit triangle comparable au bouton de lecture d’un lecteur de CD). L’image s’anime à une cadence définie par défaut. Si cela vous convient, vous pouvez enregistrer l’animation en cliquant sur le bouton d’enregistrement (l’icône avec plusieurs disquettes).
Enregistrez vos Gif animés dans le sous-dossier Images créé dans le dossier Monsite, les voilà prêts pour le Web !
5Modifiez les réglages
Si le rythme de l’animation ne vous satisfait pas (trop lent ou trop rapide), vous pouvez régler la cadence de défilement des images. Cliquez d’abord sur l’onglet Image pour afficher les paramètres relatifs aux images. Si vous souhaitez modifier la durée d’affichage de l’animation, cliquez sur le bouton Select All (celui avec trois cadres), puis cliquez sur Duration et modifiez la vitesse. Si vous ne voulez changer qu’une image, sélectionnez-la, cliquez sur Duration, et modifiez sa durée.
En cochant la case Transparency, vous pouvez aussi rendre transparent le fond de votre Gif animé.
Autre paramètre important, le nombre de répétitions de la même animation. Vous pouvez le modifier à votre guise en passant par le menu Animation. Si vous souhaitez que le Gif ne défile qu’une seule fois, veillez à ce que la case Looping ne soit pas cochée. Si vous voulez au contraire que le Gif animé tourne en boucle plusieurs fois, cliquez sur Looping et indiquez le nombre de répétitions désirées dans le champ Repeat Count. Si vous voulez une animation sans fin, tout au long de la lecture de votre page, cochez simplement la case Repeat Forever.
Intégrez les images et les Gif animés dans les pages
Dans FrontPage Express, positionnez le curseur à l’endroit où vous souhaitez intégrer une image fixe ou un Gif animé (le principe d’insertion est le même).
Placée à l’intérieur d’un paragraphe, l’image aura le même alignement que celui-ci. Cliquez ensuite sur le menu Insertion, choisissez Image, cliquez sur Parcourir et naviguez dans les dossiers pour sélectionner le fichier image que vous voulez intégrer et qui est stocké dans le dossier Images, à l’intérieur du dossier Monsite. Cliquez enfin sur le bouton Ouvrir. Dans votre éditeur HTML, le fichier Gif s’intègre exactement comme n’importe quelle image.
Cela dit, ne vous étonnez pas si vous ne voyez qu’une image fixe : les animations ne sont pas visibles dans FrontPage Express. Elles le seront seulement quand les pages seront ouvertes dans un navigateur comme Internet Explorer ou Netscape Navigator
🔴 Pour ne manquer aucune actualité de 01net, suivez-nous sur Google Actualités et WhatsApp.
