Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
17 mai 2012 4 17 /05 /mai /2012 10:47
Logo-Debutants.gif   Logogadgets.gif LogoPageHTML.gif  LogoPersonnalisation.gif   LogoImages.gif



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


 

                                    Rendez-vous sur Hellocoton !                                                        

 

Partager cet article

Repost 0
Published by Aurelie - dans Les images
commenter cet article

commentaires

Makoto-chan 29/08/2010 14:52



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 26/08/2010 22:19



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 27/08/2010 17:39



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 28/06/2010 18:07



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



Miamana 27/06/2010 17:40



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



Aurelie 28/06/2010 15:57



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 29/05/2010 07:58




bisous 




Maman Câline 28/05/2010 14:40



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 27/05/2010 21:01



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


Bonne soirée, bize.



chocoladdict 14/01/2010 14:39


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 14/01/2010 15:49


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


Elisa 14/01/2010 11:36


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 14/01/2010 15:48


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


Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation