Newsletter HTML

493 vues

Publié le

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.

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
493
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Newsletter HTML

  1. 1. LA NEWSLETTER(aussi connue comme l’emailing)
  2. 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. 3. La découpeSous Photoshop découpez votrenewsletter en image à l’aide de l’outiltranche suivant les liens.
  4. 4. La découpeAttention il faut que les tranches soient En double cliquant sur une tranche vousbien 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. 5. La découpeVous enregistrerez toute les tranches en images en passant par Fichier > Enregistrer pour le web
  6. 6. Le schémaAvec un crayon et une feuille de papier vous allez schématiser les tableauxcorrespondant à la structure de votre newsletter. 1ère étape : tracez un grande cadre.
  7. 7. Le schéma2è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. 8. Le schéma3ème étape : Dessinez un nouveau tableau de 3 colonnes enfin d’optenir le structure du menu. 1 2 3 1 2 3
  9. 9. Le schéma4ème étape : Dessinez un nouveau tableau de 2 colonnes pour définir la structure du contenu. 1 2 1 2
  10. 10. Le schéma5è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. 11. Le HTMLVous 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. 12. Le HTMLVous 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. 13. Le HTML3è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. 14. Le HTML4ère étape : Dans la 2ème cellule de votre dernier tableau créé, créez un nouveau tableau de 2 ligneset 1 colonne.Vous avez désormais reproduit la structure de votre newsletter. 1 2
  15. 15. Le HTML5ère étape : Importez ou glissez-déposez vos images dans chacune des cellules de votre newsletterHTML.
  16. 16. Le HTML6è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 bordurebleue à l’insertion d’un lien sur votre image.
  17. 17. Le HTML7ère étape : Placez les liens avec un appel en «blank» sur chacune des images.
  18. 18. Le HTML8ère étape : Copiez-collez votre texte dans la dernière cellule du tableau et mettez le en page.
  19. 19. Votre newsletter est finie. Facile ?

×