PHP : créer une newsletter avec Dreamweaver (Part 13) - Création du template de la newsletter
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 :
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
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
