Issuu on Google+

13

Esquisse de stage > Tutoriels >

Création d'une newsletter

La création d'une newsletter en 4 étapes ! La barre de navigation Faire naviguer les clients sur ses sites rapidement est le but premier de la barre de navigation.

Le présentoir Le corps de la newsletter dévoile l'information principale.

Les modules Les petits plus de la newsletter, ils permettent d'afficher plusieurs autres produits ou informations.

Le pied de page La signature de la newsletter contient les mentions légales, les conditions d'achat et tout ce qu'il y a en bas de page.

A quoi ça sert ?

La newsletter sert à faire part d'une nouvelle importante d'une entreprise, nouvelle article, nouvelle parution, les promotions du moment ou tout simplement informations sur les nouveautés pour les abonnés.

En stage

De nouveaux numéros allaient paraître dans peu de temps et il fallait informer les personnes des articles présents à l'intérieur de ces numéros, mais il fallait aussi faire de la pulicité pour la librairie des Éditions Diverti. Je dûs donc faire quelques newsletters, sous les ordres des schémas dessiné par Hervé. La difficulté de ce travail résidait dans l'adaptation du code au logiciel d'envoi mais aussi à chaque boîte mail et chaque navigateur, une mission presque impossible.


14

Esquisse de stage > Tutoriels > Création d'une newsletter >

La navigation

La barre de navigation Cette barre de navigation est en faîte un tableau de 7 colonnes (4 pour chaque titre et 3 pour les barres de séparation) et de 1 ligne. Donc pour créer ce tableau j'aurais besoin de créer un code comme celui-ci: <table width="600" cellpadding="0" cellspacing="1"> <td width="25%"><center>Nouveautés</center> </td><td width="0%">barre </td><td width="25%"><center>Livres & DVD</center> </td><td width="0%">barre </td><td width="25%"><center>Abonnements</center> </td><td width="0%">barre </td><td width="25%"><center>Anciens numéros</center> </td></table>

Le tableau qui apparaît n'a pas de barres de séparations, pour créer ces barres, je dois appliquer une balise div qui remplacera les mots "barre" que j'ai placé. <div style="background-color: white; width: 1px; height: 20px"></div>

Le tableau qui apparaît n'a rien d'intéressant et on semble encore loin du résultat que l'on souhaite. Pour l'améliorer, il faut intégrer des codes qui permettront de l'embellir. Déjà je lui applique un fond coloré .

Le petit plus Il existe beaucoup de styles différents de barre de navigation, allant du menu qui se déroule au passage de la souris à celui uniquement composé d'images magnifiques qui semblent s'animer sous nos yeux. Pour débuter, il vaut mieux en faire une simple. Basique mais pourtant classe, ce genre de barre que vous allez réaliser est plutôt sobre mais on la voit souvent. La beauté est dans la simplicité sur internet.

<div style="background-color:#006666"> <table width="600" cellpadding="0" cellspacing="1"> <td width="25%"><center>Nouveautés</center> </td><td width="0%">...</td><td width="25%"><center>Anciens numéros</center> </td></table></div>

On se rapproche de la fin, maintenant il faut que je créer les liens qui dirigeront vers les pages externes à la newsletter et ajouter une class à ces liens. Donc j'applique ce code à chacun des titres. <a href="votre lien" class="Style1" target="_blank">VOTRE TITRE</a>

Je peux maintenant quitter le corps du code et passé dans le coté css de notre page, donc entre </head> et <body> il faut que j'ajouter ce code <style type="text/css"> <!-a.Style1 { font-size: 11px; font-family:Arial, Helvetica, sans-serif; color:#ffffff; text-decoration:none; } a:hover.Style1 { color: #ccff99; } --> </style>

Les choses importantes sont surlignées en jaune, pour le précédent code. Vous pouvez modifier l'apparition des titres en intégrant votre propre mise en forme au passage de la souris (hover) ou non.


15

Esquisse de stage > Tutoriels >Création d'une newsletter >

Le présentoir

Le présentoir Ici le présentoir nous fait voir en premier lieu une publicité puis un produit favoris. Le code pour ce présentoir est donc simple, le premier élément est une image travaillée à la bonne taille, pour le produit favoris c'est un tableau. Je commence donc pas intégrer l'image qui possède un lien : <a href="lien"><img src="lien d'image"></a>

L'image sous certains navigateur risque de posséder une bordure bleu, ce qui rend ma mise en page peu agréable, pour éviter cela il suffit d'effacer cette bordure: <a href="lien"><img src="lien d'image" border="0"></a>

Je peux maintenant m'occuper du reste de cette partie, autrement dit le tableau. <table width="600"><tr valign="top"> <td width="50%">Livre </td><td>Coup de cœur </td><td>Résumé</td></tr></table>

Le livre est une image possédant un lien dirigeant vers sa fiche détaillée dans la boutique quand à l'annonce du prix en dessous, la feuille de style que j'utiliserais fera le travail. Je remplacerais donc le mot livre par : <a href="lien"><img src="lien d'image" border="0"></a><br/> <span class="Style2"><strong>Titre</strong><br/> Texte</span>

Pour le coup de cœur il s'agit simplement d'une image donc passons au résumé, composé de quatres styles différents il faut simplement que j'utilise une autre fois le css <span class="Style3">Titre du livre</span><br/> <span class="Style4">Petit plus</span><br/> <span class="Style5">Type de livre</span><br/> <a href="lien" class="Style6">En savoir plus</a><br/><br/> <span class="Style7"><em>Introduction</em><br/> <strong>Au sommaire:</stong>Résumé</span>

<style type="text/css"> <!-.Style2 {color: #006666; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: italic; line-height: 15px } .Style3 {font-size: 24px; font-family: Arial, Helvetica, sans-serif; } .Style4 { font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight:400; }

les feuilles de sty e d p u o c u a e b J'utilise ter organisé s e r r u o p p u o uc sent différentes, d fre et les clas if h c n u t u ib r je leurs att ent m'y retrou m ile c fa r u o p e dans l'ordr ver.

.Style5 }

{ font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 14px; padding-bottom: 5px

a.Style6 { font-size: 12px; font-family:Arial, Helvetica, sans-serif } .Style7 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px } --> </style>


16

Esquisse de stage > Tutoriels > Création d'une newsletter >

Les modules

Les modules Les modules sont des parties que l'on peut ajouter facilement, ils présentent des articles mais ils pourraient aussi présenter des reportages et d'autres textes. Ici le module allit un tableau de trois colonnes et des feuilles de style d'abord je fais le tableau : <table width="600"><tr valign="top"> <td>Article 1</td><td> Artcile 2</td><td> Artcile 3</td></tr></table>

Je créer le code qui ira à la place des articles. <center><img src="lien d'image"></center><br/><span class="Style8">Type d'article<br/> Auteur</span><br/> <span class="Style9">Offre</span><br/> <a href="lien" class="style10">En savoir plus</a>

Maintenant que j'ai placé les codes dans le tableau, mon module est terminé, je fais une sauvegarde du code dans un dossier où je regrouperais mes autres modules codés.

<style type="text/css"> <!-.Style8 { font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight:400; } .Style9 { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } a.Style10 { font-size: 12px; font-family:Arial, Helvetica, sans-serif } --> </style>

Le pied de page Comportant la signature et des liens supplémentaires, le pied de page clôt la newsletter,elle permet de voir qui est l'expéditeur et de savoir qui contacter. Dans un premier temps je vois qu'il y a deux parties à ce pied de page Je commence donc par créer la séparation : Partie 1 <center><div style="background-color: #000000; width: 595px; height: 1px"> &nbsp; </div></center> Partie 2

La première partie, posséde des marges et un grand blanc après la première ligne il faudra que j'utilise deux div. <div style="padding-left: 15px; padding-right: 15px;"> <span class="Style11">Première phrase<br/> <div style="padding-left: 250px"> Bien amicalement,<br/> <em><strong>Prénom de l'expéditeur</em></strong><br/> <em><stong><a href="lien">www.site.com</a></strong></em> </div> </span></div>

La deuxième partie est plus simple elle demande juste un ajout de feuilles de styles et un centrage. <br/><br/> <center><a href="lien" class="Style12">Lien</a> <span class="Style13">-</span> <a href="lien" class="Style12">Lien</a> <p class="Style14">Mentions légales</p></center>

<style type="text/css"> <!-.Style11 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } a.Style12 {font-size: 12px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-decoration:none; } a:hover.Style12 { color: #ccff99 } .Style13 { font-size: 10px; font-family:Arial, Helvetica, sans-serif; color:#333333; text-decoration:none; } .Style14 { color: #333333; font-size: 9px; font-family: Arial, Helvetica, sans-serif; text-align:center } --> </style>


Tutoriel de codage — Newsletter