Tutoriel de codage — Newsletter

13Création d'une newsletterEsquisse de stage > Tutoriels >

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 stageDe 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.

La création d'une newsletter en 4 étapes !

La barre de navigationFaire naviguer les clients sur ses sites rapidement est le but premier de la barre de navigation.

Le présentoirLe corps de la newsletter dévoilel'information principale.

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

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

14 La navigationEsquisse de stage > Tutoriels > Création d'une newsletter >

Le petit plusIl 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ébu-ter, 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 sou-vent. La beauté est dans la simplicité sur internet.

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é .<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 news-letter 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">  </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.

La barre de navigation

15Le 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:

Je peux maintenant m'occuper du reste de cette partie, autrement dit le tableau.

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

<style type="text/css">  </style>

J'utilise beaucoup de feuilles de styles

différentes, du coup pour rester organisé

je leurs attribut un chiffre et les classent

dans l'ordre pour facilement m'y retrou-

ver.

<a href="lien"><img src="lien d'image" border="0"></a>

<table width="600"><tr valign="top"> <td width="50%">Livre</td><td>Coup de cœur</td><td>Résumé</td></tr></table>

<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>

Le présentoirEsquisse de stage > Tutoriels >Création d'une newsletter >

16 Les modulesEsquisse de stage > Tutoriels > Création d'une newsletter >

Les modules

Le pied de page

Les modules sont des parties que l'on peut ajouter facile-ment, 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 :

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>

<table width="600"><tr valign="top"> <td>Article 1</td><td>Artcile 2</td><td>Artcile 3</td></tr></table>

<style type="text/css">  </style>

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.

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 :

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>

Partie 1<center><div style="background-color: #000000; width: 595px;height: 1px"> </div></center>Partie 2 <style type="text/css">

 </style>

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>

Documents

Tutoriel de codage — Newsletter