![]() |
![]() |
![]() |
![]() |
![]() |
Un index en images est une suite de petites images (ou vignettes) qui
représentent les catégories de votre blog, et comportent un lien vers ces catégories.
1. Une représentation graphique de la structure de votre site
Présenter un index en images est un bon moyen de faciliter la navigation dans votre blog :
* Des images sont plus attractives que du texte
* Plus besoin pour vos visiteurs de rechercher des éventuels articles,
* même si votre visiteur est venu via un article bien précis, il szera peut-être tenté d'aller en lire un autre grâce à votre index.
2. Faire un index en images
Pour faire un index en images, vous devez :
* Tout d'abord vous faire des images qui vont représenter vos catégories.
* Faire un tableau afin d'aligner ces images.
* Créer un lien entre chaque image et l'article ou la page vers lequel il doit conduire
3. Ou placer un index en images ?
Il est possible de placer cet index à plusieurs endroits :
. Dans la bannière : vous pouvez ajouter cet index à votre bannière de blog
Voir un exemple d'index en bannière ICI
. Vous pouvez mettre un index dans un module, comme sur ce
blog, colonne de droite.
. Vous pouvez mettre un index dans la page d'accueil de votre blog.
Voir un exemple d'index en page
d'accueil en cliquant ICI
3. Le code HTML de votre index en image
3. 1 Code HTML d'un index en images :
<table border="0" cellspacing="2" cellpadding="3" align="center">
<tbody>
<tr>
<td><a href="url page liee 1"><img src="url vignette 1" alt="description vignette1" class="noAlign" /></a></td>
<td><a href="url page liee 2"><img src="url vignette 2" alt="description vignette 2" class="noAlign" /></a></td>
...
</tr>
</tbody>
</table>
3.2 Personnalisation du code HTML d'un index en images :
Border = x : mettre un chiffre > 0 pour avoir une bordure d'encadrement ; le cellspacing et cellpadding servent à ajustyer l'espacement dans et entre les
cellules.
Il y aura autant de lignes commençant par <td> que de colonnes.
Pour chacune d'elles, mettre l'adresse url de la page vers laquelle la vignette va pointer, et l'adresse url de votre
image
Articles pouvant vous interesser : | Mettre une image dans vos articles |
Comment faire un tableau (code HTML) | |
Faire un lien avec une image | |
Mettre des liens en texte |
![]() |
![]() |
![]() ![]() |
![]() |