Un diaporama powerpoint Un diaporama javascript
Pour faire un album photos
Imaginons que vous voulez faire un album avec des photos de pompiers.
1) Ouvrez un dossier « pompiers » et mettez-y toutes vos photos : photo1.jpg, photo2.jpg ; photo3.jpg
2) Avec un logiciel de traitement de photo, ouvrez photo1.jpg et réduisez la taille (par exemple 100px maxi pour la plus grande dimension). Enregistrez ensuite, dans le dossier « pompiers », sous le titre : vig1.jpg. [vig comme ... vignette].
Faites de même pour toutes les photos. Vous avez alors, dans le dossiers « pompiers », des fichiers photo1.jpg, et vig1.jpg
3) envoyez le dossier « pompiers » à la racine de votre site.Et faites un essai pour voir si l’adresse : http://www.Votre-Site/pompiers/phot... ouvre bien votre photo1.
Pour moi, dans l’exemple ci-dessous, l’adresse est :
http://www.journal-la-mee.fr/bp/pom...
4) Fabriquez le code.
Vous trouverez toutes les explications dans le fichier ci-joint : . Attention, c’est un fichier Word, ce qui permet de repérer les couleurs. Mais il vaut mieux fabriquer le code dans un bloc notes (du genre de PSPad par exemple)
Quand le code est fait, il faut le copier intégralement dans l’article, toute la partie qui commence à
<font color="#0033cc">Titre : Album photos, cliquer pour agrandir</font>et finit à
</tbody>
</table>
</center>Ne pas copier code .... /code
<font color="#0033cc">Titre : Album photos, cliquer pour agrandir</font>
<div style="z-index: 1; left: 344px; width: 353px; position: absolute; top: 7px; height: 100px;" id="Layer1"><font color="#0033cc"></font></div>
<font color="#0033cc"><img width="30" height="30" border="0" alt="" src="http://www.journal-la-mee.fr/FL/G.jpg" /></font></a> <center>
<table cellspacing="10" cellpadding="0" border="0">
<tbody>
<tr>
<!-1) D'abord l'image agrandie, puis l'image-vignette-->
<td align="center"><a href="http://www.journal-la-mee.fr/bp/pompiers/photo1.jpg"><img border="0" src="http://www.journal-la-mee.fr/bp/pompiers/vig1.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo2.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig2.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo3.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig3.jpg " alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo4.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig4.jpg" alt="" /></a></td>
</tr>
<tr>
<!-2) La légende des photos-->
<!-- Captions with hyperlinks -->
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig1.jpg"><font size="2">Légende 1</font></a></td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig2.jpg"><font size="2">Légende 2</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig3.jpg"><font size="2">Légende 3</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig4.jpg"><font size="2">Légende 4</font></a> </td>
</tr>
<!-3) Ensuite une deuxième rangée de photos, comme la première -->
<tr>
<td align="center"><a href="http://www.journal-la-mee.fr/bp/pompiers/photo5.jpg"><img border="0" src="http://www.journal-la-mee.fr/bp/pompiers/vig5.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo6.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig6.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo7.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig7.jpg " alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo8.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig8.jpg" alt="" /></a></td>
</tr>
<tr>
<!-- Captions with hyperlinks -->
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig5.jpg"><font size="2">Légende 5</font></a></td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig6.jpg"><font size="2">Légende 6</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig7.jpg"><font size="2">Légende 7</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig8.jpg"><font size="2">Légende 8</font></a> </td>
</tr>
<!- Et une troisième rangée si on veut -->
<td align="center"><a href="http://www.journal-la-mee.fr/bp/pompiers/photo9.jpg"><img border="0" src="http://www.journal-la-mee.fr/bp/pompiers/vig9.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo10.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig10.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo11.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig11.jpg " alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo12.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig12.jpg" alt="" /></a></td>
</tr>
<tr>
<!-2) La légende des photos-->
<!-- Captions with hyperlinks -->
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig9.jpg"><font size="2">Légende 1</font></a></td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig10.jpg"><font size="2">Légende 2</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig11.jpg"><font size="2">Légende 3</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig12.jpg"><font size="2">Légende 4</font></a> </td>
</tr>
<!-3) Ensuite une deuxième rangée de photos, comme la première -->
<tr>
<td align="center"><a href="http://www.journal-la-mee.fr/bp/pompiers/photo13.jpg"><img border="0" src="http://www.journal-la-mee.fr/bp/pompiers/vig13.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo14.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig14.jpg" alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo15.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig15.jpg " alt="" /></a> </td>
<td align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/photo.jpg"><img border="0" src=" http://www.journal-la-mee.fr/bp/pompiers/vig16.jpg" alt="" /></a></td>
</tr>
<tr>
<!-- Captions with hyperlinks -->
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig13.jpg"><font size="2">Légende 5</font></a></td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig14.jpg"><font size="2">Légende 6</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig15.jpg"><font size="2">Légende 7</font></a> </td>
<td valign="top" align="center"><a href=" http://www.journal-la-mee.fr/bp/pompiers/vig.jpg"><font size="2"></font></a> </td>
</tr>
</tbody>
</table>
</center>Cela donne alors ceci :
Titre : Album photos, cliquer pour agrandir
 |
 |
 |
 |
| Légende 1 | Légende 2 | Légende 3 | Légende 4 |
 |
 |
 |
 |
| Légende 5 | Légende 6 | Légende 7 | Légende 8 |  |
 |
 |
 |
| Légende 9 | Légende 10 | Légende 11 | Légende 12 |
 |
 |
 |
 |
| Légende 13 | Légende 14 | Légende 15 |
Prévisualiser
On peut prévisualiser de la façon suivante :
Avec le bloc-notes PSPad, faire : fichier/Nouveau et écrire un document HTML.
Entre <body> ... et </body>, mettre le code ci-dessus. Puis cliquer sur : HTML/Prévisualiser
Cela permet de rectifier les erreurs éventuelles
Une vidéo
- Inserer1
Regarder, en bas de page, l’outil « joindre un document » et cliquer sur le petit triangle noir qui se trouve, à gauche, à côté de "télécharger à partir de votre ordinateur.
Il s’ouvre alors la fenêtre ci-contre :
- Inserer2
Entrer l’adresse internet de la vidéo.
Ici pour moi c’est :
http://www.lemonde.fr/web/portfolio...
Cliquer sur Télécharger
Puis revenir sur la page et cliquer sur « modifier la page » et y mettre le document qui est ici :
- Le Monde.fr : Les images de la semaine du 20 au 24
Enregistrer et tout est bon
Fil RSS 
