Monter une newsletter en 3 étapes: - découper des tranches dans photoshop, - dessiner un schéma pour définir la structure de la newsletter, - monter la newsletter à l’aide de Dreamweaver.

1. LA NEWSLETTER
(aussi connue comme l’emailing)

2. Monter une newsletter en 3 étapes :
- découper des tranches dans photoshop
- dessiner un schéma pour définir la structure de la newsletter
- monter la newsletter à l’aide de Dreamweaver

3. La découpe
Sous Photoshop découpez votre
newsletter en image à l’aide de l’outil
tranche suivant les liens.

4. La découpe
Attention il faut que les tranches soient En double cliquant sur une tranche vous
bien jointes entre elles et il ne faut pas afficherez les options de la tranche,
qu’elles se superposent. vous pourrez ainsi changer son nom et
ses dimensions.

5. La découpe
Vous enregistrerez toute les tranches en images en passant par Fichier > Enregistrer pour le web

6. Le schéma
Avec un crayon et une feuille de papier vous allez schématiser les tableaux
correspondant à la structure de votre newsletter.
1ère étape : tracez un grande cadre.

7. Le schéma
2ème étape : Découpez votre cadre en cellules correspondant aux lignes de tranches dans Photoshop.
1
1 2
2
3
3
4
4
5
5

8. Le schéma
3ème étape : Dessinez un nouveau tableau de 3 colonnes enfin d’optenir le structure du menu.
1 2 3
1 2 3

9. Le schéma
4ème étape : Dessinez un nouveau tableau de 2 colonnes pour définir la structure du contenu.
1 2 1 2

10. Le schéma
5ème étape : Pour finir dessinez un tableau de 2 lignes.
Vous avez désormais la structure de votre newsletter. Il ne reste plus qu’à la faire en HTML.
1
1
2 2

11. Le HTML
Vous allez maintenant reproduire votre schéma à l’identique en HMTL sous Dreamweaver.
1ère étape : Créez un fichier HTML et renommer le titre de votre page.

12. Le HTML
Vous allez maintenant reproduire votre schéma à l’identique en HMTL sous Dreamweaver.
2ère étape : Créez un tableau de 5 lignes et centrez le ensuite dans la page.
1
2
3
4
5

13. Le HTML
3ère étape : Dans la 2ème cellule de votre tableau créez un tableau de 3 colonnes et dans la 3ème cel-
lule un tableau de 2 colonnes.
1 2 3
1 2

14. Le HTML
4ère étape : Dans la 2ème cellule de votre dernier tableau créé, créez un nouveau tableau de 2 lignes
et 1 colonne.
Vous avez désormais reproduit la structure de votre newsletter.
1
2

15. Le HTML
5ère étape : Importez ou glissez-déposez vos images dans chacune des cellules de votre newsletter
HTML.

16. Le HTML
6ère étape : Dans le code HTML placez le code suivant sur chacune de vos images :
style = "display:block;"
Ce code permet de ne pas générer d’écart entre les images dans Gmail.
Il faut mettre un petit texte dans chaque balise «alt» de vos images.
Mettre également la bordure de chaque image à 0. Ceci permet de ne pas avoir l’ignoble bordure
bleue à l’insertion d’un lien sur votre image.

17. Le HTML
7ère étape : Placez les liens avec un appel en «blank» sur chacune des images.

18. Le HTML
8ère étape : Copiez-collez votre texte dans la dernière cellule du tableau et mettez le en page.

19. Votre newsletter est finie. Facile ?