• Montage direct 1

    Je propose des montages par codes html, à écrire dans le code source (<>), ce qui peut faire reculer certain(e)s.

    Nous pouvons utiliser les outils de la barre d'outil expert pour obtenir de beaux résultats, simples à réaliser.

    Clic sur chaque vignette.

    Montage directMontage directMontage directMontage directMontage directMontage directMontage directMontage direct


    Pour obtenir ce résultat, il suffit de cliquer sur l'icône "image", de sélectionner l'image désirée dans vos fichiers, de déterminer les dimensions des vignettes (ici, 150x84px) et leur positionnement (gauche) et le lien vers la grande image au clic.

    Pour la seconde image, placer le curseur après la première vignette et recommencer l'opération.

    Montage direct

    Vous constatez que la première vignette se place à gauche de votre zone article; vous souhaiterez peut-être avoir l'ensemble centré et pouvoir décorer les vignettes; nous regarderons ça dans la page suivante.

    Voyons comment le programme a écrit notre montage dans le code source (<>); j'ai éclairci les lignes pour mieux comprendre.


    <p>

    <a href="http://ekladata.com/55O0ZqyD26m7O93Is5AzUqsY5R0.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/55O0ZqyD26m7O93Is5AzUqsY5R0@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/pJ6B6oDh4vzhnydAZMX2mUpuRus.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/pJ6B6oDh4vzhnydAZMX2mUpuRus@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/8QSzXrNz6suMsDHsFmiUAsy_eyU.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/8QSzXrNz6suMsDHsFmiUAsy_eyU@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/VJhG_u5pyzC96zJV-KogxjebaHw.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/VJhG_u5pyzC96zJV-KogxjebaHw@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/U2CSqYQgzq7uYNvJmBxH5Jf1Fl8.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/U2CSqYQgzq7uYNvJmBxH5Jf1Fl8@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/35I55RzwLaiE3cAp3kvUlpF_J38.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/35I55RzwLaiE3cAp3kvUlpF_J38@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/2mgaZSiT3xtkS-JzVH5zyDHmcBU.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/2mgaZSiT3xtkS-JzVH5zyDHmcBU@150x84.jpg" alt="Montage direct" /></a>

    <a href="http://ekladata.com/PTgxfsGc4uFLXYXJFdGSXdnrQr8.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/PTgxfsGc4uFLXYXJFdGSXdnrQr8@150x84.jpg" alt="Montage direct" /></a>

    </p>


    <a href="http://ekladata.com/55O0ZqyD26m7O93Is5AzUqsY5R0.jpg"><img style="float: left; padding-right: 5px;" src="http://ekladata.com/55O0ZqyD26m7O93Is5AzUqsY5R0@150x84.jpg" alt="Montage direct" /></a>

    L'image en lien.

    L'adresse de la vignette, réduite à la taille désirée et positionnée selon votre choix.

    Float:left; indique à l'image de se positonner à côté de la précédente.

    padding-right:5px; indique à l'image de laisser un espace de 5px avant l'image suivante.

     Nous allons regarder comment modifier ces attributs ... page suivante !