Un menu (index) en images dans une banniere, un article, un module

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

---

* 5 articles a lire pour demarrer votre blog * Initiation au langage HTML * Tout pour modifier et embellir vos textes * Tout savoir sur les images  * Des gadgets * Votre blog ne ressemblera pas aux autres * Mes astuces * Référencements et indexations * Index des articles

Comments

[Makoto-chan]

Merci beaucoup pour la réponse!


Je crois que j'vais réussir a le faire ce menu ^^


mais mon problème d'étirement de l'image persiste... même avec un tableau =S 

[Makoto-chan]

Bonjour ou bonsoir! ^^


J'ai découvert ton blog parce que je cherchait a faire un menu sous forme de vignette... J'ai déjà les images que je souhaite utiliser, mais lorsque je veux les insérer elle s'écarte a
la taille de la bannière... 


J'ai passé du temps pour essayer de donner de l'allure a mon blog et un menu me serai utile... malheuresement je n'arrive a le mettre en place.


Si vous avez une solution, je suis toute OUI!!! =) 


Merci d'avance pour la réponse ^^'

[Aurelie]

Le plus pratique est de faire un tableau (sans couleur, donc invisible). Comme ça, tu définis précisément les tailles de chaque cellule, et chaque cellule va aussi être un lien vers la page
souhaitée.


http://faireunblog.over-blog.com/article-comment-faire-un-tableau-39300908.html

[Miamana]

Merci de ta réponse... Snif...

[Miamana]

Saurais tu comment créer un index sans se taperr 400 liens à mettre en copié collé? Merci!

[Aurelie]

Ah non, le principe est de faire des liens pour faciliter la navigation dans ton blog, et donc... de coller des URL. Mais je trouve que ça vaut le coup !!

[Krio]

bisous 

[Maman Câline]

Oh la la ! Tu est trés douée ... j'ai du mal rien que pour la mise en page et n'arrive pas à ce que je veux depuis 2 ans .... alors toi ...tu est une Mozart du clavier pour moi!

[Valérie]

Très sympa ces banières en formes j'adore


Bonne soirée, bize.

[chocoladdict]

et ça marche aussi sur une autre plateforme que over blog?
ça me tenterait bien mais j'ai peur de tout casser )..ça m'est déjà arrivé une fois )

[Aurelie]

Oui, ça marche, ça n'a rien à voir avec Over-blog !  C'est du code HTML.

[Elisa]

J´aime ton blog et tes avis.
Pour une fille presque nulle au début de son blog (il a presque 1 an) tes conseils sont superbes.
Merci
Elisa, Argentine 

[Aurelie]

Ravie d'être lue jusqu'en Argentine ! Bonne journée