Un tuto gentiement offert par GEE MEE

Voici un « cadre » avec ascenseur :

^ Chat faux, bleu

^ Chat faux tôt

^ Chat : photo et maori

Voici le code, brut de décoffrage, mais sans malle de vis :

<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left"><span style="font-size:10pt"><img src="http://geemee.hautetfort.com/images/Chat_faux_bleu.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux, bleu<br /> <img src="http://geemee.hautetfort.com/images/Chat_faux_tot.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux tôt<br /> <img src="http://geemee.hautetfort.com/images/Chat_photo_et_maori.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat : photo et maori<br /></span></div>

Pour comprendre le code :

<div

On crée la division, dont la mise en forme en fera un cadre.

style="border: 2px solid #ffffff;

On fixe le style du cadre, la bordure aura 2 pixels d'épaisseur, en trait continu, et sera de couleur blanche.

overflow: scroll;

C'est le principal. Littéralement, si le flux déborde, on fera défiler.

width: 480px;
height: 380px;

Le cadre fera 480 pixels de large pour 380 pixels de haut.

background-color: #ffffff;"

L'arrière-plan sera blanc. C'est la fin du style du cadre

align="left">

On alignera à gauche.

<span

On crée une rupture dans la feuille de style courante.

style="font-size:10pt">

La taille des caractères sera de 10 points.

 

Puis c'est du classique, on insère une image dont on précise la taille, que l'on fait suivre de quelques mots de légende.

</span>

On ferme la rupture dans la feuille de style.

</div>

On ferme la division, et donc le « cadre ».

Si vous avez la curiosité de regarder le code source de la page du blog de Pierrot, vous constaterez qu'il y a bien plus de paramètres. Les barres de défilement sont colorées, notamment. Bizarrement, je n'ai pas réussi à intégrer le code in extenso dans une note. Est-ce un filtrage automatique, est-ce dû au fait que mon blog est gratuit ? Je suis preneur de toute explication.

Pour vous faciliter l'intégration, voici une courte feuille de route.

Un avertissement avant de commencer : Les critères de taille, valables pour le template de ce blog, ne sont pas forcément applicables au vôtre. Vous aurez peut-être à ajuster la taille du cadre et des photos.

1 – Préparer des images de taille « 459 x 344 » correspondant à un honnête 4/3.
2 – Téléchargez ces photos sur votre blog, via Tableau de bord / Fichier / Images
3 – Notez l'adresse de chacune des images téléchargées.
4 – Copiez le code ci-dessous et collez-le dans une note via la méthode code embed entre deux paragraphes pour garder la main avant et après le cadre.
<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left">
<span style="font-size:10pt">
<img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 1<br />
<img src="<!--adresse de l'image 2 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 2<br />
<img src="<!--adresse de l'image 3 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 3<br />
</span>
</div>
5 – Passez en éditeur HTML et remplacez <!--adresse de l'image 1 --> par l'adresse de l'image 1.
6 – Je vous conseille de rester dans l'éditeur HTML pour modifier ou supprimer les légendes. Dans l'éditeur Wysiwyg, dans la division, l'utilisation de la touche [Entrée] vous fera diviser la division.
7 – Pour insérer plus d'images, il suffira de procéder par copier/coller pour avoir assez de lignes complètes à modifier : <img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br /> ^ Légende de l'image 1<br />