Extensions et tutorials gratuits disponibles sur internet pour Dreamweaver. PHP et ASP. Classement thématique. Blog référencé par Adobe Communauté Dreamweaver.

Dreamweaver gratuit

PHP : créer une newsletter avec Dreamweaver (Part 13) - Création du template de la newsletter

24 mai 2007 | Posté par caroder à 21:30

Bookmark and Share

Avant de travailler sur l’interface de création de newsletter proprement dite, nous devons auparavant créer le template de la newsletter. Nous utiliserons pour cela les CSS pour lesquelles nous devons respecter un certain nombre de règles que vous trouverez ici.

Selon les préceptes de la mise en page CSS nous devons :
1. créer une div intégrant l’ensemble de la mise en page
2. intégrer les styles en dessous de cette div

Nous partons du principe que nous allons travailler sur 2 colonnes : une colonne contenant l’édito et les articles, une colonne contenant les brèves. La mise en page sur 2 colonnes en CSS se fait via le positionnement float.

Je vous conseille de travailler en faux texte votre template pour avoir un bon rendu de la mise en page finale. Voici pour ma part le template que je vais utiliser (on peut évidemment faire beaucoup mieux !) :

<body>
<style type="text/css">
div.conteneur {
margin: 10px;
width: 700px;
}
div.header1 {
background-color:#FF6600;
background-image:url(
http://www.monsite.com/img/logo.jpg);
background-repeat:no-repeat;
background-position:10px 10px;
font: normal 24px Arial, Helvetica, sans-serif;
padding:23px 10px 23px 180px;
color: #fff;
}
div.header2 {
background-color:#0099CC;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
padding:5px;
color:#fff;
text-align:right;
}
div.contenu {
font: normal 11px Arial, Helvetica, sans-serif;
color:#777;
margin: 15px 0 0 0;
line-height:15px;
width: 530px;
float:left;
}
p.edito {
border: 2px solid #0099CC;
padding:15px;
line-height:18px;
}
h1.article1 {
font: bold 13px Georgia, "Times New Roman", Times, serif;
color:#f60;
border-bottom: 1px solid #f60;
margin-top:20px;
}
p.article2 {
color:#555;
}
div.breves {
float: right;
width: 150px;
margin: 15px 0 0 10px;
background-color:#FFDFCA;
padding: 5px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
h2.breves1 {
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
color:#f60;
}
div.pied {
clear:both;
border-top: 1px dotted #ccc;
font: normal 11px Arial, Helvetica, sans-serif;
color:#999;
text-align:center;
margin-top: 20px;
padding: 5px;
}
</style>
<div class="conteneur">
<div class="header1">
La lettre de monsite.com
</div>
<div class="header2">
N°1 - juin 2007
</div>
<div class="contenu">
  <p class="edito">Ici texte
  <br /><br />
  Ici texte
  <br />
  <br /><br />
  <strong>Antoine Dupont</strong><br />
  <em>Rédacteur en chef de monsite.com</em></p>

<h1 class="article1">Titre du premier article  </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="
http://www.monsite.com/article.php?id_article=25">http://www.monsite.com/article.php?id_article=25</a></p>
<h1 class="article1">Titre du 2e article de la newsletter </h1>
<p class="article2"> Ici texte
<br /><br />
<strong>Pour en savoir plus :</strong> <a href="
http://www.monsite.com/article.php?id_article=25">http://www.monsite.com/article.php?id_article=32</a></p>
</div>
<div class="breves">
<h2 class="breves1">ICI TITRE DE CETTE COLONNE  </h2>
<p class="breves2"> Ici texte </p>
<h2 class="breves1">Ici titre 1  </h2>
<p class="breves2"> Ici texte <br />
    <strong><a href="#">Lire la suite</a></strong></p>
<h2 class="breves1">Ici titre 2  </h2>
<p class="breves2">Ici texte</p>
<h2 class="breves1">Ici titre 3 </h2>
<p class="breves2">Ici texte</p>
</div>
<div class="pied"> Disclaimer de la newsletter de monsite.com
<br />
<a href="#">Se désabonner de cette newsletter</a></div>
</div>
</body>

La prévisualisation dans le navigateur donne ceci :

news16

Pour le template final, nous allons supprimer tout ce qui relèvera de la mise en forme via l’éditeur HTML (TinyMCE).

Il ne restera donc plus que ceci dans le fichier après la balise <body> (hors les feuilles de styles ) :

<div class="conteneur">
<div class="header1">
La lettre de monsite.com
</div>
<div class="header2">
</div>
<div class="contenu">
</div>
<div class="breves">
</div>
</div>

Ce billet fait partie du tutorial dreamweaver newsletter


Commentaires

    background

    J'ai un pb avec le background de mes div. Il apparait sous thunderbird, sous outlook mais il n'est pas interpreté par mes webmail (gmail et hotmail) !
    Connaissez-vous une astuce pour forcer l'affichage ?

    Posté par ludwig_pop | 03 janvier 2008 à 19:35
  • Ca peut arriver...

    Effectivement certains webmails sont assez restrictifs (notamment Hotmail) sur les CSS dans les mails (ou alors rajoutent carrément leurs propres balises dans le code !!).
    Je n'ai malheureusement pas de solution si ce n'est de ne pas mettre les images en background mais de les afficher dans ton mail avec un .

    Posté par dmx-moteur | 04 janvier 2008 à 15:59
  • Liste des attributs CSS supportés par différents clients mail

    Pour compléter mon précédent commentaire, voici la liste des attributs CSS supportés par 14 cients mails différents :
    http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html

    Posté par dmx-moteur | 04 janvier 2008 à 16:04
  • Pas facile

    Merci pour ces tutos malgré la complexité sur la réalisation d'une newsletter html.

    Posté par malcus | 21 décembre 2010 à 10:00
  • http://www.arobase.org/newsletters/html.htm

    "Notez que pour obtenir un fond de couleur sur Yahoo! Mail et Gmail, il vous faudra englober le contenu de votre mail dans une balise . Sinon, ce sera fond blanc dans ces 2 webmails !"

    Posté par Biben | 25 février 2011 à 11:40
 

Poster un commentaire