Créer un descriptif de page “riche”

Introduction

Les pages de création de caches ont un éditeur assez riche pour bien personnaliser le descriptif. Mais ce mode n’est disponible que lors de la première ouverture de cette page.
Si l’on souhaite comme beaucoup, prendre le temps de fignoler les descriptifs et donc d’enregistrer le travail commencé… mauvaise surprise lorsqu’on reprend l’édition… plus rien pour personnaliser les pages.

Le plus simple : créez la page de la cache avec toutes les informations nécessaires (coordonnées, taille de boîte, D/T, etc…) sans entrer de descriptif.

Enregistrez votre travail, et prenez le temps de peaufiner votre création en suivant les astuces ci-après.

1 - Préparation de la page - importer des images

Importer des images pour les insérer dans le descriptif

Entrez dans la cache que vous avez préalablement enregistrée.

Cliquez sur “Importer des images” Choisissez l’image à importer, et nommez-la puis … Upload
 

image

 

upload

Cliquez sur l’image pour la passer en plein écran et copiez le lien.

Conservez le bien sur un fichier bloc note par exemple.

2 - Les éditeurs HTML pour créer le descriptif

 

Créer le descriptif de la cache “à votre image”

Afin de proposer aux joueurs des descriptifs “riches” avec images et belles mises en page, nous devrions les “encoder” en “langage” html ce qui ressemble à ce genre de choses :

<p style=”text-align: left;”><span style=”font-size: 16px;”><span style=”color: #0000cd;”><strong>Créer le descriptif de la </strong></span></span></p>
<blockquote><span style=”font-size: 10px;”>&lt;table border=”0″ cellpadding=”2″ cellspacing=”2″ style=”height:60px;text-align:left;width:100%;”&gt;&lt;tbody&gt;</span></blockquote>

Autant dire que peu d’entre nous ne veulent ou ne peuvent créer les pages par ce langage. Rassurez-vous, nul besoin !! Il suffit d’aller sur cet éditeur :

http://www.mides.fr/geocaching-editeur-html-en-ligne

Sur cette page, vous allez créer votre descriptif avec les couleurs, la taille de caractères, …. Tout ce que vous souhaitez et il se chargera de générer le code pour vous.

Une fois terminé, cliquez sur “Source” 

Copiez la totalité du code qui apparaît et collez le dans le descriptif de la cache. Une fois enregistré vous verrez apparaître le descriptif tel que vous le désiriez !

3 - Mise en page et images

 Un peu de personnalisation

3-1 Insérer une image

Rien de plus simple : Cliquez sur l’icône “Image”
Collez alors le lien de votre image que vous aviez préalablement sauvegardé. Modifiez la taille de l’image à votre guise et validez avec OK. Votre image est alors présente dans le texte !

NB : si vous souhaitez modifier ultérieurement la taille de l’image il suffit de sélectionner l’image en cliquant dessus, puis de cliquer sur l’icone “image” pour accéder au paramètres.

 

collez

 

          3-2 Utiliser les tableaux

Pour votre mise en page, utiliser textes et images accolées peut poser des problèmes “d’alignement”, par exemple :

J’écris un texte à côté d’une image  A

Ce n’est pas forcément très esthétique, et on pourrait vouloir que le texte soit centré par rapport à l’image.

Ce n’est pas compliqué, il suffit d’utiliser un tableau via l’icone : 

On choisit :

– le nombre de lignes et colonnes (dans notre cas une de chaque)
– la largeur du tableau (soit en pixel, soit en % de largeur de page) (par exemple 100% ajustera le tableau à la largeur de page quel que soit l’écran)
– la taille de la bordure (mettre à 0 si on ne veut pas voir de contour) – par exemple, ce texte et cette image sont dans un tableau à bordures masquées.

proptabl

 

 

 

 

On écrit alors notre texte dans une cellule et on place l’image dans la cellule voisine.
Texte et images sont désormais alignés.
A

 

Voilà, vous avez quelques bases , à vous de dompter la bête !!!!