Ceci est un titre de page de style Titre 1

Ce titre de page est obligatoirement présent. Son texte est celui qui s'affiche aussi dans les onglets de 1er niveau du menu horizontal.

Son style est obligatoirement le style Titre 1, défini globalement pour l'ensemble du site, sauf astuce indiquée ci-dessous.

Pour le style Titre 1, on peut choisir une police parmi dans l’ordre : Lato, Montserrat, Open+Sans, Raleway, Roboto, Roboto+Condensed, Rubik, Ubuntu, Source+Sans+Pro, Merriweather, Zilla+Slab, Cormorant+Garamond, Comic+Neue, Mali, Dancing+Script, Playfair+Display, Poppins, Oswald, Libre+Baskerville, Arvo

Actuellement c'est Libre+Baskerville .

Polices disponibles pour titre de page h1

On peut choisir n'importe quelle couleur. Actuellement c'est "or" ou rgb (189, 188, 98)

Pour la graisse, on peut choisir 0%, 50% ou 100%. Actuellement c'est 100%

On ne peut pas choisir la taille de police du style Titre 1.

Une astuce permet de gérer cette taille de police en "descendant" un titre de page particulière en 1ère ligne du 1er bloc de texte de cette page et gérer ainsi à la main la taille de police ; pour gérer d'une manière uniforme tous les titres de page ainsi "descendus", on peut alors lui dédier le style Titre 2 du texte courant, cf. bloc suivant de cette page ; voir exemple ci-dessous de titre de page descendu en style Titre 2 (attention, l'image ci-dessous est à une échelle réduite par rapport à l'écran, diminuant artificiellement la taille de police ; en vrai la taille serait la même que l'exemple de style Titre 2 plus bas) :

Exemple titre de page descendu dans le texte et mis dans le style titre 3

Ceci est un titre de bloc, correspondant au style Titre 2

Ce titre de bloc n'est pas obligatoire. Ainsi, dans l'exemple ci-dessus de titre de page descendu dans le texte, il n'y en a pas, sinon, il apparaitrait à l'écran avant le titre de page.

Son style est par défaut le style Titre 2, défini globalement pour l'ensemble du site.

Pour le style Titre 2, on peut choisir une police parmi la même liste que Titre 1, dans l’ordre : Lato, Montserrat, Open+Sans, Raleway, Roboto, Roboto+Condensed, Rubik, Ubuntu, Source+Sans+Pro, Merriweather, Zilla+Slab, Cormorant+Garamond, Comic+Neue, Mali, DAncing+Script, Playfair+Display, Poppins, Oswald, Libre+Baskerville, Arvo

Actuellement c'est Libre+Baskerville .

Polices disponibles pour titre de page h1

On peut choisir n'importe quelle couleur. Actuellement c'est du bleu rgb (41, 134, 204). J'ai choisi cette couleur pour que la différence entre les différents niveaux de style de titre soit bien visible.

Pour la graisse, on peut choisir 0%, 50% ou 100%. Actuellement c'est 50%.

On ne peut pas choisir la taille de police du style Titre 2. Contrairement au style de Titre 1, il n'y a pas d'astuce pour contourner cette impossibilité.

*          *          *          

Dans chaque bloc de texte, on peut utiliser 4 styles définis globalement :

  • Titre 1, par ailleurs obligatoire pour un titre de page non "descendu", cf. caractéristiques ci-dessus, correspondant à une taille de 32
  • Titre 2, par ailleurs obligatoire pour un titre de bloc, cf. caractéristiques ci-dessus, correspondant à une taille de 24
  • Titre 3, correspondant à une taille de 18
  • Normal, correspondant à une taille de 16 pour le niveau 2 actuellement choisi

On peut modifier la taille à la main, caractère par caractère, mais avec une série de tailles discontinue et un processus assez laborieux

Titre 1

Titre 2

Titre 3

Normal

*          *          *     

Ceci est en style Titre 3

Ce  style est défini globalement pour l'ensemble du site.

Pour le style Titre 3, on peut choisir une police parmi la même liste que Titre 1, dans l’ordre : Lato, Montserrat, Open+Sans, Raleway, Roboto, Roboto+Condensed, Rubik, Ubuntu, Source+Sans+Pro, Merriweather, Zilla+Slab, Cormorant+Garamond, Comic+Neue, Mali, DAncing+Script, Playfair+Display, Poppins, Oswald, Libre+Baskerville, Arvo

Actuellement c'est Montserrat.

Polices disponibles pour texte courant

On peut choisir n'importe quelle couleur. Actuellement c'est du rose rgb (234, 153, 153). J'ai choisi cette couleur pour que la différence entre les différents niveaux de style de titre soit bien visible.

Pour la graisse, on peut choisir 0%, 50% ou 100%. Actuellement c'est 100%.

On ne peut pas choisir la taille de police du style Titre 3. Contrairement au style de Titre 1, il n'y a pas d'astuce pour contourner cette impossibilité.

Si on choisit de "descendre" les titres de pages en 1ère ligne du 1er bloc de texte, avec le style Titre 2, il ne reste qu'un niveau de titre disponible, le style Titre 3, pour les titres des sous-partie de la page, ce qui est suffisant au vu de la longueur moyenne de nos pages.

*          *          *     

Ceci est du texte courant.

Pour ce texte, on peut choisir une police parmi dans l’ordre : Lato, Montserrat, Open+Sans, Raleway, Roboto, Roboto+Condensed, Rubik, Ubuntu, Source+Sans+Pro, Merriweather, Zilla+Slab, Cormorant+Garamond, Comic+Neue, Mali, DAncing+Script, Playfair+Display, Poppins, Oswald, Libre+Baskerville, Arvo

Actuellement c'est Montserrat.

Polices disponibles pour texte courant

On peut choisir n'importe quelle couleur. Actuellement c'est noir rgb(0, 0, 0)

Pour la graisse, on peut choisir 0%, 50% ou 100%. Actuellement c'est 0%.

On peut choisir la taille de police du texte courant selon 4 niveaux. On est actuellement au 2ème niveau.

*          *          *     

Dans le texte, pour l'alignement on a uniquement "à droite", "centré" ou "à gauche". On a aussi des retraits possibles de tout un paragraphe, peu modulables. Pour l'exemple, ce paragraphe est en retrait d'un cran.

  • On a aussi des puces, avec ce symbole.

Enfin, on peut insérrer des tableaux, par exemple pour une grille de tarifs, mais leur réglage est très approximatif et peut générer des sauts à la ligne très moches faute de pouvoir bien gérer les largeurs de colonnes.

*          *          *     

Gabriela fahnenstiel pour page programme 27 avril 800x400

Pour mettre du texte à côté d'une photo, on crée 1 bloc pour la photo et 1 bloc pour le texte sur la même ligne. Sur grand écran, les 2 blocs resteront côte à côte sur la même ligne. Sur petit écran, le bloc de droite sera sous le bloc de gauche, ce qui évite de trop diminuer la taille de la photo, le texte s'ajustant quand à lui par saut de ligne à la droite de l'écran comme dans un mail classique. On peut fixer les proportions respectives des 2 blocs dans la largeur de page, ici 50%/50%. Cet ajustement permet d'obtenir sur grand écran une hauteur de texte voisine de la hauteur de photo. Si le texte est trop court, ça n'est pas très élégant.

 

Gabriela fahnenstiel pour page programme 27 avril 800x400

Pour mettre du texte à côté d'une photo, on crée 1 bloc pour la photo et 1 bloc pour le texte sur la même ligne. Sur grand écran, les 2 blocs resteront côte à côte sur la même ligne. Sur petit écran, le bloc de droite sera sous le bloc de gauche, ce qui évite de trop diminuer la taille de la photo, le texte s'ajustant quand à lui par saut de ligne à la droite de l'écran comme dans un mail classique. On peut fixer les proportions respectives des 2 blocs dans la largeur de page, ici 70%/30%. Cet ajustement permet d'obtenir sur grand écran une hauteur de texte voisine de la hauteur de photo. Si le texte est trop court, ça n'est pas très élégant.