Créer la maquette de la newsletter

1. Sur une feuille de papier, dessiner, placer les éléments graphiques et les zones de texte fixes et modifiables que vous voulez voir figurer dans votre newsletter.

2. Placer a minima les mentions obligatoires :
Mention obligatoire 1 :
– Vous recevez cet email car vous avez demandé à recevoir les newsletters du site XXX.

Mention obligatoire 2 :
– Cet email ne se lit pas correctement? Affichez-le dans votre navigateur
Variantes :
– Si vous ne parvenez pas à lire correctement cet email, cliquez ici
– Si cet email ne s’affiche pas correctement, consultez la version en ligne

Mention obligatoire 3 :
– Si vous ne souhaitez plus recevoir d’emails de notre part, contactez-nous pour vous désinscrire.

Variante mixte 1 et 3 :
Vous avez reçu cet cet email en tant que membre du Club XXX. Si vous ne souhaitez plus recevoir d’emails, cliquez ici

3. Traduire le schéma en terme de nombre de lignes et de colonnes d’un tableau

4. Sous un éditeur de texte : construire le tableau
exemple : 1 ligne 2 colonnes
<table width= »600px »>
<tr>
<td></td>
<td></td>
</tr>
</table>

Quelques éléments utiles au formatage du tableau :
largeur : width= » »
hauteur : height= » »
couleur de cellule : bgcolor= »#xxxxxx »

5. Placer les mentions obligatoires. Indiquez les liens hypertextes sur les mentions. (balise <a href= »http://monlien.html »>mon lien</a>)

6. Placer les images de la charte graphique (fixes) (balise <img src= » »>)
– pour enlever l’entourage en bleu sur une image cliquable par un lien : ajouter border= »0″
– pour aligner une image en haut d’une cellule : ajouter  valign= »top » dans la balise du tableau <td valign= »top »>

7. Placer les éléments variables (images et textes)
Saut de paragraphe : <p>
Saut de ligne  : <br>

Quelques éléments utiles au formatage du texte :
Centrer : <center>mon texte</center>

Quelques éléments utiles au formatage des polices :
gras : <strong> mon texte en gras</strong>
italique  : <i>mon texte en italique</i>
surligné : <u>mon texte surligné</u>

Style de police : <font face= »ma police« >mon texte</font>
taille de la police : size= »x »
couleur de la police  : color= »#xxxxxx »

8. Envoyer les images et le fichier html par ftp dans le(s) répertoires de votre hébergeur (il est conseillé de créer un répertoire « images » qui contiendra toutes les images).

9. En cas de problème avec les accents à l’affichage, remplacer par le code html correspondant :
Car    Html
â    &acirc;
à    &agrave;
é    &eacute;
ê    &ecirc;
è    &egrave;
ë    &euml;
î     &icirc;
ï     &iuml;
ô    &ocirc;
œ    &oelig;
û    &ucirc;
ù    &ugrave;
ü    &uuml;
ç    &ccedil;
<    &lt;
>    &gt;
ß    &szlig;
ø    &oslash;
Ω    &Omega;
Р   &ETH;
Ø    &Oslash;
Þ    &THORN;
þ    &thorn;
Å    &Aring;