Easy-Micro


GRAPHISME Graphisme
Tableaux ovales

Technique de décor

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

Afin de comprendre l'architecture, voici le même tableau avec les bordures définies à 1. Les images sont aussi définies avec un encadrement à 1 (bordures visibles).

Une image entièremment transparente (ici "leurre5x5.gif") insérée dans les colonnes et les lignes, permet de rapprocher les colonnes et les lignes du tableau. Cet image transparente permet de s'assurer que la largeur des colonnes et la hauteur des lignes correspondent parfaitement aux 4 images insérées dans les coins du tableau (comprendes? Si? No?).

Voici les quatre images à copier (dimensions: 11X11, poid: 64 octets chacune!):
Coin a: coin a  Coin b: coin b   Coin c: coin c  Coin d: coin d
et l'image transparente (poid: 45 octets!) : Leurre 5x5: image transparente



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>


Web Design Autre technique de décor : tableau thématique

THÉMATIQUES
Voyages
Emploi
Stages
Apprendre
Jeux
Horoscope
Sports
Bourse
Immobilier
Musique
Ciné


THÉMATIQUES
Voyages
Emploi
Stages
Apprendre
Jeux
Horoscope
Sports
Bourse
Immobilier
Musique
Ciné


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 poid (et donc en vitesse) est impressionant 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 :-).


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Dimanche 25 août 2019 - Semaine 34 - Saint Louis (Demain: Sainte Natacha)
Aujourd'hui, c'est l'anniversaire de Sean Connery (1930-89 ans), acteur britannique (James Bond). Autre 25 août: 1944 - Libération de Paris par la 2e division blindée (2e DB) de Leclerc.
Haut de page Easy-Micro