GraphismeTableaux ovales
Technique de décor
Tableau thématique
Un tableau de 173 pixels de large avec une image en arrière plan (orange.gif). Le tableau a la même largeur que l'image. On pense que l'image est sur le tableau, alors qu'elle est en dessous. On peut donc écrire un titre différent pour chaque tableaux sans avoir besoin d'utiliser une images différente à chaque fois! L'illusion est parfaite et le gain en poids (et donc en vitesse) est impressionnant puisqu'il n'existe qu'une image pour tous le site web. Découvrez dans l'Espace Membres, accessible par mot de passe, d'autre exemples de tableaux beaucoup plus complexe mais Ô combien plus esthétique :-).
Tableau nouveautés
Le design d'un site web passe d'abord par une gestion des feuilles de style mais pour réaliser une mise en page originale (une véritable interface web graphique), on utilise la technique des tableaux aux coins arrondis. Exemple de décor avec coins arrondis (couleur orange: #ffa000): |
 |
|
◊ NOUVEAUTéS ◊ |
||
 |
 |
Soit un tableau de 3 colonnes sur 3 lignes de 250 pixels de large. Les quatres coins du tableau sont remplis avec une image semi-transparente donnant l'illusion de l'arrondi! Une présentation qui permet d'éviter l'utilisation d'une seule grosse image toujours trops lourde. La hauteur du tableau s'adaptera automatiquement au contenu. Le premier intérêt de ce genre de présentation sous forme de tableau est le poid, et donc la vitesse de chargement. Une image identique à ce tableau serait forcément plus lourde et donc moins rapide au chargement. Autre atout : la possibilité de pouvoir réutiliser ce même tableau avec un texte différent (impossible avec une image).
|
 |
|
|
◊ NOUVEAUTéS ◊ |
|
|
|
|
Voici les quatre images à copier (dimensions: 11X11, poid: 64 octets chacune!):
Coin a:
Coin b:
Coin c: Coin d: et l'image transparente (poid: 45 octets!) : Leurre 5x5:
Voici le code du tableau à copier dans votre body :
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/coina.gif" width="11" height="11"></td>
<td width="200" bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="5" height="11"></td>
<td><img src="images/coinb.gif" width="11" height="11"></td>
</tr>
<tr>
<td bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="11" height="5"></td>
<td width="200" align="center" >
<font size="5">Votre texte<br>dans un <br>décor</font></td>
<td bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="11" height="5"></td>
</tr>
<tr>
<td><img src="images/coinc.gif" width="11" height="11"></td>
<td width="200" bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="5" height="11"></td>
<td><img src="images/coind.gif" width="11" height="11"></td>
</tr></table>
<tr>
<td><img src="images/coina.gif" width="11" height="11"></td>
<td width="200" bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="5" height="11"></td>
<td><img src="images/coinb.gif" width="11" height="11"></td>
</tr>
<tr>
<td bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="11" height="5"></td>
<td width="200" align="center" >
<font size="5">Votre texte<br>dans un <br>décor</font></td>
<td bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="11" height="5"></td>
</tr>
<tr>
<td><img src="images/coinc.gif" width="11" height="11"></td>
<td width="200" bgcolor="#ffa000"><img src="images/leurre5x5.gif" width="5" height="11"></td>
<td><img src="images/coind.gif" width="11" height="11"></td>
</tr></table>
