|
Bonjour!
Voici un tutoriel simple pour personnaliser un courriel
ou une page Web.
Ici nous le ferons pour un courriel.
Intéressant à avoir : le Color Cop. Il est gratuit.
Vous pouvez le télécharger ici
Joins le dossier zip : frames
Placer le dossier frames, une fois dézippé, sur le bureau.
Le dossier contient:
Cinq images, numérotées qui sont des GIF animés de 150x150 pixels.
Une image boat en JPG de 489x473 pixels.
|
* Ajoutez dans ce dossier, une de vos images avec une autre dimension que la mienne.
|
Ie code_frames, que nous garderons intact pour usage ultérieur.
Le code_framescopy, que nous utiliserons pour la leçon.
Le code_scrollbar
Un midi.
Ouvrir le dossier : frames.
Sélectionner le texte code-framescopy et l'ouvrir.
Étudions les balises.
La balise commence par :  et se termine par
En rouge ce sont les liens de mes images que vous devrez remplacer par les vôtres.
En vert après TABLE border= nous avons le chiffre : 1
Le 1 représente la bordure du cadre.
Nous avons aussi un texte : Bonjour.
|
|
Ouvrir votre courriel.
Ici c'est Windows Mail, mais il est
possible de le faire dans Outlook Express.
Créer un nouveau message.
Affichage, Barre d'état et Modifier la source : coché.
Nous retrouvons au bas du message trois onglets, Modifier,
Source, Aperçu.
Sélectionner Modifier et faire un clic dans le corps du message.
Nous avons une barre qui clignote.
Faire Insertion, Image. Retrouver le dossier frames.
Sélectionner l'image 1star. Ouvrir.
Sélectionner l'onglet Source. Nous sommes en HTML.
Vous trouverez ici, le lien de l'image.
Surlignez seulement le lien en rouge qui se trouve entre les balises qui sont en bleu.
Les x rouges représentent votre lien.
Dans mon exemple c'est : C:\Users\hp\Desktop\frames\1star.gif
Le vôtre sera différent.
Ceci fait.
Faire un clic droit sur votre lien surligné et faire : copier.
Retrouver le texte code-framescopy.
Surligner le premier lien en rouge qui est le mien et coller le vôtre.
Le reste est simple, pour les autres liens nous allons garder le nom des images
qui se trouvent à la fin du lien et changer seulement ce qui ce trouve devant.
Surligner la première partie de votre lien avant : 1star.gif
|
Dans mon exemple : C:\Users\hp\Desktop\frames\
|
Faire un clic droit sur la partie surlignée (en bleu) et choisir : copier.
Surligner le deuxième lien en rouge avant : 2orange.gif
faire
un clic droit sur le lien surligné et faire : coller.
Surligner le troisième lien en rouge avant : 3yellow.gif
faire
un clic droit sur le lien surligné et faire : coller.
Surligner le quatrième lien en rouge avant : boat.jpg
faire
un clic droit sur le lien surligné et faire : coller.
Remarque: ici le code est fait en fonction de la dimension
de l'image boat qui est de de 489 par 473 pixels.
Nous verrons plus tard comment faire pour une image
ayant une autre dimension.
Ceci fait.
Faire Édition, sélectionner tout, Édition, copier.
Retrouver la source de votre message.
Positionner le curseur devant la balise
et surligner jusqu'a la fin.
Faire un clic droit sur la partie surlignée et faire : coller.
Voir en Aperçu.
Vous pouvez retourner dans la source pour modifier la
largeur des bordures.
Exemple : 3 et voir en Aperçu.
Exemple : 0 ( pour ne pas avoir de bordure) et voir en Aperçu.
Revenir à Modifier
Ici nous pouvons suprimer l'image et la remplacer par la votre.
Faire un clic sur l'image pour la sélectionner.
Nous avons autour de l'image, 8 petits carrés blancs.
Sélectionner l'outil ciseau pour la couper.
Faire Insertion, retrouver le dossier frames et sélectionnerr votre image. Ouvrir
Pour diminuer ou augmenter les cadres qui l'entourent.
Exemple ici je veux diminuer la largeur et augmenter la hauteur.
Positionner le curseur sur la bordure jaune, quand vous verrez 4 flèches opposées
faire un clic.
Nous avons autour du cadre des petits carrés blancs.
Positionner le curseur sur le carré blanc, vous verrez deux flèches opposées
et tout en maintenant glisser vers l'intérieur.
Répéter l'opération pour diminuer la largeur du cadre orange.
Répéter l'opération pour augmenter la hauteur des deux cadres.
Voir en Aperçu
Pour modifier la couleur de la Scrollbar
Étudions la scrollbar.
|
la base est rouge
la flèche est blanche
le 3dlight est vert
et le track est bleu
|
 |
Ouvrir le texte : code_scrollbar.
C'est ici que le Color Cop peut nous aider.
Ouvrir Color Cop.
Mais vous pouvez utiliser les couleurs dans Paint Shop Pro pour
retrouver
le code HTML d'une couleur.
Exemple : pour avoir une track de la couleur du fond de l'image,
ici c'est la tuile
avec étoiles sur fond bleu.
Faire un clic sur la pipette et en la maintenant enfoncée la glisser
sur la couleur
du fond et relâcher.
Nous avons dans Color Cop, sous la fenêtre, le code HTML de la couleur.
Surligner le code et faire copier.
Retrouver le texte code_scrollbar.
Surligner la couleur de track et faire un copier de la nouvelle couleur.
Configurer les autres éléments de la scrollbar à votre choix.
Ceci fait.
Sélectionner le code scrollbar en entier et faire copier.
Retrouver la source de votre message.
Placer le curseur après la balise : et coller le code.
Voir en Aperçu.
Il est encore possible de modifier les couleurs en changeant
le code HTML
des couleurs directement dans la source du message.
Pour insérer un midi.
Revenir à l'onglet Modifier.
Faire, Format, Arrière-plan, Son.
Sélectionner parcourir et retrouver le dossier, frames.
Si vous ne voyez pas le midi, sélectionner la fenêtre Fichiers audio
et sélectionner MIDI Files.
Sélectionner le midi, Ouvrir.
Dans Paramètres de répétition vous avez le choix de lire le son
plus d'une fois ou
de le mettre en continu.
Faire OK.
Voir le tout et entendre en Aperçu.
Revenir à Modifier pour envoyez le courriel.
|
