Créer des cadres attractifs est un bon moyen pour attirer le regard.

Que ce soit pour bien détacher une image, ou pour  démarquer une phrase d’un ensemble de phrases, on accentue l’importance de ces objets par des cadres attractifs appropriés.

1er exemple

un petit tableau avec style outset . Vous pouvez changer les couleurs, mettre une image ou non, plus ou moins de texte, le modifier et changer les dimensions.

 

news-letter

Tableau de style : OUTSET

Exemple de code pour ce cadre



<div align="center">
<table id="table34" class="aligncenter" style="border: 8px outset #ffff00; height: 369px; width: 444px;" border="0" cellspacing="0" bgcolor="#0000FF;">
<tbody>
<tr style="height: 9.8125px;">
<td style="width: 430px; height: 9.8125px;" align="center">&nbsp;
<a href="http://adresse de votre image"><img class="wp-image-357 aligncenter" src="http://adresse de votre image" alt="news-letter" width="357" height="245" /></a>
<span style="color: #993300;"><strong>Tableau de style : OUTSET</strong></span></td>
</tr>
</tbody>
</table>
</div>

 

L’intérêt des cadres 

Vous avez sans doute eu l’occasion de remarquer que maintenant presque toutes les pages de vente contiennent différents cadres, qui leur permettent de bien détacher chaque point important.

Il est possible de créer une multitude de cadres différents et faciles à utiliser , je vous en propose quelques-uns parmi les plus attractifs et utilisés, avec quelques astuces pour pouvoir les modifier selon vos besoins. Vous allez devoir copier et coller des petits codes html de la façon suivante.

Astuce 1 : Pour pouvoir repérer  aisément l’endroit où vous voulez placer votre cadre, par exemple au milieu d’un texte écrivez  CADRE ou un autre mot en majuscule à l’endroit ou vous voulez le placer sur l’éditeur visuel. puis cliquez sur l’éditeur de texte  et recherchez l’endroit où vous avez écrit ce mot en majuscule.

Attention: Quand vous recopiez vos codes respectez très scrupuleusement les espaces, sinon vous n’obtiendrez jamais votre cadre.

Modifier les couleurs facilement

Cadre important: Idéal pour mettre une information en valeur sur son site.

 

Astuce2: si vous voulez que les 2 fines bordures soient un peu plus écartées l’un de l’autre, changez la valeur border qui est de 5px , essayez en mettant 10px à la place et regardez la différence. Faites toujours attention aux espaces à mettre ou non , quand vous modifiez quelque chose.

je vous mets ci-dessous le code de ce cadre que vous allez copier et coller dans l’éditeur de texte à l’endroit choisi auparavant (voir astuce1).




<div style="padding: 3px; border: 5px double #ff6b00; background-color: #ffdbc1;"><strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site.</div>



Vous pouvez voir sur ce code que les codes couleurs sont en hexadécimal , ce sont des codes de couleurs que vous allez pouvoir changer à votre guise en choisissant d’autres codes couleur dans les palettes de l’ebook que je vous offre en PJ. Vous en trouverez une multitude d’autres sur Internet.Toujours faire très attention à ne pas effacer les signes suivants ou précédents comme les points virgules qui suivent.

 

Je vais donc vous présenter le même modèle que précédemment en modifiant la couleur du fond (background) et celle de l’encadré,(border) avec les codes couleur modifiés. Voir ci-dessous le code couleur qui est différent.

Cadre important: Idéal pour mettre une information en valeur sur son site.



<div style="padding: 3px; border: 5px double #F9A41E; background-color: #84d41d;"><strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site.</div>



 

Dans ce modèle, si vous continuez à écrire dans votre cadre, sans faire de saut de ligne (qui vous ouvrirait un autre cadre identique,) votre cadre s’agrandit au fur et à mesure que vous écrivez.

Cadre important: Idéal pour mettre une information en valeur sur son site.                                                                 Vous pouvez voir qu’il est possible d’ajouter autant de lignes que vous souhaitez. Pour passer à la ligne suivante  sans changer de cadre tapez sur votre tabulateur au lieu de faire Enter



<div style="padding: 3px; border: 5px double #6E81BD; background-color: #91bacf;"><strong>Cadre important</strong>: Idéal pour mettre une information en valeur sur son site.                                                                 Vous pouvez voir qu'il est possible d'ajouter autant de lignes que vous souhaitez. Pour passer à la ligne suivante  sans changer de cadre tapez sur votre tabulateur au lieu de faire Enter</div>



 

Je vous propose quelques autres modèles que vous pourrez modifier de la même manière

Cadre pointillés: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.



<div style="padding: 3px; border: 2px dotted #a5a5a5; background-color: #e3e3e3;"><strong>Cadre pointillés</strong>: Pour utiliser ce cadre, il suffit de copier puis coller le code qui se trouve ci-dessous.</div>



Les largeurs de cadre modifiables

Cadre peu large: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présente après le « width ». La valeur actuelle est de 300 pixels.
Pour utiliser le cadre, il faut recopier le code présent juste en dessous.



<div style="padding: 5px; width: 300px; margin: auto; border: 8px solid #67ab9f; background-color: #b3d8d2;"><strong>Cadre peu large</strong>: Pour personnaliser la largeur de ce cadre, il faut modifier la valeur présente après le "width". La valeur actuelle est de 300 pixels.
Pour utiliser le cadre, il faut recopier le code présent juste en dessous.</div>



Vous pouvez modifier les couleurs comme appris plus tôt, mais vous pouvez aussi modifier la largeur de votre cadre avec la valeur width telle qu’indiquée en  bleu. Si vous modifiez votre cadre avec un width:500px votre cadre sera plus large, si vous le diminuez  en mettant par exemple  width:200px votre cadre sera plus étroit.

Voilà enfin le cadre attractif que vous voulez tous avoir

Que presque tous les professionnels utilisent sur leur page de vente avec ses gros pointillés, vous pouvez également changer toutes les couleurs mais aussi les dimensions en écrivant ou avec l’aide des petits curseurs aux angles du cadre. 

 

 Tableau avec style: dashed, fond couleur


<div align="center">
<table id="table35" style="border: 4px dashed #ff0000; width: 396px; height: 63px;" border="0" cellpadding="5" bgcolor="FFFF00">
<tbody>
<tr>
<td style="width: 372px;"> Tableau avec style: dashed, fond couleur</td>
</tr>
</tbody>
</table>
</div>

couverture Ebook couleurs RGBTéléchargez votre ebook de codes de couleurs RGB , afin de l’avoir directement à votre disposition.
Faites un clic droit sue l’image, , enregistrer le lien sous.
Il existe un dictionnaire des couleurs que vous pouvez également consulter en ligne.
Si vous souhaitez savoir plus de chose sur les couleurs,
par exemple leur signification en numérologie,
laissez-moi un petit commentaire.
A votre succès.
Signature Betty