Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Album photos, vidéo

Album photos, vidéo


FTP : installation et usage

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/photo1.jpg ouvre bien votre photo1.

Pour moi, dans l’exemple ci-dessous, l’adresse est :
http://www.journal-la-mee.fr/bp/pompiers/photo1.jpg

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/0,12-0@2-3208,31-754071,0.html

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



FTP : installation et usage