Premier titre

Second titre (--- km, date)

--

Exemple d'en-tête 1

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 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 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 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 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 paragraphe	cellule 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 liste à puces suivant style de listes à puces standard "li"
• Seconde puce

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.

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.

<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;">).

<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/parpra_prague_castle_night.jpg" style="width: 80%;"><br>
         Commentaire de la photo
      </div>

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>

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>

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>

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>

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>

Paragraphe suivant

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> .

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...

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>)

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>)

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>)

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, ...

--