Beaucoup de demandes concernent la méthode à employer pour "uploader" les pages HTML que vous avez crées sur le serveur de votre site Web !
Pour réaliser cette opération essentielle (sinon, les visiteurs potentiels de votre site ne peuvent le visionner), vous avez besoin d'un logiciel spécifique, à savoir un programme "FTP" qui va placer, à partir de votre PC local, les fichiers HTML que vous avez réalisés sur le serveur de votre provider (ou celui qui vous accorde un hébergement).
Visicom Media a créé un très bon programme "FTPExpert", qui est un logiciel de ce type et qui est également
en français : son interface vous sera très familière puisqu'il est du type
"Explorer".
Petite présentation DHTML de FTPExpert
et pour plus d'information, consultez la page "FTP".
Sur le Web, on peut considérer que les fichiers graphiques peuvent se résumer à trois grands standards : "bitmap", "gif" et "jpg".
Je vous conseille de ne pas employer le premier ("bmp") car celui-ci prend beaucoup trop d'octets et le chargement de ces fichiers est trop lourd pour les visiteurs de vos sites : il reste donc les fichiers "gif" et "jpg".
La différence entre ces deux formats réside notamment dans le taux de compression des fichiers mais surtout, dans le nombre de couleurs de ceux-ci, en effet, le format "gif" ne comprend que 256 couleurs alors que le format "jpg" comprend 16 millions de couleurs, ce qui fait que ce dernier est de qualité nettement supérieure.
Cependant, d'autres éléments doivent être pris en considération : le format de Compuserve (gif) peut donner des animations (gifs animés) et également, pour autant que vous prenez le format " version 89a — interlaced", peut vous permettre que les images soient progressivement découvertes lors du chargement ! Ainsi, le visiteur discerne progressivement vos images alors que celles-ci ne sont pas complètement chargées, tandis que dans le format normal, elles apparaissent pratiquement d'un seul coup, après le chargement total du fichier, ce qui pourrait décourager le visiteur pressé, qui ne prendra pas la patience d'attendre.
Dans certains cas cependant, malgré ses 16 millions de couleurs, le format "jpg" prend moins d'octets que le "gif" ?
Vous devez donc bien décider ce que vous voulez et en fonction de vos exigences, décider du format adéquat. Vous devrez procéder par essais pour constater et décider quel format vous choisissez…
Pour vous permettre de réaliser ce choix, je vous ai demandé de télécharger le shareware PaintShopPro qui justement va vous permettre de transformer vos fichiers graphiques dans le format qui vous est nécessaire.
Conversion des fichiers graphiques
Après avoir lancé le PaintShopPro, vous devez charger le fichier que vous voulez transformer et employer la fonction "Batch Conversion" que vous trouvez par le menu "File/Batch Conversion" ou une méthode plus simple que je vous recommande :
À ce stade, vous déterminez le format dans lequel vous désirez transformer votre fichier et cliquez ensuite sur "Enregistrer", après avoir bien sûr déterminé l'endroit où vous voulez sauvegarder le fichier (cela peut être un répertoire différent de celui où se trouve le fichier initial).
Dans l'image ci-dessous, vous voyez la fenêtre obtenue après avoir ouvert (chargé) le fichier pageweb.gif et tapé la touche "F12" qui propose automatiquement la conversion dans le format désiré : en l'occurrence ici, j'ai choisi le format "jpg" et donc, PaintShopPro propose d'office le nom de "pageweb.jpg" : il suffit alors que je clique sur "Enregistrer" pour accepter le répertoire proposé ou alors, je choisis d'abord le répertoire où je veux enregistrer le fichier et ensuite, cliquez sur "Enregistrer"… PaintShopPro garde en mémoire le dernier répertoire de sauvegarde (dernier répertoire ouvert aussi) ce qui vous facilite les tâches répétitives.
Changement des dimensions d'une image (Resample)
Il vous arrivera souvent de vouloir changer les dimensions d'une image, parce que celle-ci est trop grande et prend trop d'octets lors de son chargement ou pour d'autres raisons (cliquez sur une image plus petite pour ensuite charger la même image dans sa dimension réelle, etc.).
PaintShopPro vous offre aussi cette merveilleuse possibilité de rééchantillonner (redimensionner) votre image en gardant les proportions de l'image initiale. Oui, vous allez me dire que l'on peut effectuer la même opération en HTML, spécifiant tout simplement des dimensions plus petites lors du code de l'image en question ? En fait, c'est vrai mais dans ce cas, l'image est déformée car elle sera transformée artificiellement, alors qu'un programme graphique comme PaintShopPro vous permet, lui, de réaliser la même opération mais en gardant les proportions de l'image : c'est de cette façon par exemple que j'opère pour réduire mes copies-écran dans mes chroniques.
Une petite astuce est néanmoins parfois nécessaire (pour la version 4.12) : en effet, lorsque vous chargez le fichier que vous voulez redimensionner, l'option "Image/resample" n'est pas toujours accessible, celle-ci est en effet "grisée" ! Comment faire ?
C'est assez simple à réaliser et nombre d'entre vous seront heureux de connaître cette astuce :
.
. Il est important à ce stade, pour le nouveau fichier que vous allez créer, de prévoir des dimensions suffisantes de telle sorte qu'il soit capable de contenir l'entièreté de l'image que vous voulez redimensionner : vous pouvez déterminer les dimensions par la fenêtre suivante, qui vous est proposée directement :
Comme vous le voyez sur l'image ci-dessus, j'ai choisi délibérément des dimensions très grandes, qui vont vous permettre de placer l'image que vous voulez redimensionner, même si celle-ci est très grande et dépasse un écran entier.
Maintenant, il faut redimensionner l'écran de manière convenable, cliquez sur "View/Normal Viewing" ou "CTRL+ALT+N", ainsi votre image est à sa dimension réelle.
On va maintenant copier l'image à redimensionner dans l'image actuelle, il faut donc l'incorporer en quelque sorte : c'est possible par l'option "Edit/Paste/A New Selection" ou "CTRL+E".
Avec votre souris, placez l'image dans l'écran constitué par le fichier intermédiaire de façon à ce que vous la voyiez correctement (en fait, cela n'a aucune importance, c'est pour des raisons de convivialité) et lorsque cela est fait, cliquez avec le clic gauche de la souris pour fixer l'image (j'ai dit le "clic gauche"…) dans l'écran.
Un rectangle en pointillé entoure l'image incorporée (surtout, ne cliquez pas avec le clic droit de la souris car l'opération devrait être recommencée : en fait, l'image serait définitivement incorporée et ce n'est pas ce que nous cherchons ici).
Choisissez maitenant l'option "Image/Resample" (elle n'est plus grisée) et vous pouvez redimensionner votre image aux dimensions voulues : vous obtenez ainsi la fenêtre suivante…
Tapez les dimensions voulues (Custom size), mais seulement par une seule des dimensions, c'est-à-dire la largeur ou la hauteur, car PaintShopPro va lui-même attribuer la seconde (pour garder les proportions de l'image). Ainsi, si vous désirez changer la largeur, tapez uniquement celle-ci dans la première fenêtre (entourée de rouge) ou l'inverse pour la hauteur.
Ce n'est pas fini ! Vous devez lorsque l'image a été redimensionnée, procéder à la copie de celle-ci (le rectangle en pointillé doit encore être présent autour de l'image) : pour cela, menu "Edit/Copy" ou "CTRL+C".
Récupérez le fichier copié par l"option "Edit/Paste A New Image" ou "CTRL+V" et voilà, vous n'avez plus qu'à sauvegarder comme vu plus haut le fichier récupéré dans le format que vous désirez (F12, nom de fichier et format désiré).
Cela vous semble certainement fastidieux, mais vous verrez que c'est beaucoup plus simple qu'il n'y paraît, malgré la longueur de cette explication ;-)
Incorporer une image dans notre première page
Enfin, nous pouvons maintenant commencer l'objet précis de notre chronique d'aujourd'hui, à savoir, incorporer des images dans notre première page, créer dans la chronique précédente "Première page".
Si ce n'est pas encore fait, lancez WebExpert et chargez la page que nous avons créée "index.html".
Nous allons incorporer maintenant une image qui va remplacer
le mot "Bienvenue".
Ce fichier s'appelle " BIENROUGE.GIF". Vous devez télécharger cette image dans la section "Matériel", page "Images" ou par le fichier page1.zip qui comprend l'entièreté du matériel de la chronique et que vous pouvez télécharger en fin de cette page.
En fait, nous allons remplacer le mot "Bienvenue" ou la phrase "Bienvenue sur le site de…" que vous auriez pu créer, par cette image : avant tout, sélectionnez la ligne de code HTML, comprenant le mot "Bienvenue", ainsi que toutes les balises "<H1>", "<DIV>" et tapez sur la touche "delete". La ligne est maintenant supprimée et nous pouvons placer à sa place les codes de l'image.
Laissez le curseur à l'endroit où il se trouve actuellement...
Pour éviter que le code de l'image,
contienne le "path" de sa position sur votre disque dur, et donc, avec
pour désagrément que l'image ne sera pas visible sur le serveur de votre site
(path différent), cochez dans le menu "Outils/Préférences
générales", l'option "Copier automatiquement les fichiers référés
directement dans le répertoire courant". De cette manière, le fichier de
votre image sera copié dans le même dossier que votre page HTML...
Insertion de l'image "Bienvenue"
Par l'onglet "Spécialisés", cliquez sur le bouton
sous-titré "Insérer une image", vous obtenez la fenêtre suivante, que vous remplissez de la même manière (vous parcourez votre HDD pour vous placer dans votre répertoire de travail 'web' et cliquez sur le fichier "BIENROUGE.GIF" :
Remarquez une nouveauté de WebExpert 2000
: vous avez la possibilité d'aller sur le site "GoGraph" de Visicom
Media pour chercher une image qui pourrait vous convenir : c'est le bouton 
.
Après avoir cliqué sur OK, la fenêtre suivante apparaît :
Vous pouvez déterminer de placer l'image dans divers emplacements par rapport à la ligne de texte, "En bas", "Au milieu", "En haut" etc. Il a été choisi pour cet exemple "Au milieu", mais pour l'image qui nous occupe, cela n'a pas d'importance puisque celle-ci sera seule sur la ligne…
Bien sûr, vous devez également centrer l'image, comme nous avons vu précédemment (sélection de la ligne de code de l'image, "CTRL+E" ou le bouton "Centré" de l'onglet "Communs"
: les codes
<DIV ALIGN="center">
et </DIV> entourent maintenant le
code de l'image :
<DIV
ALIGN="center">
<IMG SRC="BIENROUGE.GIF"
BORDER=0 WIDTH=264 HEIGHT=36 ALIGN="middle">
</DIV>
Comme nous avons
défini des marges spéciales, le titre sera centré par rapport à celles-ci.
En effet, le fond d'écran choisi comprend une "bande latérale" et il
est nécessaire que le texte soit situé en dehors de celle-ci. (voir chronique
5)
Visionnez le résultat sur votre visionneur interne et ensuite, lancez votre navigateur (d'abord Netscape si vous possédez les deux Explorer et Netscape) : je vous ai déjà dit qu'il est préférable de vérifier souvent sous Netscape car celui-ci est beaucoup plus "pointilleux" sur les codes qu'Internet Explorer, d'autant que dans 99% des cas, cela sera correct sous Explorer aussi (l'inverse n'est pas toujours vrai).
Pour pouvez visionner directement le résultat maintenant.Pour ne pas rendre cette chronique interminable, je termine ici la Sixième chronique et vous permet de télécharger la totalité du matériel la constituant, c'est-à-dire les fichiers index.html et BIENROUGE.GIF, ceux-ci étant dans un fichier compacté : page1.zip.
La prochaine chronique traitera de l'incorporation d'autres fichiers graphiques (e-mail etc.), d'une adresse e-mail mais également d'un fichier graphique spécial "MAP" (image en coordonnées) qui va vous permettre de créer des liens à partir d'une image.
À bientôt.