AccueilOrganisationsProgrammesSouvenirsAnnoncesPratique
 Compte-rendusAlbumArchivesMédaillés
Les "Rossini"A: Trieste-Thonon (2002)A: Antibes-Thonon (2003)P: Thonon-Venise (2005)P: Antibes-Thonon (2006)
Album photosFilm  À imprimer (PDF)

Premier titre

Second titre (--- km, date)

par Rédacteur
http://abeille-cyclotourisme.fr/souvenirs/en_travaux.html


--

Exemple d'en-tête 1

Codage de caractères en UTF-8 (utf-8)

Ici, j'ai ajouté du texte sur le mac dans BBEdit, à la main, avé des caractères accentués mac.

Exemple d'en-tête 2

Exemple d'en-tête 3

Exemple d'en-tête 3 modifié pour en faire un titre de jour (style "jour"), constitué d'une balise <h3> avec la classe "jour", soit <h3 class="jour">

Exemple d'en-tête 4

Exemple d'en-tête 4 modifié pour en faire un titre de jour (style "jour"), constitué d'une balise <h4> avec la classe "jour", soit <h4 class="jour">

Exemple d'en-tête 5
Exemple d'en tête 6
Exemple de bloc flottant à droite avec la classe dépréciée <div class="pullquote">. Cette classe, maintenant dépréciée insérait un bloc de largeur constante de 200px.

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié. Pour éviter que le paragraphe suivant le démarre sous le bloc de droite, on le termine, juste avant la balise </p>, par un <br> innocent stylé: <br style="clear: both;">

Exemple de bloc flottant à droite avec la classe <div class="pullquote_25p">, de largeur proportionnelle 25%

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié. À droite de ce paragraphe, on trouve un insert suivant la nouvelle classe équivalente à la précédente mais dimensionnée en relatif (donc d'allure analogue à l'écran et à l'impression).

Exemple de bloc flottant à droite avec la classe <div class="pullquote_35p">, de largeur proportionnelle 35%

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié.

Exemple de bloc flottant à droite avec la classe <div class="pullquote_48p">, de largeur proportionnelle 48%

Exemple de paragraphe commençant par une balise <p> normale. Ce paragraphe commence à gauche par 30px de blanc suivi, d'un retrait de première ligne de 30px aussi (total 60px, mais uniquement pour la première ligne). Il se termine à droite par 30px de blanc. Le texte est justifié.


1° cellule de type <td>2° cellule de type <td>
cellule (ici unique) d'un tableau de type "Jean Truffy", de largeur fixée à 95% pour contourner le bug IE6, centré par une balise dépréciée <center> et sans balise de paragraphe.
cellule d'un tableau de type "Jean Truffy", sans aucune balise de paragraphecellule d'un tableau de type "Jean Truffy", sans aucune balise de paragraphe

cellule d'un tableau de type "Jean Truffy", contenant une balise <p>

cellule d'un tableau de type "Jean Truffy", contenant une balise <p class="droit">

cellule d'un tableau de type "Jean Truffy", contenant une balise <p class="centre">

cellule d'un tableau de type "Jean Truffy", contenant une balise <p class="adroite">

(S'en remettre à l'avis de Monsieur le Maire)


Exemple de paragraphe commençant par une balise <p class="droit">. Ce paragraphe commence à gauche par 30px de blanc. Il se termine à droite par 30px de blanc. Le texte est justifié.

Exemple de paragraphe de classe <p class="centre">

Exemple de paragraphe <p class="adroite">

Pour choisir un style normal sous Dreamweaver, il faut d'abord que la feuille de style soit à sa place. Ensuite, on choisit soit les formats "Paragraphe", "En-tête 1", "En-tête 2", etc... À chaque retour chariot, le style précédent est automatiquement reproduit pour le nouveau paragraphe.


Avec la balise <div class="floatright_400">Exemple de photo de 400px de large flottée à droite</div>

On peut aussi faire flotter des photos à droite ou à gauche. Si on n'a pas de légende à mettre, il suffit de donner aux photos la classe "floatright" pour la flotter à droite et "floatleft" pour la flotter à gauche et laisser les balises de photos dans le paragraphe comme indiqué dans les deux derniers paragraphes de cette page. Par contre, si on a une légende à mettre, il faut que la largeur de la photo en px corresponde au dimensionnement en px inscrit dans la classe et créer, avant la balise du paragraphe en question, une classe "div" spéciale contenant la photo, un retour chariot et la légende. A ce jour, on a de disponible "floatleft_225" et "floatright_225" pour photos de 225px", floatleft_300" et "floatright_300" pour photos de 300px, "floatleft_350" et "floatright_350" pour photos de 350px, "floatleft_400" et "floatright_400" pour photos de 400px, "floatleft_450" et "floatright_450" pour photos de 450px.

Pour choisir une classe de paragraphes, se mettre en style "Paragraphe", et actionner la commande de menu: Texte:Style personnalisé (p). On voit alors apparaitre: "Aucun", "adroite", "centre", "compte_rendu", "droit". Les autres sont marqués "non disponible". Si on se met dans autre chose qu'une balise "Paragraphe", toutes les classes apparaissent comme "non disponibles", ce qui est, pour le moment, exact.

Une balise <p> normale s'obtient en choisissant "Aucun",

Une balise "droit" s'obtient en choisissant "droit",

etc.

On peut aussi mettre en gras en utilisant le style "gras". Pour ce faire, surligner le mot en question et actionner la commande de menu: Texte:Style personnalisé (p). On voit alors apparaitre "gras". De même, les styles personnalisés suivants (toujours pour mot ou groupe de mots) suivants sont disponibles: "moinsun", "souligne", "italique", "plus un", "plusdeux", "plustrois".

Ceci permet normalement d'éviter totalement l'usage des balises dépréciées <b>, <u>, etc et de les remplacer par des styles (des balises du type <span class="gras">) figurant dans la feuille de styles générale du site Abeille.

Abeille<img class="floatleft" src="url de l'image-" alt="désignation de l'image" height="hauteur en px" width="largeur en px"> Image insérée à gauche du paragraphe. La classe "floatleft" appliquée, qui ne marche que pour la classe "compte_rendu", flotte l'image vers la gauche et insère 10px de marge à droite et en dessous de l'image mais pas aillleurs.

Pour forcer un paragraphe, situé juste après une image flottée sur la gauche, à attendre pour débuter, la fin de l'image située autrement à sa gauche (ici un paragraphe <p>), insérer le style clear: left; ("left" car l'image est flottée à gauche) dans la balise du paragraphe. Ici, ce paragraphe est stylé: <p style="clear: left;"> (ou, pour ne pas se casser la tête en choisissant entre gauche et droite, <p style="clear: both;">).

Abeille<img class="floatright" src="url de l'image-" alt="désignation de l'image" height="hauteur en px" width="largeur en px"> Image insérée à droite du paragraphe. La classe "floatright" appliquée, qui ne marche que pour la classe "compte_rendu", flotte l'image vers la droite et insère 10px de marge à gauche et en dessous de l'image mais pas aillleurs.

Quand on veut, de manière analogue à ce qui précède, attendre la fin d'une image flottée à droite pour débuter le paragraphe suivant, on style le paragraphe suivant par le style="clear: right;", soit pour cette balise <p>: <p style="clear: right;"> (ou, pour ne pas se casser la tête: <p style="clear: both;">).

On peut dimensionner une image (en largeur) en % (100%, ou 80%, ou toute autre valeur) en dimensionnant l'image largement en pixels (par exemple, ici, 1200 px pour 80%) et en laissant le poste client calculer la hauteur. Avantage, marche en vue écran et à l'impression. Inconvénient: ça mange du temps, et de l'espace disque. Si on veut en outre la centrer, le mieux est d'utiliser le conteneur <div class="floartcenter"> (ou <p class="floatcenter">), qui mettra une marge en dessous (1%) de l'image, centrera dans le conteneur parent et interdira les textes à gauche et à droite de l'image et les sauts de page dans l'image. Ici (dessous), la syntaxe avec une balise div (la balise conseillée) est:
      <div class="floatcenter">
        <img class="floatcenter" alt="Prague la nuit" src=
        "photos_2009/ppg_prague_castle_night.jpg" style="width: 80%;"><br>
         Commentaire de la photo
      </div>

Prague la nuit
Commentaire de la photo

Notons l'absence de désignation de hauteur pour l'image, ce que les robots (Netscape 7.2, Kompozer, Dreamweaver, etc.) détestent tous faire. Et pourtant, il n'y a pas d'autre solution. Cette technique entraîne une forte consommation de ressources (volume, bande passante, calcul). Il en résulte une relative lenteur d'affichage. Demain, avec des machines plus véloces, un débit plus grand sur internet et de l'espace disque plus important chez l'hébergeur, on pourra sans remords, à l'image des grands hébergeurs d'albums de photos, généraliser cette technique pour flotter des photos à droite ou à gauche. Celles-ci auront alors une taille apparente identique à l'écran et à l'impression.

Boiboite à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant deux boites ("boitegauche") et ("boitedroite"), chacune dimensionnée à 49.9%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boitegauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boitedroite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 2&deg; photo
        </div>
        <br style="clear: both;">
         Commentaire des deux photos
      </div>

Prague la nuit
Commentaire éventuel 1° photo
Prague la nuit
Commentaire éventuel 2° photo

Commentaire des deux photos

Boiboite à 3 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant trois boites ("boite33gauche"), ("boite33milieu") et ("boite33droite"), chacune dimensionnée à 33.2%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite33gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite33gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite33droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 3&deg; photo
        </div>
        <br style="clear: both;">
        Commentaire des trois photos
      </div>

Prague la nuit
Commentaire éventuel 1° photo
Prague la nuit
Commentaire éventuel 2° photo
Prague la nuit
Commentaire éventuel 3° photo

Commentaire des trois photos

Boiboite à 4 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant quatre boites ("boite25gauche"), ("boite25gauche"), ("boite25gauche") et ("boite25droite"), chacune dimensionnée à 24,8%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite25gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 3&deg; photo
        </div>

        <div class="boite25droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
          Commentaire &eacute;ventuel 4&deg; photo
        </div>
        <br style="clear: both;">
        Commentaire des quatre photos
      </div>

Prague la nuit
Commentaire éventuel 1° photo
Prague la nuit
Commentaire éventuel 2° photo
Prague la nuit
Commentaire éventuel 3° photo
Prague la nuit
Commentaire éventuel 4° photo

Commentaire des quatre photos

Boiboite à 5 places à la mode d'Olivier ("boiboite"): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant cinq boites ("boite20gauche"), ("boite20gauche"), ("boite20gauche"), ("boite20gauche") et ("boite20droite"), chacune dimensionnée à 19,8%, contenant chacune une photo dimensionnée à 100%. Le truc, ici, est que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

      <div class="boiboite">
        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 1&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 2&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 3&deg; photo
        </div>

        <div class="boite20gauche">
          <img class="floatleft" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 4&deg; photo
        </div>

        <div class="boite20droite">
          <img class="floatright" alt="Prague la nuit" src=
          "photos_2009/ppg_prague_castle_night.jpg" style="width: 100%;"><br>
           Commentaire &eacute;ventuel 5&deg; photo
        </div>
        <br style="clear: both;">
         Commentaire des cinq photos
      </div>

Prague la nuit
Commentaire éventuel 1° photo
Prague la nuit
Commentaire éventuel 2° photo
Prague la nuit
Commentaire éventuel 3° photo
Prague la nuit
Commentaire éventuel 4° photo
Prague la nuit
Commentaire éventuel 5° photo

Commentaire des cinq photos

Boiboite à la mode de Jean ("boiboite", aussi): boite sans aucune marge ni padding, dimensionnée à 100% et centrée, contenant deux boites ("boitegauche") et ("boitedroite"), contenant chacune une photo dimensionnée à autre chose que 100%. on pourrait mettre 80%, ici, comme Jean, on met 400px. Il demeure indispensable que les photos aient la même hauteur. Sinon ça serait laid.

La syntaxe conseillée est:

     <div class="boiboite">
       <div class="boitegauche">
          <img class="floatcenter" alt="Prague la nuit" src="photos_2009/parpra_prague_castle_night.jpg" style="width: 400px;"><br>
          Commentaire éventuel de la première photo
        </div>

        <div class="boitedroite">
          <img class="floatcenter" alt="Prague la nuit" src="photos_2009/parpra_prague_castle_night.jpg" style="width: 400px;"><br>
          Commentaire éventuel de la seconde photo
        </div>
        <br style="clear: both">
        Commentaire éventuel commun aux deux photos
      </div>

Prague la nuit
Commentaire éventuel de la 1° photo
Prague la nuit
Commentaire éventuel de la 2° photo

Commentaire éventuel commun aux deux photos

Paragraphe suivant

La Berarde
Le pointage de la Bérarde est magique
La Berarde
La Bérarde, c'est tout sauf plat. Le Veneon est en bas

Ici, on a encadré un paragraphe en sandwich entre deux photos (à priori de hauteur identique). La syntaxe est:

      <div class="floatleft_35p">
        <img alt="La Berarde" class="floatleft" src=
        "photos_2008/dfu_cr_dsc01597.jpg" style="width: 100%;"><br>
         Le pointage de la B&eacute;rarde est magique
      </div>
      <div class="floatright_35p">
        <img class="floatright" alt="La Berarde" src=
        "photos_2008/dfu_cr_dsc01598.jpg" style="width: 100%;"><br>
         La B&eacute;rarde, c'est tout sauf plat. Le Veneon est en bas
      </div>
<p class="droit">Ici, on a encadr&eacute; un paragraphe en sandwich entre deux photos (&agrave; priori de hauteur identique, ici dimensionnées en %). La syntaxe est:
Pour prévoir les situations (fenêtre très large) où le texte serait moins haut que les photos, on doit terminer le paragraphe par <br style="clear: both;"></p> .

groupe abeille
Le groupe est prêt: cap sur Prague

Comme précédemment, on fait ici flotter une image à gauche de la partie texte (<p class="droit">), mais cette image est dimensionnée précisément à 48% de la largeur du conteneur parent, avec une marge à droite de 2%, ce qui met la bordure gauche du texte à exactement 50% (au milieu). Pour ce faire, on insère dans le texte la balise "floatleft_48p", qui contient de la place en bas pour un commentaire, optionnel. La syntaxe recommandée est:
<div class="floatleft_48p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br>
Le groupe est pr&ecirc;t: cap sur Prague
</div>
<p class="droit">Comme pr&eacute;c&eacute;demment...

groupe abeille
Le groupe est prêt: cap sur Prague

48%. Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_48p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

groupe abeille
Le groupe est prêt: cap sur Prague

35%, cette fois. Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_35p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

groupe abeille
Le groupe est prêt: cap sur Prague

25%, cette fois. Avec la même photo flottée à gauche, on veut ici, comme dans certains CR de Gérard, que le paragraphe suivant attende la fin de la photo. Pour tout compliquer, le paragraphe suivant contient aussi une photo flottée (alors, on ne sait pas ou insérer l'attribut "style="clear: both;"). On l'insère dans une balise <br> insérée à la manière de Dreamweaver juste avant la balise </p> de fermeture du paragraphe qui borde la photo. La syntaxe recommandée est:
<div class="floatleft_25p">
<img class="floatleft" alt="groupe abeille" src="photos_2009/ppg_01_groupe.jpg" style="width: 100%;"><br">
Le groupe est pr&ecirc;t: cap sur Prague
</div>
(sans oublier de terminer notre paragraphe par "<br style="clear: both;"></p>)

sieste abeille a lachy
À Lachy, il y a comme du relâchement dans le groupe

Cette fois-ci, on fait ici flotter une image à droite de la partie texte (<p>) et  cette image est aussi dimensionnée précisément à 48% de la largeur du conteneur parent, avec une marge à gauche de 2%, ce qui met la bordure droite du texte à exactement 50% (au milieu). Pour ce faire, on insère dans le texte la balise "floatright_48p", qui contient de la place en bas pour un commentaire, optionnel. La syntaxe recommandée est:
<div class="floatright_48p">
<img class="floatright" alt="sieste abeille a lachy" src="photos_2009/ppg_01_lachy.jpg" style="width: 100%;"><br>
&Agrave; Lachy, il y a comme du rel&acirc;chement dans le groupe
</div>

<p>Cette fois-ci, ...

--




"Le Cyclotourisme, un art de vivre"